形状补间动画

形状补间动画(1)

形状补间动画是Flash中非常重要的表现手法之一，运用 它，你可以变幻出各种奇妙的、不可思议的变形效果。

本节从形状补间动画基本概念入手，带你认识形状补间动画在时间帧上的表现，了解补间动画的创建方法， 学会应用“形状提示”让图形的形变自然流畅，最后，提供了二个实例，帮助你更深地理解形状补间动画。

1

（1） 形状补间动 画的概念

在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。

（2） 构成形状补 间动画的元素

形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和 动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”才能创建变形动画。

（3）形状补间动画在时间帧面板上的表现

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

图3-3-1 形状补间动画在时间帧面板上的标记

（4）创建形状补间动画的方法

在时间轴面板上 动画 开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开 始帧，在【属性】面板上单击 【补间】旁边的小三角，在弹出的菜单中选择 【形状】，此时，时间轴上的变化如图 3-3-1 所示 ，一个形状补间动画就创建完毕。

2

Flash的【属性】面板随鼠标选定的对象不同而发生相应的变化。当我们 建立了一个形状补间动画后，单击帧，【属性】面板如图3-3-2所示。

图3-3-2 形状补间动画的【属性】面板

形状补间动画的【属性】面板上只有二个参数：

（1）“简易”选项

单击其右边的

u       在 1 到 -100

u       在 1 到 100

u      

（2）“混合”选项

“ 混合 ”

u      

u      

3

形状补间动画看似简单，实则不然， Flash 在“计算” 2

（1）     形状提示的作用

在“起始形状”和“结束形状”中添加相对应的“参考点”，使 Flash

（2）添加形状提示的方法

    先在形状补间动画的开始帧上单击一下，再执行 【修改】 | 【形 状】 | 【添加形状 提示】命令，该帧的形状上就会增加一个带字母的红色圆圈，相应地，在结束帧形状中也会出现一个“提示圆圈”，用鼠标左键单击并分别按住这 2 个“提示圆圈”，放置在适当位置，安放成 功后开始帧上的“提示圆圈”变为黄色，结束帧上的“提示圆圈”变为绿色，安放不成功或不在一条曲线上时，“提示圆圈”颜色不变，如图 3-3-3

图 3-3-3

说明：在制作复杂的变形动画时，形状提示的添加和拖放要多方位尝试，每添加一个形状提示，最好播 放一下变形效果，然后再对变形提示的位置做进一步的调整。

形状补间动画(2)

（3）添加形状提示的技巧

u       “形状提示”可以连续添加，最多能添加 26

u      

u       形状提示的摆放位置也要符合逻辑顺序。例如，起点关键帧和终点关键帧上各有一个三角形，我们使用 3 个“形状提示”，如果它们在起点关键帧的 三角形上的顺序为 abc ，那么在重点关键帧的三角形上的顺序就不能是 acb ，也要是 abc

u       形状提示要在形状的边缘才能起作用，在调整形状提示位置前，要打开工具栏上【选项】下面的【吸咐开 关】 ，这样，会自动把“形 状提示”吸咐到边缘上，如果你发觉“形状提示”仍然无效，则可以用工具栏上的【缩放工具】

u       另外，要删除所有的形状提示，可执行【修改】 | 【形状】 |

至此，“形状补间动画”的相关知识我们已都介绍给大家了，下面来一起动手制作二个实例，体会一下形状 补间动画的奇妙。

4 ．实例 1

实例简介

    国庆的夜空绚丽多彩，朵朵礼花在天空中绽放，远处传来礼炮的轰鸣声，让我们来给这美丽的夜晚增加点喜 庆，挂几个大红灯笼来庆祝祖国的生日吧！实例播放效果如图 3-3-4

图 3-3-4

知识提要

 创建矢量图形

制作步骤

步骤 1

执行【文件】 | 【新建】命令，在弹出的对话框中选择【常规】 | 【 Flash 文档】选项后，单击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为 400 × 330 像素，【背景色】为白色，如图 3-3-5

图 3-3-5

步骤 2

执行【文件】 | 【导入】 | 【导入到舞台】命令，将配套光盘中的名为“节日夜空 .jpg ”图片导入到场景中，（“节日夜空” 图片位置：光盘 \example\part3\***\ 图片 \ 节日夜空 .jpg ）， 选择第 80 帧，按键盘上的 F5 键，增加一个普通帧，如图 3-3-6

图 3-3-6

形状补间动画(3)

步 骤 3

    执行【文件】 | 【导入】 | 【导入到库】命令，打开配套光盘中的名为“ sound.mp3

步骤 4

   我们先来画灯笼，执行【窗口】 | 【设计面板】 | 【混色器】命令，打开【混色器】面板，设置各项参数，渐变的颜色为白色到红色，如图 3-3-7

图 3-3-7

新建一个图层，并将其重新命名为“灯笼一”。选择工具箱中的【椭圆工具】 ，设置【笔触颜色】为 无，在场景中绘制出一个椭圆做灯笼的主体，大小为 65 × 40

接着我们来画灯笼上下的边，打开【混色器】面板，按照如图 3-3-8 所示设置深黄色到浅黄色的【线性】 渐变填充。从左到右三个填充色标的颜色值分别为： #FF9900 、 #FFFF00 、 #FFCC00

图 3-3-8

选择工具箱上的【矩形工具】 ，设置【笔触颜色】为 无，绘制出一个矩形，大小为 30 × 10 像素，复制这个矩形，分别放在灯笼的上下方，再画一个小的矩形，长宽为 7 × 10

最后用【线条工具】 ，在灯笼的下面画几条 黄色线条做灯笼穗，一个漂亮的灯笼就画好了。如图 3-3-9

图 3-3-9

步骤 5

复制刚画好的灯笼，新建三个图层，在每个图层中粘贴一个灯笼，调整灯笼的位置，使其错落有致地排列在 场景中。

在第 20 、 40 帧处为各图层添加关键帧，如图 3-3-10

图 3-3-10

形状补间动画(4)

步骤 6

选取第一个灯笼，在第 40 帧处用文字“庆”取代灯笼，在【属性】面板上，设置文本类型为【静态文本】，字体为【隶书】，字体 大小为 60

对“庆”字执行【修改】 | 【分离】命令，把文字转为形状。如图 3-3-11

图 3-3-11

依照以上步骤，在第 40 帧处的相应图层上依次用“祝”、“国”、“庆”三个字取代另外三个灯笼，并执行【分散】操作，其效 果如图 3-3-12

图 3-3-12

步骤 7

在“灯笼”各图层的第 60 帧及 80 帧处，分别添加关键帧，现在，在 80

具体办法是分别复制第 20 帧中的“灯笼”图形，再分别粘贴到第 80 帧中，当然，你应该先清除第 80 帧处 4

步骤 8

在“灯笼”各图层的第 20 、 60 帧处单击帧，在【属性】面板上单击【补间】旁边的小三角，在弹出的菜单中选择【形状】，建立形状补间 动画，如图 3-3-13

图 3-3-13

5 ．实例 2

实例简介

上面我们曾谈到，为得到流畅自然的形状变形动画，可以添加形状提示，本例是专为此而设计的练习。

请你在光盘的相关目录中找到“添加形状提示练习 .swf ”文件，如图 3-3-16 所示。这 2

图 3-3-16

知识提要

u      

u      

步骤 1

执行【文件】 | 【新建】命令，新建一个影片文档，设置舞台尺寸为 300 × 200 像素，设置【背景色】为蓝色 #0000FF

步骤 2

我们要在场景中写二个数字“ 1

先在【图层 1 】的场景左边输入数字“ 1 ”，在【属性】面板上，设置文本格式为【静态文本】、字体为隶书、字号为 100 、【颜色】为白色。再建一个【图层 2 】，在场景右边输入数字“ 1 ”，参数同上，此层是添加形状提示层。然 后在两个图层的第 40 帧处添加关键帧，各输入数字“ 2 ”，在第 60

形状补间动画(5)

步骤 3

逐一选取各层数字的第 1 、 40 帧，执行【修改】 |

步骤 4

在【图层 1 】和【图层 2

步骤 5

   选择【图层 2 】的第 1 帧，执行【修改】 | 【形状】 | 【添加形状提示】命令 2 次，如图 3-3-17

图 3-2-17

确认工具箱中的【对齐对象】按钮 处于被按下状态，调整 第 1 、 40 帧处的形状提示，如图 3-3-18

图 3-3-18 添加形状提示的第 1 、 40

步骤 6

新建一层，在两个渐变的下面分别写上“未加形状提示”、“加用形状提示”的说明。在第 60

至此，这个实例制作完成，测试一下，看看效果，你能体会到添加形状提示的巧妙之处了吧 。

课堂练习：制作如下一个例子，头发、围巾以及窗帘的 飘动。