《动态网页设计与制作实用教程(第二版)》-第4章

《动态网页设计与制作实用教程(第二版)》

第4章 动画的基本形式 章本章学习导读 在Flash 8中，动画的制作分为帧动画、移动动画和形 中 动画的制作分为帧动画、 变动画3种基本形式。本章我们将分别讲述有关动画制作的 变动画 种基本形式。 种基本形式 基本概念和3种动画形式的制作过程 种动画形式的制作过程， 基本概念和 种动画形式的制作过程，通过本章学习读者应 该掌握以下内容： 该掌握以下内容： 场景、时间轴、帧、元件在动画制作中的作用 场景、时间轴、 帧动画、移动动画和形变动画的特点与制作过程 帧动画、

《动态网页设计与制作实用教程(第二版)》

第4章 动画的基本形式 章4.1 动画制作的有关概念 4.1.1 场景 动画中， 创作的工作区域。 在Flash 8动画中，场景是进行 动画中 场景是进行Flash创作的工作区域。在场景中可 创作的工作区域 以对当前帧的内容进行编辑， 以对当前帧的内容进行编辑，只有在场景的矩形区域中的内容才会最终 被导出成为Flash作品。场景可以不止一个，多个场景可以集合在一起 作品。 被导出成为 作品 场景可以不止一个， 并按它们在场景面板上排列的先后顺序进行播放。 并按它们在场景面板上排列的先后顺序进行播放。下面是关于场景的几 个基本操作： 个基本操作： 文档” (1)改变场景属性。使用“修改 文档”菜单或在工作区按右键选“文 )改变场景属性。使用“修改/文档 菜单或在工作区按右键选“ 档属性” 弹出文档属性窗口，设置属性参数。 档属性”,弹出文档属性窗口，设置属性参数。 (2)场景的缩放与移动。在动画制作中为了方便操作，可以通过菜单 )场景的缩放与移动。在动画制作中为了方便操作， 命令缩放工作区域。 命令缩放工作区域。

《动态网页设计与制作实用教程(第二版)》

第4章 动画的基本形式 章4.1.2 时间轴 时间轴是Flash中最重要、最核心的部分，如图 所示。Flash是 中最重要、 所示。 时间轴是 中最重要 最核心的部分，如图4-2所示 是 通过时间轴把一幅幅画面组织起来的，所以，时间轴在Flash动画制作 通过时间轴把一幅幅画面组织起来的，所以，时间轴在 动画制作 中扮演导演的角色。 中扮演导演的角色。 时间轴是进行有关帧和层操作的地方，主要由图层、 时间轴是进行有关帧和层操作的地方，主要由图层、帧和播放头组 可以分为左右两部分，左边部分用来对图层进行管理和操作， 成，可以分为左右两部分，左边部分用来对图层进行管理和操作，右边 部分用来对帧进行操作。 部分用来对帧进行操作。 4.1.3 帧 前面我们讲到了时间轴，随着时间的推进， 前面我们讲到了时间轴，随着时间的推进，动画会按照时间轴的 横轴方向播放，而时间轴正是对帧进行操作的场所。在时

间轴上， 横轴方向播放，而时间轴正是对帧进行操作的场所。在时间轴上，每 一个小方格就是一个帧，每一帧相当于场景中的一个镜头。 一个小方格就是一个帧，每一帧相当于场景中的一个镜头。在默认状 态下，每隔5帧进行数字标示 如时间轴上的1、 、 、 等数字标 帧进行数字标示， 态下，每隔 帧进行数字标示，如时间轴上的 、5、10、15等数字标 如图4-3所示 所示。 识，如图 所示。

《动态网页设计与制作实用教程(第二版)》

第4章 动画的基本形式 章4.1.4 元件 元件只是一种人为的规范， 元件只是一种人为的规范，我们将动画中一些出现频率比较高的物 件对象作用定义以便引用，而这种被定义的物件就是“元件” 件对象作用定义以便引用，而这种被定义的物件就是“元件”。元件好 像 被储备起来的演员，随时可调出来扮演角色。使用元件， 被储备起来的演员，随时可调出来扮演角色。使用元件，可以很方便地 对动画元素进行管理与修改，如颜色、亮度、透明度等。 对动画元素进行管理与修改，如颜色、亮度、透明度等。而且只需在库 窗口中对元件进行修改， 窗口中对元件进行修改，动画中所有被引用的该元件都会发生相应的变 化。 动画制作，文件体积当然越小越好，而使用元件， 动画制作，文件体积当然越小越好，而使用元件，可以在很大程度 上减小文件体积。如果动画中有很多重复的图形而不使用元件， 上减小文件体积。如果动画中有很多重复的图形而不使用元件，装载时 就要不断地重复装载图形；如果使用元件，则只需装载一次， 就要不断地重复装载图形；如果使用元件，则只需装载一次，以后就可 以通过调用来直接播放了。 以通过调用来直接播放了。

《动态网页设计与制作实用教程(第二版)》

第4章 动画的基本形式 章1.新建一个元件 . 选择“插入/新建元件 菜单(也可以选中场景中已有的图片， 新建元件” 选择“插入 新建元件”菜单(也可以选中场景中已有的图片，利用 “插 转换为元件” 弹出“ 入/转换为元件”),弹出“创建新元件”对话框。 转换为元件 ),弹出 创建新元件”对话框。 2.清除一个元件 . 在库窗口选中要删除的元件， 在库窗口选中要删除的元件，单击窗口下边框处的删除图标 ；或者 选中元件后，在右键菜单中选择“删除” 选中元件后，在右键菜单中选择“删除”。 3.拷贝一个元件 . 选中元件后， 复制” 选中元件后，在右键菜单中选择 “复制”,并在弹出的窗口中设置 元 件属性。 件属性。 4.元件的常规属性 . 元件有颜色、亮度、透明度等特殊效果， 元件有颜色、亮度、透明度等特殊效果，而这些效果可以通过属性面 板进行设置。 板进行设置。

《动态网页设计与制作实用教程(第二版)》

第4章 动画的基本形式 章5.元件的应用 . 在场景中应用元件包括应用本影片元件库中的元件和应用其他影片 元件库中的元件。应用本影片元件库中的元件，应先打开元件库面板， 元件库中的元件。应用本影片元件库中的元件，应先打开元件库面板， 将相应的元件用鼠标拖入场景工作区。 将相应的元件用鼠标拖入场景工作区。应用其他影片中的元件应该先通 过菜单“文件/作为库打开 打开相应的元件库，再应用其中的元件。 作为库打开” 过菜单“文件 作为库打开”打开相应的元件库，再应用其中的元件。

《动态网页设计与制作实用教程(第二版)》

第4章 动画的基本形式 章4.2 三种基本动画形式 帧动画、移动动画和形变动画的制作过程各有特点， 帧动画、移动动画和形变动画的制作过程各有特点，但制作原理是相 通的，即要解决以下3个问题 个问题： 通的，即要解决以下 个问题： (1)什么在动(确定运动对象)? )什么在动(确定运动对象)? (2)从哪里动到哪里(运动的起止位置)? )从哪里动到哪里(运动的起止位置)? (3)怎么运动(设置运动的性质)? )怎么运动(设置运动的性质)? 4.2.1 帧动画的制作 帧动画是由一帧一帧的画面组成的， 帧动画是由一帧一帧的画面组成的，要作出精美的动画需一幅一幅地 绘制画面，而后串接起来。帧动画的制作没有什么特别之处， 绘制画面，而后串接起来。帧动画的制作没有什么特别之处，只是绘制不 同的帧内容时，适当地利用以前帧的内容(洋葱皮效果)可以大大简化、 同的帧内容时，适当地利用以前帧的内容(洋葱皮效果)可以大大简化、 加快我们的动画制作进程。 加快我们的动画制作进程。

《动态网页设计与制作实用教程(第二版)》

第4章 动画的基本形式 章4.2.2 移动动画的制作 移动动画是通过改变对象的位置、颜色、大小、旋转角度、 移动动画是通过改变对象的位置、颜色、大小、旋转角度、透明度 等来实现的。改变以上属性需要设置“属性” 混色器”面板等， 等来实现的。改变以上属性需要设置“属性”和“混色器”面板等，该动 画 的运动对象必须是元件等实体。 的运动对象必须是元件等实体。

《动态网页设计与制作实用教程(第二版)》

第4章 动画的基本形式 章例4-3 运动的小球 程序， (1)打开 )打开Flash 8程序，在场景编辑窗口的左边用圆形工具绘制一个圆， 程序 在场景编辑窗口的左边用圆形工具绘制一个圆， 内部填色为“线性”渐变。 内部填色为“线性”渐变。 转换为元件” (2)用黑箭头工具选中刚刚绘制的圆，选择“插入 转换为元件”菜单， )用黑箭头工具选中刚刚绘制的圆，选择“插入/转换为元件 菜单， 弹出元件命名对话框，我们给圆命名为Ball,元

件的类型选为“图形”类 弹出元件命名对话框，我们给圆命名为 ，元件的类型选为“图形” 这样场景中的圆就变成元件了。 型。这样场景中的圆就变成元件了。 帧处单击右键， (3)在第 帧处单击右键，在出现的弹出菜单中，选择“插入关键帧”。 )在第30帧处单击右键 在出现的弹出菜单中，选择“插入关键帧” 插入新建关键帧后，系统自动复制Ball元件在工作区的左边缘处。用鼠 元件在工作区的左边缘处。 插入新建关键帧后，系统自动复制 元件在工作区的左边缘处 标直接按住Ball水平拖到工作区右边缘处。 水平拖到工作区右边缘处。 标直接按住 水平拖到工作区右边缘处 ),然后在帧属性面 (4)鼠标单击时间轴的第一帧(动画的开始关键帧),然后在帧属性面 )鼠标单击时间轴的第一帧(动画的开始关键帧), 补间”标签后的文本框中，选择动画形式为：动画，如下图所示。 板“补间”标签后的文本框中，选择动画形式为：动画，如下图所示。

《动态网页设计与制作实用教程(第二版)》

第4章 动画的基本形式 章帧到第30帧处所有帧的颜色都变 (5)此时可以看到在时间轴上，从第 帧到第 帧处所有帧的颜色都变 )此时可以看到在时间轴上，从第1帧到第 成淡蓝色，并且有一个黑色的箭头贯穿各帧。利用洋葱皮效果切换按钮， 成淡蓝色，并且有一个黑色的箭头贯穿各帧。利用洋葱皮效果切换按钮， 拖动时间标尺上的界标，使之覆盖所有帧。 拖动时间标尺上的界标，使之覆盖所有帧。 (6)测试动画。动画已经制作完成，在场景编辑窗口敲回车键直接预览， )测试动画。动画已经制作完成，在场景编辑窗口敲回车键直接预览， 可以看到Ball元件从左到右飞过场景，如下图所示。 元件从左到右飞过场景， 可以看到 元件从左到右飞过场景 如下图所示。

《动态网页设计与制作实用教程(第二版)》

第4章 动画的基本形式 章4.2.3 形变动画 创建Flash 8动画，除了上面提到的位置变化外，还有形状变化。形 动画， 创建 动画 除了上面提到的位置变化外，还有形状变化。 状变化指的是运动对象的构成进行了重新组合。 状变化指的是运动对象的构成进行了重新组合。形变的运动对象与位移动 画相反，必须是打散的实体，否则无法变形。 画相反，必须是打散的实体，否则无法变形。在Flash 8中实现图形变形 中实现图形变形 的途径有多种，比如：通过选择工具、变形工具、 的途径有多种，比如：通过选择工具、变形工具、编辑工具等都可以实现 变形

本文来源：https://www.bwwdw.com/article/7fei.html