第9章-动画的后期制作课件

第9章 动画的后期制作第9章 动画的后期制作调试动画动画的测试与优化发布动画课堂实践疑难解析第9章 动画的后期制作调试动画的目的是为了观察动画效果是否达到创作意图。在动画基本完成后，对整个动画、动画各个组成部分进行调试是一项重要的工作。在Flash中调试动画主要是通过“控制”菜单下的命令来完成的，如图9-1所示。9.1

调试动画第9章 动画的后期制作图9-1 “控制”菜单第9章 动画的后期制作调试命令功能介绍如下：①播放：在舞台场景中，从播放头所在的位置开始播放动画，在这种播放方式下不会显示动画中影片剪辑的动画效果。②单步向前(向后)：播放头向前(向后)移动一帧。③测试影片：弹出一个测试窗口，在该窗口内播放完整的动画效果，并在动画源文件的保存位置生成一个SWF文件。④调试影片：打开“调试器”面板，通过该面板可以在播放器播放影片时查找错误。第9章 动画的后期制作⑤测试场景：弹出测试窗口，测试当前场景中的动画效果。⑥循环播放：在舞台场景中，让动画循环播放。⑦播放所有场景：一般测试过程中，仅仅是对当前场景中的动画进行测试，如果勾选此命令，将测试所有场景中的动画效果。⑧启用简单帧动作：在舞台场景中播放动画时，启动关键帧上的动作。⑨启用简单按钮：在舞台场景中播放动画时，启动按钮上的动作。第9章 动画的后期制作通常情况下，对于比较简单的动画，比如补间动画、帧

动画，用户可以直接使用预览影片(按Enter键)的方式在场景

中观察动画效果；对于较复杂的、使用了影片剪辑的动画，

应该使用测试影片的方式来预览动画效果；如果动画中添加

了脚本，或使用了大量的影片剪辑元件，动画中往往会出现

一些漏洞，这时，用户需要使用专门的调试工具来调试动画，帮助发现其中的错误。第9章动画的后期制作9.1.1

使用调试器选择【控制】→【调试影片】命令，弹出“调试器”面板，如图9-2所示。调试器显示了一个当前加载到Flash

Player中影片剪辑的分层显示列表。使用调试器，用户可以在影片播放时显示和修改变量和属性的值，可以通过设置断点来暂停动画播放，逐行跟踪动作脚本代码的执行情况。第9章 动画的后期制作图9-2 “调试器”面板第9章 动画的后期制作9.1.2

使用断点1．在“动作”面板中设置和删除断点在“动作”面板中设置断点，只要在脚本代码的行号左边单击，就会出现一个红点 ，这个红点就是断点，再次单击红点，即可删除断点；也可以使用“脚本”窗格上方的“调试选项”按钮 设置和删除断点。来第9章 动画的后期制作2．在“调试器”中设置和删除断点在“调试器”中设置断点，应该在调试器刚启动，程序还处于暂停状态时进行。首先单击调试器右上角的“动作下拉列表”按钮 ，选择要设置断点的语句，然后在要设置断点的代码行号左边单击，就会出现红色断点，再次单击即可删除断点；也可以使用调试器右上方的调试工具按钮来设置和删除断点。说明：在程序中可以设置多个断点，只要程序遇到它们就会暂停。下面以第8章学习的案例“爱心残影”为例，学习断点的设置及调试器的使用方法。第9章 动画的后期制作案例9-1：调试“爱心残影”任务打开随书光盘中“第8章/案例6/爱心残影.fla”文档，通过设置断点，利用调试器调试动画，跟踪“爱心”实例的创建，观察变量的取值和“爱心”实例属性的变化过程。操作步骤打开随书光盘中“第8章/案例6/爱心残影.fla”文档。给脚本代码设置断点。选择第1帧，展开“动作”面板，在“duplicateMovieClip(”ball“,”ball“+i,i);”代码行左边行号的前面单击，设置断点

。第9章 动画的后期制作执行【控制】→【调试影片】命令，弹出“调试器”面板，每单击一次“继续”按钮 ，就会运行一次duplicateMovieClip命令，创建一个“爱心”实例，观察“显示列表”的变化。在“显示列表”中选择“_level0.ball25”影片剪辑实例，单击“属性”标签，“_alpha”属性为100，选择“_level0.ball24”影片剪辑实例，其“_alpha”属性为95.703125。在“显示列表”中选择“_level0”，单击“变量”标签，显示变量n和i的值。如图9-3所示。继续单击“继续”按钮 ，可以看到25个影片剪辑实例的创建过程。在“属性”标签下可查看每一个影片剪辑实例的各项属性。其中，黑色字体的属性为可编辑属性，灰色字体的属性不可编辑。第9章 动画的后期制作图9-3

在“调试器”面板中监视变量第9章 动画的后期制作9.1.3

使用输出窗口“输出”窗口可以显示脚本代码的语法错误以及动画中所有对象和变量的列表信息，还可以显示trace()函数的输出信息。1．显示语法错误如果脚本代码中存在语法错误，则在“动作”面板中单击“语法检查”按钮 后，或者测试影片时，就会弹出“输出”窗口，显示脚本代码中的所有语法错误，如图9-4所示。第9章 动画的后期制作图9-4“输出”窗口中显示语法错误第9章 动画的后期制作2．显示对象和变量的信息在调试或测试影片时，在测试窗口中，选择【调试】→【对象列表】或【变量列表】命令，会弹出“输出”窗口，其中显示影片中对象或变量的信息，可以帮助诊断影片。如图

9-5所示为上例在测试影片模式下输出窗口显示的对象列表信息。第9章 动画的后期制作图9-5“输出”窗口显示对象和变量列表信息第9章 动画的后期制作3．显示trace()函数的输出信息无论任何时候，当程序的执行遇到trace()函数时，都会弹出输出窗口，显示trace()函数中表达式的值。因此，可以在程序段中使用trace()函数显示变量、属性、表达式的值，以判断程序是否达到预期的执行结果。第9章 动画的后期制作9.2

动画的测试与优化测试动画主要是为了了解动画在网络上的下载情况和播放效果。在Flash作品完成以后，有必要对其进行测试，为动画的优化提供理论依据。9.2.1

测试动画下面以随书光盘中“第9章/案例2-3/网站片头.fla”文档为例，介绍测试文档下载性能的具体操作方法。第9章 动画的后期制作案例9-2：测试“网站片头”任务以随书光盘中“第9章/案例2-3/网站片头.fla”文档为例，学习测试文档下载性能的具体操作步骤和方法。操作步骤打开随书光盘中“第9章/案例2-3/网站片头.fla”文档，单击【控制】→【测试影片】或【测试场景】命令。在测试窗口中，单击【视图】→【下载设置】命令，在下拉菜单中选择一个下载速度来确定Flash模拟的数据流

速率，本例中选56K，如图9-6所示。第9章 动画的后期制作图9-6

选择下载速度第9章动画的后期制作(3)

单击【视图】→【带宽设置】命令，打开下载性能图表，再执行【视图】→【数据流图表】命令，显示文档的数据流下载性能图表，如图9-7所示。第9章 动画的后期制作图9-7

显示数据流图表第9章 动画的后期制作在下载性能图表的左侧显示了有关文档的信息、文档测试状态等；在图表的右侧显示了时间轴标题和下载图表。在图表窗口中，每个条形代表文档中的一个帧，条形的高度对应帧的字节数大小。时间轴标题下面的红线为下载警戒线，如果某个条形超出红色警戒线，说明在设定速率下，动画会出现暂停现象，文档必须等待这个帧的加载。第9章 动画的后期制作单击【视图】→【模拟下载】命令，开始模拟在设定的下载速度下网络上的播放效果。在本例中，第79帧的条形超出了红色警戒线，当动画播放到第79帧时会出现暂停，需要等待该帧上的内容下载完才能继续播放。单击【视图】→【帧数图表】命令，显示帧数图表，如图9-8所示。单击某个条形，在左边窗口会显示这个帧的

大小，从中可以看出哪些帧会导致数据流延时。测试时，记下超出红色警戒线的帧，关闭测试窗口，返回动画文档，对延时的帧进行优化修改。第9章 动画的后期制作图9-8

显示帧数图表第9章 动画的后期制作9.2.2

优化动画通过测试可以看出，随着Flash文件体积的增大，在网络上下载和播放动画时，速度会变慢，有时还会产生停顿的现象。因此，在导出或发布动画作品之前，有必要对动画进行优化。1．优化文档多使用元件：对于多次出现的元素，最好使用元件，重复使用元件不会使文件增大。尽量使用补间动画：创建动画效果时，尽可能使用补间动画。逐帧动画会大大增加文件的体积。第9章 动画的后期制作少用位图：位图体积比较大，一般只用它作静态的背景。尽量避免使用位图制作动画效果。优化帧：在同一个帧上不要放置过多的对象，这样会增加Flash处理文件的时间。优化图层：最好把不同对象的动画效果放置在不同的图层上，这样可以加快Flash处理文档的速度。第9章 动画的后期制作2．优化元素和线条组合元素：尽量把不同的元素组合在一起，形成群组对象。分离不同效果的元素：使用图层将动画过程中发生变化的元素与保持不变的元素分离。限制特殊线条类型：实线所需的内存较少，而虚线、点线、锯齿线等所需的内存较多。使用MP3的声音格式：MP3的声音格式占用空间最少，使用声音时，最好在音频编辑处理软件中剪辑好声音，不要把不需要的部分导入。第9章 动画的后期制作3．优化文本和字体限制字体和字体样式：尽量不要使用太多的字体和样式，因为它们会增加文件的体积。不要将文字打散：文字被打散后，会变成图像，这样会增大文件的体积。第9章 动画的后期制作4．优化颜色使用元件属性改变颜色：使用“属性”面板中的“颜色”菜单，可为单个元件创建多个不同颜色的实例。尽量少用渐变色：使用渐变色填充区域比使用纯色填充区域需要的更多的字节数。尽量少用Alpha透明度：Alpha透明度会减慢播放速度。第9章 动画的后期制作9.2.3

导出动画利用Flash导出功能导出的作品，可以作为素材供其他软件使用。用户可以从Flash动画中导出各种格式的动画影片和静态图像。1．导出SWF动画SWF格式的动画文件是Flash默认的播放文件，目前大多数应用软件都支持这种格式的导入。下面以导出随书光盘中“第9章/案例2-3/网站片头.fla”文档为例，学习导出动画的操作步骤和方法。第9章 动画的后期制作案例9-3：导出“网站片头”任务以随书光盘中“第9章/案例2-3/网站片头.fla”文档为例，学习导出动画的操作步骤和方法。操作步骤(1)

打开随书光盘中“第9章/案例2-3/网站片头.fla”文档，单击【文件】→【导出】→【导出影片】命令，弹出“导出影片”对话框，如图9-9所示。第9章 动画的后期制作图9-9“导出影片”对话框第9章 动画的后期制作在“保存类型”下拉列表中选择“Flash影片(*.swf)”类型，在“保存在”列表框中选择文件的保存路径，并在“文件名”文本框中输入导出文件的名称“网站片头”，最后单击“保存”按钮。单击“保存”按钮后，弹出“导出Flash

Player”对话框，如图9-10所示。第9章 动画的后期制作图9-10“导出Flash

Player”对话框第9章 动画的后期制作对话框中各参数含义说明如下。①版本：“版本”下拉列表用来选择针对何种版本的Flash

Player播放器导出SWF动画。说明：随着Flash

Player播放器版本的提高，安全性的考虑越来越多，语法也越来越规范，以前在低版本中能正确播放的动画在高版本的播放器上可能会失效。②加载顺序：设置动画加载图层顺序。“由下而上”是指先加载时间轴底部的图层，“由上而下”正好相反。③ActionScript版本：选择与编程规范相匹配的ActionScript版本号。第9章 动画的后期制作④选项：选中“选项”栏中的“生成大小报告”复选框，可以在导出SWF文件的同时，在Flash源文件的存放路径下生成一个名为“文件名+Report.txt”的报告文件，报告文件中详细记录了每一帧的数据量，并对场景和元件的数据量进行统计；选中“防止导入”复选框，可以对作品的版权进行一定程度的保护，使导出的SWF文件不能被导入到其他Flash文件中；选中“省略trace动作”复选框，将忽略程序中所有的

trace函数，在程序的执行过程中也就不会弹出“输出”窗口。⑤密码：当勾选“防止导入”后，可以在此输入密码，这样当在其他文档中导入SWF文件时，会弹出“导入所需密码”对话框，如图9-11所示，此时需要输入密码才能导入。第9章 动画的后期制作图9-11“导入所需密码”对话框第9章 动画的后期制作说明：关于JPEG图像压缩和音频压缩请参阅第7章多媒体素材的使用。(4)

按需要设置SWF动画的导出参数，最后单击“确定”按钮，完成动画影片的导出。第9章 动画的后期制作2．导出GIF动画GIF动画支持透明背景，广泛应用于网络和其他应用软件。Flash只能导出主时间轴上的动画内容，如果动画中有影片剪辑、动作脚本，Flash不支持这些对象的导出。导出GIF动画的操作步骤与导出SWF动画基本相同，只是在“导出影片”对话框中需要选择保存类型为“GIF动画

(*.gif)”格式，单击“保存”按钮后，弹出“导出GIF”对话框，如图9-12所示。在该对话框中可为GIF动画设置导出参数。第9章 动画的后期制作图9-12“导出GIF”对话框第9章 动画的后期制作对话框中各参数含义说明如下。①尺寸：设置导出的GIF动画的高和宽。②分辨率：设置导出的GIF动画的分辨率。③颜色：设置导出的GIF动画的颜色，默认“标准颜色”是216色。颜色越多，图像越清晰，导出的动画体积也越大。④交错：勾选“交错”复选框可以使动画在网络上下载时，首先呈现一个低分辨率的图像，然后随着下载的进行再逐渐过渡到最终的高分辨率。⑤透明：勾选“透明”复选框会去除动画的舞台背景颜色，使导出的GIF动画背景透明。第9章 动画的后期制作⑥平滑：勾选“平滑”复选框会对导出的动画进行抗锯齿处理，从而使动画质量更高。⑦抖动纯色：通过“抖动纯色”处理，可以用颜色表中可用的几种颜色来模拟当前色板中没有的颜色。⑧动画：设置GIF动画重复播放的次数。默认为0，表示循环播放。说明：Flash的导出功能还可以导出AVI、MOV等其他格式的动画影片，其操作步骤和导出参数设置与SWF、GIF动画基本相同，在此不再赘述。第9章 动画的后期制作3．导出静态图像Flash不仅可以导出动画影片，还可以导出JPG、GIF、PNG等格式的静态图像。Flash导出的静态图像是当前帧上的图像。导出图像的操作步骤如下。打开Flash动画。单击要导出的帧，执行【文件】→【导出】→【导出图像】命令，弹出“导出图像”对话框，如图9-13所示。第9章 动画的后期制作图9-13“导出图像”对话框第9章 动画的后期制作在“导出图像”对话框中设置导出图像的保存类型、保存路径和文件名。如果导出的是“位图(*.bmp)”，则单击“保存”按钮后，弹出“导出位图”对话框，如图9-14所示。在“导出位图”对话框中可设置图像的导出参数，最后单击“确定”按钮，完成位图图像的导出。第9章 动画的后期制作图9-14 “导出位图”对话框第9章 动画的后期制作9.3

发布动画制作好的Flash动画，针对不同的应用场合，主要有两种推广和传播作品的方式。发布为SWF动画：将Flash作品发布为SWF动画，可以在本地机上播放，也可以上传到网络上播放。发布为HTML网页文件：目前，纯Flash网站受到越来越多的公司和个人的青睐，使用纯Flash网站宣传推广企业产品、展示个人空间，个性十足，尽显魅力，给人耳目一新的感觉。如果制作纯Flash网站，就需要将它发布为HTML格式的网页文件。第9章 动画的后期制作9.3.1

发布设置在发布动画前，首先要进行发布设置操作准备，确定

Flash动画的发布格式，设置发布参数。选择【文件】→【发布设置】命令，弹出“发布设置”对话框，如图9-15所示。第9章 动画的后期制作图9-15 “发布设置”对话框第9章 动画的后期制作1．发布HTML文件选择发布“HTML(*.html)”文件类型后，单击“HTML”选项卡，显示“HTML”参数设置，如图9-16所示。对话框中各参数含义如下。第9章 动画的后期制作图9-16

“HTML”选项卡第9章 动画的后期制作模板：选择网页使用的模板，可以发布出适用于不同场合的HTML页面。检测Flash版本：勾选此选项，则发布SWF文件时，

Flash会创建单个HTML页面，在其中嵌入SWF和Flash

Player检测代码。如果最终用户没有安装指定的用于查看SWF的Flash版本，则会显示一个HTML页面，其中包含指向下载最新版本Flash

Player的链接，如图9-17所示。第9章 动画的后期制作图9-17

检测Flash版本的替代页面第9章 动画的后期制作(3)尺寸：用来指定网页中影片的显示尺寸。①匹配影片：默认设置，使用SWF文件的尺寸大小。②像素：选择这个选项后，可以在下面的“宽”和“高”中设置影片的大小。③百分比：设置影片相对于浏览器窗口的百分比大小。第9章 动画的后期制作(4)回放：用来控制影片的播放和上下文菜单的显示。①开始时暂停：勾选此选项，禁止Flash影片下载后自动播放，只有当用户单击影片中的播放按钮，或单击鼠标右键，选择“播放”命令后，动画才开始播放。②显示菜单：勾选此选项，当在网页动画中单击鼠标右键时，将会显示控制播放的完整菜单。③循环：勾选此选项，动画会反复循环播放；否则动画只会播放一次。④设备字体：勾选此选项，影片会用消除锯齿的系统字体替换用户系统上未安装的字体。第9章动画的后期制作品质：用于在满足播放速度和保证画质之间进行协调。由“低”到“最佳”，其中，如果选择“低”，则不考虑影片播放质量，不消除锯齿，只保证播放速度；“最佳”提供最佳的显示品质，而不考虑播放速度。窗口模式：用于设置影片同网页中其他内容的关系。主要用于创建背景透明的Flash影片。很多网站上的Flash广告都使用了这种背景透明效果。HTML对齐：用来设置Flash影片在浏览器窗口中的位置。第9章 动画的后期制作(8)

缩放：如果在“尺寸”中设置了与动画原始大小不同的尺寸，则通过该选项可以控制影片的缩放。①默认(显示全部)：在指定的区域显示整个动画，并且保持影片的原始高宽比。②无边框：选择该项，会对文档进行缩放，在保持影片的原始高宽比条件下填充指定的区域，并根据需要裁剪动画边缘。③精确匹配：在指定区域显示整个文档，但不保持原始高宽比，因此可能会使网页动画变形。④无缩放：该选项将禁止在调整Flash

Player窗口大小时对影片进行缩放。第9章 动画的后期制作Flash对齐：设置如何在应用程序窗口内放置Flash内容，以及在必要时如何裁剪它的边缘以适应程序窗口。显示警告信息：设计网页时，会在必要时给出一些警告信息。第9章 动画的后期制作2．发布EXE文件SWF文件需要Flash播放器的支持才能播放。也可以把

Flash作品发布成可执行文件，从而使得在没有Flash播放器的计算机系统上也能正常播放SWF动画。要把Flash发布成可执行文件，只需在“发布设置”对话框的“格式”选项卡中选中“Windows放映文件”复选框即可。说明：Flash动画发布的EXE文件体积会比SWF文件大1.5

MB左右，因为在EXE文件中打包了Flash

Player播放器。第9章 动画的后期制作9.3.2

发布预览当设置好发布参数后，可以在Flash开发环境下预览动画效果。选择【文件】→【发布预览】命令，显示“发布预览”子菜单，如图9-18所示，选择想预览的文件类型。注意：在“发布预览”子菜单中，只有在“发布设置”对话框中选择的文件类型才能被预览，没有选