网页设计与制作 教学课件 PPT 作者 王君学第12章 使用Flash CS3制作动画

本章将介绍使用Flash CS3制作动画的基本知识。,第12章 使用Flash CS3制作动画,学习目标,了解Flash CS3的工作界面。 掌握创建和保存Flash文件的方法。 掌握使用时间轴的基本方法。 掌握使用元件、库和实例的方法。 掌握Flash动画的类型和创建方法。 掌握导出Flash动画的方法。,12.1 认识Flash CS3,工具箱 时间轴 常用面板 场景和舞台,12.1.1 工具箱,工具箱集中了绘图、文字和修改等常用工具。使用这些工具可以很方便地绘制、选取、喷绘及修改动画。默认情况下，工具箱位于工作界面的左侧。,12.1.1 工具箱,将鼠标光标移动到工具箱中的任一按钮上时，该按钮将凸出显示，如果鼠标光标在工具按钮上停留一段时间，鼠标光标的右下角会显示该工具的名称。单击工具箱中的任一工具按钮可将其选择。个别工具按钮的右下角带有黑色小三角形，表示该工具还隐藏有其他同类工具，将鼠标光标放置在这样的按钮上，按下鼠标左键不放，即可将隐藏的工具显示出来。将鼠标光标移动到弹出工具组中的任一工具上并单击鼠标，可将该工具选择。,12.1.2 时间轴,时间轴是实现Flash动画的关键部分 。,12.1.3 常用面板,一、【属性】面板 【属性】面板在默认状态下处于展开状态。在Flash CS3中，将【属性】面板、【滤镜】面板和【参数】面板整合到了一个面板中。使用【属性】面板可以很容易地访问舞台或时间轴上当前选定项的最常用属性，从而简化文档的创建过程。可以在【属性】面板中更改对象或文档的属性，而不用访问用于控制这些属性的菜单或者面板。根据当前选定的内容，【属性】面板可以显示文档、文本、元件、形状、位图、视频、组、帧或工具的信息和设置。当选定了两个或多个不同类型的对象时，【属性】面板会显示选定对象的总数。,12.1.3 常用面板,二、【库】面板 选择【窗口】/【库】命令可以打开【库】面板。在【库】面板中可以方便快捷地查找、组织和调用资源。【库】面板中存储的元素称为元件，可以重复使用。【库】面板是存储和组织在Flash中创建的各种元件的地方，它还可用于存储和组织导入的文件，包括位图图形、声音文件和视频剪辑等。,12.1.3 常用面板,三、【项目】面板 选择【窗口】/【项目】命令可以打开【项目】面板。使用【项目】面板可以管理一个项目中的多个文档，把多个相关的文件组合在一起创建复杂的应用项目。,12.1.3 常用面板,四、【颜色】面板 选择【窗口】/【颜色】命令可以打开【颜色】面板。使用【颜色】面板可以创建和编辑纯色以及渐变填充，调制出大量的颜色，以设置笔触、填充色和透明度等。如果已经在舞台中选定了对象，那么在【颜色】面板中所做的颜色更改就会应用到该对象。,12.1.3 常用面板,五、【行为】面板 选择【窗口】/【行为】命令可以打开【行为】面板。利用【行为】面板无需编写代码即可轻松地为Flash内容添加交互功能。但ActionScript 3.0不支持此功能，要使用此功能，必须以ActionScript 1.0 或ActionScript 2.0为目标。,12.1.3 常用面板,六、【动作】面板 选择【窗口】/【动作】命令可以打开【动作】面板。使用【动作】面板可以创建和编辑对象或帧的ActionScript代码。选择帧、按钮或影片剪辑实例可以激活【动作】面板。,12.1.4 场景和舞台,在当前编辑的动画窗口中，进行动画内容编辑的整个区域叫做场景。在电影或话剧中，经常要更换场景，在Flash动画中，为了设计的需要，也可以更换不同的场景，每个场景都有不同的名称。可以在整个场景内进行图形的绘制和编辑工作，但是最终动画仅显示场景中白色区域（也可能会是其他颜色，这是由动画属性设置的）内的内容，我们就把这个区域称为舞台。而舞台之外的灰色区域称为工作区。舞台是绘制和编辑动画内容的矩形区域，这些动画内容包括矢量图形、文本框、按钮、导入的位图图形或视频剪辑等。动画在播放时仅显示舞台上的内容，对于舞台之外的内容是不显示的。在设计动画时，往往要利用工作区做一些辅助性的工作，但主要内容都要在舞台中实现。这就如同演出一样，在舞台之外（后台）可能要做许多准备工作，但真正呈现给观众的只是舞台上的表演。,12.2 创建和保存Flash文件,创建Flash文件 保存Flash文件,12.2.1 创建Flash文件,一、通过欢迎屏幕创建Flash文件 启动Flash CS3后，在欢迎屏幕的【新建】栏下包括Flash文件（ActionScript 3.0）、Flash文件（ActionScript 2.0）、Flash文件（移动）、ActionScript文件、ActionScript通信文件、Flash JavaScript文件和Flash项目7个选项。选择任何一个选项都将创建相应的Flash文件并进入编辑窗口。,12.2.1 创建Flash文件,二、通过【文件】/【新建】命令创建Flash文件 选择【文件】/【新建】命令将打开【新建文档】对话框，在【常规】选项卡的【类型】列表框中，列出了Flash文件（ActionScript 3.0）、Flash文件（ActionScript 2.0）、Flash文件（移动）、Flash幻灯片演示文稿、Flash表单应用程序、ActionScript文件、ActionScript通信文件、Flash JavaScript文件和Flash项目9个选项。选择任何一个选项都将创建相应的Flash文件并进入编辑窗口。,12.2.2 保存Flash文件,一、【保存】、【另存为】和【全部保存】命令 对于新建的Flash文件进行编辑后保存，使用【文件】/【保存】和【文件】/【另存为】命令的性质是一样的，都是为当前文件命名并进行保存，其打开的对话框如图12-13所示。但对于打开的文件进行编辑后再保存，就要分清用【保存】命令还是【另存为】命令，【保存】命令是将文件以原文件名进行保存，而【另存为】命令可将修改后的文件重命名后进行保存。如果要将打开的多个文件同时进行保存，可以选择【文件】/【全部保存】命令。在保存Flash文件时，可以在【另存为】对话框的【保存类型】下拉列表中选择是保存为“Flash CS3文档（*.fla）”还是“Flash 8文档（*.fla）”。,12.2.2 保存Flash文件,二、【还原】命令 如果需要还原到上次保存时的文档版本，可以选择【文件】/【还原】命令。 三、【另存为模板】命令 选择【文件】/【另存为模板】命令可以将文档保存为模板，以便用做新Flash文件的起点。该命令打开的【另存为模板】对话框如图12-14所示，其中【名称】文本框用于定义模板的名称，【类别】列表文本框用于定义模板的类别，可以选择也可以输入，【描述】文本框用于输入模板的说明文字，最多可容纳255个字符，这样在【新建文档】对话框中选择该模板时就会显示这些说明文字。,12.2.2 保存Flash文件,12.3 使用时间轴,时间轴的功能和作用 图层的基本类型 帧的基本类型 帧的基本操作,12.3.1 时间轴的功能和作用,时间轴用于组织和控制文档内容在一定时间内播放的层数和帧数。从其功能来看，【时间轴】面板可以分为左右两个部分：层控制区和帧控制区。时间轴能够显示文档中哪些地方有动画，包括逐帧动画、补间动画和运动路径，可以在时间轴中插入、删除、选择和移动帧，也可以将帧拖到同一层中的不同位置，或是拖到不同的层中。,12.3.1 时间轴的功能和作用,【时间轴】面板的主要组件是层、帧和播放头，还包括一些信息指示器。层就像透明的投影片一样，一层一层地向上叠加。层可以帮助用户组织文档中的插图，在某一层上绘制和编辑对象，不会影响其他层上的对象。如果一个层上没有内容，那么就可以透过它看到下面的层。当创建了一个新的Flash文档之后，它就包含一个层。可以添加更多的层，以便在文档中组织插图、动画和其他元素。帧是进行动画创作的基本时间单元，关键帧是对内容进行了编辑的帧，或包含修改文档中“帧动作”的帧。Flash可以在关键帧之间进行补间或填充帧，从而生成流畅的动画。,12.3.2 图层的基本类型,图层是组织复杂场景和制作神奇效果的得力工具，在Flash中起着重要的作用。在Flash中，图层的使用简化了动画的制作过程，将不同的图形和动画分别制作在不同的图层上，既条理清晰又便于编辑。按其功能，图层可以分为以下几种类型。 普通图层：主要用于组织动画的内容，一般放置的对象是最基本的动画元素，如矢量对象、位图和元件等。 引导层：主要用于为动作补间动画添加引导路径，在引导层中，可以像其他层一样制作各种图形和引入元件，但最终发布时，引导层中的对象不会显示出来。 遮罩层：主要用于实现遮罩的视觉效果，可以将与遮罩图层中相链接图层中的图像遮盖起来，还可以将多个图层组合起来放在一个遮罩层下以创建多样的效果。,12.3.3 图层的基本操作,一、新建图层 一般新建的Flash文档只有一个默认的图层，即“图层1”。如果需要再添加新的图层，可通过以下3种途径。 单击【时间轴】面板底部的 （插入图层）按钮，即可在当前图层上方插入一个新图层。此时新图层变为当前图层，新图层按照插入顺序生成系统默认名称，可以双击图层名称来为新建图层指定一个新的名称。 选择【插入】/【时间轴】/【图层】命令，即可在当前图层上方插入一个新图层。 在【时间轴】面板的已有图层上，单击鼠标右键，在弹出的快捷菜单中选择【插入图层】命令，即可插入一个图层。,12.3.3 图层的基本操作,12.3.3 图层的基本操作,二、锁定或解锁图层 锁定后的图层不能再进行操作，所以可以将动画中不需要修改的图层锁定，以防止误操作。单击图层名称右侧 列的 图标，可以锁定当前图层，此时其图标由 变为 ，再次单击 图标可以解锁该图层。单击顶部的 图标可以锁定所有的图层。,12.3.3 图层的基本操作,三、隐藏或显示图层 随着动画中图层及图层文件夹的增多，舞台上过多的内容可能会使人觉得杂乱，此时，最好将一些图层隐藏起来，以方便用户能够将注意力集中到正在制作的部分。单击图层名称右侧的 列的 图标，可以隐藏当前图层，此时其图标由 变为 ，再次单击 图标可以显示该图层；单击顶部的 图标可以隐藏所有的图层。,12.3.3 图层的基本操作,四、使用彩色轮廓显示图层中的对象 为了帮助用户区分对象所属的图层，可以用彩色轮廓显示图层上的所有对象。要使用轮廓显示图层中的对象，可以单击图层右侧 列的实心图标，使其显示为空心。再次单击 列的空心图标，可以恢复正常显示。单击顶部的 图标，可以用轮廓线显示所有图层上的对象,12.3.3 图层的基本操作,五、新建图层文件夹 图层文件夹可以放入多个图层，并且在【时间轴】中可以展开或折叠图层文件夹，而不会影响在舞台中看到的内容，从而进一步帮助用户组织和管理动画中过多的图层。单击【时间轴】底部的 （插入图层文件夹）按钮，可新建一个图层文件夹，双击图层文件夹名称可为新建图层文件夹指定一个新的名称。另外，选择【插入】/【时间轴】/【图层文件夹】命令，或在【时间轴】面板的已有图层上单击鼠标右键，在弹出的快捷菜单中选择【插入文件夹】命令，都可插入一个图层文件夹。,12.3.4 帧的基本类型,一、关键帧 关键帧是指内容改变的帧，它的作用是定义动画中的对象变化。包含对象的单个关键帧在时间轴上用一个黑色圆点表示。关键帧中也可以不包含任何对象，即为空白关键帧，此时显示为一个空心圆。用户可以在关键帧中定义对动画对象的属性所做的更改，也可以包含ActionScript代码以控制文档的某些属性。Flash能创建补间动画，即自动填充关键帧之间的帧，以便生成流畅的动画。通过关键帧的作用，不需画出每个帧就可以生成动画，使动画的创建更为方便。,12.3.4 帧的基本类型,二、普通帧 普通帧是指内容没有变化的帧，通常用来延长动画的播放时间，以使动画更为平滑生动。空白关键帧后