1.补间动画的概念
相对于逐帧动画工作量大,Animate CC提供了一种快捷制作动画的方式,这就是补间。补间只需要绘制出开始和结束的两个关键帧的内容,两个关键帧中间的内容由电脑自己计算出来。也就是说,补间的开始和结束帧必须是关键帧,中间由电脑计算出的部分是过渡帧。用补间的方式制作的动画称为补间动画。
相对于逐帧动画,补间动画适合做一些有规律、相对简单的动画。
补间动画分为动作补间动画和形状补间动画。
(1)动作补间动画,也称为动作渐变动画,运用它可完成对图像的位移、缩放、旋转、变速、颜色、透明度等内容的动画处理。
构成动作渐变的元素是元件,包括图形元件、文字、影片剪辑和按钮等。对于不是元件的对象,需要将该对象转换为元件后才能创建动作补间动画。
(2)形状补间动画,用于创建形状变化的动画效果,使一个形状变为另一个形状,同时也可以设置图形形状位置、大小、颜色等的变化。
2.创建补间动画
(1)创建动作补间动画。创建补间动画仅需要在状态改变时创建关键帧。动作补间动画的基本制作方法是,在一个关键帧上放置一个对象,然后在另一个关键帧改变这个对象的大小、位置、颜色、透明度、旋转、倾斜、滤镜参数等。定义后,Animate CC自动补上中间的动画过程。
【例4-4】创建动作补间动画——行驶的汽车。
本实例是一辆小汽车行驶过大街的动画。通过改变物体的位置,来创建物体的移动动画;通过设置动画补间的“缓动”参数,来创建变速动画。学习的目的是掌握目标移动动画的制作,以及目标进行加速或减速运动的设置技巧。最终效果如图4-17所示。
图4-17 行驶的汽车
①打开“行驶的汽车.fla”源文件,共有4个图层:“背景1”“背景2”“背景3”和“小汽车”。
②选中“背景1”“背景2”“背景3”图层,在时间轴上第100帧的位置按F5键,延长背景图层显示的时间;选中“小汽车”图层,在第100帧的位置按F6键,插入一个关键帧,并将第100帧的小汽车对象向左移动到舞台外面合适的位置。
③选择“小汽车”图层,在图层的第1帧将小汽车对象移动到舞台右边的外面合适的位置。这第1帧和第100帧就是小汽车开始和结束的位置。
④在“小汽车”图层的第1帧和第100帧的中间位置单击鼠标右键,在弹出的快捷菜单中选择“创建传统补间”命令。在第1帧到第100帧之间创建了动作补间动画。
⑤打开菜单“控制”→“测试”命令,或者按Ctrl+Enter组合键,在舞台上查看动画效果,可以看到小汽车匀速地慢慢驶过街道。由此可见,在默认状态下,动画过渡的变化是均匀的。下面来调整动画补间的“缓动”参数制作汽车的变速运动。
⑥在“小汽车”图层的第1帧与第100帧之间单击鼠标,查看属性面板,找到“补间”→“缓动”,点击编辑按钮,打开“自定义缓动”对话框,在线条上单击鼠标添加3个控制点,并通过拖动控制手柄调整控制线,形成如图4-18所示的曲线。
图4-18 缓动调整面板
⑦按Enter键,在舞台上播放动画,可以看到在行驶过程中,汽车的速度模拟汽车进站出站的样子。(www.xing528.com)
⑧单击“确定”按钮完成设置。执行菜单“控制”→“测试”命令,测试动画。
(2)创建形状补间动画。创建形状补间动画与创建动作补间动画方法类似。所不同的是,形状补间的两个关键帧中的对象必须是可编辑的图形,如果是其他类型的对象,如文字或元件等,则必须将其分离为可编辑的图形。下面的例子中包括了形状补间和动作补间。
【例4-5】补间动画实例。
①新建一个ActionScript 3.0的文件,并保存为“补间动画.fla”,设置“帧频”为12。执行“文件”→“导入”→“导入到库”命令,导入一张图片到“库”面板。从“库”面板中将图片拖到舞台上“图层_1”第1帧位置。在第30帧插入普通帧,将画面延长到30帧。
②新建图形元件“五角星”。选择“多角星形工具”,绘制一个红色的五角星。
③新建图层“武”。在该图层的第1帧,从库面板中将五角星元件拖到舞台上。选择“任意变形工具”将五角星实例缩小,放到合适的位置,并在“属性”面板中设置其Alpha值为0,如图4-19所示。
图4-19 设置Alpha值
④在第11帧插入空白关键帧,将五角星元件拖到舞台上,调整后,放到合适的位置。
⑤在第1帧和第11帧之间的位置单击鼠标右键,在弹出的快捷菜单中选择“创建传统补间”命令,在第1帧到第11帧间创建了动作补间动画。在第1帧和第11帧之间的位置单击鼠标,在其“属性”面板中设置“顺时针”旋转。
⑥在第15帧插入关键帧,将五角星延长到这一帧。然后按Ctrl+B组合键将它分离。再在第25帧插入空白关键帧,在五角星的位置输入“武”字,并打散分离。在第15帧和第25帧之间右键单击,在弹出的菜单中选择“创建补间形状”,创建了形状补间动画,从五角星变成“武”字。
⑦分别新建图层“汉”“大”“学”,各图层重复步骤③~⑥。完成后,时间轴面板如图4-20所示。第5帧、第10帧、第25帧的动画画面如图4-21、图4-22、图4-23所示。
图4-20 时间轴面板
图4-21 第5帧画面
图4-22 第10帧画面
图4-23 第25帧画面
免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。