中文版Flash动画制作培训教程第13章课件

中文版中文版FlashFlash动画制作培训教程动画制作培训教程本章要点w测试与优化动画w导出动画w发布动画中文版中文版FlashFlash动画制作培训教程动画制作培训教程具体要求w熟悉动画、色彩和元素等的优化方法w掌握动画的导出方法w掌握发布动画的设置中文版中文版FlashFlash动画制作培训教程动画制作培训教程本章导读w仅仅掌握了Flash动画的制作还不够，若需要将自己的作品上传到网上供大家观看，就需要掌握如何导出并发布Flash动画，在发布之前还需要学会对Flash动画进行优化。这样才可以使作品在网络中播放得流畅自如，提高点击率。n优化动画：可使动画文件更小，下载的速度更快。n导出动画：便于观赏者观看。n发布动画：让动画保留到指定的网站中供人观看。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.1 测试与优化动画w在将Flash作品发布到网上之前，应先测试并优化动画。测试是为了查看动画是否按照制作者的思路产生预期的效果，及动画中是否有不连续的帧影响动画播放效果；优化是为了使Flash动画的体积更小，或是为了上传到网上后能较流畅地观看等。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.1 测试与优化动画w13.1.1 知识讲解w13.1.2 典型案例测试“广告条”动画中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.1.1 知识讲解w在对制作完成的Flash作品进行测试时，可测试单个场景的下载性能，也可测试整个动画的下载性能。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.1.1 知识讲解w1测试Flash动画w2优化动画中文版中文版FlashFlash动画制作培训教程动画制作培训教程1测试Flash动画w通常，对Flash作品进行测试时应注意以下几个问题：Flash作品的体积是否达到最小。在网络环境下，能否正常下载和观赏动画。Flash作品是否按照设计的思路产生预期的效果。中文版中文版FlashFlash动画制作培训教程动画制作培训教程1测试Flash动画下面讲解测试动画的方法，具体操作如下：n1）打开要测试的Flash动画，按【Ctrl+Enter】键播放动画，打开动画测试界面，这时即可测试Flash动画的播放情况。n2）选择【视图】【下载设置】命令，在弹出的快捷菜单中选择一个下载速度来确定Flash模拟的数据流速率。n3）如果要自定义一个下载速度，选择【自定义】命令，在打开的【自定义下载设置】对话框中，可以设置一个下载速度。中文版中文版FlashFlash动画制作培训教程动画制作培训教程1测试Flash动画n4）在观看SWF文件时，选择【视图】【带宽设置】命令可以显示带宽，以查看动画的下载性能。再次选择该命令可以隐藏该显示图。n5）选择【视图】【模拟下载】命令，可打开或隐藏带宽显示图下方的SWF文件。如果隐藏了SWF文件，则文档在不模拟Web连接的情况下就开始下载。n6）单击图表上的 标志会在左侧窗口中显示对应帧的设置，并停止文档的下载。n7）关闭测试窗口，返回到Flash动画的制作场景中，完成测试。中文版中文版FlashFlash动画制作培训教程动画制作培训教程1测试Flash动画“带宽显示图”中各栏的含义如下：n【影片】栏：显示动画的播放速度、舞台大小、文件大小和所有的帧数。n【设置】栏：显示当前设置的网络传输条件。n【状态】栏：显示当前在右边窗口被选中的动画某一帧的位置、数据量及整个动画已经下载的数据量，被选中的帧显示为绿色。n数据量：显示动作各帧的数据量。矩形条越长，该帧的数据量越大。最下面的红色平行线条是动画传输率的告警线，它的位置由传输条件决定。当矩形条高于红色平行线条时，说明在播放到这一帧时可能会产生停顿。中文版中文版FlashFlash动画制作培训教程动画制作培训教程2优化动画 在一般情况下，下载和播放Flash动画时，如果速度很慢，而且容易出现停顿现象，说明Flash动画文件很大，影响动画的点击率。为了减少Flash动画的大小，加快动画的下载速度，在导出动画之前，需要对动画文件进行优化。优化操作主要涉及动画、色彩、元素和文本等方面。中文版中文版FlashFlash动画制作培训教程动画制作培训教程1）对动画的优化动画制作过程的优化主要有以下三个方面：n将动画中相同的对象转换为元件，多个相同内容的对象只保存一次，而且可以使用多次，能够很好地减少动画的数据量。n制作动画时最好减少逐帧动画的使用，尽量使用补间动画。补间动画中的过渡帧是系统计算得到的，逐帧动画的过渡帧是通过添加对象而得到的，因此补间动画的数据量相对于逐帧动画是很小的。如果制作类似的动画效果，渐变动画相对于逐帧动画的体积要小得多。n由于位图比矢量图的体积大得多，调用素材时最好使用矢量图，而不使用位图。中文版中文版FlashFlash动画制作培训教程动画制作培训教程2）对色彩的优化w通常情况下，Flash都会要求色彩比较绚丽。但如果对作品的影响不大，建议使用单色，并减少渐变色的使用。中文版中文版FlashFlash动画制作培训教程动画制作培训教程3）对元素的优化w在制作动画的过程中，应注意对元素的优化选择。对元素的优化主要有以下6个方面：n尽量减小矢量图形的形状复杂程度。n尽量对动画中的各元素进行分层管理。n尽量减少特殊形状矢量线条的应用，如斑马线、虚线和点线等。n尽量少导入素材，特别是位图，它会大幅度增加动画体积的大小。n导入声音文件时，尽量使用体积相对于其他音频格式较小的MP3格式。n尽量使用矢量线条替换矢量色块，因为矢量线条的数据量相对于矢量色块要小。中文版中文版FlashFlash动画制作培训教程动画制作培训教程4）对文本的优化w对文本的优化主要有以下两个方面：n使用文本时不宜使用过多种类的字体和样式，因为使用过多的字体和样式不但会增大动画的数据量，而且不易统一风格。n尽量不要将文字打散。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.1.2 典型案例测试“广告条”动画w本案例将对“广告条”动画进行测试，以此掌握测试动画的方法。w素材位置：【第13课素材】w制作思路：n1）检查对象列表。n2）在带宽显示图中查看动画的下载性能。中文版中文版FlashFlash动画制作培训教程动画制作培训教程操作步骤w这里先打开测试界面，然后在菜单栏中选择相应的命令对动画进行测试，其具体操作（请老师参照软件讲解）：中文版中文版FlashFlash动画制作培训教程动画制作培训教程案例小结w本案例在【输出】对话框、【自定义下载设置】对话框、数据流图表和帧数图表中检查了动画是否正确。应该注意的是，在测试动画时，一旦建立起结合了“带宽设置”的测试环境，就可以在测试模式中直接打开任何SWF文件。文件在Flash Player窗口中打开，且在打开时会使用“带宽设置”和其他选定的查看选项。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.2 导出动画w导出Flash作品的主要作用是产生单独格式的Flash作品，以便于观赏者观看。将动画优化并测试完下载性能后，就可以通过导出影片或图像命令将动画导出到其他应用程序中。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.2 导出动画w13.2.1 知识讲解w13.2.2 典型案例导出烟花图形中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.2.1 知识讲解w导出Flash作品后，就可以方便地将其应用于网页或多媒体等领域中了。Flash动画的导出主要包括动画文件的导出和动画图像的导出两方面。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.2.1 知识讲解w1导出动画文件w2导出动画图像中文版中文版FlashFlash动画制作培训教程动画制作培训教程1导出动画文件w将Flash作品的动画文件导出，即可方便地将其应用到其他领域。导出动画文件的具体操作如下：n1）打开要导出的Flash动画，如“雪花.fla”。n2）选择【文件】【导出】【导出影片】命令，打开【导出影片】对话框。n3）在【保存在】下拉列表框中选择文件要导出的路径；在【文件名】下拉列表框中输入文件名称，这里输入“雪花”；在【保存类型】下拉列表框中选择保存类型，默认情况下为swf格式。中文版中文版FlashFlash动画制作培训教程动画制作培训教程1导出动画文件n4）单击 按钮，打开【导出Flash Player】对话框。n5）单击该对话框中【音频流】栏的 按钮，打开【声音设置】对话框。在该对话框中设置声音的导出参数，然后单击 按钮返回【导出Flash Player】对话框。n6）在【选项】栏设置相应参数，单击 按钮即可将该文件导出。中文版中文版FlashFlash动画制作培训教程动画制作培训教程【导出Flash Player】对话框 中文版中文版FlashFlash动画制作培训教程动画制作培训教程1导出动画文件w在【导出Flash Player】对话框中，各选项的含义如下：n【版本】下拉列表框：可选择以何种方式保存导出的Flash动画。n【加载顺序】下拉列表框：可选择需要的加载顺序，包括【由下而上】和【由上而下】两个选项。n【动作脚本版本】下拉列表框：可选择需要的版本，如果需要以较低版本打开，可以选择动作脚本1.0。中文版中文版FlashFlash动画制作培训教程动画制作培训教程1导出动画文件n【选项】栏：选中该选项栏中的复选框可进行相应的操作，建议选中 复选框，以减小动画的体积。该栏中各项含义如下。n ：创建一个文本文件，并记录最终导出动画文件的大小。n ：防止发布的动画文件被其他人下载到Flash中进行编辑。n ：设定忽略当前动画中的跟踪命令。n ：允许对动画进行调试。n ：减少文件的大小。中文版中文版FlashFlash动画制作培训教程动画制作培训教程1导出动画文件w【JPEG品质】栏：用于调整JPEG的品质好坏，品质越高越好，体积也会相应增大。在后面的滚动条上左右拖动滑块可以调整JPEG的品质，越向左品质越低。w【音频流】栏后的【设置】按钮：在打开的【声音设置】对话框中可以对导入的音频格式重新设置，一般使用MP3格式。中文版中文版FlashFlash动画制作培训教程动画制作培训教程2导出动画图像w如果将动画中的某个图像导出为图片格式，则可以作为制作其他动画的素材。其具体操作如下：n1）打开要导出图像的Flash动画，选中要导出的某帧或场景中的某个对象。n2）选择【文件】【导出】【导出图像】命令，打开【导出图像】对话框。中文版中文版FlashFlash动画制作培训教程动画制作培训教程2导出动画图像n3）在该对话框中的【保存在】下拉列表框中选择保存的位置，在【文件名】下拉列表框中输入文件的名称，在【保存类型】下拉列表框中选择导出文件的格式，单击 按钮。n4）如果导出的是GIF格式，程序将打开【导出GIF】对话框。在该对话框中根据需要设置图像的导出参数，最后单击 按钮完成图像的导出。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.2.2 典型案例导出烟花图形w本案例将把“烟花”动画中的一个图形导出为JPG格式的文件。w素材位置：【第13课素材】w效果图位置：【第13课源文件烟花.jpg】w制作思路：n1）选择合适的烟花散开图形。n2）进行导出设置，将其导出。中文版中文版FlashFlash动画制作培训教程动画制作培训教程操作步骤w打开“烟花”动画，选择“xin2”影片剪辑元件的第10帧，显示出烟花散开的图形，将这个图形导出为JPG格式，其具体操作（请老师参照软件讲解）：中文版中文版FlashFlash动画制作培训教程动画制作培训教程案例小结w本案例将“烟花”动画中的一个画面图形导出，练习了导出图像的方法，要注意在导出时的各选项设置方法。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.3 发布动画wFlash的发布命令不仅能向网络发布Flash动画，还能向没有安装Flash插件的浏览器发布各种各样的图形文件、视频文件及可独立运行的小程序（如exe可执行程序）。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.3 发布动画w13.3.1 知识讲解w13.3.2 典型案例发布“螺旋纹”动画中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.3.1 知识讲解w在发布Flash动画时，需要注意动画的质量和大小。在动画文件较小时，可以选择发布较高质量的动画，在动画文件较大时就需要对动画中的元素进行压缩。在发布动画时，需要对发布格式进行设置，并对动画进行预览。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.3.1 知识讲解w1发布格式的设置w2预览发布中文版中文版FlashFlash动画制作培训教程动画制作培训教程1发布格式的设置w在将Flash动画发布到网上之前，应对动画进行发布设置。选择【文件】【发布设置】命令，打开【发布设置】对话框，在该对话框中有三个选项卡：【格式】、【Flash】和【HTML】。中文版中文版FlashFlash动画制作培训教程动画制作培训教程1）【格式】选项卡w系统默认打开的是【格式】选项卡，它用于设置动画的发布格式，包括Flash，HTML以及其他图形文件和视频文件的格式。在【类型】栏中可以选择发布作品的格式。中文版中文版FlashFlash动画制作培训教程动画制作培训教程2）【Flash】选项卡w打开【Flash】选项卡，在此可以设置发布后Flash动画的版本、图像品质和音频质量等。中文版中文版FlashFlash动画制作培训教程动画制作培训教程3）【HTML】选项卡w打开【HTML】选项卡，其中各选项作用如下：n【模板】：用于选择所使用的模板，单击右边的 按钮，会显示出该模板的有关信息。n【尺寸】：设置动画的宽度和高度值。其中包括【匹配影片】、【像素】和【百分比】三个选项，各选项的作用如下。中文版中文版FlashFlash动画制作培训教程动画制作培训教程3）【HTML】选项卡n【匹配影片】：将发布的尺寸设置为动画的实际尺寸大小。n【像素】：用于设置影片的实际宽度和高度。选择该选项后可在【宽度】和【高度】文本框中输入具体的像素值。n【百分比】：设置动画相对于浏览器窗口的尺寸大小。n【回放】：用于对发布的影片进行设置，其中包括【开始时暂停】、【显示菜单】、【循环】和【设备字体】4个复选框，作用分别如下。中文版中文版FlashFlash动画制作培训教程动画制作培训教程3）【HTML】选项卡n ：使动画一开始处于暂停状态，只有单击动画中的【播放】按钮或从快捷菜单中选择【Play】命令后，动画才开始播放。n ：让单击鼠标右键时弹出的快捷菜单中的命令有效。n ：设置动画自动反复进行播放。n ：可用反锯齿系统字体取代用户系统中未安装的字体。n【品质】：设置动画的品质，其中包括【低】、【自动降低】、【自动升高】、【高】和【最佳】5个选项。中文版中文版FlashFlash动画制作培训教程动画制作培训教程3）【HTML】选项卡n【品质】：设置动画的品质，其中包括【低】、【自动降低】、【自动升高】、【高】和【最佳】5个选项。n【窗口模式】：该项设置用于安装有Flash ActiveX的IE浏览器，可利用IE的透明显示、绝对定位及分层功能。该模式包括【窗口】、【不透明无窗口】和【透明无窗口】三个选项，作用分别如下。n【窗口】：在网页窗口中播放Flash动画。n【不透明无窗口】：Flash动画后面的元素移动，但不会在穿过动画时显示。n【透明无窗口】：使嵌有Flash动画的HTML页面背景从动画中所有透明的地方显示出来。中文版中文版FlashFlash动画制作培训教程动画制作培训教程3）【HTML】选项卡n【HTML对齐】：用于决定动画窗口在浏览器窗口中的位置。n【缩放】：用于定义动画如何放进由Width和Height文本框所设定的尺寸范围中。该项设置只有当文本框中输入的尺寸与动画的原始尺寸不同时才有效。其中包括【默认】、【无边框】、【精确匹配】和【无缩放】4个选项，作用分别如下。n【默认（全部显示）】：设定在指定区域内显示整个动画，并保持动画原有的纵横比。n【无边框】：使动画在保持原有纵横比的基础上填满指定的区域。中文版中文版FlashFlash动画制作培训教程动画制作培训教程3）【HTML】选项卡n【精确匹配】：使动画保持原有的纵横比例。n【无缩放】：使整个动画显示在指定的区域内，但并不一定要保持动画原有的尺寸比例。n【Flash对齐】：用于定义动画在窗口中的位置，或者将动画裁剪到窗口尺寸。可在【水平】和【垂直】下拉列表框中选择需要的对齐方式。n ：设置Flash是否要警示HTML标签代码中所出现的错误。中文版中文版FlashFlash动画制作培训教程动画制作培训教程2预览发布w在【发布设置】对话框中，设置动画的发布格式后，可以对发布的动画格式进行预览。其具体操作如下：n1）选择【文件】【发布预览】命令，将弹出其子菜单。n2）在该菜单中选择一种要预览的文件格式，即可在动画预览界面中看到该动画发布后的效果。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.3.2 典型案例发布“螺旋纹”动画w本案例将把“螺旋纹”动画发布到网上，发布后的“螺旋纹”动画。w素材位置：【第13课素材】w效果图位置：【第13课源文件螺旋纹.html】w制作思路：w打开【发布设置】对话框，在其中进行设置，将其发布为HTML的格式。中文版中文版FlashFlash动画制作培训教程动画制作培训教程发布效果 中文版中文版FlashFlash动画制作培训教程动画制作培训教程操作步骤w具体操作（请老师参照软件讲解）：中文版中文版FlashFlash动画制作培训教程动画制作培训教程案例小结w本案例将“螺旋纹”动画进行了发布设置，并预览了发布时的效果，然后进行发布。注意在设置发布选项时，要清楚发布的动画类型再进行发布。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.4 上机练习w13.4.1 测试“心随你动”动画w13.4.2 发布“心随你动”动画中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.4.1 测试“心随你动”动画w本次练习将测试“心随你动”动画，主要练习本课所学的测试动画的方法。w素材位置：【第13课素材】w制作思路：n打开“心随你动”动画，进入测试界面，查看其【输出】面板中的变量是否正确。n打开数据流图表，查看动画的下载性能。中文版中文版FlashFlash动画制作培训教程动画制作培训教程13.4.2 发布“心随你动”动画w本次练习将“心随你动”动画发布为HTML格式影片。主要练习本课所学的发布动画的方法。w素材位置：【第13课素材】w效果图位置：【第13课源文件心随你动.fla】w制作思路：n选择【文件】【发布预览】【HTML】命令，查看动画的发布预览效果。n在【发布设置】对话框中设置发布格式为HTML，并进行发布。中文版中文版FlashFlash动画制作培训教程动画制作培训教程“心随你动”测试界面 和“心随你动”发布预览 谢谢！谢谢！5758