《Flash制作—关于形状补间动画制作》由会员分享,可在线阅读,更多相关《Flash制作—关于形状补间动画制作(43页珍藏版)》请在金锄头文库上搜索。
1、FLASH8 学习目标 第8章 制作形状补间动画 l掌握形状补间动画的原理和创建方法 。 l使用形状补间动画表现事物变化的过程 。 l掌握形状提示点的原理和使用方法 。 l使用形状提示点动画表现舌头摆动效果的方法 。 5.1 形状补间动画原理 5.2 形状提示点原理 5.3 课后作业 本章大纲 5.1 形状补间动画原理 5.1.1 知识点讲解 形状补间动画是动画制作中一种常用的动画制作方法,它可以补 间形状的位置、大小和颜色等,使用形状补间可以制作出千变万化的 动画效果。 一、形状补间动画的原理。 形状补间动画可以实现两个矢量图形之间颜色、形状、位 置的变化,如图5-1所示 。 图5-1 形状
2、补间动画原理 绿色渐变红色渐变 舞台左边舞台右边 小苹果大苹果 颜色补间 位置补间 形状补间 二、创建形状补间动画 。 同一图层上,在绘制着不同矢量图形的两关键帧之间任选1帧 ,然后再在【属性】面板上的【补间】下拉列表中选择【形状】选 项,如图5-2所示,就可创建一个形状补间动画 。 图5-2 创建形状补间动画 三、认识形状补间动画的属性面板。 Flash 8的【属性】面板随选定的对象不同而发生相应的变化 。当建立了一个形状补间动画后,单击时间轴,其【属性】面板如 5-2所示。 其中经常使用的选项有如下两种 : (1)【缓动】选项 。在【缓动】选项中输入相应的数值,形状 补间动画则会随之发生相
3、应的变化 。(2)【混合】选项 。在【混 合】选项中包含“角形”和“分布式”两个参数。 5.1.2 范例解析(一)创建形状补间动画练习 请同学们在老师的带领下对形状补间动画的创建方法和原理进 行进一步的熟悉,并跟随以下要求进行操作训练 。 1、新建一个Flash文档,然后利用【椭圆】工具在舞台上绘制一个 圆形,并在【属性】面板中设置圆的颜色为“#00FF00”,宽高为 “7px7px”,如图5-3所示 。 2、在第20帧处插入关键帧,然后以圆为基点绘制一片树叶,如图5- 4所示。 图5-3 绘制圆形 图5-4 绘制树叶 3、在第20帧处,首先删除“圆”,然后填充树叶,效果如图5-5所 示。 #
4、FFFFFF #339900 【颜色】面板 树叶效果 图5-5 填充树叶 4、在第40帧处插入关键帧,然后调节树叶的颜色效果如图5-6所示 【颜色】面板 树叶效果 #FFFFFF#CC9900 5、在第60帧处将树叶移出舞台。 6、选中第1帧,然后在【属性】面板的【补间】下拉列表中选择“ 形状”选项,如图5-7所示。则创建出第1帧第20帧之间的形状补 间动画 。 图5-7 创建补间动画 7、使用相同的方法,在第20帧、第40帧两处分别创建形状补间动 画。 8、按Ctrl+Enter 快捷键测试播放影片,观看这个由小圆成长为一 片绿叶,再枯黄,再凋零的动画。 9、关闭测试播放器,选中第40帧,然
5、后在属性面板中分别设置【 缓动】为“100100”之间不同的值,然后分别测试影片,观 看树叶凋落动画的速率变化 。 5.1.3 范例解析(二)制作“浪漫绽放” 花是带给人们幸福与浪漫的精灵。本例将使用形状补间动画来制 作一个“浪漫的绽放”动画,带领读者来一同体验自己绘制出的浪漫感 觉,其设计思路及效果如图5-8所示 。 图5-8 制作思路及效果 1、制作叶片的生长 。 (1)打开教学资源中“素材第5讲浪漫的绽放浪漫的绽放-模板.fla” 文件,场景效果如图5-9所示。 (2)在“背景”图层之上新建并重命名图层,直至图层效果如图5-10 所示。 图5-9 模板场景 图5-10 图层效果 (3)选
6、择【矩形】工具,在【属性】面板中设置【笔触颜色】为“无 ”,【填充颜色】为“#37C030”,在“叶片1”图层上绘制一个宽高为 “5px5px”的矩形,并将其置于花盆的后面,效果如图5-11所示 。 (4)在“叶片1”图层的第10帧处插入关键帧,利用【选择】工具调整 第10帧处“矩形”的形状如图5-12所示。 (5)在“叶片1”图层的第20帧处插入关键帧,利用【选择】工具调整 第20帧处“矩形”的形状如图5-13所示。 矩形 图5-11 第1帧叶片形状 图5-12 第10帧叶片形状 图5-13 第20帧叶片形状 (6)在第1帧第10帧之间、第10帧第20帧之间创建形状补间动 画,这样一片叶子的
7、生长过程就制作完成。 (7)使用同样的方法在图层“叶片2”、“叶片3”、“叶片4”、“叶片5” 、“叶片6”上分别制作其他5片叶子的生长,完成叶片的生长动画 。此时的场景效果如图5-14所示,【时间轴】效果如图5-15所示 。 叶片6 叶片2 叶片4 叶片5 叶片3 叶片1 图5-14 完成叶片制作 在制作叶片生长动画效果时,注意调整叶 片生长的先后顺序,尽量使叶片生长看起来贴近 自然。每个叶片的生长时间也可根据叶片大小有 所不同。建议将制作完成的图层进行锁定,以免 产生误操作。 图5-15 【时间轴】效果一 2、制作花梗的生长。 (1)在“叶片6”图层之上新建一个图层并重命名为“花梗”图层。
8、 (2)在“花梗”图层的第65帧处插入关键帧。 (3)选择【矩形】工具,在【属性】面板中设置【笔触颜色】为“ 无”,【填充颜色】为“#CCE492”,在“花梗”图层的第65帧处 绘制一个宽高为“5px5px”的矩形,而后将其置于花盆的后面 ,效果如图5-16所示。 (4)利用【选择】工具调整矩形的形状如图5-17所示。 (5)在“花梗”图层的第105帧处插入关键帧,利用【选择】工具调 整第105帧处“花梗”的形状如图5-18所示。 (6)在第65帧第105帧之间创建形状补间动画,这样花梗的生长 过程就制作完成了 。 花梗 图5-16 原始矩形 图5-17 花梗的原始形状 图5-18 第105帧
9、花梗形状 3、制作花瓣的生长 。 (1)在“花梗”图层之上新建并重命名图层,直至图层效果如图5-19 所示。 (2)在“花瓣1”图层的第105帧处插入关键帧。 (3)选择【椭圆】工具,在【属性】面板中设置【笔触颜色】为“ 无”,【填充颜色】为“#F997DC”,在“花瓣”图层的第105帧处 绘制一个宽高为“1.3px1.1px”的椭圆,并将其置于花梗顶端花 苞的上面,效果如图5-20所示 。 椭圆 图5-19 图层效果 图5-20 第105帧花瓣形状 在绘制花瓣的原始形状时,需要将其放置在花苞 上并适当调整位置,使得花开得更自然,也达到掩盖 花苞的目的 。 (4)在“花瓣1”图层的第135帧处
10、插入关键帧,利用【选择】工具 调整第135帧处“花瓣”的形状如图5-21所示。 (5)在第105帧第135帧之间创建形状补间动画,这样一片花瓣 的生长过程就制作完成。 (6)使用同样的方法在图层“花瓣2”、“花瓣3”、“花瓣4”、“花瓣 5”、“花瓣6”上分别制作其他5片花瓣的生长,完成花瓣的生长 动画,效果如图5-22所示。 图5-21 第135帧花瓣形状 花瓣4 花瓣5 花瓣6 花瓣3 花瓣1 花瓣2 图5-22 完成制作 (7)最终的场景效果如图5-23所示,时间轴效果如图5-24所示 。 图5-23 最终场景效果 图5-24 制作完成后的【时间轴】效果 (8)保存测试影片,一株美丽的花
11、儿浪漫绽放的动画效果制作完成 。 5.1.4 课堂练习制作“魔幻扑克” 请同学们自己动手制作一个扑克变幻的动画,其效果如图5-25 所示 。 1、新建一个Flash文档,设置文档【尺寸】为“500px353px”,文 档其他属性使用默认参数 。 图5-25 魔幻扑克效果 2、执行【文件】/【导入】/【打开外部库】菜单命令,将教学资源 中的“素材第5讲魔幻扑克魔幻扑克-素材.fla”文件打开,将外 部库里的元件和图片复制到当前库中,效果如图5-26所示。 3、将【库】面板中的“背景”位图拖入场景中,设置其宽高为 “500px353px”,并相对舞台居中对齐,效果如图5-27所示。 图5-26 【
12、库】面板 图5-27 导入背景图片 4、将“背景”图层锁定,在“背景”图层上新建并重命名图层,直到 图层效果如图5-28所示,并在所有图层的第20帧处插入帧。 5、选择“红桃2参考”图层,将【库】面板中的“红桃2参考图”图形 元件拖入到舞台中,并相对舞台居中对齐。在【属性】面板中 设置其【Alpha】参数为“50%”,效果如图5-29所示。 图5-28 设置大小和位置 图5-29 拖入“红桃2参考图” 6、根据参考图在各个图层上绘制花色为“红桃2”纸牌各个部分的形 状,如图5-30所示。 图5-30 绘制红桃2 其中【字体】为“Bookman Old Style”(读者可以设 置为自己喜欢的字
13、体或者自行购买外部字体库)。 7、在“花色上”、“花色中”、“花色下”、“数字上”、“数字下”图层 的第20帧处按F7 快捷键插入空白关键帧。使用同样的方法绘制 花色为“黑桃A”的纸牌,效果如图5-31所示。 8、将“数字下”、“数字上”图层的第1帧和第20帧处的数字打散。 9、分别在“花色上”、“花色中”、“花色下”、“数字上”、“数字下” 图层的第1帧第20帧之间创建“形状补间“动画,时间轴效果如 图5-32所示 。 图5-31 绘制黑桃A 图5-32 绘制倾斜为45的线条 10、保存测试影片,一个简单而又神奇的扑克变幻动画制作完成 。 5.2 形状提示点原理 当用形状补间动画制作一些较为
14、复杂的变形动画时,常常会使画 面变得混乱,根本达不到用户想要的变化过程,这时就需要使用形状 提示点来进行控制。 5.2.1 知识点讲解 一、添加形状提示。 单击形状补间动画的开始帧,执行【修改】/【形状】/【添加形状 提示】菜单命令。这样在形状上就会增加一个带字母的红色圆圈 ,相应地在结束帧的形状上也会增加形状提示符,如图5-33所示 。 分别将这两个形状提示符安放到适当的位置时,起始关键帧上的 形状提示点为黄色,结束关键帧的形状提示点为绿色,如图5-34 所示 第1帧 第10帧 显示为黄色 显示为绿色 图5-33 未调节 图5-34 调节成功 二、形状提示原理 。 继续添加形状提示点,并调节
15、提示点位置,此时图形变化的过 程如图5-35所示 。 图5-35 使用形状提示 图5-36所示为未添加形状提示点的变化过程,经过观察可以清 楚的了解形状提示的功能和原理,即形状提示点用于识别起始形状 和结束形状中相对应的点,并用字母a到z来表示 。 图5-36 未使用形状提示 5.2.2 范例解析(一)使用形状提示点练习 请同学们在老师的带领下对形状提示点的创建方法和原理进行进 一步的熟悉,并跟随以下要求进行操作训练。 1、打开教学资源中“素材第5讲形状提示点练习飞翔的蝙蝠.fla”文件 。 2、分别在第1帧第10帧之间,第11帧第20帧之间,第21帧第 30帧之间,第31帧第40帧之间创建形状补间动画,拖动时间轴 观察图形的渐变效果,如图5-37所示。 图5-37 形状补间效果 3、选中“图层1”的第1帧,执行【修改】/【形状】/【添加形状提 示】菜单命令添加一个形状提示点,并将其拖动到蝙蝠的翅 膀上,如图5-38所示。选中第10帧,将提示点也拖动到蝙蝠 的翅膀上,此时形状提示点变为绿色,如图5-39所示。 通过观察