学习目标 第6讲 制作动作补间动画 l掌握动作补间动画的原理和创建方法 l掌握使用动作补间动画表现蝙蝠飞翔的效果 l掌握时间轴特效的原理和使用方法 l掌握使用时间轴特效制作动态影集的方法 • 6.1 动作补间动画原理 • 6.2 时间轴特效• 5.3 课后作业本章大纲6.1 动作补间动画原理 6.1.1 知识点讲解动作补间是Flash动画应用最多的表现手法，只要有动画产生的 实例中就会使用动作补间，其重要性不言而喻，这里首先来认识其原 理 图6-1 动作补间动画 一、动作补间动画原理动作补间动画是指在两个或两个以上的关键帧之间对元件进 行补间的动画，使一个元件随着时间幻化其颜色、位置、旋转等 属性，如图6-1所示 动作补间动画只能对元件进行补间，如果对非元件的对 象进行动作补间动画时，软件将自动将其转化为元件 二、创建动作补间动画 在存储着同一元件两种不同属性的两关键帧之间任选1帧，然后在【 属性】面板上的【补间】下拉列表中选择【动作】命令或直接在该帧 上单击鼠标右键，在弹出的快捷菜单中选择【创建补间动画】命令， 如图6-2所示就可创建动作补间动画 如果两关键帧之中的任何一个关键帧的内容为空，将创建动作补间动 画失败，如图6-3所示 。
图6-2 右键操作 图6-3 创建失败 三、认识形状补间动画的属性面板当选中动作补间动画的任一帧时，其【属性】面板如图6-4所示 图6-4 【属性】面板 其中常用的选项为【缓动】和【旋转】选项，在【旋转】选 项中选择不同的方式，将使元件按不同的方式旋转 （1）“顺时针”是指元件播放时以顺时针方向进行旋转，并可在 【次】项中设置旋转次数 （2）“逆时针”是指元件播放时以逆时针方向进行旋转，并可在 【次】项中设置旋转次数 （3）“自动”是指元件的旋转由用户自己进行设置 （4）“无”是指元件不产生旋转 6.1.2 范例解析（一）──创建动作补间动画练习 请同学们在老师的带领下进一步学习动作补间动画的创建方法 ，并按要求完成以下操作 1、打开教学资源中的“素材\第6讲\创建动作补间动画\创建动作补间 动画.fla”文件，如图6-5所示 2、在“篮球”图层的第30帧处插入关键帧，然后向下移动篮球到如图 6-6所示的位置图6-5 打开制作模板 图6-6 调整篮球位置一 3、在第60帧处插入关键帧，调整篮球的位置如图6-7所示 4、分别在“篮球”图层的第1帧和第30帧处单击鼠标右键，在弹出 的快捷菜单中选择【创建补间动画】命令，从而在第1帧～第 30帧、第30帧～第60帧之间创建动作补间动画，此时【时间 轴】效果如图6-8所示 。
图6-7 调整篮球位置二 图6-8 创建动作补间动画 5、按Ctrl+Enter快捷键测试播放影片，虽然篮球运动起来了，但 是动作显的十分坚硬 6、选中第1帧，在【属性】面板中设置【缓动】为“－100”，如图 6-9所示，选中第30帧，在【属性】面板中设置【缓动】为“100”， 如图6-10所示 图6-9 设置缓动为“－100” 图6-10 设置缓动为“100” 7、按Ctrl+Enter快捷键测试播放影片，篮球的运动看起来具有一 定的速率变化了 8、选中第1帧，在【属性】面板中设置【旋转】为“顺时针”，【次 】为“1”，如图6-11所示，选中第30帧，在【属性】面板中做相同 的旋转设置 图6-11 设置旋转 9、再次测试播放影片，篮球的运动效果基本达到要求 6.1.3 范例解析（二）──制作“云海日出 ”花是带给人们幸福与浪漫的精灵本例将使用形状补间动画来制 作一个“浪漫的绽放”动画，带领读者来一同体验自己绘制出的浪漫感 觉，其设计思路及效果如图5-8所示 图6-12 制作思路及效果 1、制作云层元件 （1）新建一个Flash文档，设置文档【背景颜色】为“#666666”，其 他文档属性使用默认参数。
（2）新建一个影片剪辑元件并命名为“云块”，单击 按钮进入 元件内部进行编辑 （3）选择【椭圆】工具，设置【笔触颜色】为“无”，【填充颜色 】为“白色”，在编辑区绘制5个椭圆形成一片云的形状，如图6- 13所示 （4）新建一个影片剪辑元件并命名为“云层”，单击 按钮进入 元件内部进行编辑 （5）将【库】面板中的“云块”元件拖入编辑区，打开【滤镜】面 板，单击面板左上角的 按钮，选择“模糊”滤镜，设置参数 【模糊X】和【模糊Y】都为“30”，如图6-14所示 图6-13 绘制云块 图6-14 滤镜参数 【滤镜】面板默认情况下位于【属性】面板窗格中，单 击窗格上方“属性”右侧的“滤镜”便可转到【滤镜】面 板，也可执行【窗口】/【属性】/【滤镜】菜单命令打开 【滤镜】面板6）按住Ctrl键不放，利用【选择】工具拖动“云块”元件，复制 元件并摆放成如图6-15所示的云层状 图6-15 复制云块 2、制作天空元件 1）新建一个影片剪辑元件并命名为“天空”，单击 按钮进入元 件内部进行编辑 （2）选择【矩形】工具，在【颜色】面板中设置【笔触颜色】为“无 ”，【填充颜色】的【类型】为“线性”，从左至右第1个色块颜色 为“白色”，第2个色块颜色为“#0099FF”，如图6-16所示。
（3）在编辑区绘制一个宽高为“550px×400px”的矩形，并居中对齐 ，然后利用【填充变形】工具调整填充方向和位置如图6-17所示 图6-16 填充颜色 图6-17 调整填充 3、制作太阳元件 （1）新建一个影片剪辑元件并命名为“太阳”，单击 按钮进入元 件内部进行编辑 （2）选择【椭圆】工具，在【颜色】面板中设置【笔触颜色】为“无 ”，【填充颜色】的【类型】为“放射状”，从左至右第1个色块颜 色为“白色”，第2个色块颜色为“#FFFF00”，第3个色块颜色为 “#FFFF00”且【Alpha】参数为“0%”，如图6-18所示 （3）按住Shift键不放，在编辑区绘制一个宽高都为“100px”的圆形， 并相对于舞台居中对齐，如图6-19所示 图6-18 填充颜色二 图6-19 绘制太阳 4、导入高山元件 （1）返回主场景，执行【文件】/【导入】/【打开外部库】菜单命 令，选择教学资源中的“素材\第6讲\云海日出\高山素材.fla”文件 并打开，将里面的“高山1”、“高山2”和“高山3”元件拖入当前文 件的【库】面板中 （2）至此，所需元件制作完成，此时当前【库】面板如图6-20所示 。
5、布置动画场景 （1）新建并重命名图层，直至图层效果如图6-21所示 图6-20 【库】面板 图6-21 新建并重命名图层 （2）选择“天空”图层，将【库】面板中的“天空”元件拖入舞台并居 中对齐，使元件刚好覆盖整个舞台 （3）选择“太阳”图层，将【库】面板中的“太阳”元件拖入舞台，放 置在舞台的右下角，位置坐标x、y分别为“450”、“300”，如图 6-22所示 （4）选择“云层1”图层，将【库】面板中的“云层”元件拖入舞台， 放置到如图6-23所示的位置 图6-22 放置“太阳”元件 图6-23 放置第1个云层 由于不同的读者制作出的云层的大小和形状可能有所 不同，所以确定“高山”元件的坐标可方便读者对照效果 图对“云层”元件的位置进行合理的调整 5）选择“高山1”图层，将【库】面板中的“高山1”元件拖入舞台， 设置位置坐标x、y分别为“260”、“256”，如图6-24所示 6）选择“云层2”图层，将【库】面板中的“云层”元件拖入到舞台 中，放置到如图6-25所示的位置，使云层刚好遮住“高山1”的底部 图6-24 放置第1个高 图6-25 放置第2个云层 （7）选择“高山2”图层，将【库】面板中的“高山2”元件拖入舞台，设置位置坐标x、y分别为“108”、“195”，如图6-26所示。
8）选择“云层3”图层，将【库】面板中的“云层”元件拖入舞台，遮住“高山2”元件的底部，最终3个“云层”元件的位置如图6-27所示图6-26 放置第2个高山 图6-27 3个云层的位置 （9）选择“高山3”图层，将【库】面板中的“高山3”元件拖入舞台， 设置位置坐标x、y分别为“－2”、“145”，如图6-28所示 （10）选择“飘云”图层，将【库】面板中的“云块”元件拖入舞台，添 加“模糊”滤镜，如图6-29所示图6-28 放置第3个高山 图6-29 滤镜参数 （11）利用【任意变形】工具减小“云块”元件的高，使其变得细长， 并放置到如图6-30所示的位置，至此场景布置完成 图6-30 调整“云块”元件 6、制作“天空”动画 （1）在所有图层的第160帧插入帧 （2）在“天空”图层的第70帧和第120帧插入关键帧，选择第1帧中的 “天空”元件，在【属性】面板中调整【颜色】下拉列表中的“亮度 ”选项，设置亮度参数为“－100%”，如图6-31所示 图6-31 设置元件颜色属性一 （3）选择第70帧中的“天空”元件，在【属性】面板中调整【颜色】 选项为“色调”，设置色调参数如图6-32所示 。
图6-32 设置元件颜色属性二 （4）分别在“天空”图层的第1帧和第70帧单击鼠标右键，在弹出的快 捷菜单中选择【创建补间动画】命令，此时【时间轴】状态如图 6-33所示 图6-33 【时间轴】状态 7、制作“太阳”动画 （1）在“太阳”图层的第35帧和第120帧插入关键帧，删除第1帧中的 太阳元件 （2）选择第35帧中的“太阳”元件，在【属性】面板中设置其【颜 色】参数如图6-34所示 图6-34 设置元件颜色属性三 场景中的元件较多，为了方便选择正确的元件并防止对其 余元件的误操作，应灵活利用图层的锁定和隐藏功能3）选择第120帧中的“太阳”元件，调整元件的位置到“云块”元件 的上方，如图6-35所示图6-35 调整太阳位置 （4）在“太阳”图层的第35帧单击鼠标右键，选择【创建补间动 画】命令 8、制作“云层1”动画 （1）在“云层1”图层的第25帧、第80帧和第120帧插入关键帧，选 择第1帧中的“云层”元件，在【属性】面板中设置其【颜色】属性 如图6-36所示 图6-36 设置元件颜色属性四 这里所说的“云层”元件是指“云层1”图层中的“云层”元件 ，为了防止选错元件，可将“云层1”图层以外的图层全部 锁定。
在下面制作 “高山”和“云层”动画时也使用同样的 方法2）选择第25帧中的“云层”元件，在【属性】面板中设置其【颜 色】属性如图6-37所示 图6-37 设置元件颜色属性五 （3）选择第80帧中的“云层”元件，设置其【颜色】属性如图6-38 所示 图6-38 设置元件颜色属性六 （4）分别在第25帧和第80帧处创建补间动画9、制作“高山1”动画 （1）在“高山1”图层的第45、120帧插入关键帧，分别选择第 1、45帧中的“高山1”元件，设置其【颜色】属性如图6-39所示 图6-39 设置元件颜色属性七 （2）在第45帧创建补间动画 10、制作“云层2”动画 （1）在“云层2”图层的第35、70、120帧插入关键帧，分别选择第 1、35帧中的“云层”元件，设置其【颜色】属性如图6-40所示 图6-40 设置元件颜色属性八 （2）选择第70帧中的“云层”元件，设置其【颜色】属性如图6-41所 示 图6-41 设置元件颜色属性九 （3）设置元件颜色属性九分别在第35帧和第70帧创建补间动画 11、制作“高山2”动画 （1）在“高山2”图层的第55帧和第120帧插入关键帧，分别选择 第1帧和第55帧中的“高山2”元件，设置其【颜色】属性如图6-42所 示 。
图6-42 设置元件颜色属性十 （2）在第55帧创建补间动画 12、。