第5章高级动画制作

高级动画具有较强的表现力，能够展现一些特殊的效果，是综合运用了Flash CC提供的各种方法和技巧制作出来的。高级动画类型包括引导层动画、遮罩动画、骨骼动画等。在基本动画基础上，结合各种高级动画技巧，经过巧妙的构思和精心的制作，最终完成一个精美的动画作品。
5.1创建引导层动画
如果想使对象按设定曲线运动，并且运动轨迹看起来更加逼真，可以为对象添加运动引导层。在包含运动对象的图层上方添加运动引导层，在引导层中用绘图工具画出一条运动路径。在包含运动对象的图层中，起始帧时将对象拖放至路径的起始端点； 结束帧时将对象移动到路径的结束端点，然后在两个关键帧之间创建传统补间动画。被控制的对象所在的图层称为被引导层，被引导层可以包含传统补间动画，但不包含补间动画。
【案例5.1】蝴蝶舞春。
① 新建空白文档，执行“文件”→“导入”→“导入到舞台”命令，选择背景素材“ch05＼素材＼花海.jpg”导入到舞台中，并调整大小，在第130帧处按F5键插入帧。
② 选择“插入”→“新建元件”命令，创建图形元件，命名为“蝴蝶身体”，绘制如图51所示的蝴蝶身体。
③ 新建图形元件“蝴蝶1左翅”，绘制如图52所示的蝴蝶左翅膀。新建图形元件“蝴蝶1右翅”，将蝴蝶1左翅图形复制过来，执行“修改”→“变形”→“水平翻转”命令。


图51蝴蝶身体




图52蝴蝶1左翅


④ 新建影片剪辑元件“蝴蝶1”，切换至元件编辑状态。选择图层1，重命名为“身体”，接着建立“左翅”和“右翅”两个图层，分别将“蝴蝶身体”“蝴蝶1左翅”和“蝴蝶1右翅”图形元件拖放至相应图层的第1帧处，调整位置和大小。
⑤ 选择“身体”图层，在第20帧处插入帧。选择“左翅”图层，在第10帧和第20帧处按F6键插入关键帧； 在第5帧和第15帧处插入关键帧，使用“任意变形工具”压缩图形，并当鼠标变为双向箭头时改变图形形状如图53和图54所示。选择“右翅”图层，按同样的方法完成。最终生成了蝴蝶扇动翅膀的动画效果，“蝴蝶1”影片剪辑元件的时间轴如图55所示。


图53第5帧




图54第15帧





图55“蝴蝶1”元件的时间轴


⑥ 返回“场景1”，新建图层2，重命名为“蝴蝶1飞舞”。选择该图层，右击，在快捷菜单中选择“添加传统运动引导层”命令，如图56所示。此时，在“蝴蝶1飞舞”图层的上方添加了一个引导层，“蝴蝶1飞舞”图层向内自动缩进，时间轴如图57所示。



图56创建引导层动画




图57添加引导层的时间轴


⑦ 选择引导层，使用“铅笔工具”绘制一条蝴蝶飞舞的曲线，如图58所示。


图58绘制飞舞曲线


⑧ 在“蝴蝶1飞舞”图层中，选择第1帧，将“蝴蝶1”元件拖放到舞台，使蝴蝶中心对准曲线的起始端点，如图59所示； 在第100帧处插入关键帧，拖动蝴蝶使其中心对准曲线的结束端点，如图510所示。在第1~100帧之间创建传统补间动画。


图59第1帧起始位置




图510第100帧结束位置


⑨ 测试影片，发现蝴蝶沿着设定的曲线运动，但是效果不自然，此时可以通过改变蝴蝶的大小、变形、透明度等属性来完善。选择“蝴蝶1飞舞”图层，在第30、第40、第50和第70帧处插入关键帧。在第1~100帧的每一个关键帧位置，通过“任意变形工具”使蝴蝶由小到大，设置Alpha属性值0%~100%由小到大，并且通过旋转蝴蝶来调整飞行方向，实现蝴蝶由远及近飞舞的效果，如图511所示。


图511完善后的蝴蝶飞舞动态过程


⑩ 参照③~⑨步骤，完成蝴蝶2的飞舞效果。最终时间轴如图512所示。


图512完成后的时间轴


提示：  绘制蝴蝶2的左翅和右翅，只需将蝴蝶1的相应图形进行复制，使用“颜料桶工具”填充不同的颜色即可。
按Ctrl+Enter组合键，测试影片效果，如图513所示。


图513影片测试效果


5.2创建遮罩动画
遮罩动画可以通过遮罩层有选择地显示位于其下方的被遮罩层中的内容。遮罩层是一个特殊的图层，在该层上创建一个任意形状的“窗口”，遮罩层下方的对象可以通过该“窗口”显示出来，而“窗口”之外的对象将被隐藏。Flash中的遮罩是指一个范围，可以是任意形状，也可以是文本对象或者元件等。
创建遮罩动画的具体步骤是，首先建立一个被遮罩层，在该图层中包含了需要在遮罩中显示的对象； 接着在被遮罩层上方建立一个新的图层作为遮罩层，并在该层中确立遮罩的形状； 最后在时间轴面板的遮罩层上右击，在弹出的快捷菜单中选择“遮罩层”命令。通常在遮罩层上设置适当的补间形状或补间动画，可以使遮罩动画效果更加多变，更富有层次感。
【案例5.2】卷轴动画。
① 新建空白文档，执行“修改”→“文档”命令，在打开的“文档设置”对话框中设置舞台大小为1000像素×450像素。
② 将图层1重命名为“矩形背景”。在工具面板中选择“矩形工具”，设置笔触颜色为无，填充颜色为浅绿色(#BBCDBA)，在舞台中绘制一矩形，在第60帧处插入帧。
③ 新建图层2，重命名为“诗词”。选择“文本工具”，在属性面板中设置相应属性，如图514所示，在舞台中输入相应文字。执行“文件”→“导入”→“导入到舞台”命令，选择素材文件“ch05＼素材＼仕女.jpg”导入到舞台适当位置并调整大小。在第60帧处插入帧。图层1和图层2的舞台界面如图515所示。


图514文本属性设置




图515图层1和图层2的舞台界面


④ 新建图层3，重命名为“遮罩层”。选择“矩形工具”，设置笔触颜色为无，填充颜色为灰色(#666666)，在舞台中绘制一矩形，要求覆盖“矩形背景”图层中的矩形，两个矩形大小相同。在“遮罩层”的第60帧处插入关键帧。
⑤ 选择第1帧，使用“任意变形工具”将矩形沿对称轴缩小，如图516所示。在第1~60帧的任意位置右击，在弹出的快捷菜单中选择“创建补间形状”命令。



图516沿对称轴缩小的矩形


⑥ 新建图形元件“画轴”，进入元件编辑状态。设置3个图层绘制画轴，绘制过程如图517所示。



图517“画轴”元件绘制过程


⑦ 返回“场景1”，新建图层4，重命名为“左卷轴”。将“画轴”元件从库中拖放至舞台，调整大小，并和“遮罩层”中第1帧缩小的矩形位置重合，如图518所示。在第60帧插入关键帧，将画轴水平向左移动至矩形背景的左边缘，如图519所示，在第1~60帧之间创建传统补间动画。


图518“左卷轴”图层第1帧




图519“左卷轴”图层第60帧


⑧ 新建图层5，重命名为“右卷轴”。参照步骤⑦完成右卷轴的动画过程。
⑨ 选择“遮罩层”，右击，在弹出的快捷菜单中选中“遮罩层”选项，如图520所示，此时“诗词”图层向内缩进。右击“矩形背景”图层，在弹出的快捷菜单中选择“属性”命令，打开“图层属性”对话框，在“类型”中选择“被遮罩”选项，如图521所示，单击“确定”按钮后可以看到“诗词”图层也完成了向内缩进。


图520菜单设置遮罩层




图521“图层属性”对话框


⑩ 完成后的时间轴如图522所示。测试影片效果，如图523所示。


图522完成后的时间轴





图523影片测试效果


【案例5.3】下午茶时光。
① 新建空白文档，执行“修改”→“文档”命令，在打开的“文档设置”对话框中设置舞台大小为800像素×270像素，背景色为浅粉色(#FF99CC)，帧频为12fps。

② 执行“文件”→“导入”→“导入到库”命令，选择素材文件“ch05＼素材＼下午茶.jpg”“ch05＼素材＼蛋糕.png”“ch05＼素材＼水果.png”
和“ch05＼素材＼咖啡.png”导入到库中。将图层1重命名为“背景”图层，从库中选择“下午茶”背景图片拖放至舞台，调整图片大小和舞台大小一致并重合。在150帧处插入帧。
③ 新建图层2，重命名为“文字”。在工具箱中选择“文本工具”，在属性面板中设置其属性，如图524所示，在舞台中输入相应文字，将文字移至舞台最左边，如图525所示。在第40帧处插入关键帧，将文字平移至舞台最右边，在第1~40帧创建传统补间动画。按Shift键选择第41~150帧，右击，在快捷菜单中选择“删除帧”命令。


图524设置文本属性






图525第1帧文字位置


④ 右击“文字”图层，在快捷菜单中选择“遮罩层”选项，将该图层设置为遮罩层，时间轴如图526所示。



图526“文字”图层动画设置






图527“圆形放大”元件

第30帧

⑤ 新建影片剪辑元件“圆形放大”，进入元件编辑状态。选择“椭圆工具”，设置笔触颜色为无色，填充色为蓝色，在第1帧处绘制一圆形，如图527所示，在第30帧处插入关键帧，使图形延伸至此帧。选择第1帧，使用“任意变形工具”将圆形缩小至看不见，在第1~30帧创建补间形状，时间轴如图528所示。



图528“圆形放大”元件时间轴


⑥ 参照步骤⑤创建影片剪辑元件“五边形放大”和“矩形放大”。
⑦ 返回“场景1”，新建图层3，重命名为“蛋糕”。在第40帧处插入关键帧，将蛋糕图片从库中拖至舞台相应位置并调整大小，如图529所示。



图529“蛋糕”图层第40帧


⑧ 新建图层4，重命名为“圆形”。在第40帧处插入关键帧，将“圆形放大”影片剪辑元件拖放至蛋糕所在位置，并使两者中心点重合。删除第71~150帧。将“圆形”图层设置为遮罩层。时间轴如图530所示。



图530“蛋糕”动画设置


⑨ 参照步骤⑦和⑧，完成“水果”和“咖啡”的遮罩动画效果，最终时间轴如图531所示。


图531完成后的时间轴


⑩ 按Ctrl+Enter组合键，测试影片效果，如图532所示。


图5.32影片测试效果


5.3创建骨骼动画
Flash CC的骨骼动画运用的是反向运动原理。使用“骨骼工具”在设定好的图形形状上或各个元件实例之间绘制多个骨骼，构成线性或分支型的骨架，将各图形或元件连接起来。当移动其中一个骨骼时，与其连接的骨骼会发生反向运动，可以逼真地模拟人体的各种动作，并且在前后动作之间会自动生成补间形成过渡动作，省却大量的绘制工作。制作者只需绘制基本图形或元件，添加骨骼，通过拖动骨骼位置调整姿势即可。
【案例5.4】机器人。
① 新建空白文档，分别建立图形元件“头部”“腰部”“胯部”“上臂”“前臂”“手”“大腿”“小腿”和“脚”，如图533所示。



图533绘制身体各部分


② 返回场景1，将各个元件拖放至舞台适当位置，组合成如图534所示机器人。


③ 绘制骨骼。在工具箱中选择“骨骼工具”，从腰部开始向上拖动鼠标到头部以下，这是第一根骨骼为根骨骼，如图535所示，其余骨骼均为该根骨骼的分支。继续使用骨骼工具，向上拖动鼠标至头部。从根骨骼上部的圆关节处拖动到肩关节，依次再到肘关节、腕关节，构成了机器人的上肢骨骼，如图536所示。从根骨骼下方的圆关节处向下拖动，延伸绘制出机器人的下肢骨骼，至此机器人全身骨骼绘制完毕，如图537所示。


图534组合元件




图535根骨骼




图536上肢骨骼




图537全身骨骼


④ 时间轴的图层1上方自动增加了一个骨骼图层“骨架_1”，并且在图层名称前有一个人形图标，如图538所示。分别在第15、第30、第45、第60、第75、第90和第105帧处右击，在弹出的快捷菜单中选择“插入姿势”命令，如图539所示。

⑤ 在第15、第45、第75和第90帧处，使用“选择工具”调整骨骼位置，从而改变机器人姿势，如图540所示。


图538绘制骨骼后的时间轴




图539插入姿势



提示：  绘制骨骼后，选择某一根骨骼，可以在“属性”面板中设置该骨骼的相关属性，如骨骼运动速度、旋转角度以及连接方式等，如图541所示。


图540改变姿势




图541骨骼属性设置


⑥ 完成后的时间轴如图542所示。按Ctrl+Enter组合键，测试影片效果。



图542完成后的时间轴


【案例5.5】机器人跑步。
① 新建空白文档，执行“修改”→“文档”命令，在打开的“文档设置”对话框中设置舞台大小为800像素×400像素。
② 建立案例5.4图533中的图形元件。
③ 新建影片剪辑元件“跑步”，进入元件编辑状态。将库中的各图形元件拖放至舞台，组合成如图543所示机器人。
④ 选择“骨骼工具”绘制机器人骨骼，如图544所示。



图543组合元件




图544绘制骨骼


⑤ 选择“骨架_1”图层，在第10、第20、第30、第40、第50、第60和第70帧处右击，在弹出的快捷菜单中执行“插入姿势”命令，使用“选择工具”调整机器人姿势，如图545所示。


图545调整姿势




图546“机器人”图层第1帧

⑥ 返回“场景1”，将图层1重命名为“背景”，选择“线条工具”，在舞台中绘制地平线，在第120帧处插入帧。
⑦ 新建图层2，命名为“机器人”，将“跑步”影片剪辑元件拖放至舞台左方，如图546所示。在第120帧处插入关键帧，将“跑步”元件水平移动至舞台右方，在第1~120帧创建传统补间，时间轴如图547所示。





图547时间轴显示


⑧ 保存文档，测试影片效果，如图548所示。



图548测试影片效果


习题
1. 利用运动引导层动画制作一个影片，展现丰富的海底世界。
2. 利用遮罩动画制作一个特效，如放大镜、百叶窗等。
3. 制作一个卡通人物的骨骼动画。
4. 选择至少3种动画制作技术制作一个动画，要求不少于300帧。