动作补间动画

动作补间动画(1)

动作补间动画也是 Flash

运用动作补间动画，你可以设置元件的大小、位置、颜色、透明度、旋转等种种属性，配合别的手法，你甚 至能做出令人称奇的仿 3D

1

（ 1 ）动作补间动画的概念

在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等，Flash 根据二者之间的帧的值创建的动画被称为动作补间动画。

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

构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图、组合等等，但不能是形 状，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。

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

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

图3-4-1 动作补间动画在时间帧上的表现

（4）形状补间动画和动作补间动画的区别

形状补间动画和动作补间动画都属于补间动画。前后都各有一个起始帧和结束 帧，二者之间的区别如下表所示。

（5）创建动作补间动画的方 法

在时间轴面板上 动画 开始播放的地方创建或选择一个关键帧并设置一个元件，一帧中只能放一个项目，在动画要结束的地方创建或选择一个关键帧并设置该元件的属性，再单击开始帧， 在【属性】面板上单击 【补间】旁边的“小三角”，在弹出的菜单中选择【动 作】，或单击右键，在弹出的菜单中选择【创建补间动画】，就建立了“动作补间动画”。

2

在时间线“动作补间动画”的起始帧上单击，帧属性面板会变成如图3-4-2所示。

图3-4-2动作补间动画属性面板

（1）【简易】选项

用鼠标单击【简易】右边的 按钮，弹出拉动滑杆，拖动上面的滑块，可设置参数值，当然也可以直接在文本框中输入具体的数值，设置完 后，补间动作动画效果会以下面的设置作出相应的变化：

u       在 -1 到 -100

u       在 1 到 100

u      

（ 2 ）【旋转】选项

有四个选择，选择【无】（默认设置）可禁止元件旋转；选择【自动】可使元件在需要最小动作的方向上旋 转对象一次；选择【顺时针】 (CW) 或【逆时针】 (CCW)

（3）【调整到路径】

将补间元素的基线调整到运动路径，此项功能主要用于引导线运动，我们在下一节中会介绍此功能。

（4）【 同步】复 选框

使图形元件实例的动画和主时间轴同步。

（5）【对齐】选项

可以根据其注册点将补间元素附加到运动路径，此项功能主要也用于引导线运动。

动作补间动画(2)

3．实例1——飞行的飞机

实例简介

巍巍群山，茫茫云海，轻烟似的白云缓缓飘过，一架飞机由近而远的飞去，渐渐消失在远方，如图 3-4-3

图 3-4-3

知识提要

●    

●    

●    

（1）创建影片文档

步骤1 设置影片文档属性

执行 【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】 面板上设置文件大小为650×255像素，【背景色】为白色，如图3-4-4所示。

图3-4-4 影片文档属性

步骤 2

执行【文件】 | 【导入】 | 【导入到舞台】命令，山峰 .jpg 的图片导入到场景中 。 用【箭头工具】调整图片在舞台上的位置，使其居于舞台的中央。如果图片大小不合适，再选 择【任意变形工具】调整图片大小。选择第 100 帧，按 F5

（2）创建元件

步骤 1

执行【插入】 | 【新建元件】命令，新建一个图形元件，名称为“飞机”。这时进入新元件编辑场景，选择第一帧，执行 【文件】 | 【导 入】 | 【导入到舞 台】命令，将为飞机 .png 图片导入到场景中 。

步骤 2

执行【插入】|【新建元件】命令，新建一个图形元件，名称为 “白云”。这时进入新元件编辑场景，选择第一帧， 执行【文 件】 | 【导入】 | 【导入到舞台】命令，将名为“白云 .png

（ 3 ）创建动画

步骤1 创建飞行效果

单击时间轴右上角的 【编 辑场景】按钮，选择【场景 1 】，转换到主场景中。 新建一层，把库里名为“飞机”的元件拖到 场景的左侧，执行【修改 】 | 【变形 】 | 【水平翻转 】命令 ，将飞机元件实例水平翻转。在【属性】面板上打开【颜色】旁边的小三角，设置【Alpha】值为80%，如图3-3-5所示。

图3-3-5 第一帧中飞机在场景中的位置和Alpha值

飞机向远处飞去，应该越来越小，越来越模糊，来看看这种效果是什么做出来的吧，选中【图层2】的第100帧，按F6键，添加一个关键帧，在【属性】面板中设置飞机的大小，【W】值是飞机的宽值，为32；【H】值是 飞机的高值，为18.9；【X】、【Y】则是飞机在场景中的X、Y坐标，分别是628.5,51，如图3-4-6所示。

图3-4-6 飞机在100帧处的位置和大小

在【属性】面板上，设置【Alpha】值为20%。

用鼠标右键单击【图层2】的第一帧，选择【创建补间动画】。

步骤2创建白云飘过的效果

新建一层，从库中拖出名为“白云”的元件，放置在背景图右侧的山峰处，设置【Alpha】值为80%，在第100帧处添加关键帧，把元件移到场景的左上方，设置【Alpha】值为40%。

用鼠标右键单击图层的第一帧，选择【创建补间动画】。

执行【控制】|【测试影片】命令，观察动画效果，如果满意， 执行【文件】|【保存】命令，将文件保存成“飞机.fla”，如果要导出Flash的播放文件，执行【文件】|【导出】|【导出影片】命令，保存成“飞 机.swf”文件。

动作补间动画(3)

3． 动作补间动画应用——网站Banner

在第一章 中，我们已经学习了一个简单动作补间动画的制作全过程，这里来学习一个比较综合的案例应用。

实例简介

当你访问一个网站时，最先吸引你的可能是网站上方的广告条吧？这就是Banner,它具有 灵活的实时性、强烈的交互性与感官性， 你可以用它来说明自己网站的特点，提升网站的形象，如果你能用Flash做成动画的形式，那无疑会大大 增加吸引力。

我们来看看网站的Banner，

图 3-4-7 启航网站的 Banner

知识提要

●    

●    

●    

制作步骤

（1）创建影片文档

步骤1 设置影片文档属性

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

图3-4-8 启航Banner文档属性

步骤 2

执行【文件】 | 【导入】 | 【导入到舞台】命令，将名为“启航 banner.bmp ”图片导入到场景中 ，选择工具箱中的 【选择工具】和【任意变形工具】调整图片的大小和位置。选中第 205 帧，按 F5 键，添加普通帧，如图 3-4-9

图 3-4-9 设置背景  

（ 2 ）创建元件

步骤1 创建“电脑动画”元件

执行【插入】|【新建元件】命令，新建一个图形元件，名称为 “电脑动画”。在新元件编辑场景中选择第一帧，单击工具箱中的【文字工具】 ，在场景中单击一下，然后在【属性】面板上设置文本类型为【静态文本】、字体为【隶书】、字体大小为 32、颜色值为#FF9900，设置完后，在场景中输入“电脑动画”四个字，如图3-4-10所示。

图3-4-10 创建“电脑动画元件”

动作补间动画(4)

步骤 2

执行【插入】 |

步骤 3 创建“图像制作 ”

执行【插入】 |

步骤 4

执行【插入】|【新建元件】命令，新建一个图形元件，名称为 “闪客启航”。在编辑场景中选择第1帧，单击工具箱上的文字工具 ，在【属性】面板上设置文本类型为【静态文本】、字体为【隶书】、字体大小为50、颜色值 为#FF6600,在场景中输入“闪客沙龙”四个字，如图3-4-11所示。

图 3-4-11

步骤 5

执行【插入】|【新建元件】命令，新建一个图形元件，名称为 “语音教学”。在编辑场景中选择第1帧，单击工具箱中的【文字工具】 ，文字属性不变,在场景中输入“语音教学”四个字。

（3）创建动画

    “电脑动画”、“网页设计”和“图像制作”三组字体分别从大到小、由近及远以渐显的方式运动到舞台中央停留片刻，再移动到舞台左边，字体颜色和大小相应改 变。然后“闪客启航”一组字以同样的方式移动到舞台中央，突然消失，最后“语音教学”以旋转的方式移动到舞台正中，这就是本实例中文字的动画效果。下面， 我们就来实现这一动画效果。

步骤1 创建“电脑动画”文字效果

单击时间轴右上角的 【编 辑场景】按钮，选择【场景 1 】转换到主场景中。 在场景中新建一个图层。选择第1帧，把库里的“电脑动画”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为260.0，【H】值为45.0, 【X】值为58.0，【Y】值为48.0,【Alpha】值为3%，然后在第20帧处添加关键帧，在场景中选中文字，在【属性】面板中，设置【W】值为 141,【H】值为36，【X】值为127，【Y】值为12,选择【颜色】为【无】。

图3-4-12是“电脑动画”元件在【属性】面板中的第1、 20帧处的位置参数。

(a)第 1帧属性                （b）第20帧属性

图3-4-12 “电脑动画”属性设置

在第28帧处添加关键帧，不改参数，这是为了给该文字对象一 个停顿，让别人能看清楚。

在第48帧处添加关键帧，在【属性】面板上，设置【W】值为 75，【H】值为12,【X】值为12，【Y】值为9，选择【颜色】为【色调】、黑色，如图3-4-13所示。

图3-4-13 设置第48帧上实例的属性

分别用鼠标右键单击第1帧和第28帧，在弹出的菜单中选择 【创建补间动画】。

步骤2 创建“网页设计”文字效果

在场景中新建一个图层。在此图层的第49帧处添加关键帧，把 库里的“网页设计”元件拖到场景中，在【属性】面板上设置元件的【W】值为300，【H】值为83，【X】值为43，【Y】值为20，【Alpha】值为 6%。然后在第71帧处添加关键帧，在场景中选中文字，在【属性】面板中设置【W】值为135,【H】值为36，【X】值为131，【Y】值为11,选择 【颜色】为【无】，如图3-4-14所示。

图3-4-14 在第49、71帧中的“网页设计”

再在第78帧处添加关键帧，不改参数，在第97帧处添加关键 帧，在【属性】面板上，设置【W】值为81，【H】值为22,【X】值为18,【Y】值为20，选择【颜色】为【色调】、黑色。最后在第49和第78帧处 分别建立动作补间动画，在第205帧添加普通帧，效果如图3-4-15。

图3-4-15  创建补间后的时间轴结构及实例在第78帧的效果

动作补间动画(5)

步骤3 创建“图像制作”文字效果

在场景中新建一个图层。先在第98帧处添加关键帧，把库里的 “图像制作”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为360，【H】值为90,【X】值20,【Y】值23，【Alpha】值为5％, 然后在第119帧处添加关键帧，在场景中选中文字，在【属性】面板中，设置【W】值为144,【H】值为36，【X】值128,【Y】值10，【颜色】选 项为【无】,再在第126帧处添加关键帧，不改参数，在第146帧加关键帧，在【属性】面板中，设置【W】值为86，【H】值为22,【X】值为27, 【Y】值为35，选择【颜色】为【色调】、黑色，最后在第98和第126帧处分别建立动作补间动画，在第205帧添加普通帧，如图3-4-16所示。

图3-4-16 “图像制作”元件在第126、146帧的位置

步骤4 创建“闪客启航”文字效果

在场景中新建一个图层。先在第147帧处添加关键帧，把库里 的“闪客启航”元件拖到场景中，在【属性】面板中，设置元件的【W】值为487，【H】值为124,【X】值为-28，【Y】值-144，【Alpha】 值为3%，然后在第166帧处添加关键帧，在场景中选中文字，在【属性】面板中，设置【W】值为212,【H】值为54，【X】值123,【Y】值5，选 择【颜色】为【无】。最后在第147帧处建立动作补间动画，在第174帧插入空白关键帧。

步骤5 创建“语音教学”文字效果

在场景中新建一个图层。先在第174帧处添加关键帧，把库里 的“语音教学”元件拖到场景中，在【属性】面板上，设置【W】值为450，【H】值为115,【X】值-20,【Y】值29，【Alpha】值为3%。然 后在第194帧处添加关键帧，在场景中选中文字，在【属性】面板中，设置【W】值为210,【H】值为54，【X】值为123,【Y】值为3，选择【颜 色】为【无】。最后在第174帧处建立补间动画，顺时钟旋转一圈，如图3-4-17所示。

图3-4-17 “语音教学”元件在第174帧的【属性】面板参数

完成后的部分时间线情况如图3-4-18所示。

图3-4-18 【时间帧】面板上的各层

在实际制作中，本例中各图形元件的大小、位置均不必拘束于数值，你可自行调整至满意为止。

课堂实例：

摇摆的蜡烛光

迎奥运的banner