2.3 形状补间动画
形状补间动画，一般只对属性为“形状”的图形生效，通过改变属性为“形状”的图形的大小与轮廓造型及颜色，来创建形状补间动画效果。形状补间动画的一般创建方法是先制作好一个关键帧，此关键帧中只能有“形状”属性的图形，然后在此关键帧后的时间轴上再创建一个只有“形状”属性图形的关键帧，然后右击两个关键字之间的位置，在弹出的快捷菜单中选择“创建补间形状”命令即可完成创建。
请观察图2.108所示案例，第1个关键帧就是左上角的紫色圆形形状，第2个关键帧在第5帧，为黄色矩形形状。而中间三个浅色形状显示的就是软件自动计算的补间动画在这三帧上的结果。请仔细观察时间轴，如图2.109所示，其中第1帧与第5帧显示的黑色圆点代表关键帧，中间部分则是从左往右的箭头，且所有帧的颜色都显示浅绿色，表示创建的形状补间已经生效。
图2.108 补间形状动画
图2.109 时间轴上显示的补间形状动画
2.3.1 实例Ⅰ——制作“声波效果”动画
根据前面所讲的补间形状动画的制作方法，现在尝试利用补间形状制作“声波效果”动画，画面效果如图2.110所示，最终的动画效果可参见光盘中的文件“效果\ch02\2.3.1声波效果动画.swf”。
图2.110 “声波动画”效果
Step1 单击“文件”|“新建”命令，或按【Ctrl+N】组合键，在弹出的“新建文档”对话框的“常规”选项卡中选择“ActionScript 3.0”选项，舞台宽度和高度为500像素×240像素，设置帧频为24fps，单击“确定”按钮，如图2.111所示。
Step2 单击工具箱中的“矩形工具”
，在“属性”面板中将“笔触颜色”设置为无色
，单击“窗口”|“颜色”命令，或者单击附加工具栏中的“颜色”按钮
，设置“颜色类型”为“线性渐变”，单击左边的颜色滑块并输入十六进制值为“0031C9”，单击右边的颜色滑块并输入十六进制值为“000000”，如图2.112所示。
Step3 重命名“图层1”为“背景”，在该图层上拖动鼠标将矩形覆盖整个舞台，如图2.113所示，单击工具箱中的“渐变变形工具”
或按【F】键，将矩形顺时针旋转90°，如图2.114所示。编辑完成后，单击“背景”图层上的锁形图标
将该层锁定。
图2.111 新建文档
图2.112 设置矩形颜色
图2.113 绘制矩形
图2.114 渐变变形
Step4 新建图层并重命名为“音柱”，设置“填充颜色”
为“#B5FFFF”，单击工具箱中的“矩形工具”
，在舞台中绘制一个矩形，在“属性”面板中设置其宽为“30”，高为“6”，把矩形放置在X：50，Y：120的位置上，如图2.115所示。按8次【Ctrl+D】组合键对矩形进行复制，得到8个矩形，然后把最后一个矩形移动到X：420，Y：120的位置，如图2.116所示。选中所有矩形，按【CTRL+K】组合键打开“对齐”面板，单击间隔区域的“水平平均间隔”按钮
，如图2.117所示，再继续单击对齐区域的“顶对齐”按钮
，即可获得图2.118所示效果。
图2.115 绘制矩形及其位置
图2.116 复制矩形并移动矩形
Step5 按快捷键【Q】或单击工具箱中的“任意变形工具”
，依次对矩形进行选择并编辑，将鼠标放置于其顶边往上拖或往下拉（不要改变其底边的位置），把9个矩形调整成以下效果，注意每个矩形底边位置是在同一水平线上的，而高度要有所参差，如图2.119所示。这个步骤可按【Z】键或使用工具箱中的“缩放工具”
框选所要编辑的矩形，将所要编辑的矩形进行放大。如果图像过大不好编辑，可以在舞台右上角的“显示比例”下拉列表框中选择“100％”迅速恢复原始大小。
图2.117 执行水平平均间隔
图2.118 执行顶对齐
图2.119 用“任意变形工具”对矩形高度进行调整
Step6 新建图层并重命名为“音频”，单击“文件”|“导入”|“导入到库”命令，在弹出的“导入到库”对话框中选择光盘中的文件“素材\ch02\声音素材.mp3”，单击“打开”按钮。按【Ctrl+L】组合键或单击“窗口”|“库”命令，打开“库”面板，把“声音素材.mp3”直接拖入舞台。然后拖动时间轴的指针到第120帧的位置，同时选中“背景”“音柱”“音频”3个图层的第120帧，按【F5】键插入帧，此时可见“音频”图层上显示的是整条音频波形，如图2.120所示。为了能更加清晰地看到时间轴上的音频波形，单击时间轴右上角的按钮
，在其下拉菜单中选择“预览”选项，如图2.121所示，则时间轴上的每一帧都放大了，音频波形比较清晰，接下来就可根据音频的波形来编辑音柱高度。
图2.120 时间轴上的音频波形
图2.121 放大时间轴
Step7 观察“音频”图层时间轴上的波形，然后根据波形强弱来编辑“音柱”的高低效果。仔细观察，发现该音频在第6帧开始有所变化，因此，在“音柱”图层的第6帧按【F6】键快速插入一个关键帧，用“任意变形工具”对每个矩形加以调整，使得矩形整体有升高的变化，所有矩形都应有参差，中间的矩形略高，但最高不超过10像素，两边的矩形略矮，但不矮于第1帧的高度。继续观察，发现音频的波形在第8帧左右有一个小高峰，于是在“音柱”图层的第8帧插入关键帧，先整体抬升所有矩形，矩形最高不超过20像素，然后用同样的方法对每个矩形的高度进行调整，调整的原则与第6帧基本一致，中间的矩形较高，两边的矩形略矮，如图2.122所示。
Step8 对音频强弱观察越细致，则“音柱”图层的关键帧设置得越多，就可以得到更加富有变化并且与音频强弱更加切合的音柱波形动态效果。本实例中，仅罗列出各个主要关键动态的设置以供参考。
所有关键帧中矩形高度设置的基本要求：中间略高，两边略矮，每个矩形都必须有一定的高度差。
第1帧：所有矩形高度不超过6像素，如图2.123所示。将该关键帧复制到第15帧、第24帧、第120帧。
第6帧：插入关键帧，调整各个矩形，所有矩形高度不超过10像素，如图2.124所示。将该关键帧复制到第12帧、第22帧、第30帧、第117帧。
第8帧：插入关键帧，调整各个矩形，所有矩形高度不超过20像素，如图2.125所示。复制该关键帧到第39帧、第45帧、第100帧、第106帧、第114帧。
图2.122 音柱前3个关键帧的设置
图2.123 第1帧的音柱效果
图2.124 第6帧的音柱效果
图2.125 第8帧的音柱效果
第19帧：插入关键帧，调整各个矩形，所有矩形高度不超过40像素，如图2.126所示。复制该关键帧到第112帧。
第26帧：插入关键帧，调整各个矩形，所有矩形高度不超过50像素，如图2.127所示。复制该关键帧到第66帧。
图2.126 第19帧的音柱效果
图2.127 第26帧的音柱效果
第34帧：插入关键帧，调整各个矩形，所有矩形高度不超过60像素，如图2.128所示。复制该关键帧到第42帧、第55帧。
第49帧：插入关键帧，调整各个矩形，所有矩形高度不超过110像素，如图2.129所示。复制该关键帧到第62帧、第75帧、第85帧。
图2.128 第34帧的音柱效果
图2.129 第49帧的音柱效果
第59帧：插入关键帧，调整各个矩形，所有矩形高度不超过80像素，如图2.130所示。复制该关键帧到第70帧、第80帧、第90帧。
Step9 在时间轴“音柱”图层上，选中第1帧，然后按住【Shift】键进行加选，选中除第120帧以外的所有关键帧并右击，在弹出的快捷菜单中选择“创建补间形状”命令，如图2.131所示。按【Ctrl+Enter】组合键进行测试，即可看到基本的音波效果。
图2.130 第59帧的音柱效果
图2.131 创建补间形状
Step10 选择“音柱”图层并右击，在弹出的快捷菜单中选择“复制图层”命令，则得到一个新的图层“音柱复制”，将其重命名为“音柱倒影”。单击时间轴最下方“编辑多个帧”按钮
，将“编辑多个帧”的范围设置成第1帧至第120帧，锁定“音柱倒影”图层以外的所有图层，用“选择工具”对整个舞台范围进行框选，即可同时选中并编辑“音柱倒影”图层的所有帧，此时时间轴如图2.132所示。按快捷键【Q】或者单击工具箱中的“任意变形工具”
，将鼠标放在任意变形框顶边从上往下拖动，可把所有帧上的所有矩形同时向下翻转，如图2.133所示。
图2.132 选择所有关键帧
Step11 保持选中所有帧上的所有矩形，单击“属性”面板中的“填充颜色”，保持原来的颜色值，修改Alpha的值为“30％”，如图2.134所示。然后单击时间轴最下方的“编辑多个
帧”按钮关闭此前状态，可见舞台中音波有了倒影效果，如图2.135所示。按【Ctrl+Enter】组合键进行动画测试，可见完整的动画效果。最后单击“文件”|“保存”命令即可。
图2.133 垂直翻转
图2.134 设置Alpha的值
图2.135 音柱倒影效果
2.3.2 实例Ⅱ——制作“炫光效果”动画
结合前面所学的传统补间动画制作的方法，再加以利用形状补间动画的方式制作“炫光效果”动画，画面效果如图2.136所示，最终的动画效果可参见光盘中的文件“效果\ch02\2.3.2炫光效果动画.swf”。
图2.136 炫光动画效果
Step1 单击“文件”|“新建”命令，或按【Ctrl+N】组合键，在弹出的“新建文档”对话框的“常规”选项卡中选择“ActionScript 3.0”选项，舞台宽度和高度为400像素×400像素，设置帧频为24fps，背景颜色为“#000000”，单击“确定”按钮，如图2.137所示。
图2.137 新建文档
Step2 将图层1重命名为“星光”，单击工具箱中的“多角星形工具”
，在“属性”面板的工具设置区域单击“选项”按钮
，在弹出的“工具设置”对话框中设置样式为“星形”，边数为“12”，星形顶点大小为“0.05”，如图2.138所示。在属性面板中将“笔触颜色”设置为无色
，单击“窗口”|“颜色”命令，或者单击附加工具栏上的“颜色”按钮
，设置“颜色类型”为“径向渐变”，设置5个取色点，从左到右每个取色点的颜色的十六进制值依次为“33FF00”“84F368”“F8EEA8”“C1E269”“66CC00”，其中，第2个取色点设置A为“20％”，第4个取色点设置A为“0％”（A即Alpha值，表示不透明度），如图2.139所示。
图2.138 星形工具设置
图2.139 设置星形的颜色
Step3 在舞台中绘制一个星形，在“属性”面板中设置星形的宽、高均为“450”。选中星形，按【Ctrl+K】组合键打开“对齐”面板，勾选“与舞台对齐”复选框，并单击“对齐”区域的“水平中齐
”按钮与“垂直中齐
”按钮，生成的效果如图2.140所示。
图2.140 星形与舞台对齐的效果
Step4 在舞台里选中星形按【F8】键，或单击“修改”|“转换为元件”命令，将星形转换为“名称”为“星光”，“类型”为“影片剪辑”的元件，如图2.141所示。双击“星光”元件进入元件编辑模式，在第30帧插入关键帧，即已经把第1帧的效果复制在第30帧。在第15帧插入关键帧，选中第15帧的星光，单击“窗口”|“颜色”命令，或者单击附加工具栏中的“颜色”按钮
，将5个颜色点的十六进制值从左往右依次设置为“FF9900”“F3BC68”“FF7A12”“FFA041”“FF9900”，如图2.142所示。修改完成后，选中第1帧与第15帧（加选要按【Shift】键）并右击，在弹出的快捷菜单中选择“创建补间形状”命令，星光变换颜色的动画已经完成，单击时间轴下方的“播放”按钮进行观察，可见星光颜色从青绿色逐渐变为橘红色再逐渐复原。“星光”元件的补间动画完成后时间轴的显示如图2.143所示。
图2.141 转换为影片剪辑元件
图2.142 设置星形颜色
图2.143 “星光”元件的时间轴
Step5 双击“星光”空白处或单击舞台左上角的“场景1”按钮回到场景编辑模式，在“星光”图层上新建图层并重命名为“环状光”，单击工具箱中的“椭圆
工具”，设置“填充颜色”为无色，设置“笔触
颜色”的十六进制值为“#FF6666”，笔触高度为“6”，如图2.144所示。按住【Shift】键在“环状光”图层第1帧的舞台中心绘制一个圆，设置其宽和高均为“10”，用“对齐”面板将该圆与舞台中心对齐，得到图2.145所示效果。
图2.144 圆环的笔触设置
图2.145 绘制圆形的效果
Step6 选中绘制出来的圆，然后按【F8】键把圆转换为“名称”为“环状光”，“类型”为“影片剪辑”的元件，将该元件与舞台中心对齐。双击进入“环状光”元件的编辑模式，在第30帧的位置按【F6】键插入关键帧，将圆的笔触颜色
十六进制值设置为“#FFF200”，笔触大小设置为“30”，宽和高均设置为“200”，效果如图2.146所示，注意圆环中心要与星光的中心保持一致。在第60帧按【F6】键插入关键帧，将圆的笔触颜色十六进制值设置为“#00CC00”，Alpha的值设置为“0％”，笔触大小设置为“30”，宽和高均设置为“500”，如图2.147所示。
图2.146 圆形的大小与笔触颜色及效果
图2.147 圆形的大小与笔触颜色及效果
Step7 在“环状光”元件的编辑模式下，选中第1帧和第30帧并右击，在弹出的快捷菜单中选择“创建补间形状”命令，此时环状光的变化也已经完成，如图2.148所示。单击时间轴下方的“播放”按钮进行观察，可见圆环逐渐从小变大并且产生色彩变化的效果。
图2.148 “环状光”元件的时间轴
Step8 双击“环状光”空白处或单击舞台左上角的“场景1”按钮回到场景编辑模式，在“环状光”图层的第1帧选中“环状光”元件，在“属性”面板显示区域将其混合模式设置为“增加”。然后单击属性面板“滤镜”区域的“添加滤镜”按钮
，在弹出菜单中选择“模糊”命令，设置模糊X、Y的值均为“15像素”，品质设置为“高”。继续单击“添加滤镜”按钮，在弹出菜单中选择“发光”命令，设置模糊X、Y的值均为“5像素”，强度为“300％”，品质为“高”，设置其颜色的十六进制值为“#66CCFF”，如图2.149所示。然后在“环状光”图层第60帧插入帧，让整个动画持续60帧的时间，设置完成后，“环状光”图层的时间轴如图2.150所示。
图2.149 混合模式及滤镜参数设置
图2.150 “环状光”图层的时间轴
Step9 选中“星光”图层第1帧上的“星光”元件，给“星光”添加发光效果。单击“属性”面板“滤镜”区域的“添加滤镜”按钮，在弹出菜单中选择“发光”命令，设置模糊X、Y的值均为“20像素”，强度为“350％”，品质为“高”。设置其颜色的十六进制值为“#FFFF33”，如图2.151所示。
Step10 给星光添加旋转效果。在“星光”图层第60帧插入关键帧，右击第1～59帧之间的任意位置，在弹出的快捷菜单中选择“创建传统补间”命令，完成创建后的时间轴如图2.152所示。然后在“属性”面板补间区域设置“旋转”为“顺时针”，旋转次数设置为“1”，如图2.153所示。整个实例设置完成，可按【Ctrl+Enter】组合键进行动画测试，效果满意进行保存即可。
图2.151 “星光”元件的滤镜参数设置
图2.152 “星光”图层的时间轴
在具体的案例中不应只会用一种基础动画的形式进行动画设计，而应该将所学到的内容加以综合运用，多方尝试；在制作案例的过程中，更加要学会利用图层、元件层级的配合，才能创造与制作出更多美观的动态效果。
图2.153 “星光”补间旋转的参数设置