动作补间动画

（ 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所示。

图 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

动作补间动画