传统补间动画应用技巧

传统补间动画和Flash CS4之前版本中的动作补间动画是相对应的。传统补间动画主要是针对图形对象的位置、大小、颜色等属性制作的渐变动画。和补间形状动画类似，传统补间动画需要插入两个关键帧，中间的补间帧由Animate CC自动生成，动画创建完成后，在时间轴上表现为蓝色背景、两个关键帧之间以箭头连接，如图7.76所示。

图7.76　传统补间动画的帧

1.元件和实例

补间形状动画的动画元素是打散的图形，而传统补间动画的动画元素是非打散的对象，如元件的实例、文本或组合。对于打散的图形，如果将其选中，然后按下Ctrl＋G组合键，对象即可形成组合。下面介绍如何在Animate CC中创建元件。

什么情况下使用元件呢？如果动画中有些元素是重复出现的，那么可以将这些对象创建为元件。在“库”面板上会显示文档中的元件，需要时可直接将其从“库”面板拖动到舞台上即可。

1）创建元件

如果需要将舞台上已有的对象转化为元件，可以单击“修改”→“转化为元件”菜单命令，或是按F8快捷键；如果需要在“库”面板中插入一个新的元件，则单击“插入”→“新建元件”菜单命令，或是按下Ctrl＋F8组合键。在创建元件时，需要选择元件的类型，如图7.77所示。Animate CC中包含图形、影片剪辑和按钮三种类型的元件。

图7.77　“创建新元件”对话框

　　（1）图形元件：通常把重复使用的静态图像创建为图形元件。图形元件虽然有自己的时间轴，但它与动画的主时间轴是同步的，因此图形元件中的动画序列是不起作用的。

（2）影片剪辑元件：影片剪辑元件拥有自己的时间轴，它独立于动画的主时间轴，因此影片剪辑元件中可以创建可重用的动画片段，可以包含声音、交互式控件或是其他的影片剪辑。

（3）按钮元件：在交互式影片中往往需要使用按钮，按钮元件默认包含弹起帧、指针经过帧、按下帧和点击帧，如图7.78所示。弹起帧为鼠标弹起并且光标不在按钮上时按钮显示的状态；指针经过帧为鼠标光标停放在按钮上时按钮显示的状态；按下帧为在按钮上单击鼠标左键时按钮显示的状态；点击帧用于设置按钮的响应区间，它决定在按钮的多大区域显示手形光标。

图7.78　按钮的时间轴

2）元件和实例

“库”面板中存放的是文档中的元件，如果在工作界面中找不到“库”面板，可以使用Ctrl＋L组合键将其打开。将元件从“库”面板拖动到舞台上，即创建了一个实例，同一个元件可以创建多个实例，而且每个实例的属性可以不同。

如果需要修改元件，可以在“库”面板上双击该元件，重新进入元件的编辑状态。元件被修改之后，舞台上的实例会相应地修改，而某个实例被修改后，其他实例不会发生变化，元件也不会受到影响。(www.xing528.com)

2.传统补间动画的制作

有了元件的概念之后，下面通过一个实例来讲解传统补间动画的制作过程。传统补间动画的制作主要涉及动画元素的位置、大小、旋转和Alpha等属性。

（1）新建一个ActionScript 3.0文档，单击“插入”→“新建元件”菜单命令，选择图形元件类型，进入元件1的编辑状态，绘制一个松鼠。

（2）单击“编辑”→“编辑文档”菜单命令，返回到文档编辑状态，选中图层1的第1帧，将“库”面板上的元件1拖动到舞台上，放置在舞台的最右侧。

（3）单击图层1的第20帧并按下F7键，插入一个空白关键帧，继续创建一个元件1的实例，放置在舞台的最左侧。

　　（4）鼠标右键单击第1帧，在弹出的快捷菜单中选择“创建传统补间”命令。

（5）按下回车键，观看动画效果，显示了松鼠从舞台右侧运动到左侧的过程，如图7.79所示。

图7.79　位置渐变效果图

（6）打开动画的“属性”面板，可以设置传统补间动画的属性，如图7.80所示。例如，“缓动”选项的默认值为0，表示对象匀速进行移动，正整数值表示的是减速运动，负整数值表示的是加速运动。如果在“缓动”文本框中输入“－50”，测试动画时发现松鼠开始时移动得较慢，越接近动画的末尾，松鼠移动的速度就越快。

图7.80　设置传统补间动画的属性

（7）单击图层1的第1帧，选中舞台上的松鼠，然后在“属性”面板上设置实例的色彩效果（图7.81），将Alpha值调整为0%。Alpha值表示的是实例的透明度，Alpha值越小，实例越模糊。

图7.81　实例的色彩效果属性

（8）按下回车键测试动画，显示了松鼠从无到有，从右侧移动到左侧的过程。

（9）单击“文件”→“另存为”菜单命令，将文件另存为“松鼠移动的传统补间.fla”。