1、网页制作案例教程第10章 动画制作和影片后期处理l 掌握组件的基本类型和使用方法。l 掌握添加ActionScript代码的基本方法。l 掌握Animate动画的基本类型和制作方法。l 掌握发布和导出影片的基本方法。学习目标10.1.1 组件类型10.1 使用组件 在Animate CC 2017中，组件都显示在【组件】面板中。通过【组件】面板可以查看和调用系统提供的组件。组件有两种类型：User Interface组件和Video组件。选择菜单命令【窗口】/【组件】，打开【组件】面板。10.1.2 使用组件10.1 使用组件 如果要在舞台上使用组件，可以在【组件】面板中双击要添加的组件或将其
2、选中直接拖动到舞台上，如图10-2所示。如果组件需要在文档中反复使用，即创建同一个组件的多个实例，可以将组件拖动到【库】面板中形成库项目以方便使用，如图10-3所示。10.1.2 使用组件10.1 使用组件 组件添加到舞台上就是实例，对实例的操作方法都适用于组件，在【库】面板中的管理也是一样。组件添加到舞台上后，可以在【属性】面板中设置其相关属性，如图10-4所示为按钮组件实例【属性】面板。其中，按钮组件在舞台上的标签文字可以在组件属性参数【label】文本框中进行设置，其他参数可以根据需要进行设置。还可以使用任意变形工具等工具对组件实例进行变形操作，如图10-5所示。当然，对于规范的组件，如
3、文本框、复选框、单选按钮等，没有必要对其进行变形，规范使用为好。10.1.2 使用组件10.1 使用组件 在Video组件中，FLVplayback（视频播放器）组件主要用于将视频播放器包含在动画中，以便播放通过HTTP渐进式下载的FLV视频文件。将FLVplayback组件拖动到舞台上，然后可以在视频组件实例【属性】面板中根据需要设置属性参数，如图10-6所示。10.1.2 使用组件10.1 使用组件 FLVplayback组件要播放的视频源文件可以在组件属性参数【source】选项进行设置。10.2.1 认识ActionScript语言10.2 使用ActionScript语言 Actio
4、nScript是运用在Animate上的脚本语言，使用ActionScript可以实现与后台数据库的交流，目前最新版本是ActionScript 3.0。ActionScript的老版本（ActionScript 1.0和2.0）提供了创建效果丰富的Web应用程序所需的功能和灵活性。ActionScript 3.0现在为基于Web的应用程序提供了更多的可能性。它进一步增强了这种语言，提供了出色的性能，简化了开发的过程，因此更适合高度复杂的Web应用程序和大数据集。ActionScript 3.0可以为以Flash Player为目标的内容和应用程序提供高性能和开发效率。ActionScript
5、动作脚本通常包含动作、运算符和对象等元素，可以将这些元素组织到动作脚本中，然后指定要执行的动作。使用ActionScript语言，能够更好地控制动画元件，从而提高动画的交互性。10.2.1 认识ActionScript语言10.2 使用ActionScript语言 在开始编写ActionScript代码之前，要清楚动画的目的是什么，为了实现这些目的应该设计哪些动作。在设计脚本时要始终把握好动作脚本的时机和位置。脚本程序的时机就是指脚本程序在什么时候执行，通常有3种情况：一是关键帧或空白关键帧处上的时机，即当动画播放到该关键帧的时候执行该帧的脚本程序；二是对象上的时机，如按钮对象在按下去的时候执
6、行相应的脚本程序；三是自定义时机，如自定义某个时刻执行某个程序等。脚本程序的位置是指脚本程序代码放在何处，通常也有3种情况：一是图层中的某个关键帧上；二是场景中的某个对象上；三是外部文件。关键帧或对象的脚本程序放在对应的【动作】面板中。脚本程序也可以作为外部文件存储，文件扩展名为“.as”，这样可以提高脚本代码重复利用率。如果需要外部的代码文件，可以直接将AS文件导入到文件中即可。10.2.2 添加ActionScript代码10.2 使用ActionScript语言 在Animate CC 2017中，要进行动作脚本设置，首先要定位好添加动作脚本的位置，如关键帧，然后选择菜单命令【窗口】/【
7、动作】，打开【动作】面板，在右侧的脚本语言编辑窗口中输入与当前所选帧相关联的ActionScript代码，如图10-9所示。当前对象上所有调用或输入的ActionScript语言都会在脚本语言编辑窗口显示，它是编辑脚本的主要区域。在面板的左侧为脚本导航窗口，其中列出了Animate文档中的所有脚本，可以快速查看这些脚本，在脚本导航窗口中单击一个项目，就可以在脚本语言编辑窗口中显示相应的脚本。10.2.3 应用实例制作旋转的风扇10.2 使用ActionScript语言 下面以制作“旋转的风扇”动画为例说明添加动作脚本的方法，效果如图10-10所示。10.3.1 动画基础知识10.3 应用实例制
8、作Animate动画 在Animate CC 2017中可以创建出丰富多彩的动画效果，如可以使一个对象在画面中移动，改变其大小、形状和颜色，使其旋转或产生淡入淡出的效果；可以使实例、图形、图像、文本和组合产生动作动画效果，还可以借助于引导层使对象沿任意路径运动，即创建引导动作动画等。各种变化可独立进行，也可以合成到一个复杂的动画中。Animate动画的类型具体可分为逐帧动画、补间形状动画、传统补间动画、补间动画、引导层动画、遮罩层动画等。在动画中，帧频是指动画播放的速度，以每秒播放的帧数（fps）为度量单位。帧频太慢会使动画看起来一顿一顿的，帧频太快会使动画的细节变得模糊。24fps的帧速率是
9、新Animate文档的默认设置，通常在Web上提供最佳效果。标准的动画速率也是24fps。10.3.1 动画基础知识10.3 应用实例制作Animate动画 Animate文档中的每一个场景都可以包含任意数量的时间轴图层。使用图层和图层文件夹可组织动画序列的内容和分隔动画对象。在图层和文件夹中组织对象可防止它们在重叠时相互擦除、连接或分段。如果要创建一次包含多个元件或文本字段的补间移动的动画，可将每个对象放置在不同的图层中。可将一个图层用作背景图层来包含静态插图，并使用其他图层包含单独的动画对象。在创建补间动画时，Animate会将图层（包含选择进行补间的对象）转换为补间图层。补间图层有一个补
10、间图标，位于时间轴中的图层名称旁。如果其他对象与补间对象在相同的图层中，Animate将根据需要在原始图层上方或下方添加新图层。位于原始图层中的补间对象下方的任何对象将移至原始图层下方的新图层。位于原始图层中的补间对象上方的任何对象将移至原始图层上方的新图层。Animate将在时间轴中任何预先存在的图层之间插入这些新图层。这样，Animate可保留舞台上所有图形对象的原始堆叠顺序。10.3.1 动画基础知识10.3 应用实例制作Animate动画 补间图层只能包含补间范围（包含补间的连续的帧组）、静态帧、空白关键帧或空帧。每个补间范围只能包含一个目标对象及其可选运动路径。由于无法在补间图层中进
11、行绘制，所以应在其他图层中创建其他补间或静态帧，然后将它们拖到补间图层。如果要将帧脚本放置到补间图层上，可在另一个图层上创建它们，然后将它们拖到补间图层。帧脚本只能驻留在补间动画范围本身外部的帧中。通常，最好将所有帧脚本保留在仅包含ActionScript的单独图层上。10.3.2 制作补间形状动画10.3 应用实例制作Animate动画 在补间形状动画中，用户在时间轴中的一个关键帧上绘制一个矢量形状，在另一个关键帧上绘制另一个形状，然后由Animate 为这两个关键帧之间的所有过渡帧插入中间形状，从而创建出从一个形状变成另一个形状的动画效果，当然也可以对补间形状内的形状的位置和颜色进行补间。
12、如果要对组、元件实例或位图图像应用形状补间，需要分离这些元素。如果要对文本应用形状补间，需要将文本分离两次，从而将文本转换为对象。制作“红色矩形在运动过程中变为绿色椭圆”动画。10.3.3 制作传统补间动画10.3 应用实例制作Animate动画 传统补间动画允许一些特定的动画效果，如在动画中展示移动位置、改变大小、旋转、改变色彩等效果。只要建立起起始和结束的画面，中间部分由系统自动生成相应的效果。在传统补间动画中，要改变组或文字的颜色，必须将其转换为元件。要使文本块中的每个字符分别动起来，则必须将其分离为单个字符。制作“天空飞行的飞机”动画。10.3.4 制作补间动画10.3 应用实例制作A
13、nimate动画 补间动画可以通过拖动舞台上的对象来创建，可设置对象的属性，如一个帧中以及另一个帧中的同一对象的位置和Alpha透明度等，两帧之间的属性值由Animate自动生成。补间动画主要以元件对象为核心，一切的补间动作都是基于元件。创建补间动画的操作方法更为简单，将元件置于时间轴的起始关键帧中，然后用鼠标右键单击第1帧，在弹出的快捷菜单中选择【创建补间动画】命令即可。此时，将创建补间范围，如图10-37所示，然后在补间范围内创建动画。可以对这些补间范围作为单个对象来选择，在每个补间范围中只能对一个目标对象进行动画处理。制作“沿公路行驶的小汽车”动画。10.3.5 制作引导层动画10.3
14、应用实例制作Animate动画 引导层是一种特殊的图层，按照引导层发挥的功能不同，可以将其分为传统运动引导层和普通引导层两种类型。传统运动引导层主要用于绘制对象的运动路径，可将图层链接到运动引导层中，使图层中的对象沿引导层中的路径运动。此时，该图层会位于传统运动引导层下方成为被引导层。只有将传统运动引导层与其他动画相结合，如传统补间动画，才能制作成为传统运动引导层动画。普通引导层主要用于辅助静态对象定位，可以没有被引导层而单独使用。制作“小蜜蜂去采蜜”动画。10.3.6 制作遮罩层动画10.3 应用实例制作Animate动画 使用遮罩层可以制作更加复杂的动画。遮罩层内的图形就像一个透明的区域，
15、通过这个透明的区域可以看到下面被遮罩层中的内容。与遮罩层没有关联的图层，即不是被遮罩层的图层，其中的内容通过遮罩层内的图形是看不到的。遮罩层中的实心对象可以是填充的形状、文字对象、图形元件的实例或影片剪辑等，但线条不能作为遮罩层中的实心对象。还可以创建遮罩层动态效果，对于用作遮罩的填充形状可以使用补间形状动画，对于对象、图形实例或影片剪辑可以使用补间动画。在使用影片剪辑实例作为遮罩时，可以使遮罩沿着路径运动。制作“移动看太空”动画。10.4.1 发布文件10.4 影片发布和导出 选择菜单命令【文件】/【发布设置】打开【发布设置】对话框。以后在发布文件时，可直接选择菜单命令【文件】/【发布】按照
16、设置的格式进行发布。也可以在【发布设置】对话框中单击【发布】按钮进行影片发布。10.4.1 发布文件10.4 影片发布和导出 还可以根据需要将FLA文件发布为放映文件。10.4.2 导出文件10.4 影片发布和导出 可以将制作的影片通过导出创建能够在其他程序中使用的内容。选择【文件】/【导出】中的相应命令可将文件导出为图像、影片、视频、动画GIF等，如图10-71所示。当选择【导出影片】命令时，无须对背景音乐、图形格式以及颜色等进行单独设置，将直接打开【导出影片】对话框，可以根据需要选择导出文件格式，如图10-72所示。10.4.2 导出文件10.4 影片发布和导出 在导出文件类型中，如果选择
17、“SWF影片”将把影片导出为一个SWF动画文件，如果选择“JPEG序列”将把影片导出为多个连续的JPEG文件，如果选择“GIF序列”将把影片导出为多个连续的GIF文件，如果选择“PNG序列”将把影片导出为多个连续的PNG文件，如图10-73所示为导出的JPEG序列文件，通常动画一帧对应一个图像文件。10.4.2 导出文件10.4 影片发布和导出 当选择【导出视频】命令时，将打开【导出视频】对话框，如图10-74所示。根据需要进行设置导出即可，也可保持默认设置，导出的视频为MOV格式的文件。10.4.2 导出文件10.4 影片发布和导出 当选择【导出动画GIF】命令时，将打开【导出图像】对话框，如图10-75所示。由于是GIF动画，此时对话框中优化的格式自动设置为“GIF”，其他可保持默认设置，单击【保存】按钮，导出的动画为GIF格式的文件。10.4.2 导出文件10.4 影片发布和导出 当选择【导出图像】命令时，将打开【导出图像】对话框，如图10-76所示。优化的文件格式可从“JPEG”“GIF”“PNG-8”“PNG-24”4个选项中选择，其他可保持默认设置，单击【保存】按钮，将把当前帧对应的整个舞台内容导出为所选择格式的文件。
