flash基础教程第七章.ppt





《flash基础教程第七章.ppt》由会员分享,可在线阅读,更多相关《flash基础教程第七章.ppt(41页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、学习目标学习目标 第第7 7讲讲 制作引导层动画l掌握引导层动画模拟篮球运动的效果掌握引导层动画模拟篮球运动的效果。l掌握引导层动画制作气泡飘动的效果掌握引导层动画制作气泡飘动的效果。l掌握使用引导层动画表达艺术创意的方法掌握使用引导层动画表达艺术创意的方法。l掌握使用多层引导动画模拟鱼儿游动的效果掌握使用多层引导动画模拟鱼儿游动的效果。7.1 引导层动画原理 7.2 引导层动画提高7.3 课后作业本章大纲本章大纲7.1 引导层动画原理 7.1.1 知识点讲解 引导层动画的创建方法和原理都是十分简单的,只要通过下面的引导层动画的创建方法和原理都是十分简单的,只要通过下面的学习,读者可以轻松掌握
2、学习,读者可以轻松掌握。图图7-1 两个图层的引两个图层的引 一、创建引导层和被引导层一、创建引导层和被引导层。图图7-2 创建引导层创建引导层 图图7-3 多层被引导多层被引导 二、引导层动画原理。二、引导层动画原理。图图7-4所示为被引导层上小球在第所示为被引导层上小球在第1帧和第帧和第50帧处的位置。帧处的位置。图图7-5所示为小球的全部运动轨迹,通过观察可以很清晰地发现所示为小球的全部运动轨迹,通过观察可以很清晰地发现引导层的引导功能引导层的引导功能小球在第小球在第1帧的位置帧的位置 小球在第小球在第50帧的位置帧的位置 图图7-4 设置小球起始位置设置小球起始位置 图图7-5 小球的
3、运动小球的运动 引导层上的路径在发布后,并不会显示出来,只是作为被引导层上的路径在发布后,并不会显示出来,只是作为被引导元素的运动轨迹。在被引导层上被引导的图形必须是引导元素的运动轨迹。在被引导层上被引导的图形必须是元件,而且必须创建动作补间动画,同时还需要将元件在元件,而且必须创建动作补间动画,同时还需要将元件在关键帧处的关键帧处的“变形中心变形中心”设置到引导层上的路径上,才能设置到引导层上的路径上,才能成功创建引导层动画。成功创建引导层动画。7.1.2 范例解析(一)创建引导层动画练习 请同学们在老师的带领下进行创建引导层动画练习,并完成以请同学们在老师的带领下进行创建引导层动画练习,并
4、完成以下操作下操作。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帧处汽车元件
5、帧处汽车元件的位置如图的位置如图7-8所示。所示。变形中心图图7-8 放置汽车位置放置汽车位置 7、在、在“图层图层2”的第的第1帧第帧第80帧之间创建动作补间动画。帧之间创建动作补间动画。8、用鼠标右键单击、用鼠标右键单击“图层图层1”,在弹出的快捷菜单中选择,在弹出的快捷菜单中选择【引导层引导层】命令,将命令,将“图层图层1”转化为引导层,然后将转化为引导层,然后将“图层图层2”拖到拖到“图层图层1”的下面,将其转化为被引导层,此时图层效果如图的下面,将其转化为被引导层,此时图层效果如图7-9所示。所示。图图7-9 创建引导层动画创建引导层动画 9、按、按Ctrl+Enter快捷键,测试播
6、放影片,发现汽车的运动效果快捷键,测试播放影片,发现汽车的运动效果是错误的。是错误的。10、关闭测试播放器,然后选中、关闭测试播放器,然后选中“图层图层2”的第的第1帧,在帧,在【属性属性】面板中勾选面板中勾选【调整到路径调整到路径】选项,如图选项,如图7-10所示。再测试播放影所示。再测试播放影片,发现汽车的运动效果正确片,发现汽车的运动效果正确。图图7-10 勾选勾选【调整到路径调整到路径】选项选项 7.1.3 范例解析(二)制作“街头篮球”篮球是目前世界上最受欢迎的体育项目之一,相信读者对其也十篮球是目前世界上最受欢迎的体育项目之一,相信读者对其也十分熟悉。利用动画来制作投篮效果就需要使
7、用引导层动画来完成,其分熟悉。利用动画来制作投篮效果就需要使用引导层动画来完成,其设计思路及效果如图设计思路及效果如图7-11所示所示。图图7-11 设计思路及效果设计思路及效果 1、打开模板进行分析。、打开模板进行分析。(1)由于本案例讲解的重点是引导层动画,所以该动画中的场景、)由于本案例讲解的重点是引导层动画,所以该动画中的场景、道具、人物等都由本书提供,并给出制作模板,读者只需完成道具、人物等都由本书提供,并给出制作模板,读者只需完成引导层动画的相关部分。打开教学资源中的引导层动画的相关部分。打开教学资源中的“素材素材第第7讲讲街头街头篮球篮球街头篮球街头篮球.fla”文件,效果如图文
8、件,效果如图7-12所示所示。图图7-12 打开模板打开模板 双双击击场场景景中中的的“男男孩孩”元元件件进进入入其其元元件件内内部部,观观察察前前5帧帧的的动动画画,如如图图7-13所所示示。可可以以发发现现,当当在在第第4帧帧时时,男男孩孩手手中中的的篮篮球球消消失失了了,在在第第5帧帧处处,男男孩孩做做出出了了一一个个投投篮篮的的动动作作,从从而而可可以以推推断断出出,引引导导层层动动画画应应该该从从第第4帧帧开开始始,并并且且篮篮球球的的位位置置要要根根据据第第4帧帧男男孩孩的的手手的的位位置置来来确确定定。第第1帧帧 第第2帧帧 第第3帧帧 第第4帧帧 第第5帧帧 图图7-13 男孩
9、元件的前男孩元件的前5帧动画帧动画(2)返回主场景,观察整个舞台如图)返回主场景,观察整个舞台如图7-14所示,可以发现篮球在运所示,可以发现篮球在运动过程中,要经过动过程中,要经过“男孩的手男孩的手”、“篮筐篮筐”、“球网球网”这这3个图形。个图形。所以根据视角分析,可以判定引导层应该创建在所以根据视角分析,可以判定引导层应该创建在“男孩男孩”、“篮篮筐前沿筐前沿”、“球网球网”这这3个元件所在图层的下面,而在个元件所在图层的下面,而在“篮板篮板”、“地板地板”、“篮筐后沿篮筐后沿”这这3个元件所在图层的上面个元件所在图层的上面。男孩的手篮筐前沿球网篮板篮筐后沿图图7-14 图层分析图层分析
10、 2、制作引导层动画。(1)将所有图层锁定,在“篮板”图层之上新建图层并重命名为“引导层”,根据前面的分析,在时间轴的第4帧处插入关键帧,如图7-15所示。(2)在“引导层”的第4帧处,利用【直线】工具和【选择】工具绘制出篮球运动的轨迹如图7-16所示。读者在绘制篮球路径曲线时,应尽量发挥想象,将篮球读者在绘制篮球路径曲线时,应尽量发挥想象,将篮球的真实飞行轨迹描绘出来。的真实飞行轨迹描绘出来。图图7-15 新建引导层新建引导层 图图7-16 绘制引导线绘制引导线(3)在)在“引导层引导层”图层下面新建图层并重命名为图层下面新建图层并重命名为“篮球篮球”层,在第层,在第4帧处插入关键帧,然后将
11、帧处插入关键帧,然后将“篮球篮球”元件从元件从【库库】面板中拖动到面板中拖动到“篮球篮球”图层上,如图图层上,如图7-17所示所示。篮球图层效果图层效果 拖入篮球拖入篮球 图图7-17 创建篮球图层创建篮球图层(4)在)在“篮球篮球”图层的第图层的第30帧处插入关键帧,在第帧处插入关键帧,在第4帧第帧第30帧之帧之间创建动作补间动画。间创建动作补间动画。(5)将)将【贴近至对象贴近至对象】按钮按下,利用按钮按下,利用【选择选择】工具设置篮球在第工具设置篮球在第4帧的位置到引导线的最左端,设置第帧的位置到引导线的最左端,设置第30帧的位置到引导线的最帧的位置到引导线的最右端,并确保右端,并确保“
12、篮球篮球”元件的元件的“变形中心变形中心”一定要在引导线上,一定要在引导线上,效果如图效果如图7-18所示。所示。(6)用用鼠鼠标标右右键键单单击击“引引导导层层”图图层层,在在弹弹出出的的快快捷捷菜菜单单中中选选择择【引导层引导层】命令,将其转化为引导层。命令,将其转化为引导层。(7)将)将“篮球篮球”图层拖动到图层拖动到“引导层引导层”图层的下面,当图层的下面,当“引导层引导层”图层的图标由变为状态时释放,将其转化为被引导层,效果如图层的图标由变为状态时释放,将其转化为被引导层,效果如图图7-19所示所示。第第4帧处篮球的位置帧处篮球的位置 第第30帧处篮球的位置帧处篮球的位置 图图7-1
13、8 设置篮球的位置设置篮球的位置 图图7-19 创建引导层动画创建引导层动画 创建引导层动画完毕,测试影片如果发现篮球并未按照引导层上的路径运动,则可以重点检查“篮球”元件的“变形中心”是否在引导线上。3、完善引导层动画。、完善引导层动画。(1)按)按Ctrl+Enter快捷键测试观看影片,发现篮球的运动过程显得快捷键测试观看影片,发现篮球的运动过程显得十分僵硬,没有速率变化,和真实的篮球运动差别很大,需要对十分僵硬,没有速率变化,和真实的篮球运动差别很大,需要对其进行缓动设置。其进行缓动设置。(2)选选中中“篮篮球球”图图层层上上的的第第4帧帧,在在【属属性性】面面板板中中单单击击按按钮钮,
14、如如图图7-20所所示示,打打开开【自自定定义义缓缓入入/缓缓出出】对对话话框框,将将曲曲线线调调整整至至如如图图7-21所示的效果所示的效果 图图7-20 帧帧【属性属性】面板面板 图图7-21 调整篮球运动速率调整篮球运动速率(3)通常情况下,篮球在被投射出去之后,还会具有相对于投球人)通常情况下,篮球在被投射出去之后,还会具有相对于投球人手的反转运动,所以在手的反转运动,所以在【属性属性】面板中设置面板中设置【旋转旋转】属性为属性为“逆逆时针时针”,【次次】为为“5”,如图,如图7-22所示。所示。图图7-22 设置旋转动画设置旋转动画(4)再次测试观看影片,篮球的运动真实了,但是发现篮
15、球在穿越)再次测试观看影片,篮球的运动真实了,但是发现篮球在穿越“球网球网”的时候球网没有任何的动作,这是不符合实际情况的,的时候球网没有任何的动作,这是不符合实际情况的,如图如图7-23所示。所示。第第13帧处篮球的位置帧处篮球的位置 第第14帧处篮球的位置帧处篮球的位置 图图7-23 篮球穿越效果篮球穿越效果(5)通常情况下,球在穿越球网的时候,球网都会由于惯性和自身)通常情况下,球在穿越球网的时候,球网都会由于惯性和自身弹性反弹起来。所以需要在弹性反弹起来。所以需要在“球网球网”图层的第图层的第13帧、第帧、第14帧和第帧和第15帧处插入关键帧,并调整第帧处插入关键帧,并调整第14帧处的
16、球网形状,最后得到如图帧处的球网形状,最后得到如图7-24所示的效果。所示的效果。第第13帧处球网的形状帧处球网的形状 第第14帧处球网的形状帧处球网的形状 第第15帧处球网的形状帧处球网的形状 图图7-24 球网动态效果球网动态效果(6)保存测试影片,可以看到一个十分真实、完美的街头篮球效果)保存测试影片,可以看到一个十分真实、完美的街头篮球效果制作完成。制作完成。7.1.4 7.1.4 课堂练习制作“花朵气泡”请同学们使用引导层动画制作一个花朵气泡随风飞舞的动画效果,如图7-25所示。1、导入素材布置场景、导入素材布置场景。图图7-25 最终设计效果最终设计效果(2)执行)执行【文件文件】
17、/【导入导入】/【打开外部库打开外部库】菜单命令,打开教学菜单命令,打开教学资源中的资源中的“素材素材第第7讲讲花朵气泡花朵气泡花朵气泡花朵气泡.fla”文件,将其中的文件,将其中的所有内容都复制粘贴到当前的所有内容都复制粘贴到当前的【库库】面板中,如图面板中,如图7-26所示。所示。(3)新建图层并重命名图层,并在所有图层的第)新建图层并重命名图层,并在所有图层的第120帧处插入帧,帧处插入帧,直至图层效果如图直至图层效果如图7-27所示。所示。图图7-26 打开外部库打开外部库 图图7-27 图层效果图层效果(4)将)将“背景背景.png”拖入到拖入到“背景背景”图层上,设置其位置坐标图层
18、上,设置其位置坐标x、y都为都为“0”,宽高为,宽高为“800px518px”,如图,如图7-28所示。所示。(5)将)将“前景前景.png”拖入到拖入到“前景前景”图层上,设置其位置坐标图层上,设置其位置坐标x、y分别为分别为“25”、“250”,宽高为,宽高为“933px250px”如图如图7-29所所示。示。图图7-28 设置背景图片设置背景图片 图图7-29 设置前景图片设置前景图片 2、制作气泡飘动效果。、制作气泡飘动效果。(1)为了操作方便,将)为了操作方便,将“前景前景”图层隐藏,然后在图层隐藏,然后在“气泡气泡1路径路径”和和“气泡气泡2路径路径”图层上绘制如图图层上绘制如图7
19、-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帧的位置帧
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- flash 基础教程 第七

限制150内