《网页设计与网站建设》 第12章 Flash动画制作基础

12.1 认识Flash
12.1.5.3 库 库是用于管理元件的地方，元件制作完毕后都会自动保存到库 中。打开库面板可以查看、选择和使用元件。可以通过选择 “窗口”→“库”命令来实现对元件的调用，也可以通过选择 “文件”→“导入库”命令来将外部的元件导入指定的图片库 中。 12.1.5.4 层
将不同的对象放置在不同的图层中，这样在修改其中一个对象 时不会影响到其他的对象。图层可以形象地理解为透明的玻璃 纸，不同的对象绘制在不同的透明纸上，它们相互重叠以显示 整体的内容，但在修改某一对象时其他对象不受影响。 对于图层的操作在时间轴的“图层编辑区”中实现。

面板组--
12.1.5 Flash中的一些基本概念
12.1.5.1 帧
帧是动画的基本单元， Flash动画就是许多连续 帧的内容连续播放构成的，一帧就相当于电影胶片 中的一格。 时间轴上的帧编辑区中横向排列的小方格就是 帧，处于自然状态下没有进行任何操作的帧称为 “空白帧”，每一帧对应的上方的数字是该帧的编 号。帧编辑区中的红色竖线是播放磁头，播放磁头 所在的帧就是当前所编辑的帧。
第12章 Flash动画 制作基础
2019/4/9
本章知识技能要点：


场景、时间轴、层、关键帧、普通帧的 概念 工具箱面板、属性面板的使用方法 形状补间和动作补间的概念和应用 运动引导层的制作和应用 遮罩层的制作和应用
12.1 认识Flash
12.1.1 Flash 8 简介 Flash是Macromedia公司出品的二维动画创作专 业软件，在计算机界的用途十分广泛，包括网页动画 制作，教学课件制作，小游戏制作和MTV制作等等。 Flash的前身是一款叫作“Future Splash”的矢量 动画插件，它的成长经历了Flash 4、Flash 5、Flash MX、Flash MX 2004和最新推出的Flash 8几个版本。 Adobe flash cs4是Flash的最新版本

时间轴--
12.1 认识Flash

场景舞台--
工作界面中央的白色区域就是场景舞台（也 称工作区），是显示和编辑动画对象的主要 区域。
是特定的功能单位的集合，包含某一特定的 功能，如动作面板、属性面板、混色器面板、 对齐面板和库面板等。设位置在状态栏的下 方，其左侧是图层编辑区，在此进行图层的 编辑；右侧是帧编辑区，完成动画的帧编辑。
12.3 形状补间动画
（3）单击时间轴上第1~20帧之间的任意一帧，在属性面板的 “补间”下拉列表中选择“形状”。此时时间轴的第1~20 帧之间就会显示为一条由第1帧指向第20帧的实线箭头。如 图。
12.3 形状补间动画
（4）完成形状补间动画制作。点击“Ctrl+Enter”键预览动画 的效果。
12.1 认识Flash
12.1.3 Flash文件的类型 FLA文件：包含Flash文档的媒体、时间轴和脚本等基本信 息的文件。是设计者在Flash中使用的主要文件。 SWF文件：在Web页中显示的文件。是FLA文件的压缩版 本。

12.1 认识Flash
12.1.4.2 Flash 8 的工作界面
12.2 形状、文字和颜色的应用
12.2.1 常用绘图工具的使用 工具箱面板中常用的绘图工具如图示。其中包括：
（1）叶子
（2）月亮
（4）花朵 （3）气球
（5）透视文字
（6）波浪文字
12.2 形状、文字和颜色的应用
12.2.2 文字和颜色的使用 12.2.2.1 文本工具的使用 选择绘图工具箱中的文本工具之后，在舞台下方的属性面 板中设置文本的属性，然后在场景中插入文字的位置单击， 即可输入文本。 1）编辑文本
12.3 形状补间动画
12.3.2形状补间动画的制作步骤 （1）新建一Flash文档，在图层1的第1帧的舞台中央画一 个矩形，如图。
12.3 形状补间动画
（2）右键单击时间轴图层1的第20帧，在弹出的快捷菜单里选 择“插入关键帧”命令。此时第1帧的内容自动被复制了20 帧，将第20帧的矩形删除，再用椭圆工具添加一个圆形。如 图。
（9）全部完成了56个关键帧的制作之后，该动画的制作就结束了。此时的时间轴 如下图。点击“控制”菜单→“测试影片”命令，便可以预览动画的播放效果， 可见小猫的眼睛在左顾右盼。
（10）关闭预览窗口。点击“文件”菜单→“保存”命 令，将文档保存为“.fla”文件，这种文件可以用Flash打 开，允许重新编辑，但是不能在网页中使用。 （11）点击“文件”菜单→“导出”→“导出影片”命 令，就会生成一个“.swf”文件，这种文件不可以用Flash 打开，也不允许重新编辑，但是能够插入到网页中，或 者直接用浏览器预览。
12.4 元件、实例与运动补间动画
12.4.1 元件和实例的概念 1） 元件：元件是可以在整部影片中反复使用的 特殊对象。它可以是形状、按钮或影片剪辑，在 Flash中只创建一次，然后自动成为当前文档的库 的一部分。每个元件都有自己的时间轴、场景及 图层。 2）实例：实例是对原元件的引用，其属性可以单 独设置，外观和动作无需和原元件相同。对元件 进行编辑后，该元件的每个实例都中，修改其属性，可以改变字体、 字体尺寸、颜色、对齐方式、字符间距等。 选择任意变形工具，可以对文本进行自由变换，其效果如图示。
12.2 形状、文字和颜色的应用
（2）将文字改变为形状

如果想要对文字的细节进行更为自由的改变，就要把文 字转换为形状，然后就可以象编辑形状一样来编辑文字 了。具体的步骤是：
（3）此时的图片位于文档的“图层1”当中，它只有一个帧，如果计划本动画共需要60帧， 就在时间轴的“图层1”中第60帧处右键单击，在展开的快捷菜单中选择“插入帧”命令， 就将第一帧的内容复制了60帧。时间轴上从第1帧到第60帧呈现一条灰色的阴影。如图示。
（4）单击时间轴右侧的图层编辑区右下端的“插入图层”按钮，为本 场景添加一新的“图层2”。 （5）现在开始绘制小猫的眼睛。即编辑图层2的第1帧（在图层2的第1 帧上单击，便选中了它）。单击工具箱面板中的“椭圆工具”，在属性 面板上修改“椭圆工具”的属性为：轮廓线为无色，填充色为黑色，如 图。
12.1 认识Flash
12.1.5.5 场景 Flash中的场景就如同电影里的分镜头，一个影视作品不可能 仅仅在同一个场景内完成，在不同的场景中相互切换，能使得 作品具有更加丰富的感染力。Flash也是如此。一个Flash文档 允许创建许多个场景，作者可以在不同的场景中编排不同的内 容，播放时可以任意控制各个场景先后顺序。 12.1.5.6 帧频率 帧频率（fps）就是动画的播放速度，指每秒播放的帧的多少。 Flash默认的帧频率是12.0 fps。
12.4 元件、实例与运动补间动画

（3）选择“窗口”→“库”命令，打开库面板， 即看到刚才建立的新元件。 方法二：创建新元件 可以直接在库中创建一个新的库元件，具体步骤是： （1）选择“插入”→“新建元件”命令，将弹出 “创建新元件”对话框。 或者单击库面板右下方的“新建元件…”按钮，也 可以打开“创建新建元件”对话框。 输入元件的名称，选择元件的类型，单击“确定” 按钮后，即可新建一元件。

方法三：将动画转换为影片剪辑，具体步骤是： （1）右键单击时间轴任意一个单元格，在弹出的 快捷菜单中选择“选择所有帧”。如图。
12.4 元件、实例与运动补间动画


（2）右键单击这些选中的帧，在弹出的 快捷菜单中选择“复制帧”命令，或者直 接选择“编辑”菜单→“复制帧”命令， 即可将所有选中的帧都复制到剪贴板上。 （3）选择“插入”→“新建元件”命令， 在弹出的对话框中输入元件名称，选择影 片剪辑作为元件的类型，然后单击“确定” 按钮，则舞台切换到元件编辑模式，用户 可以编辑元件。
1）使用箭头工具选中文本，然后选择“修改”菜单→“分离”
命令，将文本打散，其效果如图（1）和（2）所示。文字块分离 成单个文字之后，可以对其逐个进行编辑，如图（3）。
（1）
（2）
（3）
12.2 形状、文字和颜色的应用
2）选中对上述文字再一次选择“修改”菜单→“分离”命令， 这时文字对象转换成为形状对象。此后所有编辑形状的方法 都可以使用在这些文字上了。如图。
（6）使用上述设置的椭圆工具，在图层2的第1帧上绘制小猫的眼睛， 让小猫眼框的黑眼球最开始出项在眼眶里的最左端。 （7）右键单击图层2的第2帧，在弹出的快捷菜单里选择“插入关键帧” 命令，然后在这一关键帧上修改小猫眼框的黑眼球的位置向右偏移少 许。
（8）反复重复步骤（7），不断改变小猫眼框的黑眼球的位置，让其移 动到最右端后再向左偏移，形成眼球左右移动的效果。如图。
12.4 元件、实例与运动补间动画
12.4.2 新添库元件 新添一个库元件的方法有以下四种： 方法一：把场景舞台中的现有元素转换成元件 可以把场景舞台中已经编辑好的元素转换成库元件， 以便后来多次使用，步骤是： （1）选中工作区中的某个元素。 （2）选择“修改”→“转换成元件”命令，这时 弹出“转换为元件”对话框，输入元件的名称并选 择元件类型。如图。
12.1.5.1 帧

Flash中有两类重要的帧，即为“静态帧” 和“关键帧”。
静态帧：不参与任何动画效果的帧称为静态 帧，（静态帧也称作普通帧）。 关键帧：定义一个动作的起始状态和终止状 态的帧称为关键帧。

其中没有添加任何对象，只作为一个关键点存在，
称为空白关键帧。 关键帧在时间轴上的显示是在其间有一个黑色小 圆点（空白关键帧是一个小圆圈）。
进入Flash 8 以后，显示Flash 8的默认工作界面，如图示。
12.1 认识Flash

状态栏--


左侧显示着正在编辑的文件及内容，如图中显示的正 在编辑的是文件“未命名-1”的“场景1”。 右侧的两个按钮分别是“场景切换”按钮和“元件切 换”按钮。 最右端是工作区百分比显示窗口。 预设位置在状态栏的下方，其左侧是图层编辑区，在 此进行图层的编辑；右侧是帧编辑区，完成动画的帧 编辑。
12.2 形状、文字和颜色的应用
（3）将文字其修改为空心文字。

使用墨水瓶工具点击文字的轮廓，就给文字加上轮廓线。 如图（1）。在选中文字中间的填充颜色，按“Del”键将 其删除。便得到图（2）的空心文字效果。
（ 1）
（ 2）
12.3 形状补间动画
12.3.1 补间动画的概念 作者在制作动画时只负责制作第一个关键帧 和最后一个关键帧，由Flash自动生成这两个 关键帧之间的过渡部分的帧，这些帧的内容 是参照着上一帧的内容向下一帧的内容逐渐 的过渡变化的。这样产生动画称为补间动画。 补间动画包括：运动补间动画和形状补间动 画两种。在此先介绍形状补间动画。
12.1.5.2 元件

在Flash中，元件是整个动画的基础

元件有三种类型：
图形元件：最常用，用于创建静态元件，并且可
以引用外部的图片来作为元件。 按钮元件：用于创建动态交互按钮的形式，即在 鼠标处于不同的状态产生不同的响应。 电影剪辑元件：是动态视频剪辑元件 ，不同于上 面两种形式的是它有自己独立的时间轴，是动态 的元件形式。
12.4 元件、实例与运动补间动画

（2）此时状态栏上显示的“元件1”，即表示当前 的舞台工作区是编辑“元件1”的状态。如图。
（3）如同编辑一般的动画过程一样，使用绘图工 具绘图或导入媒体等方法建立元件的内容。 （4）当建完元件后单击图中状态栏中的“场景1”， 就可以返回到场景编辑状态。
12.4 元件、实例与运动补间动画
12.1.6 Flash的基本操作
“逐帧动画”，是指每一帧的内容都与其前一帧有所不同， 以此实现动画的效果。 下面详细介绍一个眼球会转动的小猫动画制作步骤： （1）打开Flash 8 ，由“文件”菜单→“导入”→“导入到 库”，选择一幅图片导入到库中。 此时的库面板中就可以看到一个位图元件，其名称为 “cat.jpg”,元件的类型是“位图”。如图所示。 （2）选中库面板中的“cat.jpg”元件， 直接从库面板中拖拽到舞台。然后点 击工具箱面板中的“任意变形”工具， 在舞台上改变图像的大小与场景的大 小相同。