前面学习了Flash CS6的基本操作，读者都对Flash CS6有了一个大概的认识。本小节将介绍如何使用Flash CS6制作一个闪亮的Banner动画。为了保证网页的整体效果，通常是将需要突出的部分制作成动画效果，如本实例就可以将说明文字“千”制作成动画，在设计的过程中已经考虑好使用Flash制作一个简单的特效，让本来静止的Banner更具有动感，效果如图5-23所示。

图5-23 制作的Flash动画效果

具体的制作步骤如下：

1）运行Flash CS6软件，选择菜单栏上的“文件”→“新建”命令，打开“新建文档”对话框。单击选择“类型”列选框中的“Flash文档（ActionScript 2.0）”选项，然后单击“确定”按钮，即新建了一个空的Flash文档。以banner背景图片切片后的大小为标准，单击“属性检查器”面板中的“大小”后面的“编辑”按钮，打开“文档属性”对话框，在文本框中输入“宽（W）”为547，“高（H）”为144，“背景颜色”为黑色，“帧频（F）”为24.00，其他保持默认设置，具体的“文件属性”设置如图5-24所示。

图5-24 设置文档属性

2）单击“确定”按钮，即创建了一个Flash文档。选择菜单栏上的“文件”→“保存”命令，打开“另存为”对话框，在“文件名”文本框中输入“banner”，将文件保存为banner.fla（图5-25）。这样先保存的目的是为了方便后面的操作，防止文件的丢失。

图5-25 保存文件

3）下面开始动画的背景导入操作，双击时间轴上的“图层1”，将其命名为“背景”，如图5-26所示。

图5-26 更改图层名称

4）选择菜单栏“文件”→“导入”→“导入到舞台”命令，打开“导入”对话框，选择images文件夹下的bannerright.gif图片，如图5-27所示。

图5-27 选择要导入的背景图片

5）单击“打开”按钮，则图片导入到了Flash舞台上。单击工具箱中的“选择工具”按钮，选择导入的图片，在“属性”面板中，设置图片的“宽”和“高”的位置分别为X：0.00和Y：0.00，设置如图5-28所示。通过这样的设置可以让图片和场景完全重叠。

图5-28 设置图片的位置

6）设置后的舞台效果如图5-29所示。

图5-29 设置图片的位置后的舞台效果

7）单击时间轴上的“新建图层”按钮，新建一个图层，并命名为“星星”，接下来制作“星星”的影片剪辑moveball，选择菜单栏“插入”→“新建元件”命令，或者按下〈Ctrl+F8〉组合键，在打开的“创建新元件”对话框中，输入“名称”为moveball，单击选择“类型”下拉列选菜单中的“影片剪辑”选项，具体设置如图5-30所示。

图5-30 创建新影片剪辑元件

8）单击“确定”按钮，进入moveball影片剪辑文档编辑窗口，单击工具箱中的“多角星形工具”按钮，设置“填充颜色”为白色，然后在舞台中绘制出一个图5-31所示的星形。

图5-31 绘制白色星形的效果

9）单击工具箱中的“选择工具”按钮，选择绘制的白色星形，在“属性”面板中设置“宽”为85.35，“高”为85.35，具体设置如图5-32所示。

10）选择菜单栏上的“插入”→“新建元件”命令，或者按〈Ctrl+F8〉组合键，在打开的“创建新元件”对话框中，输入“名称”为mball，单击选择“类型”下拉列选菜单中的“影片剪辑”选项，具体设置如图5-33所示。

图5-32 设置白色星形的属性

图5-33 创建新的影片剪辑

11）单击“确定”按钮，进入mball影片剪辑文档编辑窗口，在第13、23、35帧分别按下〈F6〉插入关键帧，接着，在“图层1”的任意两个关键帧之间，单击鼠标右键，在弹出的快捷菜单中选择“创建传统补间”命令，操作如图5-34所示。(www.daowen.com)

图5-34 创建补间动画

12）选择菜单栏“插入”→“新建元件”命令，或者按下〈Ctrl+F8〉组合键，创建影片剪辑ball，在场景中建立两个图层。其中“图层1”是将ball动画影片剪辑拖入到文档窗口中，再建立一个从下往上的动画效果。在“图层2”上的第21帧，按下〈F6〉快捷键建立一个关键帧，如图5-35所示。

图5-35 创建ball动画

13）按下〈F9〉快捷键打开“动作-帧”面板，输入如下的命令：

如图5-36所示。

图5-36 输入清除影片命令

14）单击返回到主场景中，从“库”面板中，将制作的ball星形影片剪辑并拖放到“星星”所在图层上的第1帧，在“属性”面板中定义它的“实例”名称为ball，具体设置如图5-37所示，即完成了该图层的制作。

图5-37 定义ball实例名称

15）最后建立“action”层，加入Flash命令，实现Flash中的星形能够朝四面八方飞射的效果。单击时间轴上的“新建图层”按钮，新建一个图层，并命名为action，如图5-38所示。

图5-38 建立“action”图层

16）选择菜单栏“窗口”→“动作”命令，或者按下〈F9〉快捷键，调出“动作-帧”面板，然后输入如下的命令：

如图5-39所示。

图5-39 建立action图层并加入命令

17）到这里，动画效果就制作完成了。选择菜单栏上的“文件”→“发布设置”命令，设置如图5-40所示。发布后，即在制作的文件夹下面生成一个banner.swf文件，双击该文件可以单独打开并显示动画效果。

图5-40 发布设置

18）最后，还需要将发布的banner.swf文件嵌入到网页中，具体方法就是，打开Dreamweaver CS6，进入站点文件夹中的top.php页面，将原来网页的banner图片删除，单击选择需要嵌入Flash文档的地方，执行菜单栏“插入”→“媒体”→“SWF”命令，如图5-41所示。

图5-41 嵌入SWF命令

19）打开“选择SWF”对话框，选择发布的banner.swf文档，如图5-42所示。

图5-42 选择需要嵌入的文档

20）单击“确定”按钮，即可在Dreamweaver软件中插入一个Flash动画，如图5-43所示。

图5-43 嵌入Flash的效果

最后，保存首页的嵌入操作，即可在IE浏览器中浏览制作的所有动画效果。实例使用的Flash技术还是相对比较简单的，读者在实际应用的时候可以在网上搜索更多的Flash动画源码，不需要更多的程序变更，进行简单的应用即可。