Flash动画及课件开发

第第 3 章章 简单的简单的 Flash 动画动画 本章要点 本章要点 了解计算机动画原理 Flash MX 动画的分类 逐帧动画的制作 形状渐变动画的制作 移动渐变动画的制作 3 1 计算机动画原理计算机动画原理 当我们坐在电影院看电影时 我们仿佛感觉得演员就在银幕上表演 那不是真的 道理很简单 电影放映时 连续的静止画面在放映镜头前快速地更换 利用人眼的视觉暂 留现象 使我们看电影的观众认为银幕上的演员动作起来 理论证明 只要电影拷贝的连 续画面每秒钟更换 16 幅时 连续画面就会在人眼中产生没有闪烁的动画影像 我们将组成动画的单幅静止画面称为 帧 一般情况下 连续的动画播放速度不得低 于 24 帧 秒 不同国家和地区由于采用的视频制式不同 在电视上每秒钟播放的画面帧数 也不同 例如 美国和日本采用的是 NTSC 制式 每秒钟动画由 30 帧画面组成 而中国和 欧洲大部分国家和地区采用的是 PALL 制式 一秒钟动画由 25 帧画面组成 如果制作的是 电影动画片头或特技 那么每秒钟的动画是由 24 帧画面组成的 我们最早看见的动画影片是画师用手工绘制 再由摄影师拍摄而产生的 笔者小时候 最先看到的动画是高玉宝原作 半夜鸡叫 改变的影片 据说该影片前期绘画用了几年的 时间 画面也多达十几万幅 计算机动画的产生同手工制作动画的原理相同 每一个动画均是由多幅连续有序的静 止画面构成 手工制作动画时 先由有经验的画师绘出关键的画面 关键画面之间的过渡画面由年 轻的画师来完成 手工画完成后逐帧拍成电影胶片 通过放映机连续播放 就完成了动画 计算机动画制作时 有经验的画师就是你 由你来制作关键的画面 也就是动画中的 关键帧 计算机是年轻的画师 它不知疲倦地为你完成关键帧之间的画面 它的运算速度 与精度使人们望尘莫及 当它播放动画时 实际上就是一幅幅画面的产生和刷新过程 在 这一点上 计算机硬件受到了考验 因为每帧画面所包含的信息量非常大 要在很短的时 间内刷新它 就需要计算机的速度足够快 3 2 跟我做第跟我做第 1 个个 Flash 动画动画 梨子滋味怎么样 还必须亲口尝一尝 Flash 动画究竟应该怎样制作 我们先通过一个 简单的实例来了解它的关键所在 我们做一个由圆变成矩形的动画 操作步骤如下 运行 Flash MX 打开的窗口就是新建的一个 无标题 1 的 Flash 文件 先在工具箱中选择椭圆工具按钮 在舞台右侧绘出一个圆 注意 由于 Flash MX 默认第 1 帧是空白关键帧 故没有必要在第 1 帧建立空白关键帧 选择第 30 帧 点击鼠标右键 在随后弹出的快捷菜单中选择 插入关键帧 紧接着上一步按 Delete 键删除该帧 第 30 帧 的圆形 在工具箱中选择矩形工具 按钮 在舞台左侧绘出一个矩形 选择第 1 帧 点击鼠标右键 在随后弹出的快捷菜单下方选择 属性 打开 属性 对话框 在 属性 对话框中间 有一个选项 中间 表示两关键帧之间动画的类别 点 击该栏右边列表按钮 从下拉列表中选择 形状 如图 3 1 所示 图 3 1 选择 形状 这里 选择 形状 是为了制作一个形状渐变动画 关于动画的类别在下一节中将会 介绍 关闭 属性 对话框 此时可以看到时间轴上起始关键帧与终点关键帧之间呈浅绿 色背景 有一箭头指向终点关键帧 说明动画制作已经成功 保存文件后 按 Ctrl Enter 键测试影片并输出一个同名的 Flash 电影 从这个实例中 我们可以总结一下 1 Flash 动画必须在两个不同画面的关键帧之间完成 中间的动画实际上是由计算 机运算出来的 如果只有一个关键帧 无法要求计算机制作出动画 2 动画制作完成后 一定要测试动画 测试动画的同时 会输出一个同名的 Flash 电影 读者可以从 Windows 操作系统的窗口打开自己保存的该实例文件 会发现两个同名的 Flash 文件 一个文件的图标是 相应的文件扩展名是 FLA 这是 Flash 原程序文件 一个文件的图标是 相应的文件扩展名是 SWF 这是 Flash 影片文件 3 3 Flash 动画的分类动画的分类 各种各样的动画五彩缤纷 动画的制作技巧也层出不穷 究竟怎样将 Flash 动画进行 分类呢 我们将 Flash 动画进行分类 一般是按动画创作的方法来区分的 我们制作 Flash 动画 既可以一帧一帧的绘制 也可以只设定两个关键帧 由计算机运算逐渐改变的中间画面来 完成 因此 Flash 动画一般可分成两大类 逐帧动画与渐变动画 渐变动画又可以根据两 关键帧之间的变化对象分成形状渐变动画 变化对象是图形 和移动渐变动画 变化对象 是元件 如图 3 2 所示 图 3 2 Flash 动画分类 3 4 逐帧动画逐帧动画 逐帧动画的每一幅画面均是由关键帧构成 如图 3 3 所示是一个逐帧动画的时间轴示 意 通过此图可以看到连续的画面都是关键帧 图 3 3 逐帧动画的时间轴 我们所做的逐帧动画可以去使用绘图工具在每一帧中绘制 也可以从外部逐帧导入图 片 这里就不演示逐帧绘制画面的逐帧动画 下面介绍从外部导入图片的两种逐帧动画制 作方法 3 4 1 逐帧动画方法一逐帧动画方法一 这种方法是先建立连续空白关键帧 再逐帧从外部导入图片 操作步骤如下 先选中第 1 帧 接着按住 Shift 键选定逐帧动画的最后 1 帧点击鼠标右键 在弹出的 快捷菜单中选择 转换为关键帧 Convert to Keyframes 命令 将所有选中的帧都转换成 空白关键帧 逐次选中每一空白关键帧 执行菜单命令 文件 导入 从预定的目标位置 导入图片 3 4 2 逐帧动画方法二逐帧动画方法二 这种方法是先将准备导入的图片放入同一文件夹中 然后依次将这些图片文件取同一 文件名且加上图片出现的序号 最后导入到逐帧动画的起始帧 操作步骤如下 将准备导入的图片放入同一文件夹中 然后依次将这些图片文件取同一文件名且加 上图片出现的序号 例如 N0051 N0052 N0053 N0054 如图 3 4 所示 图 3 4 图片文件的序号 在 Flash MX 的时间轴中 选定准备插入逐帧动画的起始帧 执行菜单命令 文件 导入 从预定的文件夹中导入图片 此时系统会弹出一个对话框如图 3 5 所示 图 3 5 询问是否输入全部图像序列的对话框 在上图的对话框中选定 是 系统将按序号导入所有的图片形成逐帧动画 完成这 部分的逐帧动画制作 在后面综合实例中 笔者还会运用到逐帧动画的制作方法 3 5 形状渐变动画形状渐变动画 对象形状逐渐改变的动画叫做形状渐变动画 在形状渐变动画中 对象的位置可以移 动 对象的颜色可以改变 但这种变化是以矢量图形对象为动画主角 舞台上的矢量图形 在没有转化为素材库中的元件之前 只是普通的图形 因此只能 用来制作形状渐变的动画 不能用来制作移动渐变动画 3 5 1 形状渐变动画形状渐变动画 形状渐变动画发生在两个不同形状的矢量图形之间 我们只要在两个关键帧上绘制不 同的图形就可以了 例 1 燃烧的蜡烛 运行 Flash MX 新建的一个 Flash 文件 保存文件名为 燃烧的蜡烛 先在工具箱中选择矩形工具按钮 接着在颜色选项栏选定描绘颜色工具 再点击下面的没有颜色按钮 随后在舞台上绘出一个没有轮廓线的矩形 执行菜单命令 窗口 调色板 打开调色板面板 选择 线性 填充方式 在 色彩区域调整区设定左侧为白色 右侧为深红色 如图 3 6 所示 设置完成后关闭窗口 图 3 6 设置第 步的调色板 图 3 7 设置第 步的调色板 选择工具箱的填充工具 在矩形中心单击 完成线性填充 为矩形所在图层取名为 蜡烛 然后中第 60 帧点击鼠标右键 从快捷菜单中选择 插入帧 Insert Frame 命令 这是为了使静止的蜡烛图像作为背景一直保持在场景中 点击时间轴左侧插入图层按钮 新建一个图层 取名为 火焰 在 火焰 图层第 1 帧 先在工具箱中选择椭圆工具按钮 接着在颜色选项栏选 定描绘颜色工具 再点击下面的没有颜色按钮 随后在舞台上绘出一个没有轮廓 线的椭圆 再次执行菜单命令 窗口 调色板 打开调色板面板 选择 径向 填充方式 在色彩区域调整区设定左侧为白色 中间为红色 右侧为浅黄色 如图 3 7 所示 设置完 成后关闭窗口 选择工具箱的填充工具 在椭圆下端单击 完成径向填充 再用工具编辑椭 圆 使之成为火焰状 分别在 火焰 图层的第 15 帧 第 30 帧 第 45 帧 第 60 帧插入关键帧 并对每 一帧的火焰形状进行修改 如图 3 8 所示 图 3 8 各关键帧的火焰形状 分别选定 火焰 图层的第 15 帧 第 30 帧 第 45 帧后点击鼠标右键 在随后弹出 的快捷菜单下方选择 属性 打开 属性 对话框 在选项 中间 栏下拉列表中选择 形状 依次形成形状渐变动画后关闭 属性 对话框 再次保存文件 按 Ctrl Enter 键测试影片并输出一个同名的 Flash 电影 通过动 画展示窗口可以看到蜡烛的火焰在微风中摇曳 如果在这个实例中选择黑色作为背景 可以得到更真实地效果 通过上面这个例子 我们可以看到要设计燃烧的酒精灯 篝火等都可以如法炮制 它 还给我们一个启示 凡是要制作一个动态的图形在静止的背景中变化 可以将它们分别放 在动态图层与静止图层之中 这样便于编辑修改 在图形渐变动画中 并不是要求起始帧与终点帧画面一定都只有一个图形 如果要设 计一个图形变成多个图形 也是可行的 下面是一个图形分裂成多个图形的实例 例 2 分裂 运行 Flash MX 新建的一个 Flash 文件 保存文件名为 分裂 先在工具箱中选择椭圆工具按钮 去掉轮廓线 任选一种填充色 在舞台上绘出 一个没有轮廓线的圆 选中圆 点击常用工具栏的复制按钮 在第 30 帧插入关键帧 接着点击常用工具栏的粘贴按钮 将复制在舞台中心的 圆拖放到舞台下方 按此操作连续复制三次 选定第 1 帧后点击鼠标右键 在随后弹出的快捷菜单下方选择 属性 打开 属性 对话框 在选项 中间 栏下拉列表中选择 形状 后关闭 属性 对话框 再次保存文件 按 Ctrl Enter 键测试影片并输出一个同名的 Flash 电影 3 5 2 绘图纸功能绘图纸功能 图形变化的中间过程也可以显示出来 这种显示需要使用绘图纸功能 绘图纸功能不 仅适用于形状类渐变动画 也适用移动类渐变动画 绘图纸功能一般也称为洋葱皮窗口 这种创作动画的过程模拟的是传统的动画片制作 方式 在传统的动画制作方式中 一般将一张张动作连贯的透明胶片固定叠加在灯箱上作 画 由于灯箱可以清晰透出叠在下面的每张透明胶片的内容 所以绘制下一张时可以轻松 地掌握图像位置关系 以前面 例 2 分裂 为例 在动画的时间轴上点击绘图纸外观按钮 帧数标尺上将 显示出绘图纸起点标记符号和终点标记符号 拖动起点标记符号或终点标记符号可以改变 绘图纸描绘的起始位置 如图 3 9 所示 图 3 9 绘图纸的起始位置 图 3 10 进入绘图纸状态的显示 这里介绍绘图纸功能的四个按钮 绘图纸外观 绘图纸边框 编辑多帧 修 改标记 绘图纸外观 单击此按钮 动画进入绘图纸状态 如图 3 10 所示 即是 例 2 分裂 进入绘图纸状态的显示 绘图纸边框 以外框形式显示动画的绘图结果 如图 3 11 所示 即是 例 2 分 裂 显示绘图纸边框的状态 图 3 11 显示绘图纸边框的状态 图 3 12 显示绘图纸边框和编辑多帧状态 编辑多帧 当按下此按钮时 所有的关键帧的内容均会与原色的方式出现在舞台 上 并且显示的关键帧可以选取和进行编辑 此按钮最好与绘图纸边框按钮一起 使用 以便观察得更清晰 如图 3 12 所示 即是 例 2 分裂 同时按下绘图纸边 框和编辑多帧的绘图纸状态 修改标记 当按下此按钮时 会弹出绘图纸设定的相关菜单 3 5 3 颜色变化的形状渐变动画颜色变化的形状渐变动画 在 Flash MX 中 颜色变化的形状渐变动画在制作上与普通形状渐变动画没有什么差异 只要在动画的起始帧图形与终点帧图形上设定图形不同的颜色即可 无论起始帧图形颜色 与终点帧图形颜色有什么差别 也不管填充颜色采用的是纯色填充还是渐变填充 即线性 填充或径向填充 计算机都会自动完成这种颜色变化的动画 3 5 4 添加形状提示控制点的形状渐变动画添加形状提示控制点的形状渐变动画 有时候我们在形状渐变动画中设定起始图形与终点图形 在测试结果的影片中 动画 确实是由起始图形变成了终点图形 但我们却感觉失望 这是为什么呢 这是因为我们有 时不仅要求图形变化由起始图形变成终端图形 同时还希望变化过程能按我们的设计进行 这时 运用形状提示控制点能帮助我们来控制图形的变化过程 形状控制点是指在图形的起点关键帧设定控制点 a b c d e 这些点设置在 图形的某些重要位置上 在终点帧 也会有相应的控制点 将这些点拖放到预先设计的特 定位置上 起始帧的控制点与终点帧的控制点一一对应 起始帧的 a 点渐变到终点帧的 a 点 起始帧的 b 点渐变到终点帧的 b 点 起始帧的 c 点渐变到终点帧的 c 点 复杂的 图形变化也能在控制点的控制下乖乖听话 下面我们通过一个例子来研究形状提示控制点的使用方法 例 3 添加形状提示点的研究 新建的一个 Flash 文件 在工具箱中选择矩形工具按钮 在舞台左侧绘出一个矩 形 去掉填充色 在第 30 帧插入关键帧 将矩形拖放到舞台右侧 选定第 1 帧后点击鼠标右键 在随后弹出的快捷菜单下方选择 属性 打开 属性 对话框 在选项 中间 栏下拉列表中选择 形状 后关闭 属性 对话框 按 Ctrl Enter 键测试影片 可以看到图形渐变动画已经成功 下面是研究形状提示控制点的使用 选定第 1 帧 执行菜单命令 修改 外形 添加形状提示 会在矩形中央 出现一个红色的 a 点 接着按 Ctrl Shift H 键多次 会依次出现 b c d 将这些点拖放到四个角上 此时分别选中起始帧与终点帧观察 会发现起始帧的红色形状提示点分布在四个角上 而终点帧的红色形状提示点还叠放图形中央 显示结果如图 3 13 所示 图 3 13 起始帧与终点帧形状控制点 下面将分别设置终点帧的形状提示控制点在图形的不同位置上 研究控制点的控制效 果 为了清晰地观察到变化过程 我们打开绘图纸功能的边框按钮和编辑多帧按钮 并设置绘图纸起点与动画起点一致 绘图纸终点与动画终点一致 设置终点帧形状提示控制点的位置与起点帧的形状提示控制点相同 敲 Enter 运行 结果如图 3 14 所示 图 3 14 终点帧与起点帧的形状提示控制点位置相同的动画 设置终点帧每一个形状提示控制点的位置依次逆时针移动一个角 敲 Enter 运行结 果如图 3 15 所示 读者可以清晰地看到图形逆时针逐渐变化 图 3 15 图形逆时针逐渐变化 相对于步骤 设置终点帧的 a 点和 c 点到对角线的角上 即交换两个点的 位置 敲 Enter 运行结果如图 3 16 所示 读者可以清晰地看到图形绕 bd 对角线进行了翻 转 图 3 16 图形绕 bd 对角线进行翻转 相对于步骤 设置终点帧各形状提示控制点到对角 敲 Enter 运行结果如图 3 17 所示 图 3 17 终点帧各形状提示控制点到对角 关于形状提示控制点 还有两点要说明 Flash MX 的形状控制点共有 26 个 即从英文字母 a 至 z 一般情况下 无论怎样复 杂的图形变化都能够控制 在起始帧与终点帧的形状提示控制点设置完毕时 起始关键帧的变形提示控制点呈 现为黄色 而终点关键帧中的形状提示控制点呈现为绿色 如果控制点不在图形曲 线上 则呈现红色 利用形状提示控制点功能可以精确地控制变形方向和方式 并使变形效果趋于平滑 具体的效果和妙用还需要读者在实际的应用中认真琢磨 3 6 移动渐变动画移动渐变动画 移动渐变动画是 Flash 动画中的主力军 大量的 Flash 创作作品 总是以移动渐变动画 为主 Flash 软件的开发者知道这个特点 因此在快捷菜单的最上面设定了建立移动渐变动 画的命令 创建动画动作 Create Motion Tween 请读者注意 这个命令只适用于建立 移动渐变动画 3 6 1 移动渐变动画基本操作过程移动渐变动画基本操作过程 移动渐变动画与形状渐变动画的最大不同在于动画的对象 移动渐变动画的动画对象 是元件 形状渐变动画的动画对象是矢量图形 因此 凡是需要制作移动渐变动画时 必 须先确认动画对象已是元件 移动渐变动画的制作过程可以总结为下面的操作步骤 建立元件 含由图形转换成元件 设定动画的起始关键帧与终点关键帧 设定动画动作 设定动画效果 下面以一个最简单的实例说明这种动画的基本操作步骤 运行 Flash MX 新建一个文件 选择矩形工具 在舞台左侧绘制出一个矩形 接着使用箭头工具选择这个矩 形 执行菜单命令 插入 Insert 转换成元件 Convert to Symbol 随后在 转换 成元件 对话框中选择 图形 素材 为元件取名为 矩形 如图 3 18 所示 最后点击 确定 关闭对话框 此时矩形中央出现一个符号 表示元件中心 矩形周围出现一个 淡蓝色的边框 这说明矩形已经转换成了元件 图 3 18 转换为元件对话框 在第 30 帧点击鼠标右键 从快捷菜单中选择 插入关键帧 选定第 1 帧点击鼠标右键 从快捷菜单的最上面选择 创建动画动作 Create Motion Tween 命令 此时时间轴上起始关键帧与终点关键帧之间呈现淡青色 有一箭头 由起始关键帧指向终点关键帧 按 Ctrl Enter 键测试影片 一个最简单的移动渐变动画已经完成 后面就可 以为动画加了各种效果了 导入 GIF 动画作为影片剪辑元件 能够得到更有趣味的移动渐变动画 例 4 走动的小公鸡 运行 Flash MX 新建一个文件 选择矩形工具 在舞台下方绘制出一个矩形 这个矩形将作为地面的背景存在 双击该图层名称栏 为此图层取名为 地面 选择第 50 帧点击鼠标右键 从快捷菜单中选择 插入帧 Insert Frame 这一操 作步骤是为了使地面背景从第 1 帧延伸到动画结束 动画共 50 帧 执行菜单命令 插入 新建元件 Convert to Symbol 随后在 创建新元件 对话框中选择 影片剪辑 素材 为元件取名为 公鸡 如图 3 19 所示 最后点击 确 定 关闭对话框 进入元件编辑窗口 图 3 19 为元件取名为 公鸡 在元件编辑窗口中 执行菜单命令 文件 导入 从外部导入预先准备好的 GIF 动画 在素材编辑窗口的时间轴上呈现出逐帧动画 如所示 图 3 20 时间轴上呈现出逐帧动画 点击素材编辑窗口时间轴下方的 场景 1 回到主场景中来 新建一个图层 取名为 公鸡 选定第 1 帧 执行菜单命令 窗口 库 打 开元件库窗口 从元件库中拖放影片剪辑元件 公鸡 到舞台上 调整初始位置在舞台 右侧的地面上 选择第 50 帧点击鼠标右键 从快捷菜单中选择 插入关键帧 接着在该帧将公鸡 拖放到舞台左侧的地面上 使得在动画移动过程中 公鸡从右侧走到左侧 按 Ctrl Enter 键测试影片 我们将看见小公鸡神气活现地从地面上走过去 如 图 3 21 所示 图 3 21 测试影片的效果 强调指出 在步骤 中应该按 Ctrl Enter 键测试影片 如果只敲击 Enter 检验效果 此时 Flash 动画在播放状态下 GIF 动画不会动 公鸡只能从右侧滑向左侧 3 6 2 旋转效果的动画旋转效果的动画 如果已经完成移动渐变动画 要为动画添加效果非常容易 以前面例 制作的简单动画 为基础 我们接着添加旋转效果 紧接着例 3 选定第 1 帧点击鼠标右键 从快捷菜单中选择 属性 打开帧属性 面板 从面板中设定旋转方向和旋转次数 如图 3 22 所示 关闭帧属性面板返回舞台 图 3 22 从面板中设定旋转方向和旋转次数 为了清楚地看到旋转过程 打开绘图纸功能的边框按钮和编辑多帧按钮 最后 按 Ctrl Enter 键测试影片 将看到矩形旋转效果如图 3 23 所示 图 3 23 矩形旋转效果 3 6 3 改变速度的移动渐变动画改变速度的移动渐变动画 在不作设定的情况下 动画对象的运动是匀速运动 我们可以使动画对象运动越来越 快或者越来越慢 这需要设置对象的属性 下面我们设计一辆小汽车水平运动时 速度减慢到逐渐停止下来 例 5 减速停车 运行 Flash MX 新建一个文件 选择矩形工具 在舞台下方绘制出一个矩形 这个矩形将作为地面的背景存在 双击该图层名称栏 为此图层取名为 地面 选择第 40 帧点击鼠标右键 从快捷菜单中选择 插入帧 Insert Frame 使地面背 景从第 1 帧延伸到动画结束 动画共 40 帧 执行菜单命令 插入 新建元件 Convert to Symbol 随后在 创建新元件 对话框中选择 影片剪辑 素材 为元件取名为 小汽车 最后点击 确定 关闭对话框 在元件编辑窗口中 执行菜单命令 文件 导入 从外部导入预先准备好的 GIF 动画 在素材编辑窗口的时间轴上呈现出逐帧动画 点击素材编辑窗口时间轴下方的 场景 1 回到主场景中来 新建一个图层 取名为 汽车 选定第 1 帧 执行菜单命令 窗口 库 打 开元件库窗口 从元件库中拖放影片剪辑元件 小汽车 到舞台上 调整初始位置在舞 台右侧的地面上 选择第 40 帧点击鼠标右键 从快捷菜单中选择 插入关键帧 接着在该帧将小汽 车拖放到舞台左侧的地面上 使得在动画移动过程中 汽车从右侧运动到左侧并停下来 选定 汽车 图层第 1 帧点击鼠标右键 从快捷菜单中选择 属性 在 属性 面 板 中间 栏先选择 移动 再于 简易 栏点击右侧按钮显现出滑杆与指针 用鼠标拖动指针可以使指针上下滑动 指针滑向上方 物体运动越来越慢 指针滑向下方 物体运动越来越快 在这个示例中 我们将指针滑向上方 使小汽车减速运动并停下来 如图 3 24 所示 设置完毕后关闭属性面板回到舞台上 图 3 24 将指针滑向上方改变速度 按 Ctrl Enter 键测试影片 我们将看见小汽车运动速度减慢并最后停止运动 如图 3 25 所示 图 3 25 例 5 动画效果 3 6 4 改变大小的移动渐变动画改变大小的移动渐变动画 动画对象在移动渐变过程中可以改变大小 这种操作也称为缩放对象的移动渐变动画 例 6 回家的小公鸡 运行 Flash MX 新建一个文件 执行菜单命令 文件 导入 从预先准备的文件夹中导入一幅有山 水 房子 树木的图片作为动画背景 调整图片的大小和位置 然后双击该图层名称栏 取名为 背 景 在 背景 图层中选择第 20 帧点击鼠标右键 从快捷菜单中选择 插入帧 Insert Frame 使背景从第 1 帧延伸到动画结束 执行菜单命令 插入 新建元件 随后在 创建新元件 对话框中选择 影片 剪辑 素材 为元件取名为 公鸡 在元件编辑窗口中 执行菜单命令 文件 导入 从外部导入预先准备好的小 公鸡 GIF 动画 点击时间轴下方的 场景 1 回到主场景中来 新建一个图层 取名为 公鸡 选定第 1 帧 执行菜单命令 窗口 库 打 开元件库窗口 从元件库中拖放影片剪辑元件 公鸡 到舞台上 调整初始位置在舞台 右侧 选择 公鸡 图层第 20 帧点击鼠标右键 从快捷菜单中选择 插入关键帧 接着 在该帧将公鸡拖放到图片中小房子的门口 使用自由转换工具 改变小公鸡的大小 使 得小公鸡能走进小房子的门 选定第 1 帧点击鼠标右键 从快捷菜单的最上面选择 创建动画动作 Create Motion Tween 命令 为了清楚地看到动画对象的大小变化过程 打开绘图纸功能的绘图纸外观按钮和 编辑多帧按钮 按 Ctrl Enter 键测试影片 我们将看见小公鸡向小房子走去 体形 越来越小 似乎越走越远 最后走进了小房子 如图 3 26 所示 图 3 26 小公鸡向小房子走去 3 6 5 颜色变化的移动渐变动画颜色变化的移动渐变动画 颜色变化也是动画的一种效果 使移动渐变动画呈现出颜色变化并不困难 我们添加 颜色效果主要是对动画起始帧与终点帧的动画对象改变颜色属性 这里不妨改变动画对象在终点帧的颜色 还是以前面例 制作的简单动画为基础 我们 接着添加颜色变化效果 紧接着例 3 在第 30 帧选中舞台上的矩形对象点击鼠标右键 从快捷菜单中选择 属性 打开对象属性面板 在对象属性面板右方选择颜色列表中的 色调 接着打开 调色板选定一种不同于起始帧对象的颜色如图 3 27 所示 关闭对象属性面板返回舞台 图 3 27 选定一种不同于起始帧对象的颜色 按 Ctrl Enter 键测试影片 我们看到矩形在动画过程中颜色逐渐改变 直到改 变成终点帧对象的颜色 3 6 6 淡入淡出效果的动画淡入淡出效果的动画 当动画对象登上舞台时 由淡淡的看不见到逐渐显示清晰称作淡入效果 当动画对象 退出舞台时 由清晰可见经逐渐淡化直到完全无影无踪称为淡出效果 淡入淡出效果能够 充分展示 Flash 的魅力 动画对象逐渐由无到有 从淡淡的形象到鲜艳的色彩 完成舞台 表演后 又逐渐淡化直到消失 出神入化 如虚如幻 淡入淡出效果只能产生在图形图像 文字等元件对象上 因此只有在移动渐变动画中 才有效 下面以文字元件为例 来讨论淡入淡出效果的制作过程 例 7 淡入淡出效果 最后的运行效果如图 3 28 所示 图 3 28 运行效果 运行 Flash MX 新建一个文件 运用文字工具 在舞台上输入文字 淡入淡出 选中文字 文字周围会显示淡 蓝色的线框 执行菜单命令 插入 转换成元件 随后在 转换为元件 对话框中 选择 图形 素材 为元件取名为 文字 并确定 分别在第 20 帧 40 帧 60 帧插入关键帧 并分别选定第 1 帧和第 40 帧后点击鼠标 右键 从快捷菜单中选择 创建动画动作 时间轴显示如图 3 29 所示 图 3 29 例 7 的时间轴 在动画关键帧 设定如下 选定第 1 帧 将文字拖放到舞台右边的台下 选定第 20 帧 将文字拖放到舞台中央 选定第 60 帧 将文字拖放到舞台左边的台下 选定第 20 帧后点击复制工具 对第 20 帧内容进行复制 接着选定第 40 帧 删 除该帧内容 再执行菜单命令 编辑 粘贴到当前位置 这样使第 20 帧与第 40 帧里文字都在相同位置上 选定第 1 帧点击鼠标右键 从快捷菜单的最上面选择 创建动画动作 命令 下面开始设置淡入与淡出效果了 在第 1 帧 选中 淡入淡出 文字后点击鼠标右键 从快捷菜单最下方选择命令 属性 打开元件属性面板 在 颜色 栏列表中选择 Alpha 确认滑杆指针在最下端 栏中显示为 0 如图 3 28 所示 最后关闭属性面板 由于第 1 帧是文字进入舞台的起 始关键帧 因此这里实际上已完成了淡入效果的设置 图 3 28 选择 Alpha 为 0 在第 60 帧 同步骤 一样操作 完成文字的淡出效果 按 Ctrl Enter 键测试影片 体会淡入淡出的效果 3 6 7 自定义路径的动画自定义路径的动画 在移动渐变动画中 动画对象在起始帧处于某一位置 在终点帧可能在另一位置上 也可以位置不变而改变对象的属性 如果不设定对象运动的路径 对象从起点到终点的 运动将是直线运动 很多动画必须根据实际情况使得对象沿设计者指定的路径运动 怎么 办呢 引导线图层可以满足我们的要求 使用引导线图层先必须明白几点 引导线图层只能对移动渐变动画起定义移动路径的作用 对形状渐变动画不起作用 因为形状渐变动画不能自定义移动路径 一个动画图层限定只能添加一个引导线图层 引导线图层的线条 文字等各种内容在影片输出时将不会显示出来 使用引导线图层操作步骤如下 先设定动画 对于动画对象 必须事先将其转换成元件 或预先建立图形动画元件 再设定好动画 的起始帧与终点帧 绘制引导线图层的路径线条 引导线图层是用来绘制自定义动画移动路径的 路径的绘制最好使用铅笔工具或线 条工具 绘制出草图之后再使用其他工具进行修改 绘制线条的颜色可以任意挑选 因 为播放动画时路径是隐藏的 不会显示任何线条 建立图层属性为引导线图层 如果在已完成动画图层的上面建立引导线图层 只需要在时间轴上点击添加引导图层 按钮 在动画图层上面将建立一个新图层 在此图层上绘制的线条就是下面一个图层 中动画的引导线 倘若 开始绘制路径线条的图层是普通图层 那么就必须建立图层属性为引导线图层 操作方法是 在该图层名称栏点击鼠标右键 从快捷菜单中选择 引导线 Guide 命令 只是还未确定引导线图层的引导对象之前 该图层名称栏的图标为 等到确定引导线图 层的引导对象之后 该图层名称栏的图标会自动变成 让动画对象在起始帧与终点帧贴齐路径 在动画的起始帧 要设定动画对象与路径线条上的某一点贴齐 在动画的终点帧 也 要设定动画对象与路径线条终点贴齐 播放动画时 动画对象将从起始帧的引导线上所在 位置运动到终点帧的引导线上所在位置 要让动画对象在起始帧与终点帧贴齐路径 最好先确认工具栏中贴紧对象按钮已选 中 这样可以确保对象很容易贴齐路径线条 下面我们以一个实际例子进行操作练习 例 8 飞行的小鸟 运行 Flash MX 新建一个文件 执行菜单命令 插入 新建元件 随后在 创建新元件 对话框中选择 影片 剪辑 素材 为元件取名为 小鸟 在元件编辑窗口中 执行菜单命令 文件 导入 从外部导入预先准备好的小 鸟 GIF 动画 点击时间轴下方的 场景 1 回到主场景中来 新建一个图层 取名为 小鸟 选定第 1 帧 执行菜单命令 窗口 库 打 开元件库窗口 从元件库中拖放影片剪辑元件 小鸟 到舞台上 选择第 30 帧点击鼠标右键 从快捷菜单中选择 插入关键帧 选定第 1 帧点击鼠标右键 从快捷菜单的最上面选择 创建动画动作 命令 到这 里为止 完成了动画的设定 在时间轴上点击添加引导图层按钮 在 小鸟 图层上面新建立了一个引导线图 层 该图层名称栏的图标是 在此图层绘制一根线条 作为小鸟的运动路径 用箭头工 具修改线条成曲线 确认工具栏中贴紧对象按钮已选中后 选择 小鸟 图层第 1 帧 用鼠标拖动小 鸟到线条起点释放 注意让中心标记贴齐路径线条的起点 如图 3 29 所示 图 3 29 让中心标记贴齐路径线条的起点 接着选择 小鸟 图层第 30 帧 用鼠标拖动小鸟到线条终点释放 注意让中心标记 贴齐路径线条的终点 如图 3 30 所示 图 3 30 让中心标记贴齐路径线条的终点 按 Ctrl Enter 键测试影片 检查小鸟是否按照路径飞行 3 6 8 遮罩功能的动画遮罩功能的动画 1 遮罩概述遮罩概述 Flash MX 动画有一项神奇的功能 遮罩功能 先来认识一下遮罩 我们建立两个图层 一个图层导入一幅风景图片 在风景图层上 面建立另一图层 在上面图层仅绘制几个矩形 按 Ctrl Enter 键可以看到上面图层的 矩形遮挡了下面图层的风景图片 如图 3 31 所示 图 3 31 上面图层的矩形遮挡了下面图层的风景图片 接着回到舞台上 在上面图层名称栏点击鼠标右键 从快捷菜单中选择 遮蔽 Mask 此时上面图层的图标变成 表示遮罩图层 下面图层的图标变成 表示此 图层为被遮罩图层 按 Ctrl Enter 键后看到的效果如图 3 32 所示 图 3 32 遮罩效果 现在读者知道了 遮罩显示内容由遮罩图层的矢量图形的形状决定 在遮罩图层中没 有矢量图形的位置 下面图层的图片内容将被隐蔽起来 在遮罩图层中有矢量图形的位置 下面图层的图片内容将显示出来 这就是遮罩功能 2 遮罩动画注意事项遮罩动画注意事项 请读者注意 遮罩图层中图形的颜色对遮罩没有影响 即矢量图形是白色或红色 遮罩效果都是 一样的 静止图层可以作为遮罩图层 动画图层也可以作为遮罩图层 同理 静止图层可以 作为被遮罩图层 动画图层也可以作为被遮罩图层 遮罩效果在动画模式下是无法显示出来的 只有在动画播放 即按 Ctrl Enter 时 才能显示出来 3 动画图层作为遮罩图层动画图层作为遮罩图层 下面我们以一个示例为说明动画图层作为遮罩图层的效果 例 9 探照灯效果 运行 Flash MX 保存文件为 探照灯效果 在系统默认的图层上新建两个图层 共三个图层 最下面的图层取名为 底色 中 间图层命名为 文字 最上面图层取名为 遮罩片 执行菜单命令 修改 影片 打开 影片属性 对话框 宽度不变 修改高度 为 100px 点击背景颜色的色块 设定背景颜色为黑色 其余不变 如图 3 33 所示 设定 完毕后点击 确定 关闭对话框 图 3 33 设置影片属性 选中 文字 图层第 1 帧 输入文字 湖北教育学院计算机系 输入完毕后 选定 文字点击鼠标右键 选择 属性 命令 打开文字属性面板 改变文字大小刚好布满整个 舞台宽度 设置文字颜色为红色 设置完毕关闭文字属性面板 选中本图层的第 40 帧 点 击鼠标右键从快捷菜单中选择 插入帧 选中 遮罩片 第 1 帧 绘制一个无线框的白颜色的圆形后 拖动圆形到文字的起