动态网页设计与制作实用教程（第三版） - 万水书苑-出版资源网

第 5 章 洋葱皮、图层及声音的应用

本章导读

本章主要讲解洋葱皮、图层及声音效果在 Flash 动画制作中的应用。熟练掌握这些工具才 能制作出声形并茂、丰富多彩的动画效果。通过本章的学习，读者应该掌握以下内容： l 洋葱皮效果的应用 l 图层技术的应用 l 声音技术的应用 

5.1 洋葱皮效果的应用 

Flash  中有种专门的多帧编辑与对齐模式，叫作“洋葱皮效果” （Onion  Skin） ，它们位于 时间轴下面。把“洋葱皮”视图模式打开，点按时间轴下面的图标 ，时间轴会变成如图 5­1  所示的样式。 图 5­1  洋葱皮工具 在图 5­1 的时间轴上出现了两个圆圈，它们分别代表洋葱皮的起始帧与终止帧，凡是在这 个范围内的帧都可在同一时间进行显示。现在我们把右边的圆圈拉到第 40  帧，时间轴会变成 如图 5­2 所示。 图 5­2  洋葱皮效果的应用 工作区中的内容也会有所变化，从第 1 帧到第 40 帧的内容全显示出来了。洋葱皮模式的 作用主要是用来进行多帧编辑， 在进行起始帧与终止帧的元素精确定位时， 它常常是必不可少 起始点 终止点

动态网页设计与制作实用教程（第三版）  50  的工具。 元件有个中心点，它是缩放与旋转操作的参照点，因此在进行多帧编辑时有必要先改变 元件的中心点再进行编辑。改变元件中心点的操作是在元件的编辑窗口中进行的。 

5.2 图层的应用

在大部分图像处理软件中，都引入了图层（Layer）的概念，灵活地掌握与使用图层，不 但能轻松制作出各种特殊效果，还可以大大提高工作效率。一个图层，犹如一张透明的纸，上 面可以绘制任何事物或书写任何文字，所有的图层叠合在一起，就组成了一幅完整的画。 图层有两大特点：除了画有图形或文字的地方，其他部分都是透明的（遮罩层除外） ， 也就是说， 下层的内容可以通过透明的部分显示出来； 图层又是相对独立的， 修改其中一层， 不会影响到其他层。在一个图层上只能定义对象的一种运动状态，当多个对象有不同的运动 状态时应将其放在不同图层上定义。如在一个小蜜蜂采花的动画中，花是静态的而蜜蜂是运 动的，在建立动画时应将蜜蜂和花放在不同的图层上分别定义其动作。 上面对图层的理解，不仅适合于 Flash，对其他图形处理软件，如 Photoshop、PaintShop、  Fireworks 等都是有效的。  5.2.1  图层的状态 在 Flash  中，图层有 4 种状态，如图 5­3 所示。通过鼠标单击图层名右侧的圆点，可调整 图层的状态。 图 5­3  图层的状态 l ：表明此层处于活动状态，可以对该层进行各种操作。 l ：表明此层处于隐藏状态，即在编辑时是看不见的，同时，处于隐藏状态的图层 不能进行任何修改。 这就告诉我们一个小技巧， 当要对某个图层进行修改又不想被其 他层的内容干扰时，可以先将其他图层隐藏起来。 l ：表明此层处于锁定状态，被锁定的图层无法进行任何操作。在 Flash 制作中，完 成一个层的制作后，就立刻把它锁定，以免误操作带来麻烦。 l ：表明此层处于轮廓模式。处于轮廓模式的层，其上的所有图形只能显示轮廓。  5.2.2  图层的基本操作 图层的基本操作可通过图层窗口中的工具图标进行。工具图标在图层窗口的左下角，下 面将结合操作过程讲述它们的应用。

第 5 章 洋葱皮、图层及声音的应用  51  1．新建一个图层 每次打开一个新文件时就会有一个默认的图层“图层  1” 。要新建一个图层，只需用鼠标 单击图层窗口左下角的“插入图层”按钮 ，或者调用“插入→图层”命令，这时，在原来图 层上就会出现一个新图层“图层 2” 。  2．选择图层 用鼠标单击该图层就选定了图层；在工作区域选中一个对象，按住 Shift 键，再选择其他 层的对象就可以选择多个图层。  3．删除图层 选中要删除的图层，单击垃圾桶图标 即可。  4．图层改名 用鼠标双击某个图层就可以进行改名了。  5．拷贝某个图层 选中要复制的图层，调用“编辑→复制（拷贝所有帧） ”菜单，再创建一个新层，并调用 “编辑→粘贴”菜单即可。  6．图层的顺序 我们已经知道，上层的内容会遮盖下层的内容，下层内容只能通过上层透明的部分显示 出来。因此，常常会有重新调整层的排列顺序的操作。要改变它们的顺序非常简单，用鼠标拖 住该层，然后向上或向下拖到合适的位置即可。  5.2.3  图层的属性 随便选中某个图层，右击，在弹出的菜单中选择“属性”命令，将弹出如图 5­4 所示的对 话框。 图 5­4  图层属性 本面板中，有图层名称、显示、锁定、类型、轮廓颜色、是否为轮廓等内容。 类型中，除了普通图层（Normal） ，还有“引导层”和“遮 罩层”两种。后面将介绍这两种图层的应用。  5.2.4  引导层 在 Flash 中，引导图层的名称前有一个“小锤”或者“弧线” 图标，如图 5­5 所示。 图 5­5  引导图层图标

动态网页设计与制作实用教程（第三版）  52  两种图标表示两种引导图层， “小锤”图标表示的是普通的导向图层，仅起到辅助静态定 位作用； 弧线图标表示的引导图层为运动引导图层， 在制作动画时起到引导对象沿指定路径运 动的作用。 下面通过一些简单的实例来介绍一下引导层的应用。 例 5­1  引导层的应用 要求：让一个球按指定的路线移动。 （1）在一个新建的影片文件中创建一个球形图形元件。 （2）回到场景中，将该元件从库中拖入图层 1 工作区的偏左位置。 （3）在图层  1  上右击，选择添加传统运动引导层。新图层名的左侧出现图标 ，标志 新添的层是引导层。 （4）利用铅笔等绘图工具，在引导层中制作图层 1 中球形元件的运动路线，如图 5­6 所示。 图 5­6  引导线 说明：图 5­6 中，只有那条路径是引导层中的内容，而那个圆球是图层 1 中的球。引导层 中的路径，在实际播放时不会显示出来。还有一点非常重要，路径的起点必须与被引导的对象 的中心点相重合。选中被引导对象时会出现一个“+”号，而这个“+”号所处位置就是该对 象的中心点。 （5）回到图层 1 中，并在第 15 帧插入关键帧。 （6）在第 15 帧处把圆球从左边位置拖到右边，并让圆球的中心点与引导线的尾端重合。 （7）为元件指定动作。选中过渡帧，并右击，在弹出的菜单中选择“创建传统补间” 。 完成设置后时间轴变化如图 5­7 所示。 图 5­7  引导层的应用 （8）测试动画，看圆球是不是按着指定的路线移动。 说明：引导层的要点在于被引导物件的中心点与引导路径的首尾重合。  5.2.5  遮罩层 从前面的知识我们知道： 层是透明的， 上面层的空白处可以透露出下面层的内容， Flash  的 遮罩层跟这个原理正好相反， 遮罩层的内容完全覆盖在被遮罩的层上面， 只有遮罩层内有内容 的地区可以显示下层图像信息。就像探照灯似的，黑色的背景上，只有一个探照灯，灯光打到 什么地方就显示出该处的内容。

第 5 章 洋葱皮、图层及声音的应用  53  例 5­2  遮罩层的应用 要求：实现在黑夜里探照灯照射到文字上的效果。 （1）在一个新建的影片文件中绘制一个圆，这个圆是遮罩效果要显示的区域，因而该图 层也叫“遮罩图层” 。 （2）选中上面创建的“遮罩图层” ，然后选择菜单栏中的“插入→时间轴→图层”命令， 创建一个新的图层，在新图层中添加文字“山东交通” ，注意文字不要打散，该图层又称为“被 遮罩图层” ，如图 5­8 所示。 图 5­8  创建图层 （3）在“被遮罩图层”的时间轴的第 30 帧处按 F6 键，创建一个关键帧。 （4）在“遮罩图层”的第 30 帧处按 F6 键，创建一个关键帧，选择第 1 帧，把圆移到文 字左侧，选中第 30 帧，把圆移动到文字右侧。 （5）在该图层上创建一个关于圆的移动动画，使该圆从左侧移动到右侧。 （6）在时间轴上将文字图层拖放到原来图层的下方，在“遮罩图层”中右击，在弹出的 下拉菜单中选择“遮罩层”命令，创建遮罩层，如图 5­9 所示。 图 5­9  创建遮罩层

动态网页设计与制作实用教程（第三版）  54  （7）此时时间轴上的图层如图  5­10  左图所示，制作完成，按  Ctrl+Enter  键进行测试。 效果如图 5­10 右图所示。 图 5­10  遮罩层的应用 

5.3 声音效果的应用

在  Flash  中也可以处理声音和视频，Flash  对声音效果提供了强有力的支持，既可以使声 音独立于时间轴连续播放， 也可以让动画和音轨同步， 或在鼠标滑过及按下按钮时发出特定的 声音，甚至可以为声音加上淡入淡出的效果，使动画更有特色。适当地给 Flash 动画配上一段 音频，将会产生意想不到的效果。例如，给按钮加上音频，当用户单击按钮时，也许会发出诸 如敲击琴键等形象的声音，会使动画变得更加生动。  5.3.1  影响声音质量的因素 在 Flash 中使用声音时，用户必须了解影响声音质量和文件大小的几个主要因素，其中最 重要的就是采样率（Sample Rate）和位分辨率（Bit Resolution）。 采样率是指在进行数字录音时单位时间内对音频信号进行采样的次数。这个频率的单位 为赫兹（Hz）或千赫兹（kHz）。采样率越高，声音越好。例如，MP3 音乐一般都是以 44.1kHz  频率采样的声音，每秒要对声音进行 44100 次分析，并记录下每两次分析之间的差别。高采样 率可以得到丰富完整的声音信息。声音的采样越少，失真现象就越明显。降低声音文件的采样 率，文件的大小也会成比例减少。 位分辨率（或叫位深度）是另外一个影响音频质量的因素。位分辨率指用于描述每个音 频采样点的比特位数。它是一个指数，8 位声音采样意味着 2 的 8 次方或者 256 级，16 位声音 采样表示 2 的 16 次方或者 65536 级。 同等长度的 16 位声音比 8 位声音描述的声音信息要多得 多。与 8 位声音相比，16 位音频中的额外信息可以使得背景的噪音降至最小，而且更清晰更 丰富；但 16 位的声音比 8 位声音文件大一倍。  5.3.2  音频文件的导入 一般在 Flash 中使用的声音格式是 MP3 和 WAV，要将声音添加到文档中必须先导入，导 入的方法有两个： 方法一：使用菜单栏中的“文件→导入→导入到库”命令，可以将声音导入到库中。 方法二：使用菜单栏中的“文件→导入→导入到场景”命令，同样也可以导入声音，但

第 5 章 洋葱皮、图层及声音的应用  55  是声音不会在场景上显示，也是导入到库中的。 选中一个关键帧，打开“属性”面板，在“声音”下拉列表中选择需要添加的声音，如 图 5­11 左图所示。 图 5­11  声音选择和设置 添加声音后可以进行其他的设置，如图 5­11 右图所示。可以设置的参数如下： （1） “效果”下拉列表：设置淡入、淡出等渐变效果。 （2） “编辑”按钮：对声音的渐变效果进行细致设置。 （3） “同步”下拉列表：可以选择同步方式，决定在同步播放过程中声音与时间轴动画 的关系：在动画暂停的时候，声音是跟着暂停，还是独立播放下去。 （4） “重复”方式：设置声音的重复方式，可以是“重复” ，也可以是“循环” 。 （5）重复次数：设置声音重复的次数。  5.3.3  声音的同步方式 在时间轴上可以设置声音的 4 种同步方式，在实际的应用中注意选择合适的同步方式。 （1）事件。使用事件方式，会使声音和一个事件的发生过程同步起来，事件声音在显示 起始关键帧时开始播放，并独立于时间轴完整播放，即使 SWF 文件已经停止，声音播放也会 继续，事件声音的一个示例就是当前用户单击一个按钮时播放的声音。 （2）开始。 “开始”方式与“事件”方式的功能相近，但是如果声音已经在播放，则新 声音实例不会播放，如果使用“事件”方式后，出现了同一个声音多次重叠出现的不良现象， 那么可以将同步方式改为“开始”来解决这个问题。 （3）停止。 “停止”方式的作用是使指定的声音静音，使用“事件”或者“开始”方式 启动了声音之后，如果声音播放结束之前想强制静音，就可以使用“停止”方式。 （4）数据流。 “数据流”方式的声音将会严格与时间轴同步，如果影片在播放，就播放 声音；如果影片暂停，声音就会停止。数据流的一个示例就是  MV  的制作。如果不使用“数 据流”方式，那么音乐很容易在播放过程中与动画、台词脱节。  5.3.4  给动画加上声音 在 Flash 中可以给某一帧加上声音，即当动画播放到这一帧时声音就开始播放，或者是给 按钮加上声音，即可以给按钮的 4 个状态： “弹起” 、 “指针经过” 、 “按下”和“点击”中的某

动态网页设计与制作实用教程（第三版）  56  些状态中加入声音，当触发按钮的某一状态时声音就开始播放。当然，加入的声音文件必须先 进行导入操作。  1．给某一帧加上声音 给某一帧加入声音时，首先要导入声音，并专门为声音创建一个新的图层。在场景中可 以有任意数目的声音图层，Flash  将对它们进行混合。但是，太多的声音图层将增大影片文件 的大小，而且影响到计算机的处理速度。 另外，加入的声音文件大概要播放的帧数，用户可以通过这个关系式进行估计：声音文 件的长度×帧频率（可以通过“修改→文档”菜单命令设定） 。例如，一个 10s 的声音片断在 帧频率设置为 12fps 的动画中，将占据时间轴上的 120 帧，同样在 6fps 的动画中，它将只占据  60 帧。 给某一帧加入声音的操作如下： （1）在“场景编辑”窗口中新建图层，作为声音图层，并在声音图层上需要播放声音处 插入关键帧。 （2）启动“属性”面板，单击声音图层上的开始关键帧，出现如图 5­12 所示的“帧属性” 面板。在“声音”标签后的下拉列表中选择已导入的声音文件。选择完成后，在声音图层上声 音关键帧处将出现声音波形。 图 5­12  声音属性的设置 （3）设置声音的属性。根据选项内容，设置各个选项，完成给某一帧加入声音的操作。 新建声音层，加入了声音文件的层如果没有显示出声音波形，只要大概估计一下声音所 占的帧数，然后在相应的起始帧后的帧数处再添加一个关键帧就可以了。  2．给按钮加上声音 在很多的多媒体作品中，单击按钮时除了产生动画变化外，还会发出一些特殊的声音， 使操作更加生动。 在 Flash  中实现这些效果其实非常简单。 因为在通常情况下， 每一个 Flash  的 按钮元件都是由 4 个关键帧组成（ “弹起” 、 “指针经过” 、 “按下”和“点击” ），为不同的关键 帧设置不同的音频引用就可在单击按钮时产生不同的声音效果。 说明：Flash  中给“弹起”状态添加声音的效果等同于给“指针经过”状态添加声音，给 “点击”状态添加声音等同于给“按下”状态添加声音。 为按钮添加声音的操作如下： （1）导入所需要的声音文件。

第 5 章 洋葱皮、图层及声音的应用  57  （2）启动“库”面板，双击要加入声音的按钮对象，进入“按钮编辑”窗口。 （3）单击选择要加入声音的某一关键帧，如“指针经过”或“按下” 。 （4）启动“帧属性”面板，选择声音文件，设置声音属性。设置方法同上，这里就不详 述了。 按钮加入声音后，对应帧的中部位置有一条横线。经过上述步骤的操作后，就完成了对 按钮对象加入声音的操作。

本章小结

在 Flash 的动画制作过程中恰当地运用洋葱皮、图层及声音技术可以产生丰富生动的动画 效果。但这些技术也不可滥用，一定要和整个动画的内容协调配合。

思考练习 

1．利用图层效果制作一个蝴蝶在花朵上飞舞的动画。  2．练习给一个动画加上背景音乐。  3．利用形状动画的原理，练习制作一个从一个运动圆形孔中观看底部文字的动画。 提示：文字为被遮罩层，圆为遮罩层，圆作位移运动。

第 6 章 动画技术的综合应用

本章导读

前几章介绍了 Flash CS5 动画制作的基本概念、基本动画形式和各种制作技术。本章主要 讲述交互动画的制作和各种动画制作技术综合运用的实例。通过实例使大家加深理解 Flash 的 强大功能和使用技巧。通过本章的学习，读者应掌握以下内容： l 交互动画的制作技术 l 动画的优化与输出 l 动画制作技术的综合运用

6.1 交互动画的制作

6.1.1  交互动画的原理 交互动画就是观众能控制动画播放内容的动画，动画的播放不仅仅是由设计者自己决定 的，还决定于播放者的操作，这样观众就由被动地接受变为主动地控制，将大大增强动画的感 染力和吸引力。 动画之所以具有交互性，是通过对帧或按钮设定一定的动作脚本（Action Script）来实现 的。所谓的“动作” ，指的是一套命令语句，当某事件发生或某条件成立时，就会发出命令来 执行特定的动作。而用来触发这些动作的“事件” ，无非就是播放指针移到某一帧，或者用户 单击某个按钮或按某个键。当这些事件发生时，动画就会执行事先已经设定好的动作。 动作命令可以是一个短语，如 Play（播放动画）和 Stop（停止播放）。也可以是一系列的 短句。 大多数的动作命令不需要编程经验， 但如果想要深入开发， 就必须对编程语言比较熟悉。

说明：在 Flash CS5 中，Action  Script 包括 3 个版本，AS 1.0、AS  2.0 和 AS 3.0，AS 1.0  和 AS 2.0 是 Micromedia 时代的脚本， AS 3.0 是 Adobe 时代的产物， 在语法和使用上差别很大。 所以在创建 Flash 文件的时候， 要注意选择自己熟悉的 Action  脚本语言。 本书代码基于 AS 2.0  创建，因此在做练习时请选择创建 Flash Action Script 2.0 文件，如图 6­1 所示。

由于篇幅限制等原因，我们只讲解动作的概念以及最常用的几个行为命令，利用有限的 几个命令我们也能够做出精彩的、交互性很强的动画。 

6.1.2  简单交互动画的制作 

Flash Action Script 2.0 中交互功能是通过一个这样的过程来实现的：事件→动作→目标， 就是某一事件发生后将触发相应的行为，相应的行为就会作用于目标，产生出特定的效果。在 动画中添加交互功能，可以通过两种方式来触发事件：一种是基于动作事件（例如单击鼠标或 键盘）来完成交互，这种交互也被称为按钮事件交互，因为它们总是通过按钮来触发动作的；

第 6 章 动画技术的综合应用  59  另外一种是基于时间的， 当动画播放到某一帧时就会触发相应的事件来完成交互功能， 这就是 帧事件交互。 图 6­1  创建 ActionScript 2.0 文件  1．按钮事件交互 创建一个 Flash Action Script 2.0 文件，实现按钮事件交互的基本操作如下： （1）制作按钮元件 A1，并将按钮元件拖入工作区。 （2）在按钮 A1 上右击，选择弹出菜单中的“动作”命令，启动“动作——按钮”面板， 如图 6­2 所示。 图 6­2  选择操作模式 （3）单击面板中的图标 ，依次选择弹出菜单中的“全局函数→时间轴控制” ，则面板 中弹出如图 6­3 所示的动作选择菜单。 图 6­3  动作选择菜单

动态网页设计与制作实用教程（第三版）  60  时间轴控制动作简单介绍如下： l  gotoAndPlay：使动画指针转向指定帧并播放。 l  gotoAndStop：使动画指针指向指定帧并停止播放。 l  nextFrame：下一帧。 l  nextScene：下一场景。 l  play：开始播放动画。 l  prevFrame：前一帧。 l  prevScene：前一场景。 l  stop：停止播放动画。 l  stopAllSounds：停止播放所有的声音。 如果我们选择了  gotoAndplay  动作，则在图标 下的窗口中出现一行函数代码：为事件 触发的动作 gotoAndplay，即动画指针转向指定帧开始播放，如图 6­4 所示。 图 6­4  鼠标事件的选择 （4）动作参数的设置。单击脚本助手按钮 ，当单击代码框中的动作代码  gotoAndPlay  时，在代码框的上方会出现动作参数设置框，如图 6­5 所示。 图 6­5  动作参数的设置 这些参数主要描述动作发生的位置（场景），动作的控制方式和动作的目标等。这些参数 的意义比较明确，这里不再详述。其他动作的操作过程基本相似，读者可通过试验来掌握他们 的应用技巧。  2．帧事件交互 帧事件是基于时间的，是指当动画播放到某一帧时就会触发相应的事件。如果给帧指定

第 6 章 动画技术的综合应用  61  一个动作，当动画播放到该帧时将选择事件触发的动作。如创建一个跳转动画，可指定动画跳 转的帧，然后添加跳转语句。选择跳转目的地后，就可实现动画播放的跳转功能。 帧事件的定义并不能实现真正意义上的交互，只是用它来控制动画的播放而已，这是帧 事件与鼠标事件的根本区别。帧事件总是设置在关键帧上，在某个时刻触发一个指定的动作。 例如， Stop 动作停止动画文件的播放， 而 Goto 动作则使动画跳转到时间轴上的另一帧或场景。 添加触发行为的帧事件的具体步骤如下： （1）单击选取场景上要触发行为的关键帧。 （2）在选定的关键帧上右击，并选择弹出菜单中的“动作”选项。下面的操作与按钮事 件交互相同，不再重复讲述。 （3）帧事件交互的设定完成后，在该关键帧上会出现标志图标 。  6.1.3  交互动画实例 下面通过两个具体交互（Action）动画实例来进一步熟悉交互动画的制作技巧，让大家对 交互动画有一个比较具体的认识。 例 6­1  利用帧和按钮事件实现播放跳转 （1）新建一个 Flash Action Script 2.0 文件，选择图层 1 中的第一个关键帧，单击“窗口 →公用库→按钮”命令，从 Flash 自带的按钮元件库中选择 3 个按钮，拖入工作区，如图 6­6  所示。 （2）给 3 个按钮分别设置停止（Stop） 、播放（Play）和跳转（Goto）动作，跳转目标是 第 1 帧。在第 30 帧处插入一关键帧，作为动画的结束帧。 （3）增加一个新层“图层 2” 。制作一个影片元件 yp，内容为：蝴蝶扇动翅膀（内容读者可 自己设定）。在图层 2 的 1～20 帧间建立 yp 元件的位移动画，运动过程是蝴蝶从左向右飞行。 图 6­6  交互动画实例 （4）按 Ctrl+Enter，测试动画效果，通过按钮控制动画的播放过程。 本例很简单，只使用了两个图层，但它却可以做到动画的控制，实现以前觉得要通过很 复杂的手段才能达到的效果。 例 6­2  利用键盘事件控制声音的播放 （1）建立 Flash Action Script 2.0 文件，导入一个声音元件（按键时产生的声音，该声音

动态网页设计与制作实用教程（第三版）  62  文件可通过 Windows 2000 的录音机获得）并制作琴键元件和热区按钮元件，如图 6­7 所示。 说明：热区按钮元件制作时只在时间轴上“单击”一下插入关键帧，画出和琴键大小相 当的区域。此按钮之所以称为热区按钮，因其有按钮的功能但在播放时看不到按钮的存在。 图 6­7  热区按钮的制作 （2）回到场景中，在图层 1 的第 1 帧处将琴键元件和按钮元件拖入工作区。为按钮元件 设置键盘事件（键名为“1” ）和 Goto 动作（目标第 2 帧），为第 1 帧设置 Stop()帧事件，使动 画在未按按钮时总停留在第 1 帧上。 （3）在第 2 帧处插入关键帧，改变琴键右上角黑色区域的填充色（变淡，产生按键的效 果）。增加一个新的图层“图层 2” ，在新图层的第 2 帧处插入关键帧，将导入的声音元件拖入 该帧的工作区中，如图 6­8 所示。 图 6­8  琴键的制作 （4）回到图层 1，在声音波形的结尾处插入关键帧，并为该帧设置 Goto 动作，目标为第  1 帧，保证每次播放完成后返回到第 1 帧。 （5）按  Ctrl+Enter，测试动画效果。动画开始播放，屏幕上只显示一个琴键的图形，当 按动键盘上的“1”键时，将会看到琴键变色（按下的感觉），同时听到播放声音。  6.1.4  交互性的检测 在 Flash 编辑环境中，播放电影可预览电影中的动画和声音，但要检测全部的交互性，应 使用“控制→测试影片”命令，或将电影输出为 Shockwave Flash 格式。 检测局部交互性可通过选择“控制→启用简单按钮”或“控制→启用简单帧动作”命令 实现。 检测所有交互性和动画，可通过选择“控制→测试影片”或“控制→测试场景”命令实现。

第 6 章 动画技术的综合应用  63  以上两个功能可以将电影或当前场景输出到一个临时文件，然后在新窗口中播放此文件。 当检测窗口被激活后， 用来控制电影的控制菜单中的命令和所有键盘快捷键继续保持有效。 用 户可以使用此窗口来检测交互效果。 

6.2 动画的输出与优化

6.2.1    Flash  动画的输出  Flash 动画的输出共有 3 种方式：①“保存”或“另存为” ；②导出影片；③发布影片。如 果最终文件要保留具体的图层信息和后期的可编辑权，那就用“保存”或“另存为”方式；如 果最终文件直接输出成影片，就用“导出影片”方式；如果要用指定格式，如网页的超文本协 议（HTML）直接进行发布，而不是另外添加代码对最终结果进行引用，则可以用“发布影片” 方式。 1．保存或另存为 单击“保存”或“另存为”命令，弹出如图 6­9 所示的“另存为”对话框。 图 6­9  保存文件 选择文件保存的路径、文件类型和文件名，然后单击“保存”按钮，文件就以.fla 格式进 行保存。这种保存结果能够保留所有的图层信息，可以用 Flash CS5 打开进行再编辑，但文件 比较大。  2．导出影片 通过 Flash 菜单中的“文件→导出影片”命令，可以导出多种格式的动画文件，具体操作 如下： （1）单击“文件→导出影片”命令，弹出如图 6­10 所示的对话框。 （2）输入要保存的文件名，选择存放位置，如果需要，还可在“保存类型”下拉列表框 中选择适当的文件类型。单击“保存”按钮即可导出为.swf 格式文件。如果需要更改导出文件 配置，可以单击“文件→发布设置”弹出设置对话框，如图 6­11 所示。 导出的.gif 和.swf 等格式的动画都可以在浏览器中直接播放。.gif 格式的动画体积小，在

动态网页设计与制作实用教程（第三版） 

64 

浏览器中播放不需要 Flash 播放器插件。 但.gif 格式无法显示 Flash 动画中的交互功能和影片剪 辑元件的内容。.swf 是 Flash 导出的最常用的一种格式，可以实现 Flash 动画中的交互功能和 显示影片剪辑元件的内容，但在浏览器中播放时必须安装 Flash 播放插件。 图 6­10  导出影片  3．影片的发布 通过 Flash CS5 中的“文件→发布设置”命令，可以设置输出多种格式的动画文件，并且 可以对动画的属性进行更详细的设置。具体操作如下： 选择“文件→发布设置”命令，弹出如图 6­11 所示的对话框。 图 6­11  发布设置

第 6 章 动画技术的综合应用  65  在这个面板上，可以对发布格式进行设置，它们分别是  Flash  格式（.SWF） 、HTML  网 页文件格式（.html） 、GIF 图像格式（.gif） 、JPGE 图像格式（.jpg） 、PNG 图像格式（.png） 、  Windows  项目格式—可执行文件 （.exe） 、 Macintosh  放映文件、 QuickTime  播放文件 （.mov） 。 设置好后单击“Publish（发布） ”按钮进行发布就可以了。  HTML 格式实质上是对 SWF 格式的调用链接。输出 HTML 格式时必须同时输出 SWF 格 式文件。读者可以对照一下文件导出与发布的区别。  6.2.2    Flash 动画的优化  1．帧的优化 谈到动画，我们就应该想到帧，正是由于一帧帧的内容按照一定的顺序进行排列并播放 出来才有了动画。因此要让动画体积较小，能够流畅地进行播放，就有必要考虑每个帧里数据 的合理安排。 如果某一帧里有大量的数据，可以考虑用“预装载技术”加以解决。所谓“预装载技术” ， 就是指在前面包含数据较少的帧中，先将后面要装载的部分内容（如部分元件）先行装入，这 样， 当影片播放到后面时， 只需要再装入前面没装入的部分就行了。 预装载技术通过数据分流， 对提高影片播放的流畅性是很有用的。采用“预装载技术” ，要注意不能在前面将预装载的内 容显示出来，因此在原有基础上，需要多建一个图层，并将预先装载的内容放到底层，而且上 面图层的内容要能遮盖住底层预装载的数据。 另外，帧分布的合理性还在于帧内容安排的合理性。Flash 能够处理矢量图和位图，使用 矢量图的好处在于它不会随图形大小改变而改变自身体积，因此它在 Flash 中的使用比位图更 为普遍。但矢量图在屏幕上进行显示前需要 CPU 对其进行计算，如果在某一帧里有多个矢量 图，同时它们还有自己的变化，如色彩、透明度等的变化，CPU  会因为同时处理大量的数据 信息而忙不过来，动画看起来就会有延迟，影响播放效果。因此，在同一帧内尽量不要让多个 元件同时发生变化，它们的变化动作可以分开来安排。  2．要养成使用元件的习惯 在前面我们已经讲了元件对减小文件体积的作用，在 Flash 中元件只会被装载一次，以后 再使用该元件，或者该元件有什么属性变化，不需要再行下载，不会增加文件的体积。  3．图形的优化  Flash  中有变形（修改）操作，可以重新定义图片的大小，但对于输入  Flash  的图片，最 好先在其他图像处理软件（如 Photoshop）中调整好大小再进行导入，而不要直接导入后再用 变形命令进行大小调整。这是因为，导入的图片，无论你将其变得多大还是多小，都不会改变 元件中原图的体积大小，只有在导入之前就把它调整好才行。 在 Flash  CS5 中有对 Photoshop 更好的支持，可以直接将分图层的.psd 文件导入进库中， 在库中选择图层对象。

对于 Flash 中的位图， 它的任何变化都涉及 CPU 的重新计算与屏幕重刷， 因此位图在 Flash  中尽量以静止的背景形式出现。 

4．声音的优化

将作品输出时，会弹出如图 6­12 所示的面板，单击右边的“设置”按钮，弹出如图 6­13  所示的设置窗口。

动态网页设计与制作实用教程（第三版）  66  图 6­12  声音的优化 图 6­13  声音的优化 设置参数介绍如下： l 压缩：对声音采用哪种压缩格式，建议选 MP3，因为在相同的声音质量下，MP3  压 缩的文件最小。 l 比特率与品质：比特率与品质越高，最终的动画体积越大。  5．其他优化 在 Flash 中，要做到“惜力如金” ，能用两个元件做成的动画，就不要费力地做 3 个元件； 能够用 3 条直线构成的图案，就不要用 3 条虚线来表示；能够用系统默认字体表达清楚的，就 不要使用其他字体。总之，你的动画除了在自己的机器看外，还得考虑其他人在他们自己的机 器上看的情况。直线、默认字体，在大多数计算机上是通用的，不需 CPU 另外进行解析， 这样，你的动画就可能更流畅一点。 

6.3 动画制作综合实例

通过以上学习，我们对 Flash 动画制作技术有了较全面的了解，下面通过 8 个实例演示以 上技术综合运用的效果，希望能给读者以启示，达到举一反三熟练应用的目的。 例 6­3  下落的弹性小球 制作思路：利用多个位移动画组合出小球下落的动画效果。 制作步骤： （1）新建 Flash 文件，背景设置为黑色。 （2）新建图形元件 ball1 和 ball2，利用绘图工具分别绘制笑脸和哭脸，两球大小相同。 （3）新建图形元件 shadow，制作小球的影子，用放射渐变 填充。 （4）在第 1 帧中，把元件 ball1 从元件库中拖入工作区顶部。在第 17 帧处插入关键帧， 将 ball1 垂直拖到工作区下部，在 1～17 帧间创建小球下落的位移动画。 （5）在第 18 帧处插入关键帧，将元件 ball2 拖入该帧，取代元件 ball1。在第 20 帧处插 入关键帧，将 ball2 缩扁，在 18～20 帧间创建位移动画，如图 6­14 所示。 图 6­14  弹性小球 （6）同样在第 24 帧处插入关键帧，恢复 ball2 的原形状，在 20～24 帧间创作位移动画， 然后在第 25 帧处插入关键帧，用元件 ball1 取代元件 ball2。

第 6 章 动画技术的综合应用  67  （7）在第 40 帧插入关键帧，将 ball1 垂直拖到工作区顶部，回到原位置，在 25～40 帧 间创作小球上升的动画。 （8）在图层 1 下方新建图层 2。在第 1 帧中将元件 shadow 拖入小球的落点位置，作为运 动小球的影子（可利用工作区的网格线对齐）。在第 21 帧处插入关键帧，将元件 shadow 缩小， 在 1～21 帧间创建影子缩小的位移动画；然后在 40 帧处插入关键帧，将元件 shadow 恢复原 大小，在 21～40 帧间创作影子变大的位移动画。 （9）按 Ctrl+Enter 键测试动画，效果为：开始小球做下落运动，第 17 帧后由笑脸变为哭 脸，在第 25 帧弹起，做上升动画。 例 6­4  放大镜 制作思路：利用遮罩层和位移动画组合出放大镜的动画效果（如图 6­15 所示） 。小字在最 底层，放大镜在其上可以遮住与其重叠的小字即在放大镜外才能看到小字。大字在放大镜上， 其遮罩层上的圆只对大字起作用，对其他层不起任何作用（和没有遮罩层一样）。这样当放大 镜和遮罩层上的圆重叠在一起且左右移动时，放大镜内显示大字（通过遮罩层上的圆），放大 镜外显示小字，产生了将字放大的效果。 图 6­15  放大镜效果 制作步骤： （1）建立 Flash 文件，将当前图层命名为“小字” 。利用文本工具输入字符“山东交通学 院” ，字号为 19，字间距为 35。在 35 帧处插入普通帧。 （2）增加图层，命名为“放大镜” 。制作一个放大镜元件“fdj” 。将放大镜元件拖入场景中， 在 1～35 帧间制作放大镜的位移动画。其起始位置在字符“山”上，终点位置在字符“院”上。 （3）增加图层，命名为“大字” 。利用文本工具输入字符“山东交通学院” ，字号应大于 “小字”层中的字符，而又能被放大镜镜头罩住。在该图层的 35 帧处插入普通帧。调整大字 符的位置和字符间距,使相应的大小字符中心对齐，且放大镜的起始和结束位置分别将大小字 符的“山”字和“院”字同时罩在其中 。 （4）增加图层名为“遮盖圆” 。建立圆形元件 ball，使该元件的大小可以遮住“大字”层 中的单个字符而又小于放大镜的镜头。 将元件 ball拖入场景并在 1～35 帧之间建立其位移动画。

动态网页设计与制作实用教程（第三版）  68  在起始点和终止点处与放大镜重合（含在放大镜中）。将该层设为“大字”层的遮罩层。 （5）按 Ctrl+Enter 键，测试动画。 例 6­5  水中倒影 制作思路：通过使用遮罩层和改变图像 Alpha 值制作水中倒影浮动的效果。 制作步骤： （1）新建一个 Flash 文件，设置背景色为黑色，选择“文件→导入”命令导入一张图片， 将其转化为图形元件，命名为“图片” 。回到场景，将当前层命名为“图片” 。从库中将元件“图 片”拖入第 1 帧工作区中。 （2）新建一个名为“倒影 100”的图层，将该层放在“图片”层下方。将库里的元件“图 片”拖入该层第 1 帧工作区中，并利用“修改→变形→垂直翻转”命令将其倒放。然后调整两 层中的图片的位置，如图 6­16 所示。 图 6­16  生成倒影图片 （3）在图层“倒影  100”上方新增一个图层，将图层“倒影  100”的第  1  帧复制到该层 第 1 帧处，并将该层命名为“倒影 60” 。然后选中该层图片，在“属性”面板中将 Alpha 的值 设置为 60%。 （4）新建一层名为“遮蔽层”的图层，放在“倒影 60”层上方。新建一个图形元件“波 浪” ，用矩形工具画若干细长的矩形，做好后将其拖入场景区盖住倒影，如图 6­17 所示。 图 6­17  生成波浪元件 （5）在“遮蔽层”上方新增一个图层，名为“水面” 。新建图形元件“水面” ，内容为： 用线形渐变填充的无边框矩形，从上向下由黑色过渡到蓝色。回到场景，从库中将其拖入并盖 住倒影，将其 Alpha 值设为 30%，如图 6­18 所示。 （6）在“水面”层上方新增一个图层，名为“光线” ，新建图形元件“光线” ，绘制一个 黑白渐变的扁椭圆，用来作图片和倒影的分界面，如图 6­19 所示。回到场景，将它拖放到“图 形”与倒影之间，并将 Alpha 值设为 20%。

第 6 章 动画技术的综合应用  69  图 6­18  蓝色的水面 图 6­19  分界面 （7）在“遮蔽层”上右击，在弹出菜单中选择“遮罩层”命令。在该层的第  35  帧处插 入关键帧，拖动“波浪”至倒影最下方，创建运动渐变动画。做完以上操作后，在各层的第  35 帧处插入帧。设置完成后如图 6­20 所示。 图 6­20  水中倒影 （8）按 Ctrl+Enter 键测试动画，会看到水中倒影随波潋滟。 例 6­6  光笔写字 制作思路：先用与背景色相同的遮片遮住字的各笔画，当光笔沿笔画移动时遮片也同 步同方向运动，使字的笔画逐渐显露出来，如图 6­21 所示。 图 6­21  光笔写字

动态网页设计与制作实用教程（第三版）  70  制作步骤： （1）新建一个 Flash 文件，设置背景色为白色。制作光笔影片元件“pen”和遮片图像元 件“图像” 。  1）光笔是通过 3 个彩色小球位置不断变化的帧动画来实现的。  2）遮片做成一个填充色与背景色相同的矩形。大小与“山”字中最大笔画相当，后面将 用它遮住字的笔画。 （2）在图层 1 第 1 帧的工作区中，利用字符工具输入“山”字并打散，调整其颜色与大小。 （3）新建图层  6。在该层中制作光笔的位移动画，并使其沿“引导层”中的引导线按山 字的书写笔划运动。本例中引导线由 3 段组成。 说明：不用引导层，直接用 3 段位移动画也可以实现同样的效果。 （4）新增图层  2～5  四个图层，且这四个图层依次放在图层  6  的下面（思考：为什么先 建图层 6 及其引导层而又要把新增的 4 个图层放在其下面）。在图层 2 到图层 5 中的第 1 帧分 别用遮片将山字的 4 个笔划遮住（调整遮片元件大小，以刚好遮住为宜） 。 （5）在图层 2 到图层 5 中依次制作遮片随光笔同步变化的位移动画。例如：写第一笔时 随着光笔向下移动，遮蔽片同步向下移动，这样第一笔就随着光笔的移动而显露出来，其他笔 划类推。 （6）按 Ctrl+Enter 键测试动画，随着光笔移动， “山”字被逐渐写出来。 例 6­7  书本翻页 制作思路：位移和形变两种动画形式相结合，制作书页翻动的效果。 制作步骤： （1）新建 Flash  文件，背景设置为黑色。在第 1 帧用矩形工具绘制一个无边框灰色矩形， 在上面输入文字作为书的内容。在第 70 帧插入帧并锁定该层。 （2）新建图层 2，绘制一个和图层 1 中大小相同的矩形，填充为黄色，作为书皮。调整 两个层中的矩形重合。在第 10 帧、第 25 帧、第 35 帧处分别插入关键帧，分别用变形工具调 整矩形的形状（在调整过程中，矩形的左边位置保持不动），在各关键帧之间分别创作形变动 画，产生书皮翻开的效果，如图 6­22 所示。 图 6­22  书皮的变形 （3）分别在第 36 帧、第 45 帧、第 60 帧、第 70 帧插入关键帧，将第 35 帧、第 25 帧、 第 10 帧、第 1 帧的图片水平翻转，顺序拷贝到第 36 帧、第 45 帧、第 60 帧、第 70 帧处，同 样分别创作形变动画。这样，书本翻开的整个过程就完成了，如图 6­23 所示。 （4）新建图层 3，在书皮上输入文字，在第 20 帧和第 34 帧插入关键帧，调整文字大小 和角度，与书皮当前的状态相对应，分别创作位移动画。时间轴的设置如图 6­24 所示。 （5）按 Ctrl+Enter 键测试动画，效果为：书皮慢慢打开，内容逐渐显示出来。

第 6 章 动画技术的综合应用  71  图 6­23  翻书 图 6­24  时间轴的设置 例 6­8  电子琴 制作思路：综合应用交互动画技术和声音效果，通过热区按钮事件调用影片元件产生电 子琴弹奏的效果。本例中使用了告知目标语句 tellTarget 来控制动画中影片元件的播放动作。 制作步骤： （1）建立 Flash 文件。参照例 6­2，制作 8 个琴键影片元件键 1～8 和一个热区按钮元件 “键” ，如图 6­25 所示。 图 6­25  琴键元件的制作 （2）回到场景，在第 1 帧工作区中制作电子琴面板，将 8 个琴键拖入面板并按 1～8 的 顺序排列，与琴键对应将热区按钮拖入 8 次，编号排列，如图 6­26 所示。启动“属性”面板 为场景中的每一个琴键命名“实例名称” ，如：第一个琴键的实例名为“a” ，第二个为“b” 。 说明：当通过函数语句调用场景中的元件实例时，要给实例元件命名为“实例名称” （也 叫 Action 名或调用名），作为调用函数的参数。 （3）在第一个热区按钮上右击，启动“动作”面板，单击“+”号，依次选择“否决的 →动作→tellTarget”命令，添加调用琴键元件的动作，如图 6­27 所示。

动态网页设计与制作实用教程（第三版）  72  图 6­26  面板制作 （4）单击“+”号，依次选择“全局函数→时间轴控制→gotoAndPlay”命令，添加播放 跳转动作，如图 6­28 所示。 图 6­27  调用动作 图 6­28  跳转动作 （5）动作添加完成后在“+”号下面的文本区域里出现了 3 行函数，如图 6­29 所示。用 鼠标依次单击 3 行函数，在窗口的上部区域为它们设置参数。各函数的意义如下： on (release, keyPress "2")  // 定义按钮键盘事件 tellTarget ("a") {  // 影片调用函数语句，此处调用影片元件“a” gotoAndPlay (2) ;  // 被调用影片的跳转控制，此处为跳转到第 2 帧开始播放 （6）依次为每一个热区按钮设置交互动作。 （7）按 Ctrl+Enter 键测试动画，效果为：利用键盘和鼠标可弹奏电子琴。 例 6­9  鼠标跟随效果的制作 制作思路：利用帧交互的 startDrag 动作命令控制影片元件，使之追随鼠标移动。 制作步骤： （1）参照前例制作一个蝴蝶飞舞的影片元件和花朵的图像元件，并利用它们制作一个蝴 蝶追逐花朵的影片元件 symbol6，如图 6­29 所示。 （2）回到场景，将 symbol6 拖入第一帧工作区。启动“属性”面板，为元件 symbol6 的  Action 名设为  cc，在第  1  个关键帧中右击，启动“动作”面板，在“动作”面板中按照如图  6­30 所示的操作为其添加 startDrag()函数语句。 （3）为函数指定参数，编写语句。 （4）按 Ctrl+Enter 键测试动画，效果为：动画元件随着鼠标移动。

第 6 章 动画技术的综合应用  73  图 6­29  鼠标跟随 图 6­30  添加交互动作 例 6­10  秋雨连绵 制作思路：先制作一个雨点落下的影片元件，通过函数复制该元件即可获得一片雨点的 效果。 本例告诉大家，通过一个简单的函数控制可以实现非常奇特的效果。使大家进一步了解  Flash 功能的强大。 制作步骤： （1）制作雨点和水晕的图像元件“雨点”和“水晕” 。 （2）选择“插入→新建元件”命令，进入元件编辑窗口。利用“雨点”和“水晕”元件 制作雨点下落的影片元件“雨滴” ，如图 6­31 所示。制作步骤如下： 图 6­31  制作雨滴元件  1）将“雨点”元件拖入图层  1  中第  1  帧的工作区，制作雨点下落的位移动画。1～20  帧雨点沿直线下落，20～30 帧雨滴位置不变，Alpha 值和体积迅速变小，产生一种融入水中 的效果。  2）增加新图层，在新图层的  20  帧处插入关键帧，开始制作水晕的位移动画。将水晕元 件拖入第一帧的工作区，调整其位置与雨点的终点位置吻合。20～25 帧水晕和 Alpha 值由小

动态网页设计与制作实用教程（第三版）  74  变大，产生水晕出现的效果。25～30 帧水晕继续变大，Alpha 值变小，产生水晕消失的效果。  3）进一步调整雨点和水晕的位置，使效果更趋于平滑。 （3） “雨滴”元件制作完成后，回到场景中。启动“属性”面板，将“雨滴”元件的 Action  名设为 dd（函数引用名）。在第 1 帧上右击，启动“动作”面板，在代码窗口中输入函数代码， 如图 6­32 所示。 图 6­32  添加函数代码 说明：这些动作函数也可以通过菜单选择实现添加，不过过程比较复杂。 函数代码含义解释如下： if (Number(aa)>150) {  // 确定播放的层次数 aa = 0;}  duplicateMovieClip ("/dd", "dd" add aa, aa);  // 复制对象 dd，并赋给新名字 setProperty ("dd" add aa, _x, random(600));  // 新对象在 x 轴上出现的范围 setProperty ("dd" add aa, _y, random(600));  // 新对象在 y 轴上出现的范围 setProperty ("dd" add aa, _xscale, random(80)+20);  // 新对象在 x 轴上显示的缩放比例 setProperty ("dd" add aa, _yscale, random(80)+20);  // 新对象在 y 轴上显示的缩放比例 aa = Number(aa)+1;  // aa 循环变量赋值 gotoAndPlay (1);  // 循环回第一帧 （4）按 Ctrl+Enter 键测试动画，效果为：秋雨连绵。

本章小结

交互动画就是观众能控制动画播放内容的动画，动画的播放不仅仅是由设计者决定的， 还决定于播放者的操作， 这样观众就由被动地接受变为主动地控制， 将大大增强动画的感染力 和吸引力。动画之所以具有交互性，是通过对帧或按钮设定一定的动作（Action）来实现的。 动画的交互功能是 Flash 区别于其他动画制作工具的特色。 动画制作是制作技术和创作艺术的结合。把简单的动画形式有机结合起来就可以创造出 奇特的动画效果。动画的创意是动画成败的关键。

第 6 章 动画技术的综合应用  75

思考练习 

1．利用位移动画原理制作汽车紧急刹车的效果。  2．在例 6­5 中， “水面”层的作用是什么？请练习改变其填充色并观察动画效果。  3．如何制作浮雕字效果？  4．用帧动画形式如何制作写字的效果？请同学们练习利用帧动画形式制作“山”字的书 写动画。 提示： （1）在第 1 帧利用文本工具制作出“山”字，并将其打散为矢量图形。 （2）从第 2 帧开始将“山”字的笔划按倒序逐帧擦除。选中所有关键帧，利用“修改→ 帧→翻转”命令将图层中的关键帧的位置前后对调。这样， “山”就由被按倒序逐渐擦除的效 果变为逐渐写出的效果。