2.6　制作滚动字幕效果的GIF动画

滚动字幕是在电视剧结尾经常看到的一种动画效果。在Fireworks中使用蒙版，可以制作能够产生滚动字幕效果的GIF动画。

【例2-5】　使用蒙版制作滚动字幕效果的GIF动画。制作步骤如下：

（1）创建新画布。进入Fireworks后，在菜单栏中选择“文件”|“新建”命令。在弹出的“新建文档”对话框中将画布的宽度和高度分别设置为800像素和100像素，并将画布颜色设置为黑色。然后，单击“确定”按钮，即可在舞台中创建新画布。

（2）制作文本内容的图形元件。

①　设置文本属性。在“工具”面板的“矢量”区域中选择“文本”工具。如图2-13所示，在“属性”面板中将文本的字体、大小、颜色分别设置为Arial Black、60像素、绿色。

②　在画布中添加文本。在画布中添加并输入文本“使用蒙版制作的滚动字幕”。

③　将文本转换为图形元件。在菜单栏中选择“修改”|“元件”|“转换为元件”命令，会弹出“元件属性”对话框。如图2-14所示，在“名称”文本框中输入“文本图形元件”，然后单击“确定”按钮，即可将画布中的文本“使用蒙版制作的滚动字幕”转换为一个图形元件，同时该图形元件被添加到“库”面板中。

④　使图形元件在画布中居中。在“属性”面板中，将“文本图形元件”的宽、高、X和Y分别设置为650、60、75和20，则可以使“文本图形元件”居于画布的正中央。

（3）制作第1个元件和矢量蒙版组合。

①　在图形元件上方绘制矩形。在“工具”面板的“矢量”区域中选择“矩形”工具，然后在画布中添加一个与“文本图形元件”大小相同的矩形，并使“矩形”恰好覆盖“文本图形元件”。如图2-15所示，在“属性”面板中将矩形的填充类别和颜色依次设置为“渐变|线性”和“黑色-白色-黑色”。

②　制作蒙版。如图2-15所示，在“层”面板中单击“层1”，可以同时选中“矩形”和“图形元件”。在菜单栏中选择“修改”|“蒙版”|“组合为蒙版”命令，可以基于“矩形”生成一个“矢量蒙版”，并将该“矩形矢量蒙版”和“文本图形元件”组合并链接在一起。

③　重新命名层。将“层”面板中的“层1”改名为“蒙版层”。此时，“层”面板如图2-16所示。在蒙版层中包含了第1个元件和矢量蒙版组合。

④　在元件和矢量蒙版组合中移动“文本图形元件”。单击元件和矢量蒙版之间的铁链图标，可以将“文本图形元件”和“矩形矢量蒙版”分开。单击左边的“文本图形元件”，使用右方向键（→）在画布中将“文本图形元件”移动到“矩形矢量蒙版”的右边，直至使“文本图形元件”中的文本看不见。在“属性”面板中将“文本图形元件”的X设置为750，也可以直接将“文本图形元件”移动到“矩形矢量蒙版”的右边。

（4）制作第2个元件和矢量蒙版组合。在“层”面板中单击第1个元件和矢量蒙版组合，然后依次使用Ctrl+C组合键和Ctrl+V组合键，可以复制并生成第2个元件和矢量蒙版组合。在第2个元件和矢量蒙版组合中，单击左边的“文本图形元件”，使用左方向键（←）在画布中将“文本图形元件”移动到“矩形矢量蒙版”的左边，直至使“文本图形元件”中的文本看不见。在“属性”面板中将“文本图形元件”的X设置为−600，也可以直接将“文本图形元件”移动到“矩形矢量蒙版”的左边。

（5）制作补间动画。如图2-17所示，在“层”面板中，分别单击两个元件和矢量蒙版组合中的铁链图标，分别将两个组合中的“文本图形元件”和“矩形矢量蒙版”重新链接起来。

如图2-18所示，在“帧”面板中将“帧延时”设置为30/100秒。

在“层”面板中单击“蒙版层”，可以同时选中两个元件和矢量蒙版组合。然后，在菜单栏中选择“修改”|“元件”|“补间实例”命令，会弹出“补间实例”对话框。如图2-19所示，在“步骤”文本框中输入25，并选中“分散到帧”复选框。然后，单击“确定”按钮，即可制作补间动画。

此时，在“帧”面板中可以看到共有27帧。其中，第2帧至第26帧（共25帧）是根据“蒙版层”中的两个元件和矢量蒙版组合生成的。

（6）测试GIF动画。在舞台下方单击“播放/停止”按钮，即可测试GIF动画文件。在该GIF动画中，文本“使用蒙版制作的滚动字幕”在蒙版下将从左向右滚动。

（7）保存.png文件。将GIF动画的设计结果保存在.png格式的文件中，并将文件命名为2-5.png。

（8）生成GIF动画。如图2-20所示，在Fireworks窗口下方的“属性”面板中，选择并确认“动画GIF接近网页128色”。

在菜单栏中选择“文件”|“导出”命令，将根据.png文件导出并生成GIF动画文件，并将GIF动画保存在名为2-5.gif的.gif文件中。

（9）查看GIF动画。在Windows资源管理器中用IE浏览器打开文件2-5.gif，即可查看GIF动画效果。