7.4.2补间形状

7.4.2　补间形状

7.4.2.1　补间形状的概念

补间形状是Flash中非常重要的表现手法之一。补间形状就是变形，与动作补间一样，也可以是位置、尺寸和颜色的变化，但主要是形状的改变。利用形状变化可以将场景中的对象从一个图形变成另一个图形，从一个物体变形成另一个物体。

7.4.2.2　补间形状的属性

与补间动画一样，补间形状的创建及属性设置也是在属性面板中完成的，当创建好补间形状的两个关键帧后，选中起始关键帧，打开“属性”面板，在“补间”下拉列表中选择“形状”。

可以看到，补间形状的“属性”只有两个参数，如图7-32所示。

图7-32　形状补间动画的属性

图7-33　混合下拉菜单

1．缓动

在右边的文本框中可以直接输入此数值，也可以单击右边的下拉按钮，会弹出滑动杆，拖动上面的滑块，随着滑块位置的变化，参数值相应变化，参数值范围为−100～100。

设置完后，动画效果会根据参数值做出相应的变化，规律如下。

当输入的参数值在−1～−100的负值之间时，动画速度从慢到快，朝运动结束的方向加速运动。

当输入的参数值在1～100的正值之间时，动画的速度从快到慢，朝运动结束的方向减速运动。

在默认情况下，此参数值为0，表示补间帧之间的速率是不变的，也就是对象做匀速渐变运动。

2．混合

在“混合”下拉列表中可以选择变形的过渡模式。

打开“混合”下拉列表，如图7-33所示，可以看到有两个选项。

“角形”选项：选择该选项，可以使中间帧的过渡形状保持关键帧上图形的棱角，此模式只适用于有尖锐角的图形变换。

“分布式”选项：选择该项，可以使中间帧的形状过渡更光滑、更随意。

7.4.2.3　实战演练——拱出蛋壳的小孩

如图7-34所示是形状渐变动画中的几个过渡画面，可以看到，随着蛋壳的变形、破裂，一个调皮的卡通小孩降临了。

图7-34　动画中的几个过渡画面

该动画是用补间形状来完成的，下面来详细学习它的制作过程。

1．制作元件

选择“文件/新建”命令，新建一个Flash空白文档。打开“属性”面板，设置文档的宽为450，高为300，选择背景为白色，设置完后单击“确定”按钮。

执行“插入/新建元件”命令，弹出“创建新元件”对话框，输入名称为“小孩”，选择“类型”为“图形”，进入小孩元件的编辑场景。

如图7-35所示，在场景中用绘图工具绘制出一个卡通小孩。

图7-35　绘制出卡通图形

图7-36　对图层命名为小孩

2．创建补间形状（一）

返回到主场景1，双击“图层1”，图层名称处于可编辑状态，输入“小孩”，按回车键确认，将图层名称重新命名为小孩，如图7-36所示。

选取工具箱中的“椭圆工具”，设置笔触颜色为“无”，选择“填充色”是一种肉色（颜色值为#FADFC5），按住“Shift”键，在舞台上拖动鼠标，绘制出一个无边框的正圆形，如图7-37所示。

在工具箱中选取“选择工具”，拖动图形，使它位于舞台的中央处。

图7-37　绘制出一个无边框的正圆形

图7-38　修改第7帧中图形的形状

选中第5帧，按“F6”键插入一个关键帧。选中第7帧，按“F6”键插入一个关键帧。

保证工具箱中的“选择工具”处于被选中状态，在空白处单击，取消对圆形的选择，把鼠标移动到圆形的左上边缘，此时鼠标的右下角出现弧线状，拖动鼠标，改变图形的形状，如图7-38所示。

选中第5帧，打开“属性”面板，从打开的“补间”下拉列表中选择“形状”，如图7-39所示。

这样，在第5～7帧处会出现一个带箭头的实线，并且帧的底色变成了绿色，这证明已经成功创建了一个从第5～7帧的补间形状。

下面来创建第2段补间形状。

选中第5帧，用鼠标右键单击它，在弹出的菜单中执行“复制帧”命令，选中第9帧，用鼠标右键单击它，在弹出的菜单中执行“粘贴帧”命令，把刚复制的关键帧粘贴到第9帧中，如图7-40所示。

选中第7帧，打开“属性”面板，打开“补间”下拉列表中选择“形状”，创建出从第7～9帧之间的补间形状。

图7-39　选择形状补间

图7-40　将第5帧粘贴到第9帧中

接下来创建第3段补间形状。

选中第11帧，按“F6”键插入一个关键帧。选取工具箱中的选择工具，在舞台上的空白处单击，取消对图形的选择，把鼠标移动到右上边缘，此时鼠标的右下角出现弧线状，拖动鼠标，改变图形的形状，如图7-41所示。

由于第9帧是复制过来的，选中该帧后，在“属性”面板中可以看到已经被设置了形状补间动画，可见，复制帧的时候，属性同时也被复制过来了。

图7-41　改变第11帧中的图形形状

图7-42　改变第19帧中的图形形状

接下来创建第4段补间形状。

用鼠标右键单击第13帧，在弹出的菜单中执行“粘贴帧”命令，在第13帧粘贴已经复制的关键帧。

类似的，在第11帧也已经被设置了补间形状。

3．创建补间形状（二）

按照上面的方法，再创建一段补间形状。

用鼠标右键单击第17帧，在弹出的菜单中执行“粘贴帧”命令，选中第19帧，按“F6”键插入一个关键帧，同样，在第21帧和第24帧处插入一个关键帧。

把播放头拖动到第19帧，选取工具箱中的选择工具，调整该帧中的图形形状，如图7-42所示。

把播放头拖动到第21帧，选取工具箱中的选择工具，调整该帧中的图形形状，如图7-43所示。

图7-43　改变第21帧中的图形形状

图7-44　形状补间动画中的帧

选中第24帧中的图形，向上适当调整它的位置，以使小孩奔出来的效果更加逼真。

到此为止，本实例的补间形状已全部定义好，此时“时间轴”中的帧如图7-44所示。

4．创建小孩动画

选中第26帧，按“F7”键，插入一个空白关键帧。

按“F11”键，打开“库”面板，将已经制作好的“小孩”图形元件拖放到舞台上。

选中第32帧，按“F5”键，添加一个普通帧，使图层中的帧延伸到第32帧处，如图7-45所示。

图7-45　拱出蛋壳的小孩

至此，拱出蛋壳的小孩动画完成了，按键盘上的“Ctrl+Enter”快捷键，观赏一下动画的效果吧。

技巧与经验：

“补间形状”可以理解为“变形动画”，可以是形状、位置、大小和颜色的变化。与补间动画不同的是，补间形状的对象是分离的可编辑图形。

1．利用补间形状可以实现图形之间的颜色、形状、大小和位置的相互变化，如果利用元件实例、组合、文本和位图等进行形状变化，那么必须先将它们“打散”。

2．补间形状的参数也是在“属性”面板中完成的，不同的是这里要在“补间”下拉列表中选择“形状”。

3．用“选择工具”拖动的方式可改变各关键帧中的对象形状。

4．使用形状提示可以控制图形对应部位的变形，能使动画更加流畅、自然。