Animate动画制作立体化教程（Animate 2021）课件 项目9 测试和发布动画

项目9测试和发布动画Animate动画制作立体化教程（Animate2021）（微课版）新形态立体化精品系列教材2任务9.1测试和优化卡车行驶动画任务9.2发布和导出网页启动动效内容导航综合实战任务9.1 测试和优化卡车行驶动画米拉在测试卡车行驶动画时，发现打开文件的速度较慢，并且文件也较大，发布和导出速度都比较慢，为此米拉准备优化该动画，以解决这些问题。【任务描述】任务背景某卡车租赁公司准备在官网增设安全驾驶小课堂页面，并在该页面中添加生动有趣的安全驾驶动画，向员工强调安全驾驶的重要性，降低事故的发生概率。现需要设计师制作一个关于卡车在乡村道路行驶的动画，以提醒员工不能超速行驶。现同事已经制作好该动画，需要米拉测试并优化该动画。任务目标①

测试尺寸为1280像素×720像素，时长为4s，帧速率为24帧/秒，平台类型为HTML5Canvas的动画文件。②

根据测试结果优化动画，减少动画加载时间、减小文件，并使其能在网页中流畅播放。③

通过制作水珠浮动效果，丰富Banner视觉效果，提升视觉美感，丰富画面色彩。知识要点“测试”命令、“转换为位图”命令。【任务描述】本任务的参考效果如上图所示【知识准备】（1）测试整个动画过程测试时，Animate的“输出”面板中将显示警告信息，这些警告信息是动画中可能会出现问题的内容，设计师可以根据警告信息，观察整个动画过程是否符合预期要求，如果不符合，就需要分析产生问题的原因，然后有针对性地进行优化。1．测试动画（2）测试动画能否正常加载在测试HTML5Canvas平台类型的动画时，如果动画无法正常加载，浏览器中将不会显示任何内容。如右图所示。【知识准备】（3）测试加载速度在“开发人员工具”面板的“网络”选项卡中，勾选“停用缓存”复选框，在“节流”下拉列表中选择任意选项，按【F5】键可测试动画的加载速度，如下图所示。1．测试动画【知识准备】（1）优化动画整体从动画整体方面减小动画文件，可采用以下方法。2．优化动画●

将动画中重复使用的内容转换为元件，在需要使用时，直接创建该元件的实例。●

由于传统补间动画中的过渡帧是由系统计算得到的，而逐帧动画的过渡帧是通过设计师添加对象得到的，因此传统补间动画的数据量相对逐帧动画而言要小得多。●

由于舞台越大，所需要的元素可能越多，并且添加的内容也会越大，这些都会增大动画文件，因此尽量在符合实际需求的情况下，在较小的舞台中制作动画。【知识准备】（2）优化动画元素常用的动画元素有声音、文本、图形、图像，从这些元素入手，用以下方法可以有效减小动画。2．优化动画●

由于位图数据量通常大于矢量图，因此制作动画时可尽量使用矢量图，少用位图。●

斑马线、虚线、点线等特殊类型线条占用的存储空间都比实线大。●

通常情况下，MP3格式的声音比WAV格式的声音数据量较小。●

使用较多不同的字体、较大的字体、嵌入字体，都会增大动画。●

在HTML5Canvas平台类型下，静态文本在发布时将会被打散。【知识准备】（3）优化动画色彩在Animate中，纯色的数据量较小，若为动画的色彩添加特殊效果，会导致文件变大。因此可采用以下方法优化动画色彩。2．优化动画●

尽量避免为帧和对象设置Alpha参数，以及减少使用渐变色和滤镜。●

若需要使用同款不同色的内容，可将该内容转换为元件，然后使用“属性”面板为该元件的实例调整不同的颜色。●

选择色彩时，尽量使用色板中的预设颜色，预设颜色比自定义颜色的数据量更小。【任务实施】米拉准备从能否正常加载、动画过程和加载速度这3个方面来测试动画效果，具体操作如下。1．测试动画效果01测试动画03测试动画加载速度

04查看警告信息02查看动画效果【任务实施】根据测试结果和警告信息，米拉需要调整标题图像的位置，以及将动画中的补间动画调整为传统补间动画；另外，她考虑提升文件的加载速度和减小文件，因此还需要将动画中的矢量图转换为位图，具体操作如下。2．优化动画效果01优化标题图像前后的效果对比

02重新测试文件加载速度13任务9.1测试和优化卡车行驶动画任务9.2发布和导出网页启动动效内容导航综合实战任务9.2 发布和导出网页启动动效老洪在米拉完成测试和优化卡车行驶动画后，把一部分需要发布到平台的优秀动画作品清单交给她，让她按照清单和导出注意事项文档的要求，处理这些动画文件。米拉发现自己制作的网页启动动效也在其中，考虑到自己对该动效更为熟悉，便选择该动效作为首个发布和导出的对象。【任务描述】任务背景根据公司计划，网页启动动效需要发布在公司规定的平台上，并导出为JPEG图像和MP4格式的文件，便于整合和调用动画文件。任务目标①

通过调整发布设置参数来发布动画。②

按照文件尺寸，导出对应大小的视频，并挑选动画中能表达主题的一帧图像进行导出。知识要点“发布设置”命令、“导出视频/媒体”命令。【任务描述】本任务的参考效果如上图所示【知识准备】发布是指创建一系列文件，以供播放制作好的Animate动画。发布动画的具体操作方法：选择【文件】/【发布设置】命令，打开“发布设置”对话框，在其中根据发布要求进行设置后，单击“确定”按钮；也可以先单击“确定”按钮保存参数，选择【文件】/【发布】命令。1．发布设置另外，根据发布文件的平台类型不同，该对话框中的参数也会不同，最后发布出来的文件也会有所不同。如右图所示。【知识准备】（1）导出图像选择【文件】/【导出】/【导出图像】命令，打开“导出图像”对话框，如左图所示，在其中进行设置后，单击“保存”按钮，打开“另存为”对话框，在其中设置图像的文件名后，单击“保存”按钮可以导出当前播放头所在帧的内容，无论文件存在多少个图层，播放头位置的内容都将被导出。2．导出动画【知识准备】（2）导出影片选择【文件】/【导出】/【导出影片】命令，打开“导出影片”对话框，在其中进行设置后，单击“保存”按钮。2．导出动画需要注意的是，若设置的保存类型是SWF影片，则单击“保存”按钮可直接导出对应文件；若设置的保存类型是JPEG、GIF、PNG或SVG序列，单击“保存”按钮后，还会打开相应的设置对话框，在其中设置参数（通常保持默认设置）后，单击“确定“按钮，方可导出对应文件。【知识准备】（3）导出视频选择【文件】/【导出】/【导出视频/媒体】命令，打开“导出媒体”对话框，如右图所示。2．导出动画●

宽：用于设置导出视频的宽度。●

高：用于设置导出视频的高度。●

忽略舞台颜色（生成Alpha通道）。●

间距：用于设置导出视频的范围。●

格式：用于设置导出视频的格式和预设。●

输出：用于设置导出视频的存储位置。●

立即启动AdobeMediaEncoder渲染队列：Animate只能导出MOV格式的视频文件。【知识准备】选择【文件】/【导出】/【导出动画GIF】命令，打开“导出图像”对话框，该对话框与使用“导出图像”命令打开的“导出图像”对话框类似，只是右下方多了一个“动画”栏，在其中可以控制动画的播放。另外，在“优化的文件格式”下拉列表中也只能选择“GIF”选项。2．导出动画（4）导出GIF动画【任务实施】米拉已经完成了网页启动动效的测试和优化，还需要进行发布设置。由于通过“发布设置”对话框也能导出图像，米拉决定同时完成该动画的发布和导出操作，具体操作如下。1．设置网页启动动效的发布格式01设置发布位置02查看发布动画的效果【任务实施】此时，米拉只需要将网页启动动效导出为视频，并将其保存到与发布设置同样的位置，便可结束对该文件的处理，具体操作如下。2．将网页启动动效导出为视频01“导出媒体”对话框02设置参数03“导出媒体”提示对话框24任务9.1测试和优化卡车行驶动画任务9.2发布和导出网页启动动效内容导航综合实战综合实战

测试和发布鞋子动态Banner米拉在处理某同事制作的鞋子动态Banner时，发现其主要动画形式为补间动画，并且场景图调整了亮度，造成动画文件较大，测试与发布的时间较长。在征得该同事的同意后，米拉准备根据测试结果优化动画，并将其发布和导出为JPEG格式和MP4格式的文件。【实战描述】实战背景老洪在挑选展示到平台的优秀设计作品时，感觉某员工制作的鞋子动态Banner色彩鲜明，主题突出，动画形式简洁清爽，便将其添加到优秀设计作品清单中，让米拉负责测试、优化、发布与导出该设计作品。实战目标①

发布和导出尺寸为1920像素×900像素，时长为4s，帧速率为24帧/秒，平台类型为ActionScript3.0的动画文件。②

通过测试和优化文件的操作，在尽量不改变画面视觉效果的前提下，减小动画文件。③

通过发布和导出文件的操作，导出符合要求的文件，并将这些文件放置在与动画名称一致的文件夹中。知识要点“输出”面板、“测试”命令、“发布设置”对话框、“导出视频/媒体”命令。【实战描述】本实战的参考效果如左图所示。【思路及步骤】由于鞋子动态Banner文件平台类型的限制，可在文件的属性对话框里查看文件大小，然后从动画整体、色彩和元素3个方面入手减小动画文件；再设置发布设置参数来发布动画和导出JPEG格式的图像，最后再导出MP4格式的文件，如右图所