网页设计与制作课件第10章

1．选中
2．单击 下一页 返回
知识点评
在Fireworks窗口中可以看见，在Dreamweaver选中的图像被打开了，图像 编辑区有“编辑自Dreamweaver”字样，表明该图像来自Dreamweaver。对图像 进行编辑和优化后，单击“完成”按钮，Fireworks编辑窗口也自动关闭。如图 10-22所示。
在“起始页”对话框中单击 “Flash文档”项，或执行【文件】→【新建】 菜单命令打开“新建文档”对话框，然后在对话框中单击“确定”按钮，便打开 一个场景文档窗口，在该窗口中包含时间轴和舞台。如下图所示。
时间轴面板
动画是由一帧一帧的画面形成的，帧是动画最基本的单元，因此简单地说， 动画中单幅的画面就是帧。在Flash中只要决定动画对象在运动过程中的关键状 态。中间帧是由Flash软件自动计算得出。在Flash中可以将动画分为4大类：运 动动画、变形动画、变色动画和逐帧动画。
第10章 图像和动画的制作与优化
知识要点
Fireworks界面的认识及其工具面板和属性的使用 Flash界面的认识及工具面板、时间轴和属性的使用
技能目标
熟练掌握Fireworks工具面板的使用 熟练掌握Fireworks制作简单的图像 了解图像文件的导出与优化方法 熟练掌握Flash工具面板的使用 掌握使用Flash创建运动和变形动画的方法 掌握Dreamweaver与Fireworks和Flash的调用方法
变形动画和运动动画的区别是，变形动画只能是矢量图形，而不能将矢量 图形转换为元件。
上一页 下一页 返回
10.2.4 Flash与Dreamweaver互动应用 知识点评
在Dreamweaver中可以直接调用Flash对网页中插入的图像或动画进行编辑。 在“插入”面板中单击“媒体”按钮，再单击“Flash”选项，就可以调用Flash 软件，如下图所示。
步骤9：在“时间轴”面板控制区第1关键帧处单击鼠标左键，在“属性”面 板中“补间”下拉列表中选择“动画” 。
步骤10：为了使圆形滚动起来，单击第1关键帧，在“属性”面板中“旋转” 下拉列表中选择“顺时针”选项，在其右边文本框输入“5”次 。
步骤11：执行菜单栏中的【控制】→【播放】命令或按【Enter】键，就会 看到一个渐小的圆由左向右边滚动。
制作一个由字母“A”变为字母“B”的变形动画。
目标案例
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：执行【文件】→【新建】菜单命令，新建一个文档窗口，利用“文 本工具” 按钮在舞台上输入一个文字“A”。
步骤2：执行【修改】→【分离】菜单命令，将文本转换为矢量图形 。 步骤3：在“时间轴”面板的第45帧处插入“关键帧”，然后在舞台中按照 步骤1和步骤2制作矢量图形“B”。 步骤4：在“时间轴”面板控制区第1关键帧处单击鼠标左键，在“属性”面 板的“补间”下拉列表中选择“形状” 。 步骤5：执行【控制】→【播放】菜单命令或按【Enter】键，就会看到一个 字母“A”由左向右移动变成字母“B”。保存动画。
上一页 返回
10.1.4 Fireworks与Dreamweaver互动应用 知识点评
在Dreamweaver操作中，随时可以打开Fireworks，对网页中的图像进行编辑 和优化时，选中Dreamweaver窗口中的图像，然后在“属性”面板中单击“编辑” 右边按钮 ，即可打开Fireworks。如下图所示。
本章任务
使用Fireworks制作广告词和像框 使用Fireworks对图像进行优化 使用Flash制作运动动画、变色动画和变形动画
关闭
本章内容
• 10.1 图像的制作与优化
•
10.1.1 Fireworks 8 简介
•
10.1.2 制作漂亮的广告词
•
10.1.3 Fireworks中的图像优化
•
上一页 返回
10.2.2 创建运动动画
制作运动的圆，如下图所示。
目标案例
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：在Flash 8中，执行【文件】→【新建】菜单命令，打开“新建文档” 对话框，单击“确定”按钮 。
步骤2：执行【修改】→【文档】菜单命令，或单击“属性”面板“大小” 右边的
按钮，打开“文档属性”对话框 。 步骤3：在“文档属性”对话框中的参数都是默认参数，可根据自己需要将 “宽”和“高”改为“600像素”和“150像素”，然后单击“确定”按钮 。 步骤4：利用工具箱中的“椭圆”工具 按钮，在舞台中画一个圆形，然后 利用“文本”工具 按钮在圆形上输入一个文字 。 步骤5：单击工具箱中的“选择工具” 按钮，将舞台中的图形和文字全部 选中，然后执行【修改】→【转换为元件】菜单命令 。
上一页 下一页 返回
操作步骤
步骤6：在“属性”面板中单击“滤镜”右边的 按钮，在弹出的菜单中选
择【斜角和浮雕】→【凸起浮雕】命令 。
步骤7：接着在底部弹出的面板中，调整各个文本框的参数，设置效果 。
步骤8：按【Enter】键，给文本添加浮雕效果 。
步骤9：执行菜单栏中的【文件】→【图像预览】命令，打开“图像预览”
在导出图像时，“GIF”、“GIF动画”和“JPEG”这3种是常用的，要根据 不同的图像来选择，一般透明图像选择GIF格式，照片选择JPEG格式。
上一页 返回
10.1.3 Fireworks中的图像优化
目标案例
在制作网站主页广告条进行优化，观察图像优化后的效果，如下图所示。
打 开 源 文 件
最 终 效 果 预 览
上一页 下一页 返回
本章小结
4.单击
本章讲述了Fireworks 8的工具、属性和样式的使用，重点讲解了图像的优 化。在Flash 8 中讲解了图形的创建、编辑，介绍了运动动画和变形动画的制作 过程。希望通过本章的讲解，帮助大家掌握Fireworks 8和Flash 8的基本操作。
上一页 返回
10.1.4 Fireworks与Dreamweaver互动应用
• 10.2 动画的制作和优化
•
10.2.1 Flash简介
•
10.2.2 创建运动动画
•
10.2.3 变形动画
•Hale Waihona Puke Baidu
10.2.4 Flash与Dreamweaver互动应用
10.1.1 Fireworks 8 简介
知识点评
Fireworks是集创建、编辑和优化图像为一体的软件，它不仅可以创建和编辑位图和
1．选择Flash
下一页 返回
知识点评
单击“Flash”选项后，弹出“选择文件”对话框，在该对话框中选中要编辑 的动画文件，单击“确定”按钮，如下图所示。
2.选择文件
3.单击
选中插入的Flash文件后，单击“属性”面板中的“编辑”
按钮，可
以打开Flash软件进行编辑，同时动画文件处于编辑状态，如下图所示。
3．单击
上一页 返回
10.2.1 Flash简介
知识点评
作为同一个公司的产品，Flash拥有Dreamweaver和Fireworks相似的界面。 这为我们熟悉和使用Flash软件提供了很大的帮助。
运行Flash 8后，其操作界面如下图所示。
菜单栏
工具箱
起始页
功能面板组 合
属性面板
下一页 返回
知识点评
下一页 返回
操作步骤
步骤1：打开Fireworks 8的操作界面，执行【文件】→【打开】菜单命令 。 步骤2：在“打开”对话框中，选中要优化的图像，单击“打开”按钮 。 步骤3：在工作窗口中图像被打开，执行【窗口】→【优化】菜单命令，或 快捷键【F6】，打开“优化”面板 。 步骤4：在“优化”面板中单击第一个下拉列表框，在下拉列表中选择“GIF 接近网页256色” 。 步骤5：在“优化”面板中有许多参数值，单击各个设置栏的下拉列表项目， 可以调整优化效果 。 步骤6：执行【文件】→【导出】菜单命令，打开“导出”对话框，在“导 出”对话框中输入文件名，单击“导出”命令将图像导出 。 步骤7：打开导出文件的文件夹，可以发现优化后的图片大小为114K，而优 化前的大小为619K，可见优化效果对制作网页上的图像是非常重要的。
对话框 。
步骤10：在“图像预览”对话框的“格式”下拉列表中选择“JPEG”，在
“保存的设置”下拉列表中选择“JPEG-较高品质”选项 。
步骤11：单击
按钮，打开“导出”对话框，选择保存文件的文件夹，
然后为文件命名，单击
按钮，图像文件就保存了 。
上一页 下一页 返回
知识点评
本节主要介绍了如何使用文本，如何使用文本样式和图像导出等知识，大 家要善于利用文本“属性”面板中的“滤镜”效果，利用它可以设置各种特殊 效果。
菜单栏
工具箱
起始页
功能面板组合
属性面板
返回
10.1.2 制作漂亮的广告词
目标案例
10.1.2 制作漂亮的广告词
使用Fireworks制作漂亮的广告词文字“保护水资源，生命真永远。”，广 告词文字效果如下图所示。
打 开 源 文 件
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：打开Fireworks 8的操作界面，在“起始页”对话框中单击 “Fireworks文件”选项，打开“新建文档”对话框，或执行【文件】→【新建】 菜单命令打开“新建文档”对话框，对新建文档内容进行设置 。
步骤2：单击“确定”按钮后，打开新建文档窗口 。 步骤3：在Fireworks 8操作界面的左侧工具箱中单击“文本”工具按钮 ， 在新建文档的窗口中单击鼠标左键，输入文本 。 步骤4：选中输入文字，在“属性”面板的“字体”下拉列表中选择“华文 新魏”，在“大小”选项文本框内输入“62”。在“颜色”调色板中选择黑色 “#000000”，并且单击字体加粗按钮 ，其他选项为默认设置即可 。 步骤5：选中画布上的文本，在操作界面右侧的“资源”/“样式”面板中，单 击其中一个样式例如Style 25 。
上一页 下一页 返回
知识点评
制作运动动画时要注意如下几点。 （1）动画的帧频是每秒12帧播放。 （2）在制作运动动画过程中，必须把舞台中的素材转换成元件。 （3）在“时间轴”面板控制区内，关键帧之间的中间帧是软件自动添加。 （4）“.fla”是Flash动画的源文件格式。
上一页 返回
10.2.3 变形动画
矢量图，而且可以优化图像。
运行Fireworks 8以后看到操作界面，其顶部是菜单栏，包含了该软件中大部分的命
令选项。左侧是工具箱，其中的按钮用来对图形、图像、颜色、文本等对象进行编辑和处
理。中间是“起始页”对话框，右侧是功能面板的组合，底部是“属性”面板，用来设置
当前所编辑对象的各项属性参数。如下图所示。
上一页 下一页 返回
操作步骤
步骤6：打开“转换为元件”对话框，在“名称”文本框输入“圆”，“类 型”选项中选择“图形”，单击“确定”按钮完成转换。
步骤7：在“时间轴”面板中的第45帧处单击鼠标右键，在弹出的快捷菜单 中选择“插入关键帧”。
步骤8：在第45帧插入关键帧，并将舞台中的圆平移至右边，然后使用工具 箱中的“任意变形工具”按钮 将圆缩小 。