Fireworks制作GIF动画广告BANNER

2024-09-11 13:33:03

字体：大中小

来源：转载

供稿：网友

　　文/詹巍

本小节中我们看看怎样使用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所示。