9512.net
甜梦文库
当前位置:首页 >> 其它课程 >>

07



第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-5 小球的运动

图7-4 设置小球起始位置

引导层上的路径在发布后,并不会显示出来,只是作为被 引导元素的运动轨迹。在被引导层上被引导的图形必须是 元件,而且必须创建动作补间动画,同时还需要将元件在 关键帧处的“变形中心”设置到引导层上的路径上,才能 成功创建引导层动画。

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-19 创建引导层动画

图7-18 设置篮球的位置

创建引导层动画完毕,测试影片如果发现篮球并未按 照引导层上的路径运动,则可以重点检查“篮球”元 件的“变形中心”是否在引导线上 。 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所示 。

图7-25 最终设计效果

1、导入素材布置场景 。

(2)执行【文件】/【导入】/【打开外部库】菜单命令,打开教学 资源中的“素材\第7讲\花朵气泡\花朵气泡.fla”文件,将其中的 所有内容都复制粘贴到当前的【库】面板中,如图7-26所示。 (3)新建图层并重命名图层,并在所有图层的第120帧处插入帧, 直至图层效果如图7-27所示。

图7-27 图层效果 图7-26 打开外部库

(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 3 9 所 示。

图7-38 复制线条

图7-39 设置图层

(6)这里设计让蜻蜓分三路进入舞台,其中“路径上”和“路径 下”的“蜻蜓”从舞台左边向右边飞,而“路径中”的“蜻蜓 ”从舞台右边向左边飞。 (40在“路径中”图层上面新建图层并重命名为“蜻蜓上”层,将 “蜻蜓”元件拖入到“蜻蜓上”图层上,并设置其第1帧的位置 如图7-40所示。 (80在“蜻蜓上”层的第220帧处插入关键帧,并设置其位置到曲 线的最右端,如图7-41所示 。

图7-40 设置第1帧蜻蜓的位置

图7-41 设置第220帧蜻蜓的位置

设置元件位置的时候一定要注意将元件的“变形中心”放 到路径上,如图7-40和图7-41所示。如果变形中心未在路 径上,引导层动画将创建失败。
(9)在“蜻蜓上”图层的第1帧~第220帧之间创建动作补间动画 ,并将“路径上”图层转化为引导层,将“蜻蜓上”图层转化 为其被引导层。

(10)选中“蜻蜓上”图层的第1帧,在【属性】面板中勾选【调
整到路径】选项。 (11)至此“蜻蜓上”的引导层动画就制作完成了,使用同样的方

法制作“蜻蜓中”和“蜻蜓下”的动画。

3、制作蜓桥效果。 (1)返回主场景,选中“飞舞”元件,如图7-42所示,按F8快捷 键将其转化为影片剪辑元件并命名为“蜓桥”。 (2)双击“蜓桥”元件进入元件内部进行编辑,在“图层1”的第 200帧处插入帧。

图7-42 选中“飞舞”元件

(3)选中“飞舞”元件,按Ctrl+C快捷键复制该元件,在第20帧 处插入关键帧,并在该帧处按Ctrl+Shift+V快捷键粘贴该元件, 使用相同方法,每隔20帧插入关键帧并粘贴该元件直到第200帧 ,图层效果如图7-43所示 。

图7-43 图层效果一

(4)选择第200帧,按F9快捷键打开【动作—帧】面板,输入代码 “stop();”,如图7-44所示 。

图7-44 输入代码

(5)返回主场景,按Ctrl+Enter快捷键测试观察影片,一个美丽的 蜓桥效果就完成了 。

图7-45 制作蜓桥

4、制作牛郎织女动画。 (1)在“蜓桥”图层上面新建图层并重命名图层,在所有图层的 第320帧处插入帧,得到如图7-46所示的效果。 (2)在“人物路径”图层上绘制一条和“蜓桥”曲线相似的引导 线如图7-47所示 。

图7-46 图层效果二

图7-47 绘制人物路径

(3)在“牛郎”和“织女”图层上的第220帧处插入关键帧,将 【库】面板中的“牛郎”和“织女”元件分别拖入到“牛郎”和 “织女”图层上,并设置其位置如图7-48所示 。

图7-48 设置“牛郎”和“织女”第220帧的位置

(4)在图层的第320帧处插入关键帧,并设置“牛郎”和“织女 ”在该帧的位置如图7-49所示 。

图7-49 设置“牛郎”和“织女”第320帧的位置

(5)在“牛郎”和“织女”图层上的第220帧~第320帧之间创建 动作补间动画,再将“人物路径”图层转化为引导层,将“牛 郎”和“织女”图层转化为其被引导层。 (6)选中“牛郎”图层的第320帧,按F9快捷键打开【动作—帧 】面板,输入代码“stop();”。 (7)测试观看影片,一个“蜓桥相会”的美丽动画就制作完成了 。

7.2.3

课堂练习──制作“鱼儿荷间戏 ”

请同学们跟随本例使用多层引导动画来创造一副“鱼儿荷间戏 ”的动人画面,动画效果如图7-50所示。

图7-50 最终设计效果

1、新建一个Flash文档,设置文档【尺寸】为“520px×740px”, 【帧频】为“30fps”,其他属性保持默认参数 。

(2)执行【文件】/【导入】/【打开外部库】命令将教学资源中的“ 素材\第7讲\鱼儿荷间戏\鱼儿荷间戏-素材.fla”文件打开,如图7-51 所示。并将其中的影片剪辑元件“鳍”、“身”、“头”以及图片 “荷塘-背景.jpg”、“荷塘-前景.jpg”复制粘贴到当前的【库】面板 中。 (3)将“荷塘-背景.jpg”拖入到舞台中,设置图片大小为 “520px×740px”,相对舞台居中对齐,效果如图7-52所示。 (4)绘制如图7-53所示的路径 。

起始端

结束端

图7-51 打开外部库

图7-52 导入背景

图7-53 引导路径

5、利用【库】面板中的“鳍”、“身”“、头”3个元件在引导 线的起始端,制作出鱼的效果如图7-54所示。 鱼儿的身体由18个“身”元件和3个“鳍”元件构成, 元件的【宽度】和【长度】以及【Alpha】值都有个 递减的效果,读者可以按照自己的观点来进行变化, 制作出自己喜欢的“鱼儿”。

放大观察 整体观察

图7-54 起始位置

6、鱼儿制作完成后,将构成鱼儿的元件全部分散到图层。 7、在第600帧处插入关键帧,并将“鱼儿”移动到引导线的末端 ,效果如图7-55所示。

整体观察

放大观察

图7-55 结束位置

8、为组成“鱼儿”的元件添加引导层动画,图层效果如图7-56所示 。

图7-56 图层效果三

9、为组成鱼儿的元件设置“调整到路径”,效果如图7-57所示 。

调整前

调整后

图7-57 动画效果

10、利用【库】中的“荷塘-前景.png”图片来添加前景。 11、保存测试影片,一个鱼儿穿梭于荷间的动画就制作完成了。

7.3

课后作业

一、操作题 1、制作如图7-58所示的沿路经不断跳动的小球动画 。

图7-58 跳动的效果

2、请同学们根据范例讲解——制作“街头篮球”的制作思路,制作 发射炮弹的效果,如图7-59所示 。

图7-59 大炮效果

3、制作秋天黄叶被风吹落的动画,如图7-60所示 。

图7-60 秋天黄叶被风吹落的动画效果

二、思考题
1、引导层动画的原理是什么? 2、制作引导层动画至少需要几个图层?

3、勾选【调整到路径】选项对引导层动画有什么影响?



更多相关文章:
07版Word页眉页脚的设置技巧
07版Word页眉页脚的设置技巧_简历_求职/职场_实用文档。07版Word页眉页脚的设置技巧,挺实用的,有用的着的可以下载下来看看。1.如何在同一文档中创建不同的页眉 ...
Word 2007 方框 打钩 正方形中间打钩
Word 2007 插入带方框的钩 方框 打钩 2010-07-22 10:53 WORD 2007 技巧:插入单选框和复选框,方框,对号,在方框内打勾 2010-05-13 21:36 WORD 2007 技巧:...
2013年《电算化会计》07任务-财务报表系统
2013年《电算化会计》07任务-财务报表系统_经济学_高等教育_教育专区。电大专科电算化会计形成性考核操作指导 07 任务 [考核要求] 以账套主管“11 王方”的身份...
STM32F407ZG的FLASH操作方法
STM32F407ZG的FLASH操作方法_计算机软件及应用_IT/计算机_专业资料。M4架构下的STM32F407 FLASH 的操作方法。最新的官方库函数STM32F407ZG 的 FLASH 操作方法凌凌...
《商务谈判》第07章在线测试
《西方经济学(微观)》第07... 1页 免费如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请点击此处进行反馈。 ...
SJW07-A电力专用纵向加密认证装置技术说明 (1)
SJW07-A 电力专用纵向加密认证装置技术说明 1 配置 1.1 产品外观 1.2 双网口增强型配置加密性能:千兆 360Mbps;百兆增强型:360Mbps;百兆普通型:15Mbps; 网络...
STM32F407-RCC配置
STM32F407-RCC配置_计算机硬件及网络_IT/计算机_专业资料。STM32F407时钟配置 RCC (Reset and Clock Control)配置 这里介绍 RCC 的 时钟控制功能在 STM32F103 ...
一部电脑同时装了office03和07,如何更改office03和07的默认打开方式
一部电脑同时装了office03和07,如何更改office03和07的默认打开方式_电脑基础知识_IT/计算机_专业资料。更改office03和07的默认打开方式同时...
07年专八真题及答案
07年专八真题及答案_英语考试_外语学习_教育专区 暂无评价|0人阅读|0次下载|举报文档 07年专八真题及答案_英语考试_外语学习_教育专区。2007 年英语专八试卷...
《电力工程概预算》第07章在线测试
《电力工程概预算》第07章在线测试_电力/水利_工程科技_专业资料 暂无评价|0人阅读|0次下载|举报文档 《电力工程概预算》第07章在线测试_电力/水利_工程科技_...
更多相关标签:
007    0755    07式军服    07怎么读    07什么意思    0731    m.nuomi.com@v    07怎么打    

All rights reserved Powered by 甜梦文库 9512.net

copyright ©right 2010-2021。
甜梦文库内容来自网络,如有侵犯请联系客服。zhit325@126.com|网站地图