firework动画制作.pdfVIP

本文由北野情郎贡献 本小节中我们看看怎样使用 Fireworks MX 2004 设计一张 GIF 动画 Banner，以一个宣传天 柱山的 Banner 为例，主要熟悉 Fireworks 中帧面板、动画、元件等工具的使用方法。文章末尾提 供.png 文件供大家下载 参考。 完成效果如图： （1） 新建一个大小为 468×60 的文件，设置其画布颜色为透明，并导入一幅汽车的位图图 像，得到图 1 所示的图像。 图 1 新建文件并导入图像 （2） 选中这幅汽车图像，单击【修改】菜单，选择【元件】|【转换为元件】，这时候会跳 出元件属性对话 框，将这个图形文件命名为汽车图 1，如图 2 所示。 图 2 将图像转换为图形元件 （3） 单击【确定】，这时候位图图像就已经转换为了图形元件了，如图 3 所 示。选中这个 图形元件，单击【修改】菜单，选择【动画】|【选择动画】，跳出动画对话框，在其中设置帧 数 为 10，移动到 380，如图 4 所示。 图 3 位图转换为图形元件 图 4 设置动画属性 图 5 弹出对话框 （4） 单击【确定】，这时候跳出图 5 所示的对话框，询问是否添加新帧，选择【确定】， 这时候在帧面板 中就已经添加了新帧，得到图 6 所示的动画元件图像。 图 6 动画元件图像 （5） 默认的帧延时的时间太短，可以将前面 9 帧帧延时设为 10，第 10 帧的帧延时设 为 35 来控制汽车运动的效果。为了将第 10 帧的图像始终能够显示在这个 GIF 动画上，所以有必要将 第 10 帧的图像效果复制到后面的所有帧中去。设计这幅动画共有 30 帧，所以后面的 20 帧中都 需要有这个第 10 帧中的汽车图像。 这里要调用库中的图形元件来实现所有帧中都有第一幅汽车图 的效果。打开帧面板， 新建一帧，设置其帧延时为 10。单击帧面板的洋葱皮工具，在弹出菜单中 选择【之前和之后】，这样在编辑 第 11 帧时就能够看到第 10 帧的汽车图像了。单击【窗口】， 选择【库】，打开了库面板。发现库面板中 有一个动画元件和开始保存的名为汽车图形 1的图 形元件，如图 7 所示。 图 7 库面板 （6） 从库面板中拖动图形元件到画布之中，使其和第 10 帧的汽车图形完全对齐。得到第 11 帧的图像，如图 8 所示。 （7） 选中第 11 帧，在帧面板中单击 按钮，在弹出菜单中选择【重制帧】，在弹出对话框 中设置帧的数量 为 9，如图 9 所示。 图 9 复制第 11 帧 （8） 选中第 11 帧，导入另外一幅汽车图像，如图 10 所示。 file:///G|/Documents and Settings/Lch/桌面/wenkuxiazai/Download/计算机/firework动画制作.txt [2012-3-14 18:44:58] 图 10 导入另外一幅汽车图像 （9） 同样单击【修改】菜单，选择【元件】|【转换为元件】，在元件属性对 话框，将这个 图形文件命名为汽车图 2，如图 11 所示。 图 11 将图像转换为图形元件 （10）单击【确定】，这时候位图图像就已经转换为了图形元件了。选中这个 图形元件，单 击【修改】菜单，选择【动画】|【选择动画】，跳出动画对话框，在其中设置帧数为 10，移 动到 290，得到图 13 所示的图像。 图 12 第二个动画元件 （11）设置第 20 帧的图像帧延时为 35，11 帧到 19 帧帧延时为 10。然后新建一帧 并设置帧 延时为 10，从库面板中拖动汽车图 1和汽车图 2到画布之上，使其和第 20 帧中图像完全对 齐， 如图 14 所示。 图 13 第 21 帧图像 （12）选择第 21 帧，和第 7 步一样，将其重制 9 次。在 21 帧中导入第三幅汽车 图，只将车 的前半部分放在画布之中，好像车子是逐渐开进来的一样。接下来和前面一样，将它转化为图形 元件，并设置动画效果，设置其帧数为 10，移动为 100 即可，如图 15 所示。 图 14 导入第三幅汽车图并设置动画 （13）将汽车图 3元件拖到第 30 帧中并与动画元件对齐。接着为图 像添加两个小圆形和一 个圆角矩形，并在矩形中添加我也要去天柱山几个字来增强效果，如图 16 所示。 图 15 第 30 帧图像 （14）将第 30 帧帧延时设为 200 即可，让它的显示时间长一些。最后保存这个文件并 将其 导出为一个 GIF 文件，这样在个人网页中就可以使用这个 GIF 图片了。 .png 文件下载 f