1、学习目标学习目标 第6课 灯笼变文字 掌握形状补间动画的原理和创建方法掌握形状补间动画的原理和创建方法 。 使用形状补间动画表现事物变化的过程使用形状补间动画表现事物变化的过程 。 掌握形状提示点的原理和使用方法掌握形状提示点的原理和使用方法 。 使用形状提示点动画表现舌头摆动效果的方法使用形状提示点动画表现舌头摆动效果的方法 。 6.1 形状补间动画原理 6.2 形状提示点原理 6.3 课后作业 本章大纲本章大纲 6.1 形状补间动画原理 6.1.1 知识点讲解 形状补间动画是动画制作中一种常用的动画制作方法，它可以补 间形状的位置、大小和颜色等，使用形状补间可以制作出千变万化的 动画效果。
2、 一、形状补间动画的原理。一、形状补间动画的原理。 形状补间动画可以实现两个矢量图形之间颜色、形状、位 置的变化，如图6-1所示 。 图图6-1 形状补间动画原理形状补间动画原理 绿色渐变 红色渐变 舞台左边 舞台右边 小苹果 大苹果 颜色补间 位置补间 形状补间 二、创建形状补间动画二、创建形状补间动画 。 同一图层上，在绘制着不同矢量图形的两关键帧之间任选同一图层上，在绘制着不同矢量图形的两关键帧之间任选1帧帧 ，然后再在，然后再在【属性属性】面板上的面板上的【补间补间】下拉列表中选择下拉列表中选择【形状形状】选选 项，如图项，如图6-2所示，就可创建一个形状补间动画所示，就可创建一个形状
3、补间动画 。 图图6-2 创建形状补间动画创建形状补间动画 三、认识形状补间动画的属性面板。三、认识形状补间动画的属性面板。 Flash 8的的【属性属性】面板随选定的对象不同而发生相应的变化面板随选定的对象不同而发生相应的变化 。当建立了一个形状补间动画后，单击时间轴，其。当建立了一个形状补间动画后，单击时间轴，其【属性属性】面板如面板如 6-2所示。所示。 其中经常使用的选项有如下两种其中经常使用的选项有如下两种 ： （1）【缓动缓动】选项选项 。在。在【缓动缓动】选项中输入相应的数值，形选项中输入相应的数值，形 状补间动画则会随之发生相应的变化状补间动画则会随之发生相应的变化 。（。（2
4、）【混合混合】选项选项 。在。在【 混合混合】选项中包含“角形”和“分布式”两个参数。选项中包含“角形”和“分布式”两个参数。 6.1.2 范例解析（一）创建形状补间动画练习 请同学们在老师的带领下对形状补间动画的创建方法和原理请同学们在老师的带领下对形状补间动画的创建方法和原理 进行进一步的熟悉，并跟随以下要求进行操作训练进行进一步的熟悉，并跟随以下要求进行操作训练 。 1、新建一个、新建一个Flash文档，然后利用文档，然后利用【椭圆椭圆】工具在舞台上绘制一个工具在舞台上绘制一个 圆形，并在圆形，并在【属性属性】面板中设置圆的颜色为“面板中设置圆的颜色为“#00FF00”，宽高，宽高 为“
5、为“7px7px”，如图，如图6-3所示所示 。 2、在第、在第20帧处插入关键帧，然后以圆为基点绘制一片树叶，如图帧处插入关键帧，然后以圆为基点绘制一片树叶，如图6- 4所示。所示。 图图6-3 绘制圆形绘制圆形 图图6-4 绘制树叶绘制树叶 3、在第、在第20帧处，首先删除“圆”，然后填充树叶，效果如图帧处，首先删除“圆”，然后填充树叶，效果如图6-5 所示。所示。 #FFFFFF #339900 【颜色颜色】面板面板 树叶效果树叶效果 图图6-5 填充树叶填充树叶 4、在第、在第40帧处插入关键帧，然后调节树叶的颜色效果如图帧处插入关键帧，然后调节树叶的颜色效果如图5-6所示所示 【颜色
6、颜色】面板面板 树叶效果树叶效果 #FFFFFF #CC9900 5、在第、在第60帧处将树叶移出舞台。帧处将树叶移出舞台。 6、选中第、选中第1帧，然后在帧，然后在【属性属性】面板的面板的【补间补间】下拉列表中选择“下拉列表中选择“ 形状”选项，如图形状”选项，如图6-7所示。则创建出第所示。则创建出第1帧第帧第20帧之间的形状补帧之间的形状补 间动画间动画 。 图图6-7 创建补间动画创建补间动画 7、使用相同的方法，在第、使用相同的方法，在第20帧、第帧、第40帧两处分别创建形状补间动帧两处分别创建形状补间动 画。画。 8、按、按Ctrl+Enter 快捷键测试播放影片，观看这个由小圆成
7、长为一快捷键测试播放影片，观看这个由小圆成长为一 片绿叶，再枯黄，再凋零的动画。片绿叶，再枯黄，再凋零的动画。 9、关闭测试播放器，选中第、关闭测试播放器，选中第40帧，然后在属性面板中分别设置帧，然后在属性面板中分别设置【 缓动缓动】为“为“100100”之间不同的值，然后分别测试影片，观之间不同的值，然后分别测试影片，观 看树叶凋落动画的速率变化看树叶凋落动画的速率变化 。 6.1.3 范例解析（二）制作“浪漫绽放” 花是带给人们幸福与浪漫的精灵。本例将使用形状补间动画来制花是带给人们幸福与浪漫的精灵。本例将使用形状补间动画来制 作一个“浪漫的绽放”动画，带领读者来一同体验自己绘制出的浪漫
8、作一个“浪漫的绽放”动画，带领读者来一同体验自己绘制出的浪漫 感觉，其设计思路及效果如图感觉，其设计思路及效果如图6-8所示所示 。 图图6-8 制作思路及效果制作思路及效果 1、制作叶片的生长、制作叶片的生长 。 （1）打开资源中“素材浪漫的绽放浪漫的绽放-模板.fla”文件，场 景效果如图6-9所示。 （2）在“背景”图层之上新建并重命名图层，直至图层效果如图6- 10所示。 图图6-9 模板场景模板场景 图图6-10 图层效果图层效果 （3）选择【矩形】工具，在【属性】面板中设置【笔触颜色】为“ 无”，【填充颜色】为“#37C030”，在“叶片1”图层上绘制一个 宽高为“5px5px”的
9、矩形，并将其置于花盆的后面，效果如图 6-11所示。 （4）在“叶片1”图层的第10帧处插入关键帧，利用【选择】工具调 整第10帧处“矩形”的形状如图6-12所示。 （5）在“叶片1”图层的第20帧处插入关键帧，利用【选择】工具调 整第20帧处“矩形”的形状如图6-13所示。 矩形 图图6-11 第第1帧叶片形状帧叶片形状 图图6-12 第第10帧叶片形状帧叶片形状 图图6-13 第第20帧叶片形状帧叶片形状 （6）在第）在第1帧第帧第10帧之间、第帧之间、第10帧第帧第20帧之间创建形状补间动帧之间创建形状补间动 画，这样一片叶子的生长过程就制作完成。画，这样一片叶子的生长过程就制作完成。
10、（7）使用同样的方法在图层“叶片）使用同样的方法在图层“叶片2”、“叶片、“叶片3”、“叶片、“叶片4”、“叶、“叶 片片5”、“叶片、“叶片6”上分别制作其他上分别制作其他5片叶子的生长，完成叶片的生片叶子的生长，完成叶片的生 长动画。此时的场景效果如图长动画。此时的场景效果如图6-14所示，所示，【时间轴时间轴】效果如图效果如图6- 15所示。所示。 叶片6 叶片2 叶片4 叶片5 叶片3 叶片1 图图6-14 完成叶片制作完成叶片制作 在制作叶片生长动画效果时，注意调整叶在制作叶片生长动画效果时，注意调整叶 片生长的先后顺序，尽量使叶片生长看起来贴片生长的先后顺序，尽量使叶片生长看起来贴
11、 近自然。每个叶片的生长时间也可根据叶片大近自然。每个叶片的生长时间也可根据叶片大 小有所不同。建议将制作完成的图层进行锁定小有所不同。建议将制作完成的图层进行锁定 ，以免产生误操作。，以免产生误操作。 图图6-15 【时间轴时间轴】效果一效果一 2、制作花梗的生长。、制作花梗的生长。 （1）在“叶片）在“叶片6”图层之上新建一个图层并重命名为“花梗”图层图层之上新建一个图层并重命名为“花梗”图层 。 （2）在“花梗”图层的第）在“花梗”图层的第65帧处插入关键帧。帧处插入关键帧。 （3）选择）选择【矩形矩形】工具，在工具，在【属性属性】面板中设置面板中设置【笔触颜色笔触颜色】为为 “无”，“
12、无”，【填充颜色填充颜色】为“为“#CCE492”，在“花梗”图层的第，在“花梗”图层的第 65帧处绘制一个宽高为“帧处绘制一个宽高为“5px5px”的矩形，而后将其置于花的矩形，而后将其置于花 盆的后面，效果如图盆的后面，效果如图6-16所示。所示。 （4）利用）利用【选择选择】工具调整矩形的形状如图工具调整矩形的形状如图5-17所示。所示。 （5）在“花梗”图层的第）在“花梗”图层的第105帧处插入关键帧，利用帧处插入关键帧，利用【选择选择】工具工具 调整第调整第105帧处“花梗”的形状如图帧处“花梗”的形状如图6-18所示。所示。 （6）在第）在第65帧第帧第105帧之间创建形状补间动画
13、，这样花梗的生长帧之间创建形状补间动画，这样花梗的生长 过程就制作完成了过程就制作完成了 。 花梗 图图6-16 原始矩形原始矩形 图图6-17 花梗的原始形状花梗的原始形状 图图6-18 第第105帧花梗形状帧花梗形状 3、制作花瓣的生长、制作花瓣的生长 。 （1）在“花梗”图层之上新建并重命名图层，直至图层效果如图）在“花梗”图层之上新建并重命名图层，直至图层效果如图6- 19所示。所示。 （2）在“花瓣）在“花瓣1”图层的第图层的第105帧处插入关键帧。帧处插入关键帧。 （3）选择）选择【椭圆椭圆】工具，在工具，在【属性属性】面板中设置面板中设置【笔触颜色笔触颜色】为为 “无”，“无”，
14、【填充颜色填充颜色】为“为“#F997DC”，在“花瓣”图层的第，在“花瓣”图层的第 105帧处绘制一个宽高为“帧处绘制一个宽高为“1.3px1.1px”的椭圆，并将其置于的椭圆，并将其置于 花梗顶端花苞的上面，效果如图花梗顶端花苞的上面，效果如图6-20所示所示 。 椭圆 图图6-19 图层效果图层效果 图图6-20 第第105帧花瓣形状帧花瓣形状 在绘制花瓣的原始形状时，需要将其放置在花苞在绘制花瓣的原始形状时，需要将其放置在花苞 上并适当调整位置，使得花开得更自然，也达到掩盖上并适当调整位置，使得花开得更自然，也达到掩盖 花苞的目的花苞的目的 。 （4）在“花瓣）在“花瓣1”图层的第图层
15、的第135帧处插入关键帧，利用帧处插入关键帧，利用【选择选择】工具工具 调整第调整第135帧处“花瓣”的形状如图帧处“花瓣”的形状如图6-21所示。所示。 （5）在第）在第105帧第帧第135帧之间创建形状补间动画，这样一片花瓣帧之间创建形状补间动画，这样一片花瓣 的生长过程就制作完成。的生长过程就制作完成。 （6）使用同样的方法在图层“花瓣）使用同样的方法在图层“花瓣2”、“花瓣、“花瓣3”、“花瓣、“花瓣4”、“、“ 花瓣花瓣5”、“花瓣、“花瓣6”上分别制作其他上分别制作其他5片花瓣的生长，完成花瓣的片花瓣的生长，完成花瓣的 生长动画，效果如图生长动画，效果如图6-22所示。所示。 图图
16、6-21 第第135帧花瓣形状帧花瓣形状 花瓣4 花瓣5 花瓣6 花瓣3 花瓣1 花瓣2 图图6-22 完成制作完成制作 （7）最终的场景效果如图）最终的场景效果如图6-23所示，时间轴效果如图所示，时间轴效果如图6-24所示所示 。 图图6-23 最终场景效果最终场景效果 图图6-24 制作完成后的【时间轴】效果 （8）保存测试影片，一株美丽的花儿浪漫绽放的动画效果制作完）保存测试影片，一株美丽的花儿浪漫绽放的动画效果制作完 成成 。 6.1.4 6.1.4 课堂练习制作“魔幻扑克” 请同学们自己动手制作一个扑克变幻的动画，其效果如图请同学们自己动手制作一个扑克变幻的动画，其效果如图6-25
17、 所示所示 。 1、新建一个Flash文档，设置文档【尺寸】为“500px353px”， 文档其他属性使用默认参数 。 图图6-25 魔幻扑克效果魔幻扑克效果 2、执行、执行【文件文件】/【导入导入】/【打开外部库打开外部库】菜单命令，将教学资源菜单命令，将教学资源 中的“素材中的“素材第第5讲讲魔幻扑克魔幻扑克魔幻扑克魔幻扑克-素材素材.fla”文件打开，将文件打开，将 外部库里的元件和图片复制到当前库中，效果如图外部库里的元件和图片复制到当前库中，效果如图6-26所示。所示。 3、将、将【库库】面板中的“背景”位图拖入场景中，设置其宽高为面板中的“背景”位图拖入场景中，设置其宽高为 “50
18、0px353px”，并相对舞台居中对齐，效果如图，并相对舞台居中对齐，效果如图6-27所示所示 。 图图6-26 【库库】面板面板 图图6-27 导入背景图片导入背景图片 4、将“背景”图层锁定，在“背景”图层上新建并重命名图层，、将“背景”图层锁定，在“背景”图层上新建并重命名图层， 直到图层效果如图直到图层效果如图6-28所示，并在所有图层的第所示，并在所有图层的第20帧处插入帧帧处插入帧 。 5、选择“红桃、选择“红桃2参考”图层，将参考”图层，将【库库】面板中的“红桃面板中的“红桃2参考图”参考图” 图形元件拖入到舞台中，并相对舞台居中对齐。在图形元件拖入到舞台中，并相对舞台居中对齐。
19、在【属性属性】面面 板中设置其板中设置其【Alpha】参数为“参数为“50%”，效果如图，效果如图6-29所示。所示。 图图6-28 设置大小和位置设置大小和位置 图图6-29 拖入“红桃拖入“红桃2参考图”参考图” 6、根据参考图在各个图层上绘制花色为“红桃、根据参考图在各个图层上绘制花色为“红桃2”纸牌各个部分的纸牌各个部分的 形状，如图形状，如图6-30所示。所示。 图图6-30 绘制红桃绘制红桃2 其中其中【字体字体】为“为“Bookman Old Style”（读者可以（读者可以 设置为自己喜欢的字体或者自行购买外部字体库）。设置为自己喜欢的字体或者自行购买外部字体库）。 7、在“花
20、色上”、“花色中”、“花色下”、“数字上”、“数、在“花色上”、“花色中”、“花色下”、“数字上”、“数 字下”图层的第字下”图层的第20帧处按帧处按F7 快捷键插入空白关键帧。使用同样快捷键插入空白关键帧。使用同样 的方法绘制花色为“黑桃的方法绘制花色为“黑桃A”的纸牌，效果如图的纸牌，效果如图6-31所示。所示。 8、将“数字下”、“数字上”图层的第、将“数字下”、“数字上”图层的第1帧和第帧和第20帧处的数字打散帧处的数字打散 。 9、分别在“花色上”、“花色中”、“花色下”、“数字上”、分别在“花色上”、“花色中”、“花色下”、“数字上”、 “数字下”图层的第“数字下”图层的第1帧第帧
21、第20帧之间创建“形状补间“动画帧之间创建“形状补间“动画 ，时间轴效果如图，时间轴效果如图6-32所示所示 。 图图6-31 绘制黑桃绘制黑桃A 图图6-32 绘制倾斜为绘制倾斜为45的线条的线条 10、保存测试影片，一个简单而又神奇的扑克变幻动画制作完成、保存测试影片，一个简单而又神奇的扑克变幻动画制作完成 。 6.2 形状提示点原理 当用形状补间动画制作一些较为复杂的变形动画时，常常会使当用形状补间动画制作一些较为复杂的变形动画时，常常会使 画面变得混乱，根本达不到用户想要的变化过程，这时就需要使用形画面变得混乱，根本达不到用户想要的变化过程，这时就需要使用形 状提示点来进行控制。状提示
22、点来进行控制。 6.2.1 知识点讲解 一、添加形状提示。一、添加形状提示。 单击形状补间动画的开始帧，执行单击形状补间动画的开始帧，执行【修改修改】/【形状形状】/【添加形状添加形状 提示提示】菜单命令。这样在形状上就会增加一个带字母的红色圆圈菜单命令。这样在形状上就会增加一个带字母的红色圆圈 ，相应地在结束帧的形状上也会增加形状提示符，如图，相应地在结束帧的形状上也会增加形状提示符，如图6-33所示所示 。 分别将这两个形状提示符安放到适当的位置时，起始关键帧上的分别将这两个形状提示符安放到适当的位置时，起始关键帧上的 形状提示点为黄色，结束关键帧的形状提示点为绿色，如图形状提示点为黄色，
23、结束关键帧的形状提示点为绿色，如图6-34 所示所示 第第1帧帧 第第10帧帧 显示为黄色显示为黄色 显示为绿色显示为绿色 图图6-33 未调节未调节 图图6-34 调节成功调节成功 二、形状提示原理二、形状提示原理 。 继续添加形状提示点，并调节提示点位置，此时图形变化的过继续添加形状提示点，并调节提示点位置，此时图形变化的过 程如图程如图6-35所示所示 。 图图6-35 使用形状提示使用形状提示 图图6-36所示为未添加形状提示点的变化过程，经过观察可以清所示为未添加形状提示点的变化过程，经过观察可以清 楚的了解形状提示的功能和原理，即形状提示点用于识别起始形状楚的了解形状提示的功能和原
24、理，即形状提示点用于识别起始形状 和结束形状中相对应的点，并用字母和结束形状中相对应的点，并用字母a到到z来表示来表示 。 图图6-36 未使用形状提示未使用形状提示 6.2.2 6.2.2 范例解析（一）使用形状提示点练习 请同学们在老师的带领下对形状提示点的创建方法和原理进行进请同学们在老师的带领下对形状提示点的创建方法和原理进行进 一步的熟悉，并跟随以下要求进行操作训练。一步的熟悉，并跟随以下要求进行操作训练。 1、打开教学资源中“素材、打开教学资源中“素材第第5讲讲形状提示点练习形状提示点练习飞翔的蝙蝠飞翔的蝙蝠.fla”文文 件。件。 2、分别在第、分别在第1帧第帧第10帧之间，第帧
25、之间，第11帧第帧第20帧之间，第帧之间，第21帧第帧第 30帧之间，第帧之间，第31帧第帧第40帧之间创建形状补间动画，拖动时间轴帧之间创建形状补间动画，拖动时间轴 观察图形的渐变效果，如图观察图形的渐变效果，如图6-37所示。所示。 图图6-37 形状补间效果形状补间效果 3、选中“图层、选中“图层1”的第的第1帧，执行帧，执行【修改修改】/【形状形状】/【添加形状添加形状 提示提示】菜单命令添加一个形状提示点，并将其拖动到蝙蝠的菜单命令添加一个形状提示点，并将其拖动到蝙蝠的 翅膀上，如图翅膀上，如图6-38所示。选中第所示。选中第10帧，将提示点也拖动到蝙帧，将提示点也拖动到蝙 蝠的翅膀
26、上，此时形状提示点变为绿色，如图蝠的翅膀上，此时形状提示点变为绿色，如图6-39所示。所示。 通过观察可以发现，此时的形状补间动画效果并不理想通过观察可以发现，此时的形状补间动画效果并不理想 ，整个形状补间动画效果显的十分的杂乱无章，没有达，整个形状补间动画效果显的十分的杂乱无章，没有达 到预期的效果到预期的效果 。 图图6-38 添加形状提示点一添加形状提示点一 图图6-39 调整形状提示点一调整形状提示点一 4、使用同样的方法添加、使用同样的方法添加3个形状提示点，并分别在第个形状提示点，并分别在第1帧和第帧和第10 帧调整提示点的位置，效果如图帧调整提示点的位置，效果如图6-40和图和图
27、6-41所示。所示。 图图6-40 添加形状提示点二添加形状提示点二 图图6-41 调整形状提示点二调整形状提示点二 5、使用同样的方法为后续的形状补间动画添加形状提示点，图、使用同样的方法为后续的形状补间动画添加形状提示点，图6- 42所示为第所示为第31帧处的形状提示点，图帧处的形状提示点，图6-43所示为第所示为第40帧处的帧处的 形状提示点。形状提示点。 图图6-42 添加形状提示点三添加形状提示点三 图图6-43 调整形状提示点三调整形状提示点三 6、此时再拖动时间轴观察这个形状补间动画的变换效果，如图、此时再拖动时间轴观察这个形状补间动画的变换效果，如图6- 44所示。所示。 图图
28、6-44 添加形状提示点后的效果添加形状提示点后的效果 6.2.3 范例解析（二）制作“旋转的三棱锥” 本例将使用形状提示点动画来制作一个旋转的三棱锥效果，其本例将使用形状提示点动画来制作一个旋转的三棱锥效果，其 设计思路及效果如图设计思路及效果如图6-45所示。所示。 1、素材准备。、素材准备。 （1）新建一个）新建一个Flash文档，文档所有属性使用默认参数文档，文档所有属性使用默认参数 。 图图6-45 设计思路及效果设计思路及效果 （2）新建并重命名图层，直至图层效果如图）新建并重命名图层，直至图层效果如图6-46所示。所示。 （3）执行）执行【文件文件】/【导入导入】/【打开外部库打
29、开外部库】菜单命令，将教学资源菜单命令，将教学资源 中的“素材中的“素材旋转的三棱锥旋转的三棱锥.fla”文件打开，将外部库里的元件和图文件打开，将外部库里的元件和图 片复制到当前片复制到当前【库库】面板中，效果如图面板中，效果如图6-47所示。所示。 图图6-46 图层效果图层效果 图图6-47 复制后的复制后的【库库】面板面板 2、设置主场景。、设置主场景。 （1）选择）选择【矩形矩形】工具，在工具，在【属性属性】面板中设置面板中设置【笔触颜色笔触颜色】为“无为“无 ”，”，【填充颜色填充颜色】的的【类型类型】为“线性”，从左至右第为“线性”，从左至右第1个色块颜个色块颜 色为“色为“#0
30、0CCFF”，第，第2个色块颜色为“个色块颜色为“#006666”，在“背景”图，在“背景”图 层上绘制一个宽高为“层上绘制一个宽高为“550px400px”的矩形，其位置坐标的矩形，其位置坐标x、y 分别为“分别为“0”、“、“0”，如图，如图6-48所示所示 。 【颜色颜色】面板面板 矩形最终效果矩形最终效果 图图6-48 绘制背景绘制背景 （2）将）将【库库】面板中名为“边框”的元件放置到“边框”图层上面板中名为“边框”的元件放置到“边框”图层上 ，并与舞台居中对齐，效果如图，并与舞台居中对齐，效果如图6-49所示。所示。 3、绘制辅助图形、绘制辅助图形 。 （1）选择）选择【多角星形多
31、角星形】工具工具 ，在，在【属性属性】面板中设置面板中设置【笔触高度笔触高度 】为“为“1”，【笔触颜色笔触颜色】为“红色”，设置为“红色”，设置【填充颜色填充颜色】为“无”为“无” ，单击，单击 按钮打开按钮打开【工具设置工具设置】对话框，并设置对话框，并设置【边数边数】为为 “3”，单击，单击 按钮完成设置。按钮完成设置。 （2）在“辅助层”图层上绘制一个宽高为“）在“辅助层”图层上绘制一个宽高为“242.9px213px” 的三角形，其位置坐标的三角形，其位置坐标x、y分别为“分别为“153.6”、“、“93.5”，效果如，效果如 图图6-50所示所示 。 图图6-49 布置上下边框布置
32、上下边框 图图6-50 绘制三角形绘制三角形 （3）选择）选择【线条线条】工具，在工具，在【属性属性】面板中设置面板中设置【笔触高度笔触高度】 为“为“1”，【笔触颜色笔触颜色】为“红色”，在“辅助层”图层上的三角为“红色”，在“辅助层”图层上的三角 形右边绘制两条边作为三棱锥的侧边，效果如图形右边绘制两条边作为三棱锥的侧边，效果如图6-51所示所示 。 在绘制两条边时，注意线段需要两两相交，为后面填充在绘制两条边时，注意线段需要两两相交，为后面填充 图形和对齐图形做好准备图形和对齐图形做好准备 。 图图6-51 绘制侧边绘制侧边 （4）选中步骤（）选中步骤（3）中绘制的两条边，按）中绘制的两
33、条边，按Ctrl+T快捷键打开快捷键打开【变变 形形】面板，图形旋转的参数设置如图面板，图形旋转的参数设置如图6-52所示，然后单击按钮，所示，然后单击按钮， 复制两条边，水平移动到三角形的左侧，效果如图复制两条边，水平移动到三角形的左侧，效果如图6-53所示所示。 复制后的两 条边 图图6-52 【变形变形】面板面板 图图6-53 复制两条边复制两条边 （5）在所有图层的第）在所有图层的第60帧处插入帧，效果如图帧处插入帧，效果如图6-54所示所示 。 4、制作旋转三棱锥效果、制作旋转三棱锥效果 。 （1）将）将【库库】面板中名为“图片面板中名为“图片1.jpg”的图片放置到“第一面”图的图
34、片放置到“第一面”图 层上，并与舞台居中对齐，然后选中舞台上的图片按层上，并与舞台居中对齐，然后选中舞台上的图片按Ctrl+B快快 捷键将图片打散，效果如图捷键将图片打散，效果如图6-55所示所示 打散图片 图图6-54 在第在第60帧处插入帧帧处插入帧 图图6-55 放置第一张图片放置第一张图片 （2）选中“辅助层”图层的第）选中“辅助层”图层的第1帧，按帧，按Ctrl+C快捷键复制当前帧的快捷键复制当前帧的 图形。图形。 在复制当前帧图形前，先检查图形是否都被打散，如果存在复制当前帧图形前，先检查图形是否都被打散，如果存 在没有打散的图形，需要先将图形打散后才进行复制操作在没有打散的图形，
35、需要先将图形打散后才进行复制操作 ，这样才能实现后面操作中分离图的效果，这样才能实现后面操作中分离图的效果 （3）选中“第一面”图层的第）选中“第一面”图层的第1帧，按帧，按Ctrl+Shift+V 快捷键将图形快捷键将图形 粘贴到当前位置，锁定并隐藏“辅助层”图层，效果如图粘贴到当前位置，锁定并隐藏“辅助层”图层，效果如图6-56所所 示。示。 （4）选择“第一面”图层上的图形，将多余的线条和填充区域删除）选择“第一面”图层上的图形，将多余的线条和填充区域删除 ，只保留正面三角形区域的图形，效果如图，只保留正面三角形区域的图形，效果如图6-57所示。所示。 锁定并隐藏图层 图图6-56 锁定
36、并隐藏“辅助层”图层锁定并隐藏“辅助层”图层 图图6-57 分离后的图形分离后的图形 （5）在“第一面”图层的第）在“第一面”图层的第20帧、第帧、第40帧和第帧和第60帧处插入关键帧帧处插入关键帧 ，然后在第，然后在第21帧处插入空白关键帧。帧处插入空白关键帧。 （6）取消隐藏“辅助层”图层，选中“第一面”图层的第）取消隐藏“辅助层”图层，选中“第一面”图层的第20帧处帧处 的图形，将图形下面两个顶点移动到如图的图形，将图形下面两个顶点移动到如图6-58所示的位置。然所示的位置。然 后选择后选择 【填充变形填充变形】工具，向左上移动填充区域的中心点，效果如图工具，向左上移动填充区域的中心点，
37、效果如图6-59 所示。所示。 移动两 个顶点 图图6-58 改变图形形状改变图形形状 图图6-59 调节渐变的中心位置调节渐变的中心位置 （7）选中“第一面”图层的第）选中“第一面”图层的第40帧处的图形，将图形下面两个顶点移帧处的图形，将图形下面两个顶点移 动到如图动到如图6-60所示的位置。然后选择所示的位置。然后选择【填充变形填充变形】工具，向右上移工具，向右上移 动填充区域的中心点，效果如图动填充区域的中心点，效果如图6-61所示所示 。 移 动 两 个 顶点 图图6-60 改变图形形状改变图形形状 图图6-61 调节渐变的中心位置调节渐变的中心位置 （8）隐藏“辅助层”图层，选择“
38、第一面”图层，在第）隐藏“辅助层”图层，选择“第一面”图层，在第1帧和第帧和第20帧，帧， 第第40帧和第帧和第60帧之间分别创建形状补间动画，观察它们的变化，效帧之间分别创建形状补间动画，观察它们的变化，效 果如图果如图6-62所示。所示。 第第10帧处的图形帧处的图形 第第50帧处的图形帧处的图形 图图6-62 变形对比变形对比 从图6-62分析可知，第1帧到第20帧的变形是符合需要 的动画效果，而第40帧到第60帧的变形是不符合需要 的动画效果，这就需要添加形状提示点，让变形的效 果达到这里需要的动画效果 。 （9）选择“第一面”图层的第）选择“第一面”图层的第40帧，执行帧，执行【修改
39、修改】/【形状形状】/【添添 加形状提示点加形状提示点】菜单命令，为图形添加菜单命令，为图形添加3个形状提示点，其分布如图个形状提示点，其分布如图 6-63所示。所示。 （10）选择“第一面”图层的第）选择“第一面”图层的第60帧，调整形状提示点的分布，效帧，调整形状提示点的分布，效 果如图果如图6-64所示所示。 图图6-63 第第40帧处提示点的分布帧处提示点的分布 图图6-64 第第60帧处提示点的分布帧处提示点的分布 在这里添加形状提示点时，一定要将 “b”放到上面的 顶点处，这样变形才是动画需要的变形效果。同学们 可以试一试其他的分布顺序，并观察它们的变形效果 有何不同。 （11）至
40、此，第）至此，第1张图片的动画制作已经完成张图片的动画制作已经完成 。 （12）制作“第二面”和“第三面”图层上的动画效果的方法和制）制作“第二面”和“第三面”图层上的动画效果的方法和制 作“第一面”的方法相同，这里给出相关信息如图作“第一面”的方法相同，这里给出相关信息如图6-65所示，从而所示，从而 方便读者完成余下工作方便读者完成余下工作 。 （13）删除“辅助层”图层。）删除“辅助层”图层。 （14）保存测试影片，一个旋转的三棱锥效果制作完成。）保存测试影片，一个旋转的三棱锥效果制作完成。 第二面信息第二面信息 第三面信息第三面信息 图图6-65 制作第二面和第三面信息制作第二面和第三
41、面信息 5.2.4 课堂练习课堂练习制作“舌头也摇制作“舌头也摇 摆”摆” 使用形状提示点可以制作出各种复杂的形状渐变动，本例将使使用形状提示点可以制作出各种复杂的形状渐变动，本例将使 用形状提示点制作一个可爱的卡通蛇吐着舌头，呆呆的看着你的动用形状提示点制作一个可爱的卡通蛇吐着舌头，呆呆的看着你的动 画，其制作思路及效果如图画，其制作思路及效果如图6-66所示。所示。 图图6-66 效果图效果图 1、新建一个、新建一个Flash文档，文档属性使用默认参数。文档，文档属性使用默认参数。 2、将默认的“图层、将默认的“图层1”重命名为“背景”图层，在“背景”图层重命名为“背景”图层，在“背景”图
42、层 之上新建一个图层并重命名为“蛇”之上新建一个图层并重命名为“蛇” 。 3、执行、执行【文件文件】/【导入导入】/【打开外部库打开外部库】菜单命令，将教学资源菜单命令，将教学资源 中的“素材中的“素材舌头也摇摆舌头也摇摆舌头也摇摆舌头也摇摆-素材素材.fla”文件打开，将外部文件打开，将外部 库里所有的元件复制到当前库里所有的元件复制到当前【库库】面板中，如图面板中，如图6-67所示。所示。 4、选择“背景”图层，将“背景”元件拖入场景，相对舞台居中对、选择“背景”图层，将“背景”元件拖入场景，相对舞台居中对 齐，并在“背景”图层的第齐，并在“背景”图层的第90帧处按帧处按F5快捷键插入帧。
43、快捷键插入帧。 选择“蛇”图层，将“蛇”元件拖入场景，并将他的“身体”与草选择“蛇”图层，将“蛇”元件拖入场景，并将他的“身体”与草 地上地上5、的阴影对齐，然后锁定“蛇”图层和“背景”图层。此、的阴影对齐，然后锁定“蛇”图层和“背景”图层。此 时的场景效果如图时的场景效果如图6-68所示，时间轴效果如图所示，时间轴效果如图6-69所示所示。 图图6-67 【库库】面板面板 图图6-68 场景效果场景效果 图图6-69 【时间轴时间轴】效果二效果二 6、在“蛇”图层之上新建一个图层并重命名为“蛇信子”图层。、在“蛇”图层之上新建一个图层并重命名为“蛇信子”图层。 7、这里给出“蛇信子”图层的相
44、关信息，由读者独立完成其形状提、这里给出“蛇信子”图层的相关信息，由读者独立完成其形状提 示动画的制作，如图示动画的制作，如图6-70所示。所示。 图图6-70 蛇信子蛇信子 添加形状提示的过程中应该注意以下几点。添加形状提示的过程中应该注意以下几点。 1增加控制点只能在补间动画的开始帧进行。增加控制点只能在补间动画的开始帧进行。 2控制点用字母表示，最多只有控制点用字母表示，最多只有26个。个。 3控制点的顺序要符合逻辑。例如在开始帧的一条直线上按控制点的顺序要符合逻辑。例如在开始帧的一条直线上按 a、b、c顺序放置顺序放置3个控制点，在结束帧的相应帧的直线就不个控制点，在结束帧的相应帧的直
45、线就不 能按能按a、c、b顺序放置。顺序放置。 4控制点并非设置得越多越好，应该根据实际情况来决定。控制点并非设置得越多越好，应该根据实际情况来决定。 8、保存测试影片，一个卡通蛇吐着左右摇摆的舌头的动画制作完成、保存测试影片，一个卡通蛇吐着左右摇摆的舌头的动画制作完成 6.3 课后作业 一、操作题一、操作题 1、使用形状补间动画制作如图、使用形状补间动画制作如图6-71所示的变形效果所示的变形效果 。 2、使用性质补间动画制作一个简单的雨滴效果，如图、使用性质补间动画制作一个简单的雨滴效果，如图6-72所示所示 。 图图6-71 变形效果变形效果 图图6-72 雨滴效果雨滴效果 二、思考题二、思考题 1、形状补间动画的主要应用对象是什么？、形状补间动画的主要应用对象是什么？ 2、应用形状补间动画时，如果产生的效果与预期的效果、应用形状补间动画时，如果产生的效果与预期的效果 不一致，应该采取怎样的措施？不一致，应该采取怎样的措施？ 3、应用形状补间动画应该注意哪几点、应用形状补间动画应该注意哪几点 ？
