计算机基础与实训教材系列《中文版Flash CS3动画制作实训教程》.ppt

1、1,计算机基础与实训教材系列,中文版Flash CS3动画制作实训教程,2,第11章,动画测试与发布,3,学 习 目 标,在完成了Flash动画制作后，就可以将Flash文件发布，或导出为其他格式的文件，或将Flash动画发布到Web网站上，使用户能够在互联网上看到完成的动画作品。在将Flash文件发布或导出前，还要对文件进行必要的测试和优化，以保证动画能够顺利播放和在网络中被浏览者欣赏。本章主要介绍了Flash动画的测试、优化、导出和发布，详细介绍了导出和发布相关参数的设置及导出和预览、发布动画的方法步骤。,4,本 章 重 点,测试Flash动画 优化Flash动画 导出Flash动画 发布

2、Flash动画,5,11.1 测试Flash动画,Flash CS3提供了强大的测试功能，因为Flash动画一般是在网络上播放，所以文件的大小对动画的播放流畅度影响很大，如果文件太大，浏览者很可能没有耐心等待动画加载完毕。作为优秀的动画设计师，不但要有全面的设计技术、敏锐的艺术感觉、新鲜的创意和创造力，还应掌握用最小的文件表现最完美的动画效果。 可以在两种环境下测试影片，动画编辑环境和动画测试环境。,6,11.1.1 在动画编辑环境下测试,1. 简单动画测试 简单动画测试无需打开任何专门窗口，直接在动画编辑环境下，就可以对动画进行测试了。进行简单测试的方法有： （1）直接按下Enter键。 （

3、2）选择【控制】菜单下的菜单命令，如图11-1 所示。,图11-1 “控制”菜单,7,（3）选择【窗口】【工具栏】【控制器】命令，打开如图11-2 所示的播放控制器，单击其中的播放控制按钮进行动画测试。图11-2 播放控制器 但在简单测试中，动画中的影片剪辑元件、按钮元件以及脚本语言也就是影片的交互式效果均不能得到测试。而且在动画编辑模式下测试影片得到的动画速度比输出或优化后的影片慢。,图11-2 播放控制器,8,2. 基本交互控制测试,在编辑环境下通过设置，可以对按钮元件以及简单的帧动作（play、stop、gotoplay和gotoandstop）进行测试。 (1) 按钮元件测试 要在动画

4、编辑环境下测试按钮元件，选择【控制】【启用简单按钮】命令。此时按钮将做出与最终动画中一样的响应，包括这个按钮所附加的脚本语言，如图11-3 所示的四个礼物按钮，启用简单按钮命令后，就可以在编辑环境下测试按钮动作了。,图11-3 启用简单按钮测试,9,(2) 简单帧动作测试 要在动画编辑环境下测试简单的帧动作（play、stop、gotoplay和gotoandstop等），选择【控制】【启用简单帧动作】命令。,10,11.1.2 在动画测试环境下测试,1. 打开动画测试窗口 要测试一个动画的全部内容，选择【控制】【测试影片】命令。Flash将自动导出当前动画中的所有场景，然后将文件在新窗口中打

5、开，如图11-4所示。,图11-4 “测试影片”窗口,11,要测试一个场景的全部内容，选择【控制】【测试场景】命令。Flash仅导出当前动画中的当前场景，然后将文件在新窗口中打开，且在文件选项卡中标示出当前测试的场景，如图11-5所示。,图11-5 “测试场景”窗口,12,2. 下载性能图表,Flash自带了一个下载性能图表工具，利用它可以形象的获得在指定的网速下动画每一帧所发送的数据。这样可以清楚的看到数据传输中的瓶颈所在，这些瓶颈发送数据量大，可能导致播放中断。,13,（1）打开下载性能图表,只有在动画测试环境中才能看到下载性能图表，在动画测试窗口，选择【视图】【带宽设置】命令，可显示下载

6、性能图表。如图11-6所示。 下载性能图表分为左右两部分。左边显示的是动画的一些基本参数、测试设置和动画状态。右边显示了下载测试的直观图表。,图11-6 下载性能图表-数据流图表,14,（2）下载性能图表两种形式,选择【视图】【数据流图表】命令，如图11-6所示，以数据流图的方式显示动画带宽情况。在图表中交替显示的淡灰色和深灰色块，代表各个帧。 当点击色块时，在左侧会显示其帧序号和字节大小。第一个帧存储元件的内容，因此它通常大于其它帧。,15,选择【视图】【帧数图表】命令，如图11-7所示，该视图以逐帧方式显示动画带宽情况，有助于查看哪些帧导致数据流延迟。如有帧块延伸到红线之上，则动画播放到此

7、处时必须等待该帧下载完毕。,图11-7 下载性能图表-帧数图表,16,（3）下载速率设置,在测试环境下，可以模拟在指定的网络环境下，下载动画时的状况。选择【视图】【下载设置】命令，如图11-8所示，选择一个下载速度来确定 Flash 模拟的数据流速率。若要自定义设置，请选择【自定义】。,图11-8 下载速率设置菜单,17,11.2 优化Flash动画,随着Flash文件的增大，其下载和回放时间也会增加。可以采取多种方法，获得最佳回放质量。在发布过程中，Flash 会自动对文档进行一些优化。在导出文档之前，可以使用多种策略来减小文件的大小，减少下载时间。,18,1. 多使用元件。在动画中使用两次

8、或两次以上的元素要转换为元件。元件只在库中保存一次。重复使用一个元件不会明显加大动画文件的大小，并只被下载一次。 2. 多使用补间动画。创建动画时，尽可能使用补间动画，尽量避免使用逐帧动画。补间动画的过渡帧是计算得到，因此其数据量远远少于逐帧动画。,19,3. 位图优化。位图一般作为背景或静态元素，因尽量避免使它运动。如果将位图转换为矢量图，还应对转换后的矢量图进行优化。导入的位图应在库面板中进行压缩，操作方法如下，双击库面板中的位图图标，弹出“位图属性”对话框，取消“使用文档默认品质”复选框的勾选，设置JPEG的压缩品质，品质值越高，文件就越大，如图11-9所示。,图11-9 “位图属性”对

9、话框,20,4. 合理使用声音文件。尽可能使用 mp3 这种占用空间最小的声音格式，如非必需，不要添加太长的声音文件。 5. 元素优化。尽可能组合相关元素。将动画过程中发生变化的元素与保持不变的元素分散在不同的图层上。,21,6. 选择【修改】【形状】【优化】将用于描述形状的分隔线的数量降至最少，如图11-10所示。,图11-10 “形状优化”对话框,22,7. 多用实线，少用虚线。限制特殊线条类型（如虚线、点线、波浪线等）的数量。 实线所需的内存较少。用“铅笔”工具创建的线条比用刷子笔触创建的线条所需的内存更少。 8. 文字优化。尽量减少字体和字体样式的数量。将字体打散并不能减少文件体积，相

10、反会使文件变大，如果要重复使用文字，建议将其转换为元件 。 9. 色彩优化。尽量使用颜色调色板中的颜色，尽量少用过渡色。使用【颜色】面板（【窗口】【颜色】），使文档的调色板与浏览器特定的调色板相匹配。,23,11.3 导出Flash动画,将Flash动画优化并测试后，就可以利用导出命令将动画导出为其他文件格式。导出与发布不同，每次导出操作只能生成一种格式的文件，同时导出的设置不被存储起来。导出的文件可以在其它应用程序中编辑和使用。在【文件】【导出】菜单下有两个导出命令，如图11-11所示。 “导出图像”命令用于导出静态图，“导出影片”命令用于导出动态作品或动画序列图像。,图11-11 Flas

11、h导出命令,24,11.3.1 导出影片,导出影片的操作步骤为： 1. 选择【文件】【导出】【导出影片】命令，弹出“导出影片”对话框，如图11-12所示。要求用户选择导出文件的保存路径和文件类型，并输入导出文件名。Flash支持导出的动画类型如表11-1所示，这里有单个的动画文件，也有多个图像文件组成的图像序列。,图11-12 “导出影片”对话框,25,2. 从“保存类型”下拉列表中选择要导出的文件类型（默认为swf），选择保存路径，输入文件名，点击“保存”按钮。这时会根据用户选择的文件类型弹出相应的参数设置对话框，可以对参数进行设置。 3. 保持默认设置，会出现一个导出进度条，如图11-13

12、所示，文件被导出为一个独立的动画文件或动画序列文件。 4. 在磁盘的保存路径中找到导出的动画文件，双击就可以播放了，这说明动画文件已经可以脱离Flash编辑环境独立播放了。,图11-13 “导出影片”进度条,26,11.3.2 导出图像,导出图像的操作步骤与导出影片相似，不同的是：（1）需要选择【文件】【导出】【导出图像】命令；（2）只支持导出单个图像文件，如图11-14所示。,图11-14 “导出图像”对话框,27,11.4 发布Flash动画,可以将Flash影片发布成多种格式，而在发布之前需进行必要的发布设置，定义发布的格式以及相应的设置，以达到最佳效果。在“发布设置”对话框中，可以一次

13、性发布多种格式文件，且每种文件均保存为指定的发布设置，可以拥有不同的名字。本节将详细介绍Flash动画的发布设置、发布预览和发布。,28,11.4.1 设置发布参数,1. 发布前的格式设置 选择【文件】【发布设置】命令。弹出“发布设置”对话框，如图11-15所示。,图11-15 “发布设置”对话框,29,勾选“类型”选项组中的格式，可以设置发布的文件类型，默认只发布Flash和HTML两种格式文件，当勾选其他文件类型前的复选框（如图11-15中的GIF图像和JPEG图像），则会添加该类型文件的选项卡。,30,在“文件”下面的文本框中有与Flash源文件（*.fla）同名的名称，也可以输入文件名

14、为相应的文件类型命名。如果选择了多种发布格式，动画发布后，可以同时生成多个文件。,31,2. Flash发布设置 这是flash默认的发布格式，Flash发布设置选项卡如图11-16所示。,图11-16 “Flash”设置选项卡,32,3. GIF发布设置 使用 GIF 文件可以导出绘画和简单动画，以供在网页中使用。标准 GIF 文件是一种压缩位图。GIF 动画文件（有时也称作 GIF89a）提供了一种简单的方法来导出简短的动画序列。GIF发布设置选项卡如图11-22所示。,图11-22 “GIF”设置选项卡,33,4. JPEG发布设置 JPEG格式可将图像保存为高压缩比的24位位图。通常，

15、GIF 格式对于导出矢量绘画效果较好，而JPEG格式更适合显示包含连续色调（如照片、渐变色或嵌入位图）的图像。JPEG发布设置选项卡如图11-23所示。,图11-23 “JPEG”设置选项卡,34,5. PNG发布设置 PNG是唯一支持透明度的跨平台位图格式。PNG发布设置选项卡如图11-24所示。,图11-24 “PNG”设置选项卡,35,11.4.2 预览发布效果,发布预览命令可以使发布的文件格式在默认打开的应用程序中打开预览，可以预览的文件格式类型是以“发布设置”对话框中的设置为基础的。,36,预览发布效果的操作步骤为： 1. 选择【文件】【发布预览】命令，在弹出的下一级子菜单中进行选择

16、，如图11-25所示。在这个子菜单中处于可选状态的选项，是在“发布设置”对话框中所选择的文件类型，可以分别预览设置好参数的不同格式的文件。,图11-25 “发布预览”子菜单,37,2. 在图11-25 的子菜单中选择要预览的文件类型，会显示“正在发布”进度条如图11-26所示。 3. 发布完成，就可以预览动画发布效果，如果对效果满意，可以将该动画正式发布。,图11-26 “正在发布”进度条,38,11.4.3 发布动画,当制作完动画并对预览效果满意，就可以发布动画了。选择【文件】【发布】命令，也会弹出如图11-26所示的“正在发布”进度条。默认情况下，发布完后的文件以所选的文件类型的扩展名保存

17、在和源文件同一个目录下。,39,在对生日贺卡的发布中，选择了Flash、HTML、GIF、JPEG和PNG几种格式，采用默认设置，发布完成后的目录结构如图11-27所示。 发布完成后，就可以脱离开Flash应用程序的编辑环境，在其他应用程序中播放或查看发布文件了。,图11-27 发布文件的目录结构,40,11.5 习 题,1. 填空题 (1) 导出动画时，Flash默认的文件格式是 。 (2) Flash文件的两种导出方式是 和 。 (3) 为防止别人使用自己的原始素材和脚本，可以在发布时，为Flash动画设置 。 2. 上机题 (1) 从第10章制作完成的动画选择一个，输出和发布为不同类型的文件，体会各类型文件之间的区别。 (2) 尝试对制作完成的Flash动画文件进行优化，使文件体积最小化。,