形状补间动画

教学目标

了解形状补间动画原理

学会制作形状补间动画

掌握形状提示的使用方法

任务 3.2.2 制作“变魔术”

演示设计结果

变魔术效果图

任务 3.2.2 制作“变魔术”

任务分析

利用绘图工具绘制各种图形

利用形状补间动画制作图形变换的效果

知识点

形状补间动画是在 Flash 的时间帧面板上，在一个关键帧上绘制一个形状，然后在另一个关键帧上更改该形状或绘制另一个形状等， Flash 将自动根据二者之间的帧的值或形状来创建的动画，它可以实现两个图形之间颜色、形状、大小、位置的相互变化。

1 、形状补间动画概念

知识点

2 、形状补间动画构成元素

构成形状补间动画的元素多为用鼠标绘制出的形状。如果要使用图形元件、按钮、文字，则必须要先打散（ Ctrl+B ）后才可以做形状补间动画。

能创建形状补间动画的对象具有这样的特征： 对象被选中后出现均匀的白色小点。

若对象是位图需转换成矢量图

知识点

3 、形状补间动画的表现

形状补间动画建立后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头，如下图所示。

知识点

4 、形状补间动画的分类

形状变化淡入淡出颜色渐变添加形状提示

知识点

5 、创建形状补间动画

同一图层上，在绘制着不同矢量图形的的两关键帧之间任选 1帧，然后在该帧上右击鼠标，在弹出的快捷菜单中选择【创建补间形状】命令。如果两关键帧之中的任何一个关键帧的内容为空，则创建形状补间动画失败，如图所示 。

创建失败

知识点

6 、形状提示

在制作形状补间动画时，如果使用形状提示在开始和结束形状中选择公共点，这些公共点在过渡形状中保持不变，这样就可以较为精确地控制整个形变过程。 添加形状提示，控制变形过程。

知识点

形状提示是一个有颜色的实心小圆，上面标志着小写的英文字母，用于识别起始形状和结束形状中相对应的点。对于每一个形变过程，可以为它添加 26 个形状提示，从 a 标记到 z 标记，实际上只用几个就够了。

知识点

添加形状提示的方法 单击形状补间动画的开始帧，执行【修改】 |

【形状】 | 【添加形状提示】命令，该帧的形状就会增加一个带字母的红色圆圈，相应地，在结束帧形状中也会出现一个“提示圆圈”。

用鼠标左键单击并分别按住这 2 个“提示圆圈”，在适当位置安放，安放成功后开始帧上的“提示圆圈”变为黄色，结束帧上的“提示圆圈”变为绿色，安放不成功或不在一条曲线上时，“提示圆圈”颜色不变，如图所示。

知识点

调整位置后开始帧处变黄色

调整位置后结束帧处变绿色

知识点

添加形状提示的技巧

形状提示要在形状的边缘才能起作用，在调整形状提示位置前，选中工具【贴紧至对象】，这样会自动把“形状提示”吸咐到边缘上。

任务 3.2.2 制作步骤

1 、绘制图形：小球、五角星、花朵创建 FLASH文档，设置舞台大小为 550×400像素，背景色为白色。

绘制图形：小球、五角星和花朵，如图所示。

任务 3.2.2 制作步骤

2 、制作形状补间动画分别选中第 1 帧、第 20帧，右击鼠标，在弹出的快捷菜单中选择【创建补间形状】命令。

测试动画并保存文件。

任务 3.2.3 制作“旋转的房子”

演示设计结果

旋转的房子效果图

任务分析

利用绘图工具绘制房子

利用形状提示工具制作房子旋转的动画效果

任务 3.2.3 制作“旋转的房子”

任务 3.2.3 制作步骤

1 、绘制房子创建 FLASH文档，设置舞台大小为 550×400像素，背景色为灰色。

绘制蓝色屋顶及红色墙体，如图所示。

任务 3.2.3 制作步骤

使用线条工具，以三角形的顶点为起点，以它的右斜边为固定边，勾勒出另一个三角形区域；以矩形右下角为起点，以右斜边为固定边，勾勒出矩形的另一面，如图所示。

任务 3.2.3 制作步骤

使用油漆桶工具 ，在三角形右侧面填充深蓝色，在矩形右侧面填充深红色；使用选择工具 ，选中黑色线条，按 Delete键将其删除，如图所示。

任务 3.2.3 制作步骤

在第 30帧插入关键帧，执行“修改 / 变形 / 水平翻转 /”命令；使用油漆桶工具 ，将三角形左侧面填充成浅蓝色，矩形右侧面填充为浅红色，如图所示。

任务 3.2.3 制作步骤

2 、添加形状提示制作房子旋转效果选择第 1 帧，展开属性面板创建形状补间动画。

选择“修改 / 形状 / 增加形状提示”命令，会出现一个红色提示点“ a”，将其移至三角形的顶点。

选择第 30帧，将红色提示点“ a”移至三角形的顶点。

任务 3.2.3 制作步骤

用同样的方法，添加提示点 b 、 c 、 d 、 e 、f 、 g 、 h 、 i ，效果如图所示。

添加形状提示点

任务 3.2.3 制作步骤

测试动画并保存文件。

翻转后的形状提示点

知识点拓展

获得最佳形状补间动画效果

在复杂的补间形状中，需要创建中间形状然后再进行补间，而不要只定义起始和结束的形状。

确保形状提示是符合逻辑的。例如，如果在一个三角形中使用三个形状提示，则在原始三角形和要补间的三角形中它们的顺序必须是一致的。它们的顺序不能在第一个关键帧中是 abc ，而在第二个中是 acb 。

如果按逆时针顺序从形状的左上角开始放置形状提示，它们的工作效果最好。

知识点拓展

形状补间与动作补间动画的区别

任务 3.2.5 制作“校庆礼盒”

演示设计结果

礼盒效果图

任务分析

制作五角星旋转放大的动画

制作五角星转变为文字的动画

任务 3.2.5 制作“校庆礼盒”

任务 3.2.5 制作步骤

1 、五角星旋转放大的动画创建 FLASH文档，设置舞台大小为 550×400像素，背景色为白色。

导入素材“礼物盒 .jpg” 到库中。

将“礼物盒 .jpg”拖至主场景。

任务 3.2.5 制作步骤

添加 4 个新图层，分别选中每一层的第 1 帧，使用多角星形工具，在各个图层中绘制一颗五角星。调整五角星的大小、角度和位置，如图所示。

任务 3.2.5 制作步骤

按 F8键打开“转化为元件”对话框，分别将四颗五角星转化为名为“ 1”、“ 2”、“ 3”、“ 4”的图形元件。

分别选择图层 2 、图层 3 、图层 4 、图层 5 的第10帧，按 F6插入关键帧。

选择图层 1 的第 20帧，按 F5键插入帧。

选择图层 2 的第 1 帧，创建动作补间动画，展开属性面板，设置选择旋转下拉菜单中的“顺时针”选项，次数为 1 。

任务 3.2.5 制作步骤

选择图层 2 第 1 帧的五角星，按 Ctrl+T键打开变形面板，将五角星的宽度和高度比例都设为0%。

将五角星移至礼物盒内部。

使用同样的方法制作其他三个五角星的旋转放大动画。

任务 3.2.5 制作步骤

2 、五角星转变为文字的动画选择图层 2 的第 11帧和第 20帧，按 F6键插入关键帧。

选择第 20帧，使用文本工具，输入文字“庆经”并删除五角星，如图所示。

任务 3.2.5 制作步骤

任务 3.2.5 制作步骤

执行“修改 / 分离”命令，将文字打散。

选择第 11帧的五角星，执行“修改 / 分离”命令，将五角星打散。

选择第 11帧，创建形状补间动画。

任务 3.2.5 制作步骤

使用同样的方法制作剩下的字，如图所示。

测试动画，并保存文件。