网页设计与制作第16章使用FlashMX制作网页动画.ppt

《网页设计与制作第16章使用FlashMX制作网页动画.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第16章使用FlashMX制作网页动画.ppt（51页珍藏版）》请在三一办公上搜索。

1、第16章 使用FlashMX制作网页动画,学习目标：通过对本章的学习，掌握元件件概念和编辑方法，掌握Flash几种基本动画的制作，学会以各种形式发布动画。,第16章 使用FlashMX2004制作网页动画,16.1 使用元件 16.2 层 16.3 帧 16.4 制作时间轴动画,16.1使用元件,16.1.1 概念 16.1.2 图片元件 16.1.3 按钮元件 16.1.影片剪辑元件,16.1.1 概念,元件是组成动画的基本单位，创建的元件保存在库中，可以反复取出使用。可以在动画的任意位置双击进入元件编辑区进行编辑。当编辑元件后，动画中的该元件随之改变，元件可以分为图片元件，按钮元件，影片剪

2、辑元件。,16.1.2 图片元件,图形元件可用于静态图像，并可用来创建连接到主时间轴的可重用动画片段。图形元件与主时间轴同步运行。交互式控件和声音在图形元件的动画序列中不起作用。,16.1.3 按钮元件,使用按钮元件可以创建响应鼠标点击、滑过或其他动作的交互式按钮。可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。,16.1.影片剪辑元件,使用影片剪辑元件可以创建可重用的动画片段。影片剪辑拥有它们自己的独立于主时间轴的多帧时间轴。可以将影片剪辑看作是主时间轴内的嵌套时间轴，它们可以包含交互式控件、声音甚至其他影片剪辑实例。也可以将影片剪辑实例放在按钮元件的时间轴内，以创建动画按钮。,

3、16.2 层,在MacromediaFlashMX2004中，图层类似于堆叠在一起的透明纤维纸。在不包含内容的图层区域中，可以看到下面图层中的内容。图层有助于您组织文档中的内容。例如，您可以将背景画放置在一个图层上，而将导航按钮放置在另一个图层上。此外，您可以在一个图层上创建和编辑对象，而不会影响另一个图层中的对象。您将通过完成以下任务来了解有关图层的知识：,16.2 层,l 选择图层l 隐藏和显示图层l 锁定图层l 添加并命名图层l 更改图层的顺序l 以文件夹的形式组织图层l 添加蒙版图层l 删除图层,16.2 层,设置工作区 选择图层 隐藏和显示图层 锁定图层 添加并命名图层 更改图层的顺

4、序 以文件夹的形式组织图层 添加蒙版图层 添加引导层 16.2.10 删除图层,16.2.1 设置工作区,首先，您将打开本课程的起始文件并设置工作区，以便使用最佳布局来学习课程。(1)要打开起始文件，在Flash中选择【文件】/【打开】文件：FirstRunHelpPanelHowDoIBasicFlashstart_files并双击layers_start.fla。(2)选择【文件】/【另存为】，并使用一个新名称将该文档保存到相同的文件夹中，以保存原始的起始文件。(3)选择【窗口】/【面板设置】/【训练布局】以修改用于课程学习的工作区。(4)在舞台上的【查看】弹出菜单中（时间轴的右上侧），选

5、择【显示帧】，以便能够同时看到舞台和工作区。如有必要，请向下拖动时间轴（【窗口】/【时间轴】）的下边缘以放大【时间轴】视图。您还可以使用滚动条在各图层之间滚动查看。,选择图层,您在活动图层上放置对象、添加文本和图形以及进行编辑。要使图层成为活动图层，请在时间轴中选中该图层，或在该图层中选中某个舞台对象。活动图层会在时间轴中突出显示，铅笔图标表示可以对它进行编辑。(1)在工具栏中，单击【选择】工具。(2)在舞台上，选择红色的汽车。(3)时间轴中的铅笔图标表示【红色汽车】图层现在是活动图层。(4)在时间轴中选中【文本】图层。红色汽车上方和下方的文本块在舞台上均被选定，因为它们都位于【文本】图层中。

6、,隐藏和显示图层,您可以隐藏图层以便查看其他图层上的内容。隐藏图层时，您可以选择同时隐藏文档中的所有图层，也可以选择分别隐藏各个图层。(1)单击图层上方的眼睛图标，以使【眼睛】列中出现红色的X。(2)所有内容都从舞台上消失。(3)依次单击该列中的每个红色X，并观察该图层中的内容在舞台上再次出现。(4)使用每个图层名称右侧的控件可以显示或隐藏图层中的内容。注意：要看到所有的图层，您可能需要使用滚动条。,16.2.4 锁定图层,在图层上的内容已符合您的要求后，您可以锁定该图层，以避免内容被您或处理该文档的其他人意外地更改。(1)在时间轴中，单击【锁定】列下面、【徽标】图层旁边的黑点。(2)这时会出

7、现一个挂锁图标，表明该图层现在已被锁定。(3)使用【选择】工具，尝试拖动出现在舞台顶部的徽标。(4)您无法拖动该徽标，因为它所在的图层已被锁定。注意：如果您意外地拖动了未锁定的图层中的某些内容，按Control+Z可以撤消更改。,16.2.5 添加并命名图层,您现在将添加图层、命名该图层，然后在该图层中添加图形元件。(1)在时间轴中，单击【汽车】图层。(2)单击时间轴下面的【插入图层】按钮。(3)新的图层会出现在【汽车】图层的上方，并成为活动图层。(4)双击该图层的名称，键入Background作为该图层的新名称，然后按Enter或Return(Macintosh)键。(5)作为一种最好的习惯

8、，应始终命名每个图层，并为图层指定一个有意义的名称，以指示该图层上的内容的类型。(6)在【库】面板【窗口】/【库】中，选择背景图形元件，并将它拖动到舞台上。由于【背景】图层位于除蒙版图层以外的所有图层之上，因此该图层中的对象出现在较低图层中的对象之上。,16.2.6 更改图层的顺序,很显然，您不希望背景覆盖舞台上的其他对象。通常，背景图层是时间轴上的最低一层。需要移动刚刚创建的【背景】图层。(1)在时间轴中，将【背景】图层从最上面的位置拖动到最下面的位置。现在，舞台上的所有对象都出现在背景之上。(2)保持【背景】图层仍然处于选中状态，在属性检查器的X文本框中输入0，在Y文本框中输入72。按En

9、ter或Return键在舞台上精确定位【背景】图层。,16.2.7 以文件夹的形式组织图层,您可以创建图层文件夹以便组织图层并降低时间轴的混乱程度。时间轴包含两个带有导航对象的图层：一个图层用于导航按钮，另一个图层用于导航图画。需要为这两个图层创建一个名为Navigation的图层文件夹。(1)在时间轴中，选择【按钮】图层。(2)单击位于图层名称下面的【插入图层文件夹】按钮。注意：如果属性检查器显示帧的属性而不是影片剪辑的属性，请单击舞台上的Background影片剪辑。(3)双击图层文件夹名称并将该文件夹重新命名为Navigation。将Navbar图层和【按钮】图层拖动到Navigatio

10、n文件夹中。两个图层缩进显示，以指示它们位于该文件夹内。您可以单击展开箭头来展开和折叠文件夹以及包括的图层.,16.2.8 添加蒙版图层,使用蒙版图层提供了一种有选择地显示图层的某些部分或它下面的图层的简单方法。应用蒙版需要使一个图层成为蒙版图层，而使它下面的图层成为被遮盖的图层。您将使用舞台上的矩形来遮盖道路图形和动画的一部分，以使动画更适合于舞台。(1)在舞台上，在【选择】工具处于选中状态的情况下，单击道路下面的矩形。(2)将此图形一直向上拖动，并将图形的左边缘与道路的左边缘对齐。(3)右键单击时间轴中的蒙版图层，并从上下文菜单中选择【蒙版】。该图层会转换为蒙版图层，并由一个蓝色的菱形图标

11、表示。紧挨着该图层下面的图层链接到蒙版图层。被遮罩图层的名称会缩进，其图标会更改为蓝色的图层图标。(4)在时间轴中，将【道路】图层拖动到蒙版图层，并将它放置在【汽车】图层的下面。蒙版图层以及它遮盖的图层将自动被锁定。(5)要查看蒙版效果，请选择【控制】/【测试影片】。(6)查看完蒙版效果后，关闭SWF文件窗口，返回文档。,16.2.9 添加引导层,到目前为止，您已了解了有关常规图层和蒙版图层的信息。第三种类型的图层是引导层。使用引导层可以存放您不希望在发布或导出的文件中出现的内容。例如，您可以将为使用该文档的其他人提供的说明放置在引导层上。在Flash中学习课程的过程中，您将注意到许多课程FL

12、A文件的引导层中都包含占位符，这些占位符用来指明放置舞台对象的位置。现在，您将创建引导层。(1)在时间轴中，选择【背景】图层，然后单击【插入图层】按钮以创建新图层。(2)将新图层命名为【备注】，然后按Enter或Return键。(3)右键单击【备注】图层，并从上下文菜单中选择【引导层】。图层名称旁边的图标指示该图层是引导层。(4)保持【备注】图层仍然处于选定状态，单击工具栏中的【文本】工具。然后，在汽车和道路上面的舞台区域中，输入【Productionnote:Animationwithnostop();actionsloopbydefault】。(5)保存文档，然后选择【控制】/【测试影片】

13、。添加到引导层中的内容不会出现在SWF文件窗口中。(6)查看完SWF文件后，关闭窗口以返回文档。,16.2.10 删除图层,由于您的文档中并不真正需要引导图层，因此您要删除它。在时间轴中，选定【备注】图层，单击【删除图层】按钮,16.3 帧,帧位于时间轴上，是动画播放的基本单位。帧有普通帧、关键帧和白色关键帧3种类型。关键帧是有内容的帧，可以任意改该帧中的对象，在时间轴上以小黑表示，如图所示；白色关键帧是没有任何内容的帧，在时间轴上以空心园表示，如图所示；普通帧用于延长关键帧中的内容，或作为两关键帧动作的过渡，不能对其进行编辑。,16.3.1 设置帧频,帧频就是在播放Flash动画时每秒中播放

14、帧的数量，要设置帧频就要打开影片属性窗口.,16.4 制作时间轴动画,MacromediaFlashMX2004提供了功能强大的动画创建工具。在Flash中，大多数简单的动画都是通过使用被称为补间的过程完成的。补间是【在中间】的简称，它是指填充两个关键帧之间的帧，以便第一个关键帧中显示的图形更改为第二个关键帧中显示的图形。在Flash中可以创建两种类型的补间：补间动画和补间形状。补间动画和补间形状的主要区别在于，补间动画针对组合对象或元件操作，而补间形状与不是元件且未组合的对象一起使用。,16.4 制作时间轴动画,16.4.1 创建补间动画创建补间形状16.4.3 在动画中复制和粘贴关键帧沿着

15、路径补间动画,16.4.1 创建补间动画,通过以下方法来创建补间动画：在起始关键帧中为实例、组合对象或文本定义属性，然后在后续关键帧中更改对象的属性。Flash在关键帧之间的帧中创建从一个关键帧到下一个关键帧的动画。要创建补间动画，您将提取轮胎元件的一个实例并使其看上去在弹跳。,16.4.2 创建补间形状,对于补间形状，请为一个关键帧中的形状指定属性，然后在后续关键帧中修改形状或者绘制另一个形状。正如对于补间动画一样，Flash在关键帧之间的帧中创建动画。现在，您将为轮胎的阴影设置补间，以便在轮胎弹跳时，阴影会移动并淡出。,16.4.3 在动画中复制和粘贴关键帧,为了使轮胎在弹跳时看上去逼真，

16、应当让它在每次弹跳时都稍微压下去一些。您可以通过以下方法创建这种特效：在动画的第1帧中改变轮胎的形状，然后在第30帧中复制第1帧。,沿着路径补间动画,运动引导层使您可以绘制路径，补间实例、组或文本块可以沿着这些路径运动。可以将多个层链接到一个运动引导层，使多个对象沿同一条路径运动。链接到运动引导层的常规层就成为引导层。,16.5为动画添加音频,MacromediaFlashMX2004提供了许多使用声音的方式。可以使声音独立于时间轴连续播放，或使动画和一个音轨同步播放。向按钮添加声音可以使按钮具有更强的互动性，通过声音淡入淡出还可以使音轨更加优美。在Flash中有两种类型的声音：事件声音和音频

17、流。事件声音必须完全下载后才能开始播放，除非明确停止，它将一直连续播放。音频流在前几帧下载了足够的数据后就开始播放；音频流可以通过和时间轴同步以便在Web站点上播放。,16.5为动画添加音频,导入音频16.5.2 添加音频,16.5.1 导入音频,可以将以下声音文件格式导入到Flash中，当将声音放在时间轴上时，应将声音置于一个单独的层上，可以导入的声音有wav mp3等:(1)选择【文件】/【导入】/【导入到库】。(2)在【导入】对话框中，定位并打开所需的声音文件。注意：也可以将声音从公用库拖入当前文档的库中。,16.5.2 添加音频,向文档中添加声音：(1)如果还没有将声音导入库中，请将其

18、导入库中。(2)选择【插入】/【时间轴】/【层】，为声音创建一个层。(1)选定新建的声音层后，将声音从【库】面板中拖到舞台中。声音就添加到当前层中。可以把多个声音放在同一层上，或放在包含其他对象的层上。但是，建议将每个声音放在一个独立的层上。每个层都作为一个独立的声音通道。当回放SWF文件时，所有层上的声音就混合在一起。,16.5.2 添加音频,(1)在时间轴上，选择包含声音文件的第一个帧。(2)选择【窗口】/【属性】，并单击右下角的箭头以展开【属性】检查器。(3)在【属性】检查器中，从【声音】弹出菜单中选择声音文件。(4)从【效果】弹出菜单中选择效果选项：【无】不对声音文件应用效果。【选择】

19、此选项将删除以前应用过的效果。【左声道】/【右声道】只在左或右声道中播放声音。【从左到右淡出】/【从右到左淡出】会将声音从一个声道切换到另一个声道。【淡入】会在声音的持续时间内逐渐增加其幅度。【淡出】会在声音的持续时间内逐渐减小其幅度。【自定义】使您可以通过使用【编辑封套】创建自已的声音淡入和淡出点,16.5.2 添加音频,（8）从【同步】弹出菜单中选择【同步】选项：【事件】选项会将声音和一个事件的发生过程同步起来。事件声音在它的起始关键帧开始显示时播放，并独立于时间轴播放完整个声音，即使SWF文件停止也继续播放。当播放发布的SWF文件时，事件声音混合在一起。事件声音的一个示例就是当用户单击一

20、个按钮时播放的声音。如果事件声音正在播放，而声音再次被实例化（例如，用户再次单击按钮），则第一个声音实例继续播放，另一个声音实例同时开始播放。【开始】与【事件】选项的功能相近，但如果声音正在播放，使用【开始】选项则不会播放新的声音实例。【停止】选项将使指定的声音静音。,16.5.2 添加音频,【流】选项将同步声音，以便在Web站点上播放。Flash强制动画和音频流同步。如果Flash不能足够快地绘制动画的帧，就跳过帧。与事件声音不同，音频流随着SWF文件的停止而停止。而且，音频流的播放时间绝对不会比帧的播放时间长。当发布SWF文件时，音频流混合在一起。音频流的一个示例就是动画中一个人物的声音在

21、多个帧中播放。注意：如果您使用MP3声音作为音频流，则必须重新压缩声音，以便能够导出。可以将声音导出为MP3文件，所用的压缩设置与导入它时的设置相同。,16.5.2 添加音频,（9）为【重复】输入一个值，以指定声音应循环的次数，或者选择【循环】以连续重复声音。注意：不建议循环播放音频流。如果将音频流设为循环播放，帧就会添加到文件中，文件的大小就会根据声音循环播放的次数而倍增。,16.6 动作和组件,16.6.1 FlashMX2004动作脚本16.6.2 组件,16.6.1 FlashMX2004动作脚本,动作脚本是一种面向对象的脚本语言，可用于控制 Flash 内容的播放方式。在后续的课程中

22、，您将了解动作脚本如何演化为动作脚本 2.0 以包含一组核心的语言元素，使开发面向对象的程序更加方便。Macromedia Flash MX 2004提供了许多使用户能够参与交互操作的方法。另外，当您采用交互功能时，能够实现的就不只是按顺序播放每个时间轴帧了，这样，您在设计和开发时就有了更多的选择。在本课中，您将通过完成下列任务来学习一些实现交互功能的方法：,16.6.1 FlashMX2004动作脚本,l 编写在场景之间导航的动作脚本 l 编写在运行时播放动画影片剪辑的动作脚本 l 使用行为播放 MP3 文件,16.6.1 FlashMX2004动作脚本,1.设置工作区2.编写在场景之间导航

23、的动作脚本3.编写在场景之间导航的动作脚本 4.使用行为播放 MP3 文件,16.6.2 组件,在 Macromedia Flash MX 2004中使用组件有多种方法。您可以使用【组件】面板来查看组件，并可以在创作过程中将组件添加到文档中。在将组件添加到文档中后，即可在属性检查器或【组件检查器】面板中查看组件属性。组件可以与其他组件通信，方法是侦听其他组件的事件并使用【动作脚本】处理这些事件。您还可以管理文档中的组件深度以及控制组件接收焦点的时间。,16.6.2 组件,1.【组件】面板 2.【组件检查器】面板和属性检查器中的组件,16.7 准备输出和发布动画,16.7.1 动画文件的优化 1

24、6.7.2 动画下载性能的测试,16.7.1 动画文件的优化,在Macromedia Flash MX 2004中,动画文件的优化主要是靠在制作过程中元件的使用和发布时的设置:（1）尽可能的多用矢量图形,才用位图（2）重复出现的图形,动画或场景等,要使用元件（3）发布设置也要尽可能的接近浏览者的要求设置.,16.7.2 动画下载性能的测试,在Macromedia Flash MX 2004中进行动画下载性能的测试是很有必要的,它可以让我们掌握自己的动画作品在不同的网络环境下的下载速度,从而来指导我们制作动画时,动画作品大小的控制.下面来看看如何进行动画下载性能的测试（1）用Macromedia

25、 Flash MX 2004打开一个Flash动画文件(.fla)（2）单击菜单中 控制/测试影片,进入到测试阶段（3）设置你要模拟下载的网络环境,在 视图/下载设置中选择或设置即将要进入测试的环境.（4）可以较直观的测试到自己的动画的下载性能,即及时向我们反馈了动画下载的速度.,16.8 Flash动画的输出和发布,要发布 Flash 文档，请首先选择发布文件格式，然后使用【发布设置】命令选择文件格式设置。然后用【发布】命令发布 Flash 文档。在【发布设置】对话框中建立的发布配置将随文档一起保存。您也可以创建并命名发布配置文件，以便可以随时使用已建立的发布设置。,16.8 Flash动画

26、的输出和发布,16.8.1 Flash文件的发布设置 16.8.2 GIF文件的发布设置 16.8.3 JPEG文件的发布设置,16.8.1 Flash文件的发布设置,当发布 Flash 文档时，可以设置图像和声音压缩选项和防止对 SWF 文件进行导入操作的选项。使用【发布设置】对话框的【Flash】面板中的控件来更改设置。,16.8.2 GIF文件的发布设置,GIF 文件提供了一种简单的方法来导出绘画和简单动画，以供在 Web 页中使用。标准 GIF 文件是一种简单的压缩位图。,16.8.3 JPEG文件的发布设置,JPEG 格式使您可将图像保存为高压缩比的 24 位位图。通常，GIF 格式

27、对于导出线条绘画效果较好，而 JPEG 格式更适合显示包含连续色调（如照片、渐变色或嵌入位图）的图像。要将 Flash SWF 文件发布为 JPEG 文件：（1）.执行以下操作之一以打开【发布设置】对话框：l 选择【文件】/【发布设置】。l在文档的【属性】检查器（未选择对象时可用）中，单击【设置】按钮。注意：要为即将指定的发布设置创建发布配置文件。（2）在【格式】选项卡上，选择【JPEG 图像】类型。对于 JPEG 文件名，请使用默认文件名，或者输入带.jpg 扩展名的新文件名。（3）.单击【JPEG】面板，显示它的设置。,操作题,导入一张位图，利用其制作一个补间动画。制作一个多场景动画。使用文本工具创建一个补间形状。,