第十一章 Fireworks的动画制作和优化输出.ppt

《第十一章 Fireworks的动画制作和优化输出.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第十一章Fireworks的动画制作和优化输出11.1简单动画制作11.2遮罩的应用11.3图像的优化11.4图像的输出11.5应用实例FIREWORKS11.1简单动画制作11.1.1动画概述GIF动画的实现，是由逐张图画在不同的时间段快速地显示出来，由于人眼有二十四分之一秒的视觉暂留，所以图像看上去就像是动了起来。而每一张图画就叫作“帧”，它是组成动画的基本单位。GIF图形动画为网页增添许多活泼生动、复杂多变的图形元素，因此GIF动画在网页制作中曾被广泛应用11.1.2元件概念：元件是Fireworks中可以重复使用的对象，存在于“库”面板中。作用：重复使用；减小动

2、画文件的大小；简化创建、编辑多个相同对象的操作。FIREWORKS11.1.3帧面板通过创建若干帧可以制作动画。使用“帧”面板可以看到每个帧的内容。“帧”面板是创建和组织帧的地方。可以命名帧、重新组织它们、手动设置动画的运行时间，以及将对象从一个帧移到另一个帧。设置帧延时：帧延时决定当前帧显示的时间长度。它以一秒的百分之几为单位来指定。例如，设置为50时，帧显示0.5秒；设置为300时，帧显示3秒。显示和隐藏要播放的帧：可以显示或隐藏要播放的帧。如果帧是隐藏的，它在播放时不显示出来并且不导出。FIREWORKS命名动画帧：当您设置动画时，Fireworks会创建适当数目

3、的帧并在“帧”面板中显示它们。各帧的默认命名为第1帧、第2帧，依此类推。当您在面板中移动帧时，fireworks会按照新的顺序重命名每一帧。添加、移动、复制和删除帧。使用“洋葱皮”：使用“洋葱皮”可以查看当前所选帧之前和之后的帧的内容。可以很流畅地使对象变为动画，而不用在对象中来回跳跃。洋葱皮一词来源于一种传统的动画技术，即使用很薄的、半透明的描图纸来查看动画序列。“洋葱皮”打开后，当前帧之前或之后的帧中的对象会变暗，以便与当前帧中的对象区别开来。FIREWORKS11.1.4动画的应用使用Fireworks8设计一张GIF动画Banner熟悉Fireworks中帧面板

4、、动画、元件等工具的使用方法实现的效果。操作步骤：新建一个大小为468×60的文件，设置其画布颜色为透明，并导入一幅汽车的位图图像，得到下图所示的图像。FIREWORKS选中这幅汽车图像，单击【修改】菜单，选择【元件】

5、【转换为元件】，这时候会跳出元件属性对话框，将这个图形文件命名为“汽车图1”。单击【确定】，这时候位图图像就已经转换为了图形元件了。选中这个图形元件，单击【修改】菜单，选择【动画】

6、【选择动画】，跳出动画对话框，在其中设置帧数为10，移动到380，如图所示FIREWORKS单击【确定】，这时候跳出对话框，询问是否添加新帧，选择【确定】，这时候在帧面板中就

7、已经添加了新帧，得到下图所示的动画元件图像。FIREWORKS默认的帧延时的时间太短，可以将前面9帧帧延时设为10，第10帧的帧延时设为35来控制汽车运动的效果。为了将第10帧的图像始终能够显示在这个GIF动画上，所以有必要将第10帧的图像效果复制到后面的所有帧中去。设计这幅动画共有30帧，所以后面的20帧中都需要有这个第10帧中的汽车图像。这里要调用库中的图形元件来实现所有帧中都有第一幅汽车图的效果。打开帧面板，新建一帧，设置其帧延时为10。单击帧面板的洋葱皮工具，在弹出菜单中选择【之前和之后】，这样在编辑第11帧时就能够看到第10帧的汽车图像了。单击【窗口】，选择【

8、库】，打开了库面板。发现库面板中有一个动画元件和开始保存的名为“汽车图形1”的图形元件，如下图所示。FIREWORKS从库面板中拖动图形元件到画布之中，使其和第10帧的汽车图形完全对齐。得到第11帧的图像，如下图所示。FIREWORKS选中第11帧，在帧面板中单击按钮，在弹出菜单中选择【重制帧】，在弹出对话框中设置帧的数量为9，如下图所示。选中第11帧，导入另外一幅汽车图像，如下图所示。FIREWORKS同样单击【修改】菜单，选择【元件】

9、【转换为元件】，在元件属性对话框，将这个图形文件命名为“汽车图2”。单击【确定】，这时候位图图像就已经转换为了图形元件了。选中这个图

10、形元件，单击【修改】菜单，选择【动画】

11、【选择动画】，跳出动画对话框，在其中设置帧数为10，移动到290，得到下图所示的图像。FIREWORKS设置第20帧的图像帧延时为35，11帧到19帧帧延时为10。然后新建一帧并设置帧延时为10，从库面板中拖动“汽车图1”和“汽车图2”到画布之上，使其和第20帧中图像完全对齐，如图所示。选择第21帧，和第7步一样，将其重制9次。在21帧中导入第三幅汽车图，只将车的前半部分放在画布之中，好像车子是逐渐开进来的一样。接下来和前面一样，将它转化为图形元件，并设置动画效果，设置其帧数为10，移动为100即可