05 制作形状补间动画

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