
1.3 制作第一个简单动画
根据上一小节中讲述的Flash基本操作,以项目式的操作方式来制作完成一个简单的电子相册,舞台的画面效果如图1.27所示,最终的动画效果可参见光盘中的文件“效果\ch0ss11\电子相册.swf”。

图1.27 电子相册舞台效果
Step1 单击“文件”|“新建”命令,或按【Ctrl+N】组合键,在弹出的“新建文档”对话框的“常规”选项卡中选择“ActionScript 3.0”选项,设置舞台宽度和高度为720像素×540像素,帧频默认为24fps,单击“确定”按钮,如图1.28所示。

图1.28 “新建文档”对话框
Step2 单击“文件”|“导入”|“导入到库”命令,在弹出的“导入到库”对话框中选择光盘中的“素材\ch01\1.电子相册”中的所有图片文件,接着单击“打开”按钮,“库”面板中就出现了所需要的素材。
Step3 单击工具箱中的“矩形工具”,在“属性”面板中将笔触大小设置为“0”。单击“窗口”|“颜色”命令,或者单击附加工具栏中的“颜色”按钮
,在“颜色类型”下拉列表框中选择“线性渐变”选项,单击左边的颜色滑块并输入十六进制值为“FFFFFF”,单击右边的颜色滑块并输入十六进制值为“1898C3”,如图1.29所示。

图1.29 设置矩形颜色
Step4 拖动鼠标将矩形覆盖整个舞台,如图1.30所示,单击工具箱中的“渐变变形工具”,将矩形顺时针旋转90°,如图1.31所示。

图1.30 绘制矩形

图1.31 渐变变形
Step5 将“图层1”重命名为“背景”,新建“图层2”并重命名为“海底沙”,单击“海底沙”图层的第1帧,单击工具箱中的“线条工具”,在舞台上绘制一个闭合的路径,再单击工具箱中的“选择
工具”,在路径的上方拖动鼠标,将直线拉弯成曲线,如图1.32所示。
Step6 在工具箱中单击“填充颜色”,在“颜色”文本框中输入十六进制值“#F9EECD”,按【Enter】键,再在工具箱中单击“颜料桶工具”
,保持“海底沙”图层的第1帧为选中状态,在舞台中的闭合路径中单击,将颜色填充到路径内部,如果填充不成功,可在“空隙大小”工具中选择其他选项,效果如图1.33所示。

图1.32 绘制闭合路径

图1.33 填充颜色
Step7 新建“图层3”重命名为“相框”,单击工具箱中的“矩形工具”,在“属性”面板中设置“笔触颜色”为“#8CCBE0”,“填充颜色”为“#FFFFFF”,“笔触大小”为“10”,“矩形选项”区域的“矩形边角半径”为“10”,保持“相框”图层的第1帧为选中状态,在舞台中拖动鼠标绘制圆角矩形,设置该圆角矩形的宽度为“600”,高度为“450”,并放到合适的位置,如图1.34所示。

图1.34 绘制圆角矩形
Step8 新建“图层4”重命名为“鱼”,单击“库”面板,将其中的Fish、Starfish1、Starfish2、Starfish3、Starfish4、Starfish5这6张位图拖到舞台中合适的位置,单击工具箱中的“任意变形工具”,将位图进行适当缩放,效果如图1.35所示。
Step9 单击“插入”|“新建元件”命令,或按【Ctrl+F8】组合键,在弹出的“创建新元件”对话框中选择“图形”选项,并命名为“气泡”。单击工具箱中的“椭圆工具”,在“属性”面板中设置“笔触颜色”为“无”,“填充颜色”为“白色”,按住【Shift】键在“气泡”元件的舞台中拖动鼠标绘制白色的正圆,对白色正圆进行多次复制,并适当调整圆形大小,效果如图1.36所示。
Step10 新建“图层5”重命名为“气泡”,将“库”面板中的“气泡”元件多次拖到场景1的舞台中,并调整好大小、方向和位置,效果如图1.37所示。

图1.35 应用库面板中的素材

图1.36 制作图形元件
Step11 新建“图层6”重命名为“照片”,将“库”面板中的Beaver1位图拖到舞台中心,保持位图为选中状态,单击“窗口”|“变形”命令,在弹出的“变形”面板中设置“缩放宽度”和“缩放高度”为“80%”。在“照片”图层的第15帧右击,在弹出的快捷菜单中选择“插入关键帧”命令或者按【F6】键,将“库”面板中的Beaver2位图拖到舞台中心,使用相同的方法进行变形,效果如图1.38所示。

图1.37 应用“库”面板中的图形元件

图1.38 使用变形命令
Step12 在“照片”图层的第30帧、第45帧、第60帧均插入关键帧,分别将“库”面板中的Beaver3、Beaver4、Beaver5这3张位图拖到舞台中心,按照Beaver1位图的变形方式进行变形。按住【Shift】键选中所有图层的第75帧右击,在弹出的快捷菜单中选择“插入帧”命令,时间轴的效果如图1.39所示。

图1.39 操作时间轴
Step13 保存文件,单击“控制”|“测试场景”命令或者按【Ctrl+Enter】组合键对文件进行测试。