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