动起来──GIF动画的制作

IT商界

Pcking

　　GIF(Graphic Interchange Format)是Internet上使用最早、应用最广泛的图像格式。GIF可以提供透明背景功能，这样在网页设计中图片的使用便具有了更大的灵活性，甚至有的时候不使用透明图片简直无法完成设计的工作。另外，也是最为重要的一点，GIF具有动画功能。下面我们就通过一个实例来看看怎样设计制作一个GIF动画。

　　Banner可用于制作网上广告或者友情链接，是网络合作的重要平台，设计精美的Banner可以使网页更加生动。下面我们就使用Fireworks MX制作Banner动画。

　　本实例效果描述：按照先后次序以不同的方式出现英文单词设计(DESIGN)的六个字母，最后形成完整的英文单词，并表现Banner的主要内容。

　　步骤1：打开Fireworks MX，新建一个文件宽为468像素，高为60像素(469×60是Banner的标准尺寸)，背景色设置为白色。

　　步骤2：在工具栏上选择“矩形”工具，设置边框颜色为黑色，填充色为深黄色，拖曳鼠标，绘制一个矩形，并在工作区域下面的“参数”栏上设置此矩形的大小为468×60(像素)。打开“层“面板，鼠标双击“层一”，将弹出的对话框中“共享交叠帧”前的复选框打上钩。这样，这一层就设置为共享层。

　　步骤3：使用菜单命令“插入→新建元件”新建一个元件，在工具栏上选择“矩形”工具，按鼠标左键，在弹出的菜单中选择“园形”工具，设置边框颜色为黑色，填充色为黄色，按住键盘的Shift键，拖曳鼠标在新建的元件中绘制一个正圆。

　　步骤4：在工具栏上选择“文字”工具，输入字母D，设置此字母的大小与字体，建议选择比较粗的英文字体为宜。将字母“D”放置在黄色正圆的上方

　　步骤5：使用同样的方法制作其他5个字母“E”、“S”、“I”、“G”、“N”的元件。

　　步骤6：打开“层”面板，新建一层，从“库”面板中将元件“D”拖曳到画布上，放置在画布的最右侧，再次拖曳一个“D”元件放置在画布的左侧，应当注意将左右两侧的元件水平对齐。鼠标选择右侧的元件，打开“层”面板，设置其不透明度为0。

　　步骤7：按住键盘上的SHIFT键同时选择左右两侧的元件，使用菜单命令“修改”→“元件”→“补间实例”，在弹出的“动画实体/补间实例”对话框上设置“步骤”数为10，点击确定按钮。

　　步骤8：Fireworks MX将自动根据两个元件属性的不同在它们之间复制出10个元件。将其中的3、5、8元件改变位置以得到类似于跳跃的效果。打开“帧”面板，点击右下方的“分配到帧”按钮，将当前帧上的每一个元件分配到单独的一帧。点击工作区域下方的“播放”按钮就可以预览动画效果。

　　步骤9：新建一层，打开“帧”面板，选择第三帧。将第二个字母元件“E”拖曳到这一层上，放置在画布的最右边，再次拖曳一个“E”元件放置在画布的左边。应当注意的是左侧的“E”元件应当放置在“D”元件最后位置的右边并保持一定的距离。

　　步骤10：使用制作“D”元件的方法制作动画。注意，由于此段动画是从第三帧开始，而不是第一帧，因此在使用“补间实例“的时候应当只复制8个“E”元件进行动画。

　　步骤11：使用同样的方法制作剩余文字的动画效果。完成文字的动画效果后，打开“帧”面板，选择最后一帧，使用Fireworks MX打开一张位图，裁剪合适的部分将其复制到Banner的画布上。在“层”面板上设置这幅位图的不透明度为“0”。

　　步骤12：点击“帧”面板右上角的三角按钮，在弹出的下拉菜单中选择“复制帧”，设置在此帧之后复制一帧。选择新复制出来的这一帧(此时这就是最后一帧)，选择所有的文字，使用“变形工具”将它缩小一点，再选择位图，设置其不透明度为“20”。再复制一帧，将新复制出这一帧上的文字再缩小一点，直到将文字缩小到画布的左上角，并且位图的不透明度为100%。

　　步骤13：打开“帧”面板，可以看到每一帧后都有一个数字显示，这个数字代表的是这一帧停留的时间，单位是毫秒。双击最后一帧的数字，改变为120(即停留1.2秒)，完成了Banner动画的制作。

　　编后：目前大家用于制作GIF动画的主流软件，除了Fireworks MX、ImageReady、Flash，另外，像Swish Ulead GIF Animator等“傻瓜化”的软件也深受人喜爱，今后我们也将会对这类软件作一定的介绍。