知识讲解：制作引导层动画

1、学习目标 制作引导层动画掌握引导层动画模拟篮球运动的效果 。掌握引导层动画制作气泡飘动的效果 。掌握使用引导层动画表达艺术创意的方法 。 掌握使用多层引导动画模拟鱼儿游动的效果 。 1 引导层动画原理 2 引导层动画提高3 课后作业本章大纲1 引导层动画原理 1.1 知识点讲解 引导层动画的创建方法和原理都是十分简单的，只要通过下面的学习，读者可以轻松掌握 。图7-1 两个图层的引 导 一、创建引导层和被引导层。 图7-2 创建引导层 图7-3 多层被引导 二、引导层动画原理。 图7-4所示为被引导层上小球在第1帧和第50帧处的位置。图7-5所示为小球的全部运动轨迹，通过观察可以很清晰地发现引

2、导层的引导功能小球在第1帧的位置 小球在第50帧的位置 图7-4 设置小球起始位置 图7-5 小球的运动 引导层上的路径在发布后，并不会显示出来，只是作为被引导元素的运动轨迹。在被引导层上被引导的图形必须是元件，而且必须创建动作补间动画，同时还需要将元件在关键帧处的“变形中心”设置到引导层上的路径上，才能成功创建引导层动画。1.2 范例解析（一）创建引导层动画练习 请同学们在老师的带领下进行创建引导层动画练习，并完成以下操作 。1、打开教学资源中的“素材第7讲创建引导层动画练习赛车.fla”文件。2、在默认“图层1”中绘制如图7-6所示的路径。图7-6 绘制路径 3、在“图层1”的第80帧处插

3、入帧。4、新建图层并重名为“图层2”，并将其拖到“图层1”的下面。5、将【库】面板中的“汽车1”元件拖动到舞台中，并设置其位置如图7-7所示 。变形中心整体效果 放大图图7-7 放置汽车元件 6、在“图层2”的第80帧处插入关键帧，设置第80帧处汽车元件的位置如图7-8所示。 变形中心图7-8 放置汽车位置 7、在“图层2”的第1帧第80帧之间创建动作补间动画。8、用鼠标右键单击“图层1”，在弹出的快捷菜单中选择【引导层】命令，将“图层1”转化为引导层，然后将“图层2”拖到“图层1”的下面，将其转化为被引导层，此时图层效果如图7-9所示。 图7-9 创建引导层动画 9、按Ctrl+Enter快

4、捷键，测试播放影片，发现汽车的运动效果是错误的。10、关闭测试播放器，然后选中“图层2”的第1帧，在【属性】面板中勾选【调整到路径】选项，如图7-10所示。再测试播放影片，发现汽车的运动效果正确 。 图7-10 勾选【调整到路径】选项 1.3 范例解析（二）制作“街头篮球” 篮球是目前世界上最受欢迎的体育项目之一，相信读者对其也十分熟悉。利用动画来制作投篮效果就需要使用引导层动画来完成，其设计思路及效果如图7-11所示 。图7-11 设计思路及效果 1、打开模板进行分析。 （1）由于本案例讲解的重点是引导层动画，所以该动画中的场景、道具、人物等都由本书提供，并给出制作模板，读者只需完成引导层动

5、画的相关部分。打开教学资源中的“素材第7讲街头篮球街头篮球.fla”文件，效果如图7-12所示 。 图7-12 打开模板 双击场景中的“男孩”元件进入其元件内部，观察前5帧的动画，如图7-13所示。可以发现，当在第4帧时，男孩手中的篮球消失了，在第5帧处，男孩做出了一个投篮的动作，从而可以推断出，引导层动画应该从第4帧开始，并且篮球的位置要根据第4帧男孩的手的位置来确定 。第1帧 第2帧 第3帧 第4帧 第5帧 图7-13 男孩元件的前5帧动画 （2）返回主场景，观察整个舞台如图7-14所示，可以发现篮球在运动过程中，要经过“男孩的手”、“篮筐”、“球网”这3个图形。所以根据视角分析可以判定引

6、导层应该创建在“男孩”、“篮筐前沿”、“球网”这3个元件所在图层的下面，而在“篮板”、“地板”、“篮筐后沿”这3个元件所在图层的上面 。男孩的手篮筐前沿球网篮板篮筐后沿图7-14 图层分析 2、制作引导层动画。（1）将所有图层锁定，在“篮板”图层之上新建图层并重命名为“引导层”，根据前面的分析，在时间轴的第4帧处插入关键帧，如图7-15所示。（2）在“引导层”的第4帧处，利用【直线】工具和【选择】工具绘制出篮球运动的轨迹如图7-16所示。 读者在绘制篮球路径曲线时，应尽量发挥想象，将篮球的真实飞行轨迹描绘出来。 图7-15 新建引导层 图7-16 绘制引导线 （3）在“引导层”图层下面新建图层

7、并重命名为“篮球”层，在第4帧处插入关键帧，然后将“篮球”元件从【库】面板中拖动到“篮球”图层上，如图7-17所示 。篮球图层效果 拖入篮球 图7-17 创建篮球图层 （4）在“篮球”图层的第30帧处插入关键帧，在第4帧第30帧之间创建动作补间动画。 （5）将【贴近至对象】按钮按下，利用【选择】工具设置篮球在第4帧的位置到引导线的最左端，设置第30帧的位置到引导线的最右端，并确保“篮球”元件的“变形中心”一定要在引导线上，效果如图7-18所示。（6）用鼠标右键单击“引导层”图层，在弹出的快捷菜单中选择【引导层】命令，将其转化为引导层。（7）将“篮球”图层拖动到“引导层”图层的下面，当“引导层”

8、图层的图标由变为状态时释放，将其转化为被引导层，效果如图7-19所示 。 第4帧处篮球的位置 第30帧处篮球的位置 图7-18 设置篮球的位置 图7-19 创建引导层动画 创建引导层动画完毕，测试影片如果发现篮球并未按照引导层上的路径运动，则可以重点检查“篮球”元件的“变形中心”是否在引导线上 。3、完善引导层动画。（1）按Ctrl+Enter快捷键测试观看影片，发现篮球的运动过程显得十分僵硬，没有速率变化，和真实的篮球运动差别很大，需要对其进行缓动设置。（2）选中“篮球”图层上的第4帧，在【属性】面板中单击按钮，如图7-20所示打开【自定义缓入/缓出】对话框，将曲线调整至如图7-21所示的效

9、果 图7-20 帧【属性】面板 图7-21 调整篮球运动速率 （3）通常情况下，篮球在被投射出去之后，还会具有相对于投球人手的反转运动，所以在【属性】面板中设置【旋转】属性为“逆时针”，【次】为“5”如图7-22所示。 图7-22 设置旋转动画 （4）再次测试观看影片，篮球的运动真实了，但是发现篮球在穿越“球网”的时候球网没有任何的动作，这是不符合实际情况的，如图7-23所示。 第13帧处篮球的位置 第14帧处篮球的位置 图7-23 篮球穿越效果 （5）通常情况下，球在穿越球网的时候，球网都会由于惯性和自身弹性反弹起来。所以需要在“球网”图层的第13帧、第14帧和第15帧处插入关键帧，并调整第

10、14帧处的球网形状，最后得到如图7-24所示的效果。 第13帧处球网的形状 第14帧处球网的形状 第15帧处球网的形状 图7-24 球网动态效果 （6）保存测试影片，可以看到一个十分真实、完美的街头篮球效果制作完成。 1.4 课堂练习制作“花朵气泡” 请同学们使用引导层动画制作一个花朵气泡随风飞舞的动画效果，如图7-25所示 。1、导入素材布置场景 。图7-25 最终设计效果 （2）执行【文件】/【导入】/【打开外部库】菜单命令，打开教学资源中的“素材第7讲花朵气泡花朵气泡.fla”文件，将其中的所有内容都复制粘贴到当前的【库】面板中，如图7-26所示。（3）新建图层并重命名图层，并在所有图层

11、的第120帧处插入帧，直至图层效果如图7-27所示。 图7-26 打开外部库 图7-27 图层效果 （4）将“背景.png”拖入到“背景”图层上，设置其位置坐标x、y都为“0”，宽高为“800px518px”，如图7-28所示。（5）将“前景.png”拖入到“前景”图层上，设置其位置坐标x、y分别为“25”、“250”，宽高为“933px250px”如图7-29所示。 图7-28 设置背景图片 图7-29 设置前景图片 2、制作气泡飘动效果。（1）为了操作方便，将“前景”图层隐藏，然后在“气泡1路径”和“气泡2路径”图层上绘制如图7-30所示的引导线 。气泡1引导线气泡2引导线图7-30 绘制

12、路径曲线 （2）将“气泡1”和“气泡2”元件分别拖入到“气泡1”和“气泡2”图层上，并设置其第1帧的位置分别如图7-31所示。（3）在“气泡1”和“气泡2”图层的第120帧处插入关键帧，并设置该帧处“气泡1”和“气泡2”元件的位置如图7-32所示 图7-31 设置气泡在第1帧的位置 图7-32 设置气泡在第120帧的位置 （4）分别在“气泡1”和“气泡2”图层的第1帧第120帧之间创建动作补间动画，将“气泡1路径”和“气泡2路径”图层转化为引导层，再将“气泡1”和“气泡2”图层分别转化为其被引导层图层效果如图7-33所示。 图7-33 创建引导层动画 （5）保存测试影片，一个美丽梦幻的花朵气泡

13、动画效果制作完成。2 引导层动画提高 通过前面一节课的学习，相信同学们已经掌握了引导层动画的创建方法和设计原理，在本小节中，将使用多层引导层动画来制作复杂的Flash动画 。2.1 知识点讲解观察生活中可以用引导层动画来表达创意的事物。使用引导层动画来模拟表达您的创意。收集素材丰富您的作品。在制作过程中不断完善自己的作品。 2.2 范例解析制作“蜓桥相会” 在中国流传着一个神话隔着长长的银河住着美丽的织女和忠厚的牛郎他们彼此深爱对方，但每年只能通过喜鹊搭桥才能见一面为了他们能多见上一面，可爱的蜻蜓也搭起了一座“蜓桥”，这样就成就了另一个神话“蜓桥相会”！使用Flash制作该效果的设计思路及效果

14、如图7-34所示 。图7-34 思路及效果 1、导入素材制作背景。（1）新建一个Flash文档，设置文档【尺寸】为“700px400px”，【帧频】为“24fps”，其他属性保持默认参数。（2）执行【文件】/【导入】/【打开外部库】菜单命令，打开教学资源中的“素材第7讲蜓桥相会蜓桥相会.fla”文件，如图7-35所示。将其中的影片剪辑元件“背景”、“牛郎”、“蜻蜓”、“织女”复制粘贴到当前的【库】面板中。（3）将默认“图层1”重命名为“背景”层，将“背景”元件拖入舞台，并确认其宽高为“700px400px”，位置坐标x、y都为“0”，如图7-36所示。图7-35 打开外部库 图7-36 拖入背

15、景 2、制作飞舞效果。（1）在“背景”图层上新建图层并重命名为“蜓桥”，在其上绘制如图7-37所示的引导线。 图7-37 绘制引导线 该路径的重要特点是曲线的开始部分和结尾部分都是直线，而中间在场景中的部分为曲线，这样绘制的好处在于能更好的控制被引导元件的旋转方向。（2）选中绘制的引导线，按住Ctrl键再复制出两条，得到如图7-38所示的效果。（3）选中3条曲线，按F8快捷键将其转化为影片剪辑元件，并重命名为“飞舞”（4）单击 按钮进入元件内部进行编辑，选中舞台中最下面的曲线，将其分散到图层，再选中中间的曲线，将其分散到图层。（5）依次从上到下重命名图层为“路径上”层、“路径中”层、“路径下”

16、层并在3个图层的第220帧处插入帧，图层效果如图7-39所示。 图7-38 复制线条 图7-39 设置图层 （6）这里设计让蜻蜓分三路进入舞台，其中“路径上”和“路径下”的“蜻蜓”从舞台左边向右边飞，而“路径中”的“蜻蜓”从舞台右边向左边飞。（40在“路径中”图层上面新建图层并重命名为“蜻蜓上”层，将“蜻蜓”元件拖入到“蜻蜓上”图层上，并设置其第1帧的位置如图7-40所示。（80在“蜻蜓上”层的第220帧处插入关键帧，并设置其位置到曲线的最右端，如图7-41所示 。图7-40 设置第1帧蜻蜓的位置 图7-41 设置第220帧蜻蜓的位置 （9）在“蜻蜓上”图层的第1帧第220帧之间创建动作补间动

17、画，并将“路径上”图层转化为引导层，将“蜻蜓上”图层转化为其被引导层。（10）选中“蜻蜓上”图层的第1帧，在【属性】面板中勾选【调整到路径】选项。（11）至此“蜻蜓上”的引导层动画就制作完成了，使用同样的方法制作“蜻蜓中”和“蜻蜓下”的动画。设置元件位置的时候一定要注意将元件的“变形中心”放到路径上，如图7-40和图7-41所示。如果变形中心未在路径上，引导层动画将创建失败。 3、制作蜓桥效果。（1）返回主场景，选中“飞舞”元件，如图7-42所示，按F8快捷键将其转化为影片剪辑元件并命名为“蜓桥”。（2）双击“蜓桥”元件进入元件内部进行编辑，在“图层1”的第200帧处插入帧。 图7-42 选中

18、“飞舞”元件 （3）选中“飞舞”元件，按Ctrl+C快捷键复制该元件，在第20帧处插入关键帧，并在该帧处按Ctrl+Shift+V快捷键粘贴该元件，使用相同方法，每隔20帧插入关键帧并粘贴该元件直到第200帧，图层效果如图7-43所示 。（4）选择第200帧，按F9快捷键打开【动作帧】面板，输入代码“stop();”，如图7-44所示 。图7-43 图层效果一 图7-44 输入代码 （5）返回主场景，按Ctrl+Enter快捷键测试观察影片，一个美丽的蜓桥效果就完成了 。图7-45 制作蜓桥 4、制作牛郎织女动画。（1）在“蜓桥”图层上面新建图层并重命名图层，在所有图层的第320帧处插入帧，得

19、到如图7-46所示的效果。（2）在“人物路径”图层上绘制一条和“蜓桥”曲线相似的引导线如图7-47所示 。（3）在“牛郎”和“织女”图层上的第220帧处插入关键帧，将【库】面板中的“牛郎”和“织女”元件分别拖入到“牛郎”和“织女”图层上，并设置其位置如图7-48所示 。图7-46 图层效果二 图7-47 绘制人物路径 图7-48 设置“牛郎”和“织女”第220帧的位置 （4）在图层的第320帧处插入关键帧，并设置“牛郎”和“织女”在该帧的位置如图7-49所示 。图7-49 设置“牛郎”和“织女”第320帧的位置 （5）在“牛郎”和“织女”图层上的第220帧第320帧之间创建动作补间动画，再将“

20、人物路径”图层转化为引导层，将“牛郎”和“织女”图层转化为其被引导层。（6）选中“牛郎”图层的第320帧，按F9快捷键打开【动作帧】面板，输入代码“stop();”。（7）测试观看影片，一个“蜓桥相会”的美丽动画就制作完成了。 2.3 课堂练习制作“鱼儿荷间戏 ” 请同学们跟随本例使用多层引导动画来创造一副“鱼儿荷间戏”的动人画面，动画效果如图7-50所示。1、新建一个Flash文档，设置文档【尺寸】为“520px740px”，【帧频】为“30fps”，其他属性保持默认参数 。图7-50 最终设计效果 （2）执行【文件】/【导入】/【打开外部库】命令将教学资源中的“素材第7讲鱼儿荷间戏鱼儿荷间戏-素材.fla”文件打开，如图7-51所示。并将其中的影片剪辑元件“鳍”、“身”、“头”以及图片“荷塘-背景.jpg”、“荷塘-前景.jpg”复制粘贴到当前的【库】面板中。（3）将“荷塘-背景.jpg”拖入到舞台中，设置图片大小为“520px740px”，相对舞台居中对齐，效果如图7-5