flash动作补间动画.pdf
动作补间动画 动作补间动画也是Flash 中非常重要的表现手段之一，与“形状补间动画”不同的是，动作补间动画的对象必需是“元件”或“群组对象”。运用动作补间动画，你可以设置元件的大小、位置、颜色、透明度、旋转等种种属性，充分利用动作补间动画这些特性，可以制作出令人眼花缭乱的动画效果。学习目的 本节你将学会以下知识：动作补间动画的制作方法 网站Banner 的制作方法 “文本工具”的使用方法 制作文字变色效果 制作文字大小缩放效果 制作文字改变透明度效果 课前热身 当你访问一个网站时，最先吸引你的可能是网站上方的广告条吧？这就是Banner,它具有灵活的实时性、强烈的交互性与感染力，你可以用它来说明自己网站的特点，提升网站的形象，如果你能用Flash将 Banner 做成动画的形式，那无疑会大大增加网站的吸引力。下面先用动作补间动画制作一个网站Banner 实例，效果如图3.1 所示。图3.1 网站Banner （1）创建影片文档 步骤1 设置影片文档属性 执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash 文档】选项后，单击【确定】按钮，新建一个影片文档。打开【文档属性】对话框，设置文件大小为520 60 像素，【背景色】为白色，如图3.2 所示。图 3.2 设置文档属性 步骤2 设置背景图层 执行【文件】|【导入】|【导入到舞台】命令，将配套光盘中的名为“banner 背景.bmp”图片导入到场景中（文件路径：配套光盘ch3素材ch3.2banner 背景.bmp），选择工具箱中的【箭头工具】和【任意变形工具】调整图片的大小和位置。选中第205 帧，按F5 键，添加普通帧，图片效果如图3.3 所示。图 3.3 设置背景 （2）创建元件 步骤1 创建“电脑动画”元件 执行【插入】|【新建元件】命令，新建一个图形元件，名称为“电脑动画”。在新元件编辑场景中选择第一帧，单击工具箱中的【文字工具】，在场景中单击一下，然后在【属性】面板上设置文本类型为【静态文本】、字体为【隶书】、字体大小为32、颜色值为#FF9900，设置完后，在场景中输入“电脑动画”四个字，如图3.4 所示。图 3.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 帧的效果 步骤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【时间帧】面板上的各层 在实际制作中，本例中各图形元件的大小、位置均不必拘束于书中的数值，你可自行调整至满意为止。课堂讲解 1动作补间动画的概念 （1）动作补间动画的概念 在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等，Flash 根据二者之间的帧的值创建的动画被称为动作补间动画。（2）构成动作补间动画的元素 构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图、组合等等，但不能是形状，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。（3）动作补间动画在时间帧面板上的表现 动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头，如图3-4-1 所示。图 3-4-1 动作补间动画在时间帧上的表现 （4）形状补间动画和动作补间动画的区别 形状补间动画和动作补间动画都属于补间动画。前后都各有一个起始帧和结束帧，二者之间的区别如下表所示。区别之处 动作补间动画 形状补间动画 在时间轴上的表现 淡紫色背景加长箭头 淡绿色背景加长箭头 组成元素 影片剪辑、图形元件、按钮、文字、位图等 形状，如果使用图形元件、按钮、文字，则必先打散再变形。完成的作用 实现一个元件的大小、位置、颜色、透明等的变化。实现二个形状之间的变化，或一个形状的大小、位置、颜色等的变化。（5）创建动作补间动画的方法 在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件，一帧中只能放一个项目，在动画要结束的地方创建或选择一个关键帧并设置该元件的属性，再单击开始帧，在【属性】面板上单击【补间】旁边的“小三角”，在弹出的菜单中选择【动作】，或单击右键，在弹出的菜单中选择【创建补间动画】，就建立了“动作补间动画”。2认识动作补间动画的属性面板 在时间线“动作补间动画”的起始帧上单击，帧属性面板会变成如图3-4-2所示。图 3-4-2 动作补间动画属性面板 （1）【简易】选项 用鼠标单击【简易】右边的按钮，弹出拉动滑杆，拖动上面的滑块，可设置参数值，当然也可以直接在文本框中输入具体的数值，设置完后，补间动作动画效果会以下面的设置作出相应的变化：在-1 到 -100 的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速补间。在 1 到 100 的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。默认情况下，补间帧之间的变化速率是不变的。（2）【旋转】选项 有四个选择，选择【无】（默认设置）可禁止元件旋转；选择【自动】可使元件在需要最小动作的方向上旋转对象一次；选择【顺时针】(CW)或【逆时针】(CCW)，并在后面输入数字，可使元件在运动时顺时针或逆时针旋转相应的圈数。（3）【调整到路径】将补间元素的基线调整到运动路径，此项功能主要用于引导线运动，我们在下一节中会介绍此功能。（4）【同步】复选框 使图形元件实例的动画和主时间轴同步。（5）【对齐】选项 可以根据其注册点将补间元素附加到运动路径，此项功能主要也用于引导线运动。
