Flash动画制作之—制作引导层动画PPT学习课件.ppt

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