搜索
学习目标第7讲制作引导层动画掌握引导层动画模拟篮球运动的效果。掌握引导层动画制作气泡飘动的效果。掌握使用引导层动画表达艺术创意的方法。掌握使用多层引导动画模拟鱼儿游动的效果。•7.1引导层动画原理•7.2引导层动画提高•7.3课后作业本章大纲7.1引导层动画原理7.1.1知识点讲解引导层动画的创建方法和原理都是十分简单的，只要通过下面的学习，读者可以轻松掌握。图7-1两个图层的引导一、创建引导层和被引导层。图7-2创建引导层图7-3多层被引导二、引导层动画原理。图7-4所示为被引导层上小球在第1帧和第50帧处的位置。图7-5所示为小球的全部运动轨迹，通过观察可以很清晰地发现引导层的引导功能小球在第1帧的位置小球在第50帧的位置图7-4设置小球起始位置图7-5小球的运动引导层上的路径在发布后，并不会显示出来，只是作为被引导元素的运动轨迹。在被引导层上被引导的图形必须是元件，而且必须创建动作补间动画，同时还需要将元件在关键帧处的“变形中心”设置到引导层上的路径上，才能成功创建引导层动画。7.1.2范例解析（一）──创建引导层动画练习请同学们在老师的带领下进行创建引导层动画练习，并完成以下操作。1、打开教学资源中的“素材\第7讲\创建引导层动画练习\赛车.fla”文件。2、在默认“图层1”中绘制如图7-6所示的路径。图7-6绘制路径3、在“图层1”的第80帧处插入帧。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快捷键，测试播放影片，发现汽车的运动效果是错误的。10、关闭测试播放器，然后选中“图层2”的第1帧，在【属性】面板中勾选【调整到路径】选项，如图7-10所示。再测试播放影片，发现汽车的运动效果正确。图7-10勾选【调整到路径】选项7.1.3范例解析（二）──制作“街头篮球”篮球是目前世界上最受欢迎的体育项目之一，相信读者对其也十分熟悉。利用动画来制作投篮效果就需要使用引导层动画来完成，其设计思路及效果如图7-11所示。图7-11设计思路及效果1、打开模板进行分析。（1）由于本案例讲解的重点是引导层动画，所以该动画中的场景、道具、人物等都由本书提供，并给出制作模板，读者只需完成引导层动画的相关部分。打开教学资源中的“素材\第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个图形。所以根据视角分析，可以判定引导层应该创建在“男孩”、“篮筐前沿”、“球网”这3个元件所在图层的下面，而在“篮板”、“地板”、“篮筐后沿”这3个元件所在图层的上面。男孩的手篮筐前沿球网篮板篮筐后沿图7-14图层分析2、制作引导层动画。（1）将所有图层锁定，在“篮板”图层之上新建图层并重命名为“引导层”，根据前面的分析，在时间轴的第4帧处插入关键帧，如图7-15所示。（2）在“引导层”的第4帧处，利用【直线】工具和【选择】工具绘制出篮球运动的轨迹如图7-16所示。读者在绘制篮球路径曲线时，应尽量发挥想象，将篮球的真实飞行轨迹描绘出来。图7-15新建引导层图7-16绘制引导线（3）在“引导层”图层下面新建图层并重命名为“篮球”层，在第4帧处插入关键帧，然后将“篮球”元件从【库】面板中拖动到“篮球”图层上，如图7-17所示。篮球图层效果拖入篮球图7-17创建篮球图层（4）在“篮球”图层的第30帧处插入关键帧，在第4帧～第30帧之间创建动作补间动画。（5）将【贴近至对象】按钮按下，利用【选择】工具设置篮球在第4帧的位置到引导线的最左端，设置第30帧的位置到引导线的最右端，并确保“篮球”元件的“变形中心”一定要在引导线上，效果如图7-18所示。（6）用鼠标右键单击“引导层”图层，在弹出的快捷菜单中选择【引导层】命令，将其转化为引导层。（7）将“篮球”图层拖动到“引导层”图层的下面，当“引导层”图层的图标由变为状态时释放，将其转化为被引导层，效果如图7-19所示。第4帧处篮球的位置第30帧处篮球的位置图7-18设置篮球的位置图7-19创建引导层动画创建引导层动画完毕，测试影片如果发现篮球并未按照引导层上的路径运动，则可以重点检查“篮球”元件的“变形中心”是否在引导线上。3、完善引导层动画。（1）按Ctrl+Enter快捷键测试观看影片，发现篮球的运动过程显得十分僵硬，没有速率变化，和真实的篮球运动差别很大，需要对其进行缓动设置。（2）选中“篮球”图层上的第4帧，在【属性】面板中单击按钮，如图7-20所示，打开【自定义缓入/缓出】对话框，将曲线调整至如图7-21所示的效果图7-20帧【属性】面板图7-21调整篮球运动速率（3）通常情况下，篮球在被投射出去之后，还会具有相对于投球人手的反转运动，所以在【属性】面板中设置【旋转】属性为“逆时针”，【次】为“5”，如图7-22所示。图7-22设置旋转动画（4）再次测试观看影片，篮球的运动真实了，但是发现篮球在穿越“球网”的时候球网没有任何的动作，这是不符合实际情况的，如图7-23所示。第13帧处篮球的位置第14帧处篮球的位置图7-23篮球穿越效果（5）通常情况下，球在穿越球网的时候，球网都会由于惯性和自身弹性反弹起来。所以需要在“球网”图层的第13帧、第14帧和第15帧处插入关键帧，并调整第14帧处的球网形状，最后得到如图7-24所示的效果。第13帧处球网的形状第14帧处球网的形状第15帧处球网的形状图7-24球网动态效果（6）保存测试影片，可以看到一个十分真实、完美的街头篮球效果制作完成。7.1.4课堂练习──制作“花朵气泡”请同学们使用引导层动画制作一个花朵气泡随风飞舞的动画效果，如图7-25所示。1、导入素材布置场景。图7-25最终设计效果（2）执行【文件】/【导入】/【打开外部库】菜单命令，打开教学资源中的“素材\第7讲\花朵气泡\花朵气泡.fla”文件，将其中的所有内容都复制粘贴到当前的【库】面板中，如图7-26所示。（3）新建图层并重命名图层，并在所有图层的第120帧处插入帧，直至图层效果如图7-27所示。图7-26打开外部库图7-27图层效果（4）将“背景.png”拖入到“背景”图层上，设置其位置坐标x、y都为“0”，宽高为“800px×518px”，如图7-28所示。（5）将“前景.png”拖入到“前景”图层上，设置其位置坐标x、y分别为“－25”、“250”，宽高为“933px×250px”如图7-29所示。图7-28设置背景图片图7-29设置前景图片2、制作气泡飘动效果。（1）为了操作方便，将“前景”图层隐藏，然后在“气泡1路径”和“气泡2路径”图层上绘制如图7-30所示的引导线。气泡1引导线气泡2引导线图7-30绘制路径曲线（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）保存测试影片，一个美丽梦幻的花朵气泡动画效果制作完成。7.2引导层动画提高通过前面一节课的学习，相信同学们已经掌握了引导层动画的创建方法和设计原理，在本小节中，将使用多层引导层动画来制作复杂的Flash动画。7.2.1知识点讲解观察生活中可以用引导层动画来表达创意的事物。使用引导层动画来模拟表达您的创意。收集素材丰富您的作品。在制作过程中不断完善自己的作品。7.2.2范例解析──制作“蜓桥相会”在中国流传着一个神话——隔着长长的银河住着美丽的织女和忠厚的牛郎。他们彼此深爱对方，但每年只能通过喜鹊搭桥才能见一面。为了他们能多见上一面，可爱的蜻蜓也搭起了一座“蜓桥”，这样就成就了另一个神话——“蜓桥相会”！使用Flash制作该效果的设计思路及效果如图7-34所示。图7-34思路及效果1、导入素材制作背景。（1）新建一个Flash文档，设置文档【尺寸】为“700px×400px”，【帧频】为“24fps”，其他属性保持默认参数。（2）执行【文件】/【导入】/【打开外部库】菜单命令，打开教学资源中的“素材\第7讲\蜓桥相会\蜓桥相会.fla”文件，如图7-35所示。将其中的影片剪辑元件“背景”、“牛郎”、“蜻蜓”、“织女”复制粘贴到当前的【库】面板中。（3）将默认“图层1”重命名为“背景”层，将“背景”元件拖入舞台，并确认其宽高为“700px×400px”，位置坐标x、y都为“0”，如图7-36所示。图7-35打开外部库图7-36拖入背景2、制作飞舞效果。（1）在“背景”图层上新建图层并重命名为“蜓桥”，在其上绘制如图7-37所示的引导线。图7-37绘制引导线该路径的重要特点是曲线的开始部分和结尾部分都是直线，而中间在场景中的部分为曲线，这样绘制的好处在于能更好的控制被引导元件的旋转方向。（2）选中绘制的引导线，按住Ctrl键再复制出两条，得到如图7-38所示的效果。（3）选中3条曲线，按F8快捷键将其转化为影片剪辑元件，并重命名为“飞舞”。（4）单击按钮进入元件内部进行编辑，选中舞台中最下面的曲线，将其分散到图层，再选中中间的曲线，将其分散到图层。（5）依次从上到下重命名图层为“路径上”层、“路径中”层、“路径下”层，并在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帧之间创建动作补间动画，并将“路径上”图层转化为引导层，将“蜻蜓上”图层转化为其被引导层。（10）选中“蜻蜓上”图层的第1帧，在【属性】面板中勾选【调整到路径】选项。（11）至此“蜻蜓上”的引导层动画就制作完成了，使用同样的方法制作“蜻蜓中”和“蜻蜓下”的动画。设置元件位置的时候一定要注意将元件的“变形中心”放到路径上，如图7-40和图7-41所示。如果变形中心未在路径上，引导层动画将创建失败。3、制作蜓桥效果。（1）返回主场景，选中“飞舞”元件，如图7-42所示，按F8快捷键将其转化为影片剪辑元件并命名为“蜓桥”。（2）双击“蜓桥”元件进入元件内部进行编辑，在“图层1”的第200帧处插入帧。