首页 |上一页 | 下一页

第五课 形状补间动画

    “形状补间动画”是补间动画的一种。在改变一个矢量图形的形状，颜色、位置、或一个矢量图的变形成为另一个矢量图的过程中，可以使用形状补间动画。在形状补间动画中，只需创建起始和结束两个关键帧，中间的经过帧则有 FLASH 通过计算机自动完成。

    在创建形状补间动画片时，如果需要对组、实例或位图图像应用形状补间，则必须首先将这些元素进行分离，如果对文本应用于形状补间，则必须首先将文本进行打散两次处理，使其转换成文形状。

    形状补间动画的创作步骤如下：

    选择动画开始的帧，在场景中利用绘图工具或文字工具绘制图形，作为形状补间动的第一个关键帧，如图 1所示。

图 1设置形状补间动画第一个关健帧上的形状

    在同一个图层上，选择在第一帧之后的一个关键帧，作为形状补间的结束帧，并在这个帧中创建变形后的图形，如图2 所示。注意两帧不要紧邻。

图 2 设置形状补间动画第一个结速帧上的形状

    在时间轴上选择第一个关键帧，然后在该帧的“属性”面板中设置参数，在“补间”下拉列表框中选择“形状补间”选项，如图 3 所示。

图 3 属性面板中设置形状

    在创建形状补间动画之前要了解形状补间的一些参数的具体含义和用途。

    在“混合”下拉列表框中有两个选项，如图 4 所示，这两个选项的含义如下：

         ◆ 分布式：在“分布式”方式下，可以使动画过程中新创建的中间过渡的图形比较平滑。

         ◆ 角度式：在“角度式”方式下，创建的过渡动画中的图形更多地保留了原来图形的尖角

            或直线的特征，如果关键帧中没有尖角，这两种方式产生的动画效果没有区别。

         ◆ 其他一些选项和运动补间动画的设置方法类似，含义也类似。

图 4 补间动画在时间轴上的状态

形状渐变补间动画 水滴效果

知识点：

    ◆ 绘制简单的图形 

    ◆ 信息面板的使用 

    ◆ 帧的编辑 

    ◆ 混色器面板的使用 

    ◆ 形状补间动画 

制作步骤：

    1、创建文档 

    执行【文件】菜单下的【新建】命令，在弹出的对话框中选择【常规】|【Flash文档】单击【确定】按钮，新建一个影片文档。执行【修改】菜单下的【文档】命令，在文档属性对话框中设置：大小为 550×400，背景色非白色、点击确定按钮，如图 5-1 所示。

图 5-1 文档属性设置

    2、制作“雨滴”影片剪辑元件

    （1）执行【插入】|【新建元件】菜单命令，在弹出的对话框中输入名称〖水滴〗，行为选影片剪辑，然后单击确定按钮。如图 5-2所示。

图 5-2 创建元件

    （2）选择【椭圆工具】,设置笔触色无、填充色为白色，在编辑区中绘制一个小椭圆。使用【选择工具】把小椭圆的上边缘拉尖，修整为水珠状，如图 5-3 所示。

图 5-3 绘制水珠

    （3）使用【选择工具】选中绘制的水珠，在属性面板里设置水珠的高为5、宽为14、坐标：X：0、Y：-130，如图 5-4 所示。

图 5-4 设置水珠属性

    （4）单击“图层1”的第 5 帧，按【F6】键插入关键帧。使用【选择工具】选中第 5 帧中水珠。在属性面板中把水珠的坐标调为X：0、Y：0。然后执行【窗口】|【设计面板】|【混色器】菜单命令，将第 1 帧中的水珠填充色的“AlPha”数值设为 0%。如图5-4 所示。

图 5-5 设置水珠的 AlPha 值

    （4）单击“图层 1”的第 1 帧，在属性面板的【补间】选项中选择【形状】如图 5-6 所示。这样就创建了一个水珠从无到有下落到地面的动画效果。下面我们开始制作水珠落地后激起的波纹效果。 

图 5-6 创建形状渐变

    （5）单击“图层 1”的第 6 帧，按【F7】键插入空白关键帧。选择【椭圆工具】，设置笔触为无，填充色为白色，在编辑区中绘制一个椭圆。使用【选择工具】选中绘制好的椭圆，执行【窗口】|【设计面板】|【信息】菜单命令，调出信息面板，在信息面板里设置椭圆的宽为 26、高为 10。注册点居中、坐标 X：0、Y：0。如图 5-7 所示。

图 5-7 信息面板设置椭圆的相关属性

    （6）选择【椭圆工具】，设置笔角触色非白色，填充色无，在“图层 1”的第 6 帧处，绘制一个无填充椭圆。使用【选择工具】选中绘制好的无填充椭圆，在属性面板里设置宽 20、高 8、坐标X：0、Y：0。如图 5-8 所示。然后使用【选择工具】选中内部的椭圆及无填充椭圆按键盘上的【Delete】键删除。效果如图 5-9 所示。

    图 5-8 绘制无边框椭圆       图5-9 第（6）步的最终效果

    （7）单击“图层 1”的第 20帧，按【F6】键插入关键帧。使用【选择工具】选中该帧上的图形，在属性面板里把它的宽设为200、高75。显示“混色器”面板，将填充色的“AlPha”数值设为 0%。

    （8）单击“图层 1”的第 6帧，在属性面板的补间选项中选【形状】，从需使波纹从小到大、从无到有的进行形状补间运动。

    （9）拖动“图层1”第 6 至20 帧，右键点击所选帧的任意一帧，在弹出的快捷菜单中选择【复制帧】命令。如图 5-10 所示。

图 5-10 复制帧

    （10）点击时间轴面板的【插入图层】按钮两次，新建“图层 2”和“图层 3” 。分别右击“图层 2”的第 10 帧和“图层 3”的第 14帧，在弹出的快捷菜单中选择【粘贴帧】命令。如图 5-11 所示。

图 5-11 粘贴帧

    （11）锁定“图层 1”和“图层 2” ，使用【选择工具】选中“图层 3”第 14 帧上的图形，显示“混色器”面板，将该波纹填充色的“AlPha”数值设为 70%。

    （12）锁定“图层 3”打开“图层 2” ，使用【选择工具】选中“图层 2”第10 帧上的图形，显示“混色器”面板，将该波纹填充色的“AlPha”数值设为 50%。

    （13）分别拖动“图层 2”和“图层 3”28 帧后的延长帧，单击右键，在弹出的快捷菜单中选择【删除帧】命令，在“图层 1”的第 28 帧处单击按【F5】键将帧延长至此。此时时间轴面板如图 5-12 所示。

图 5-12 时间轴面板

3．制作文字的形状补间动画

    （1）执行【插入】|【新建元件】菜单命令，在弹出的对话框中输入名称〖文字〗，行为选【影片剪辑】，然后单击确定按钮。

    （2）选择【文本工具】，在属性面板里设置：文本类型【静态】、字体【华文新魏】字体大小【40】、文本色【白色】如图 5-13 所示。

图 5-13 字体属性设置

    （3）点击图层 1 的第 1 帧，在编辑场景中输入文本“荷风送香气”，然后打开对齐面板，在对齐面板中点击：【相对于舞台】、【水平中齐】、【垂直中齐】按钮。分别单击第 10 帧、第 30 帧，按【F6】键入关键帧。双击30 帧处的文本，把文本中的内容“荷风送香气”改为“竹露滴清响” 。

    （4）单击第 10 帧，执行【修改】|【分离】菜单命令两次，把文字分离成打散的矢量图形，如图 5-14 所示。

图 5-14 分离文本

    （5）按照上步的操作把 30 帧处的文本“竹露滴清响”打散为矢量图形。

    （6）单击第 10 帧，打开属性面板。在属性面板的补间选项中选择【形状】如图 5-15 所示，这样就创建了由“荷风送香气”变为“竹露滴清响”的形状补间动画。

图 5-15 创建补间动画

    （7）点击第 40 帧，按【F6】键入关键帧。再右键点击第 10 帧，在弹出的快捷菜单中选择【复制帧】选项，然后再右键点击第60 帧，在弹出的快捷菜单中选择【粘贴帧】选项。最后回到 40帧，在 40帧处，创建形状补间动画。此时文字动画制作完毕，该元件时间轴上的状态如图 5-16 所示。

图 5-16 文字元件的时间轴状态

4．场景组装

    （1）单击【场景 1 按钮】，退出影片剪辑编辑状态，返回至“场景 1”中。把“图层 1”重命名为：背景。

    （2）执行【文件】|【导入】|【打开外部库】菜单命令，在弹出的对话框中选中本例提供的素材原文件，单击打开按钮。即打开了素材库。从打开的素材库中把“背影”图形元件提进场景，打开对齐面板，在对齐面板中点击：【相对于舞台】、【匹配高和宽】、【水平中齐】、【垂直中齐】按钮。这样就把图片的大小、位置设置好了。

    （3）点击时间轴面板的【插入图层】按钮，插图入“图层 2” 。并重命名为：“菏花” ，从素材为库中提进河花图形元件，安排好位置。（4）点击时间轴面板的【插入图层】按钮，插图入“图层 3”重命名为：“水滴” 。执行【窗口】|【库】菜单命令，从库面板分别中把“雨滴”影片剪辑元件拖放到场景，放到适当位置。

    （4）点击时间轴面板的【插入图层】按钮，插图入“图层 3”重命名为： “文字” 。从库面板分别中把“文字”影片剪辑元件拖放到场景，放到适当位置。

5．按 Ctrl+Enter 组合键预览动画效果。

最终效果