Animate动画制作案例教程 课件 项目一 Animate制作基本功

项目一Animate制作基本功

任务1熟识Animate的特点、应用、制作环境与基本操作1了解Animate的特点与应用2掌握Animate的制作环境任务目标3熟悉Animate的基本操作

Animate是一款功能强大的矢量动画编辑软件，不仅可以对图片、文字、音乐、视频和应用程序组件等多种资源进行整合，具有强大的多媒体编辑功能，还可以实现动画与用户的交互。由于Animate使用矢量图形，存储空间小，播放效果好，因此被广泛地应用于网页动画的设计中，成为当前网页动画设计非常流行的软件，其特点为：采用矢量技术，生成的文件所占的空间小，便于网络传输。使用矢量图形，无论放大或者缩小多少倍都不会失真。采用流媒体播放技术，可以实现边下载边播放。播放插件体积小，易于下载，常用的浏览器都可以自动安装。可以将各种多媒体素材融合在一起，并能实现用户和动画的交互功能。可以与Dreamweaver配合使用，直接嵌入网页的任意位置。操作简单，即使初学者也能制作出令人炫目的动画效果。

1.了解Animate的特点与应用

网站Banner网络广告产品演示动漫设计Animate游戏手机应用网站制作多媒体课件

1.了解Animate的特点与应用

Animate以其强大的动画编辑功能、灵活的操作界面，以及开放的结构，被广泛应用于多个领域。在Windows操作系统的任务栏中选择“开始”→“所有程序”→“Adobe”→“AdobeAnimate2023”命令，启动Animate软件，进入Animate的界面，如图1-1-1所示。图1-1-1界面2.Animate的制作环境2.Animate的制作环境

在Animate的界面中选择“文件”→“新建”选项后，选择好相应的预设或者自定义文档大小、单位、帧速率以及平台类型，即可进入Animate2023的工作界面。Animate在每次版本升级后都会对界面进行优化，Animate2023的工作界面更具亲和力，使用也更加方便，本书采用Animate2023进行讲解，如图1-1-2所示。图1-1-2工作界面2.Animate的制作环境2.Animate的制作环境1．标题栏：从左至右依次显示软件和文件的名称，最小化、最大化、关闭按钮。2．菜单栏：在菜单栏中分类提供了Animate中所有的操作命令，几乎所有的可执行命令都可在这里直接或间接地找到相应的操作选项。3．工具栏：工具栏也称为绘图工具箱。提供了Animate中所有的绘图操作工具，如笔触颜色、填充颜色以及工具的相应设置选项。4．时间轴：时间轴面板是制作Animate动画的核心。主要用于组织和控制不同的图层和帧中的动画内容。主要包括图层、帧、播放指针、时间轴标尺等。5．舞台：即当前动画制作的区域，是用来制作和编辑动画。舞台的大小决定了Animate动画成品的大小。6．面板：Animate提供了大量常用功能面板，用于帮助查看、编辑和组织内容。选择“窗口”命令，即可查看和打开Animate为用户提供的各类面板。可以根据用户的需求，将面板展现在Animate窗口的右边。图1-1-3“库”面板下面介绍几种常用的面板。（1）“库”面板。在菜单栏中选择“窗口”→“库”命令，或者按“Ctrl+L”组合键，即可显示或隐藏“库”面板。“库”面板主要用于存储制作Animate动画所需要的图片、音频和视频等各类素材，以及创建的各类元件等，如图1-1-3所示。2.Animate的制作环境图1-1-4“动作”面板（2）“动作”面板。在菜单栏中选择“窗口”→“动作”命令，或者按“F9”键，即可显示或隐藏“动作”面板。“动作”面板主要用于Animate动画的动作脚本的编辑。使用“动作”面板可以在帧、按钮和影片剪辑元件上添加动作脚本，以实现各类动画效果，如图1-1-4所示。2.Animate的制作环境图1-1-5“颜色”面板图1-1-6“样本”面板（3）“颜色”面板/“样本”面板。在菜单栏中选择“窗口”→“颜色”/“样本”命令，即可显示或隐藏“颜色”面板/“样本”面板。“颜色”面板主要用于设置颜色类型、笔触颜色、填充颜色及Alpha值等；“样本”面板主要用于颜色样本的管理，如图1-1-5、1-1-6所示。2.Animate的制作环境图1-1-7“对齐”面板（4）“对齐”面板。在菜单栏中选择“窗口”→“对齐”命令，或者按“Ctrl+K”组合键，即可显示或隐藏“对齐”面板。“对齐”面板主要用于对象的对齐和分布，既可以是相对于舞台对齐分布，又可以是对象与对象之间对齐分布，如图1-1-7所示。2.Animate的制作环境图1-1-8“信息”面板（5）“信息”面板。在菜单栏中选择“窗口”→“信息”命令，或者按“Ctrl+I”组合键，即可显示或隐藏“信息”面板。“信息”面板主要用于显示当前选择对象的宽、高、位置、颜色及鼠标指针的位置等，如图1-1-8所示。2.Animate的制作环境图1-1-9“变形”面板（6）“变形”面板。在菜单栏中选择“修改”→“变形”命令，或者按“Ctrl+T”组合键，即可显示或隐藏“变形”面板。“变形”面板主要用于对象外形的编辑和操作，包括对象的宽高比、旋转角度和倾斜角度等，如图1-1-9所示。2.Animate的制作环境1．新建文件创建新文档是制作Animate动画的第一步，新建文档的方法很多，常用的有两种：方法一：启动Animate，在界面中选择“文件”→“新建”选项，即可创建一个新的Animate文档。方法二：在已打开的Animate窗口的菜单栏中选择“新建”命令，或者按“Ctrl+N”组合键，在弹出的“新建文档”对话框中选择相应预设或者自定义，即可创建一个新的Animate文档，如图1-1-10所示。3.熟悉Animate的基本操作

图1-1-10“新建文档”对话框3.熟悉Animate的基本操作2．打开文件

如果已经创建了Animate文档，操作完成且关闭文档后需要重新打开，则可以通过选择“打开”命令来实现。方法一：在已经打开的Animate2023界面中选择“打开”选项，找到Animate文档并打开即可，或者将文件直接拖入舞台，如图1-1-11所示。方法二：启动Animate2023，在菜单栏中选择“文件”→“打开”命令，或者按“Ctrl+O”组合键，在弹出的“打开”对话框中选择需要打开的文件即可，如图1-1-12所示。

3.熟悉Animate的基本操作

图1-1-11在窗口打开文件3.熟悉Animate的基本操作图1-1-12“打开文件”对话框3.熟悉Animate的基本操作3．保存文件

在完成Animate文档的编辑后，需要对文件进行保存。可以在菜单栏中选择“文件”→“保存”命令，或者按“Ctrl+S”组合键，在弹出的“另存为”对话框中选择存放文件的路径，输入文件的名称，如“向日葵”，并将“保存类型”设置为“Animate文档(*.fla)”，如图1-1-13所示。

3.熟悉Animate的基本操作

图1-1-13“保存文件”对话框3.熟悉Animate的基本操作4．发布文件

Animate文件除了可以保存为FLA源文件格式，Animate文档还可以发布SWF动画格式或其他文件格式，包括HTML、GIF、JPG、PNG等。

在菜单栏中选择“文件”→“发布设置”命令，或者按“Ctrl+Shift+F12”组合键，在弹出的“发布设置”对话框中选择所需要保存的文件格式，如图1-1-14所示。在“发布”选项组中勾选所需要发布的文件格式的复选框，单击“发布”按钮，即可在相应的文件夹中发布生成的目标文件。

3.熟悉Animate的基本操作图1-1-14“发布设置”对话框3.熟悉Animate的基本操作下面通过案例来学习下Animate文件的创建及常用面板的操作。打开“向日葵”Animate文档，呈现的是欣欣向荣的向日葵的图片，如图1-1-15所示。图1-1-15“向日葵”动画效果案例1-1-1制作“向日葵”动画

本任务主要介绍了Animate的基础知识，包括Animate的特点、应用、制作环境与基本操作，使读者初步了解Animate，在此基础上引领读者创建一个简单的Animate文档，以学习如何新建、打开和保存Animate文档，引起读者的兴趣，为后续的学习奠定良好的基础。任务小结一、实训目的1．掌握创建Animate文档的方法。2．掌握常用面板的使用方法。3．掌握保存源文件及发布动画的方法。二、实训内容1.制作“卡通头像”Animate文档，设置文档尺寸为“400×400”像素，背景颜色为“黑色”，帧频为“12”，修改图片大小使其与舞台大小一致，并且将图片放在舞台中央。效果如图1-1-16所示。图1-1-16“卡通头像”文档模拟实训项目一Animate制作基本功

任务2掌握常用工具的使用与角色绘制1了解位图与矢量图的基本概念2掌握绘图工具的使用任务目标4理解图层的基本概念3熟悉颜色填充方法位图与矢量图都是计算机储存图像文件的方式，我们常用的图像文件格式大多都属于这两种类型。1．位图位图也被称为像素图或点阵图，是由一个个带有颜色信息的小方格组成的。当这些带有不同颜色的小方格紧密的排列在一起时，就组成了位图图像，这些小方格也称为像素。单位面积上像素的多少决定了位图图像的画质和文件大小，每平方英寸上所包含的像素越多，图像就越清晰，颜色之间的混和就越平滑，文件所占空间也越大。位图图像可以更好的表现色彩的层次感，线条的细腻，颜色的艳丽多彩，可以很容易的模拟照片的真实效果。常见的位图编辑软件有Photoshop、Painter等。

1.了解位图与矢量图的基本概念

1.了解位图与矢量图的基本概念

2．矢量图矢量图也被称为向量图，通过一系列的直线和曲线来描述图像，它所储存的是对象的形状、线条和色彩等，图形中每个部分都是独立存在的。因此矢量图的清晰度与分辨率无关，在缩放图像时不会出现图像失真的情况，且矢量图文件所占的空间很小，非常适合标志设计、图案设计、文字设计等。常见的矢量图编辑软件有Illustrator、CorelDRAW、Flash、AutoCAD等。3．位图与矢量图的区别位图与矢量图最大的区别在于，位图图像受像素、分辨率的限制，在放大后会出现马赛克的情况；矢量图则与分辨率无关，可以缩放任意大小和任意分辨率，图像清晰度都不会受到影响。

Animate工具栏中的绘图工具可以帮助用户绘制动画对象。在绘制图形时，先创建一个Animate文档，再选择合适的绘图工具绘制图形。下面通过具体的操作来介绍绘图工具的使用。（1）新建一个Animate文档，将舞台大小设置为550px×400px，背景颜色设置为白色，帧频设置为24fps，如图1-2-1所示。图1-2-1设置文档属性2.掌握绘图工具的使用图1-2-2选择“椭圆工具”

（2）将鼠标指针移到工具栏中的“矩形工具”上长按鼠标左键，在弹出的下拉列表中选择“椭圆工具”，如图1-2-2所示。2.掌握绘图工具的使用图1-2-3设置“椭圆工具”的属性

（3）在“属性”面板中设置“椭圆工具”的属性，将“笔触颜色”设置为无色，“填充颜色”设置为黄色（#FFFF00），如图1-2-3所示。2.掌握绘图工具的使用图1-2-4绘制正圆

（4）在按住“Shift”键的同时按住鼠标左键进行拖放，在舞台中绘制一个正圆，如图1-2-4所示。2.掌握绘图工具的使用我们在绘制图形时，除了可以通过“属性”面板来设置图形的颜色，还可以使用“颜料桶工具”和“渐变变形工具”等对图形进行颜色的填充与改变，以达到特殊的图形效果。颜色的填充类型有四种方式：纯色、线性渐变、径向渐变和位图填充。颜色的填充方法：先选中填充对象，然后选择或编辑颜色；也可在颜色设定后，使用墨水瓶工具或颜料桶工具在填充对象或区域单击鼠标左键。3.熟悉颜色填充方法

图层的概念：在Animate动画中，可以将图层看作一张张透明的纸，每张纸上都有不同的内容，将这些纸叠在一起就组成一幅比较复杂的画面。在某图层添加内容时，会遮住下一图层中相同位置的内容。如果其上一图层的某个位置没有内容，透过这个位置就可以看到下一图层相同位置的内容。

Animate中的图层都是相互独立的，拥有独立的时间轴，包含独立的帧，可以在图层上绘制和编辑对象，且不会影响其他图层上的对象。图层的背景颜色为蓝色时，表示当前的图层是被选中的。4.理解图层的基本概念

4.理解图层的基本概念

创建新图层的方法单击【图层】面板上底层最左边的“新建图层”按钮，或者在菜单栏中选择【插入】→【时间轴】→【图层】命令，即可创建一个新的图层选择图层的方法：单击【图层】面板上需要选择的图层名称、或者在时间轴上单击任意一帧可以选择该帧所在的图层。当需同时选择多个图层时，用鼠标单击需要选择的第一个图层，然后按住【Shift】键的同时单击需要选择的最后一个图层，即可选择多个连续图层；按住【Ctrl】键的同时单击需要选择的图层，即可选择多个不连续的图层。4.理解图层的基本概念

删除图层：

选择需要删除的图层，单击【图层】面板上面的“删除”按钮或者在需要删除的图层上单击鼠标右键，在弹出的的快捷菜单中选择【删除图层】命令即可。重命名图层：在需要重命名的图层名称上双击，然后在出现的编辑框中输入新的图层名称即可。下面通过案例进一步学习Animate动画角色的绘制。

打开已完成的“小蜜蜂”Animate文档，其动画效果如图1-2-17所示。图1-2-5卡通向日葵案例1-2-1制作“小蜜蜂”动画

本任务首先介绍了Animate工具栏中基本绘图工具的使用，包括“椭圆工具”、“矩形工具”、“钢笔工具”和“任意变形工具”等；其次介绍了对绘制的图形填充颜色的方法，包括填充纯色和渐变色；最后以案例的形式介绍了图层的创建及应用。任务小结一、实训目的1．掌握基本绘图工具的使用2．掌握填充颜色的方法3．掌握图层顺序的调整4．能够绘制较为简单的图形二、实训内容1.绘制卡通雪人，效果如图1-2-6所示。图1-2-6绘制卡通雪人模拟实训2．制作“卡通向日葵”，效果如图1-2-34所示。（提示：首先要使用绘图工具绘制向日葵的外形，然后利用颜料桶、渐变工具填充颜色。在制作过程中，注意调整图层前后的顺序，并且将不同的图形放在不同的图层上，方便我们进行绘制或者修改。图1-2-34“卡通向日葵”模拟实训3.绘制“小狮子”图形，其效果如图1-2-35所示。（提示：使用多角星型工具绘制小狮子头，在使用各种形状工具绘制身体的各个部分，并使用选择工具及部分选取工具对绘制图形进行修改。）图1-2-35“小狮子”模拟实训4.绘制“太空飞船”图形，其效果如图1-2-36所示。（提示：使用钢笔工具绘制火箭轮廓，并用颜料桶工具，填充图形颜色，用任意变形工具，旋转图形的角度，再使用多角星形工具及椭圆工具分别绘制五角星和圆形装饰图形）图1-2-36“太空飞船”模拟实训项目一Animate制作基本功

任务3学会逐帧动画和补间动画

的制作1了解关键帧、空白关键帧和普通帧的概念2熟悉逐帧动画的制作方法任务目标4熟悉传统补间动画的制作方法3熟悉形状补间动画的制作方法1．逐帧动画的概念逐帧动画是一种常见的动画形式，是在每一帧上绘制不同的舞台内容，这些帧在时间轴上连续排列起来，顺序播放就形成了动画效果。逐帧动画形式源于传统的动画绘制，非常适合表现细腻，动作复杂的动画。2．关键帧、空白关键帧和普通帧帧是Animate动画的最基本单位，包括普通帧、关键帧、空白关键帧三种类型，在制作动画时，根据不同的需要选择不同的帧，如图1-3-1所示。图1-3-1【时间轴】面板上的各帧1.熟悉逐帧动画的制作方法

关键帧空白关键帧普通帧1.熟悉逐帧动画的制作方法

关键帧

制作Animate动画过程中最重要的帧，用来放置动画内容，并且其所包含的内容可以编辑。它可以用来定义动画对象的变化，更改动画对象的开始和结束。在“时间轴”面板中右击，在弹出的快捷菜单中选择“插入关键帧”命令，或者按“F6”键，即可插入关键帧。空白关键帧

是指没有添加动画内容的关键帧。在空白关键帧中添加内容，即可将空白关键帧自动转换为关键帧；反之，删除关键帧中的内容，关键帧就转换为空白关键帧。是否有动画内容，是关键帧和空白关键帧最大的区别。在“时间轴”面板中右击，在弹出的快捷菜单中选择“插入空白关键帧”命令，或者按“F7”键，即可插入空白关键帧。1.熟悉逐帧动画的制作方法

普通帧

用来延长显示左边离它最近的关键帧或空白关键帧的动画内容，但是不能对动画内容进行编辑。在“时间轴”面板中右击，在弹出的快捷菜单中选择“插入帧”命令，或者按“F5”键，即可插入普通帧。3．逐帧动画的类型（1）使用图片制作的逐帧动画。给连续多个帧分别导入多张静态图片，即可制作一个逐帧动画，导入图片的格式一般为JPG、PNG等。（2）使用绘制的矢量图制作的逐帧动画。使用工具栏中的工具在舞台中给每一帧绘制动画内容，连续播放这些帧，就是一个逐帧动画。1.熟悉逐帧动画的制作方法

（3）使用文字制作的逐帧动画。文字也可以作为制作逐帧动画的素材元素，在舞台中输入文字，将这些文字添加到各个帧中即可，文字逐帧动画可以实现文字的旋转、跳跃等效果。（4）使用序列图片制作的逐帧动画。将GIF图片、SWF动画文件等素材导入Animate，按动画顺序把这些成序列的图片逐个放在不同的帧上，就可以制作成一个逐帧动画。4．逐帧动画的制作

制作简单的逐帧动画，只需要将多个连续的素材导入Animate中，然后把导入的素材按顺序添加到各个关键帧即可。

制作逐帧动画的一般步骤为：在时间轴上依次添加关键帧，然后在这些关键帧上添加或编辑对象，设置对象大小和位置就可以制作出一段连续逐帧播放的动画。图1-3-2添加关键帧及关键帧上的内容1.熟悉逐帧动画的制作方法

下面通过案例进一步熟悉逐帧动画的制作。看，“romantic”这个单词，一个字母一个字母跳跃出来，这不就是打字机在打字吗？哦，不是的，是神奇的Animate动画效果呀，如图1-3-3所示。图1-3-3“打字机”动画效果案例1-3-1制作“打字机”动画效果1．形状补间动画的概念形状补间动画是用来表现动画对象从一种物体状态到另一种物体状态的变化，例如动画对象之间颜色、大小、形状、位置的改变。它的操作对象必须是像素，对于文字或从外部导入的图形图像，可通过Animate提供的【分离】命令，将其分离为像素。制作形状补间动画，只需要制作动画变形前和变形后的画面，中间的变化过程由计算机自动完成。

2.熟悉形状补间动画的制作方法

2．制作形状补间动画的一般步骤：（1）在开始关键帧上绘制或添加对象（非像素图像要进行分离）。（2）同样在结束关键帧上绘制或添加对象（非像素图像要进行分离）。（3）选中两个关键帧之间的任意一帧，单击鼠标右键弹出快捷菜单，选择“创建补间形状”命令，或者在时间轴面板上选择“插入形状补间”按钮，即可创建形状补间动画。

图1-3-4创建补间形状2.熟悉形状补间动画的制作方法

下面通过案例进一步学习形状补间动画的制作。

在漆黑的背景下，迷彩线条尤其夺目，像魔术师的魔术棒变化无常，如图1-3-17所示。图1-3-5“魔幻线条”效果案例1-3-2制作“魔法线条”动画下面通过一个案例来介绍如何控制动画中间变化的过程。

文字是动画的主要构成元素，大写的“T”从一种字体变化成另外一种字体，这个奇妙的过程可通过控制来展现出不同的动画效果，如图1-3-6所示。图1-3-6变形文字案例1-3-3制作“变形文字”动画1．补间动画的概念

在Animate的“时间轴”面板上，先在一个时间点（关键帧）放置一个实例，然后在另一个时间点（关键帧）改变这个实例的位置、大小、颜色、透明度等参数，Animate根据两者之间的帧的值创建的动画被称为补间动画，本书创建的补间动画均为传统补间动画。

补间动画和形状补间动画最大的区别就是补间动画的对象是元件，形状补间动画的对象是像素。元件的种类很多，常见的有图形、文字、图像、按钮和影片等。补间动画最大的优点是在不改变补间动画的情况下，直接修改元件即可对动画进行修改。

补间动画必须是同一个元件的动画，不同的元件之间不能制作补间动画。

3.熟悉补间动画的制作方法

2．制作补间动画的一般步骤：（1）创建元件，元件既可以是图形、文字、图片，也可以是按钮、影片等。（2）添加开始和结束关键帧，分别设置它们的位置、大小、颜色、透明度等，使两个关键帧上同一元件的显示状态发生改变。（3）选中两个关键帧之间的任意一帧并右击，在弹出的快捷菜单中选择“创建传统补间”命令，即可创建补间动画。

图1-3-7创建补间动作3.熟悉补间动画的制作方法

各种补间动画之间的区别如下。①补间动画，可以完成传统补间动画及3D补间动画的效果。②形状补间动画，可以对像素进行任意变化操作。③传统补间动画，可以对实例的位置、大小、颜色、透明度等参数进行变化操作。

图1-3-83种补间动画在时间轴上的表现形式3.熟悉补间动画的制作方法

下面通过案例进一步学习补间动画的制作。模仿镜头的推拉和旋转，让“古堡“图片在显示时先放大、旋转、移动的效果，犹如电影大片一样，效果如图1-3-8所示。图1-3-9镜头效果案例1-3-4制作“镜头效果”动画本任务主要介绍了逐帧动画的基本概念、帧的分类、帧的编辑、形状补间动画和传统补间动画的制作。通过各个任务学习了逐帧动画的制作以及补间动画的各项属性设置等。任务小结一、实训目的1．掌握逐帧动画的制作方法。2．学会制作形状补间动画和传统补间动画。二、实训内容1.制作“行走的鸭子”的效果，如图1-3-9所示。图1-3-10行走的鸭子效果本节实训二、实训内容2.变化的文字，从一组文字逐渐变化为另一组文字，如图1-3-10所示。图1-3-11变化胡文字3.制作“海底世界”文字动画的效果，如图1-3-11所示。图1-3-12海底世界模拟实训项目一Animate制作基本功

任务4掌握元件制作与库的运用1了解元件的概念与分类2熟悉各类元件的制作方法任务目标3掌握库的概念及运用1．元件的概念

所谓元件，就是在制作动画的过程中可以反复使用或编辑的一种部件，存放在“库”面板中。在Animate中，元件可以被多次重复使用，这便于动画的修改，而重复使用不会增大动画所占的空间，更便于网络传输。2．元件的分类元件分为三种类型：图形元件、按钮元件和影片剪辑元件。图形元件图形元件主要用于创建静态的动画使用对象，不能用作交互。1.熟练图形元件与影片剪辑元件的制作

影片剪辑元件

影片剪辑元件就是包含可以独立播放动画的元件。影片剪辑是包含在Animate影片中的影片片段，有其时间轴和属性，具有交互性，是用途最广、功能最多的部分。影片剪辑元件既可以包含交互控制、声音及其他影片剪辑的实例，又可以放置在按钮元件的时间轴上用来制作动画按钮。较为复杂的动画经常用多个影片剪辑元件来简化动画的制作过程。按钮元件按钮元件用于实现动画的交互功能，可以响应鼠标单击、滑过或其他动作。使用按钮可以控制动画播放，与动画进行交互。按钮元件可以是一个图形，一幅图片，甚至是看不见的透明按钮。1.熟练图形元件与影片剪辑元件的制作

3．图形元件的制作（1）新建一个Animate文档，在菜单栏中选择“插入”→“新建元件”命令，或者按“Ctrl+F8”组合键，弹出“创建新元件”对话框。（2）在“名称”文本框中输入元件的名称“太阳”，在“类型”下拉列表中选择“图形”选项，如图1-4-1所示。图1-4-1创建图形元件对话框1.熟练图形元件与影片剪辑元件的制作

（3）单击“确定”按钮，创建名称为“太阳”的图形元件，并进入元件编辑区。在元件编辑区中绘制图形元件，如1-4-2所示。（4）在菜单栏中选择“窗口”→“库”命令，打开“库”面板，可以看到绘制的图形元件自动进入“库”面板中，如图1-4-3所示。图1-4-2绘制图形元件图1-4-3“库”中元件1.熟练图形元件与影片剪辑元件的制作

4．转化成元件已经创建好的对象也可以直接转化为元件，操作方法如下：（1）选中绘制好的图形并右击，在弹出的快捷菜单中选择“转换为元件”命令，或者在菜单栏中选择“修改”→“转换为元件”命令，或者按“F8”键，弹出“转换为元件”对话框，如图1-4-4所示。图1-4-4转化为元件对话框1.熟练图形元件与影片剪辑元件的制作

5．影片剪辑元件的制作（1）新建Animate文档，在菜单栏中选择“插入”→“新建元件”命令，或者按“Ctrl+F8”组合键，弹出“创建新元件”对话框，在“名称”文本框中输入“愤怒的小孩”，在“类型”下拉列表中选择“影片剪辑”选项，如图1-4-5所示。（2）单击【确定】按钮进入该元件的编辑模式。图1-4-5创建影片剪辑元件1.熟练图形元件与影片剪辑元件的制作

6．元件与实例的关系

将元件从“库”面板拖到舞台中，舞台中会自动生成该元件的一个实例，复制元件的过程就是创建实例的过程。将元件拖到舞台中，选中该元件的实例，其“属性”面板中就会出现与实例相对应的属性，如名称、颜色和大小等，如图1-4-6所示。

图1-4-6元件与实例1.熟练图形元件与影片剪辑元件的制作

选中图形元件实例，打开“属性”面板“对象”选项，如图1-4-7所示。

选中影片剪辑元件实例，打开“属性”面板“对象”选项，如图1-4-8所示。

。图1-4-7图形元件实例的“属性”面板图1-4-8影片剪辑实例的“属性”面板1.熟练图形元件与影片剪辑元件的制作

下面通过案例进一步熟悉影片剪辑元件的制作。在海底世界，一群可爱的小鱼在水中悠闲的吐着泡泡，像是在比赛一般，如图1-4-9所示。图1-4-9“吐泡泡的小鱼”动画效果案例1-4-1制作“吐泡泡的小鱼”动画1．按钮元件的制作

按钮元件的时间轴与其他元件不同，由四帧组成，分别是“弹起”、“指针经过”、“按下”、“点击”，每一帧标志一种鼠标状态，对应四种响应鼠标操作状态，如1-4-10所示。图1-4-10按钮元件时间轴2.熟练按钮元件制作与库的运用

2．按钮元件的四种状态：弹起：鼠标和按钮没有发生接触，按钮处于一般状态。指针经过：鼠标经过按钮但没有按下鼠标的状态。按下：鼠标移动到按钮上方，并按下鼠标时的状态。点击：此状态用于定义按钮响应鼠标事件的有效区域范围，此区域不会在影片中显示。若没有绘制“单击”状态的区域，“弹起”帧的范围即为按钮的有效响应范围。2.熟练按钮元件制作与库的运用

3．库的运用

库就相当于Animate中的仓库，用来存放制作动画所需的元件及导入的各类素材，如位图、声音文件和视频剪辑等。“库”面板是制作动画时使用频率非常高的面板之一，可以方便用户灵活地调用元件及素材，如图1-4-11所示。图1-4-11“库”面板2.熟练按钮元件制作与库的运用

4．库的操作（1）打开“库”面板：在菜单栏中选择“窗口”→“库”命令，或者按“Ctrl+L”键，打开“库”面板，选中“库”面板中的任意一个元件或素材，其内容就会在预览窗口中显示出来。（2）新建“库”元件：单击“库”面板下方的“新建元件”按钮，在弹出的“创建新元件”对话框中可以新建元件。（3）更改“库”元件属性：选中“库”面板中的某个元件，单击“库”面板下方的“属性”按钮，在弹出的“元件属性”对话框中可以修改元件的属性。2.熟练按钮元件制作与库的运用

（4）直接复制元件：选中“库”面板中的某个元件并右击，在弹出的快捷菜单中选择“直接复制”命令，弹出“直接复制元件”对话框，在该对话框中可以对复制的元件进行设置。（5）删除“库”元件：选中“库”面板中某个不需要的元件，单击“库”面板下方的“删除”按钮就可以删除选中的元件。（6）新建文件夹：单击“库”面板下方的“新建文件夹”按钮就可以创建一个文件夹，可以将“库”面板中的元件或各类素材分类存储。2.熟练按钮元件制作与库的运用

5．CCLibraries

Animate集成了CreativeCloudLibraries。CreativeCloudLibraries可帮助跟踪自己所有的设计资源。创建图形资源并将它们保存到该库后，就可以将它们用在Animate文档中了。设计资源会自动同步，并可以与任何具有CreativeCloud帐户的人共享。创意团队可以跨Adobe桌面和移动应用程序工作，因此您的共享库资源始终最新，并可以在任何地方使用。提供用于从库导入和重复使用图形的支持选项。Animate支持的资源类型有：颜色和颜色主题、画笔、Graphics以及矢量画笔。

2.熟练按钮元件制作与库的运用

图1-4-12CCLibraries面板内容介绍2.熟练按钮元件制作与库的运用

CCLibraries面板如图1-4-12所示：A.

CreativeCloudLibrary文件夹

B.

将项目显示为图标

C.

将项目显示为列表

D.

从AdobeStock中搜索图像

E.

CreativeCloudLibrary内容面板

F.

添加颜色

G.

同步CreativeCloudLibraries

H.

删除库中的项目

。下面通过案例进一步学习按钮元件的制作。夜晚的城市安静而美丽，一个个窗户透着家的温暖，当鼠标经过，按下时屋里的灯就会慢慢变暗，如图1-4-13所示。。图1-4-13“灯火万家”效果案例1-4-2制作“灯火万家”动画本任务主要介绍了元件的概念，图形元件、影片剪辑元件和按钮元件的创建方法，以及库和组件的运用。通过各个案例，读者可以熟悉元件的操作，并且可以使用元件来制作效果较为复杂的动画。任务小结一、实训目的1．掌握图形元件的操作方法。2．掌握按钮元件的操作方法。3．掌握影片剪辑元件的操作方法。4．使用元件的嵌套制作较为复杂的动画效果。二、实训内容1.制作“动态小鱼”按钮，如图1-4-14、1-4-15所示。图1-4-14按钮“弹起”帧图1-4-15按钮“鼠标经过”帧模拟实训2.制作“水波荡漾”动画效果，如图1-4-16所示。图1-4-16“水波荡漾”效果模拟实训项目一Animate制作基本功

任务5掌握遮罩动画制作1了解遮罩的原理及概念2熟练掌握遮罩动画的制作方法任务目标

运用遮罩制作的动画称为遮罩动画。遮罩效果的获得一般需要两个图层：上面的图层称为遮罩层，看到的是形状；下面的图层称为被遮罩层，通过上面的图层的形状可以看到该层的内容。

Animate遮罩动画，能够透过该动画遮罩层中的对象看到被遮罩层中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象的许多属性，如渐变色、透明度、颜色和线条样式等却是被忽略的。“遮罩”主要有2种用途，一种是用在整个场景或一个特定区域中，使场景外的对象或特定区域外的对象不可见；另一种是用来遮住某一元件的一部分，从而实现要求的一些特殊的效果。

1.了解什么是遮罩1.了解什么是遮罩

1．构成遮罩和被遮罩层的元素遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图和文字等，但不能是线条，如果一定要使用线条，则可以使用“修改”→“形状”→“将线条转换为填充”命令，将线条转换为填充即可。被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层中，可以使用按钮、影片剪辑、图形、位图、文字和线条。

2．遮罩中可以使用的动画形式可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、传统补间动画、逐帧动画等，从而使遮罩动画变成一个可以施展无限想象力的创作空间。

在创建简单的遮罩动画时，首先要在Animate动画源文件时间轴上分别建立遮罩层和被遮罩层，然后分别在这两个图层中添加对象，最后在遮罩层上执行“遮罩层”命令，就实现了遮罩动画的效果，如图1-5-1所示。要建遮罩动画，至少需要两个图层，下面被遮罩的图层是看到的内容，还需要在被遮罩图层上创建一个遮罩图层，作为看到下面被遮罩层的窗口。

图1-5-1遮罩动画效果2.掌握遮罩动画的制作方法2.掌握遮罩动画的制作方法“图层1”：图层的图标改变了，从普通图层变成了被遮罩层（被拍摄图层）。并且图层缩进，图层被自动加锁。“图层2”：图层的图标改变了，从普通图层变成了遮罩层（放置拍摄镜头的图层）。并且图层被加锁。舞台显示也发生了变化。只显示电影镜头“拍摄”出来的对象，其他不在电影镜头区域内的舞台对象都没有显示。通常我们制作比较一些精心、复杂的动画，如在图片上抠取一些人物、物体等时，一般都要用到遮罩，因为遮罩出来的对象边沿比较实，像素点较好，清晰度和原图是一样的，这是遮罩最大的一个优点。

遮罩层动画，就是在遮罩层上使用补间形状动画、补间动画、逐帧动画等，如图1-5-2所示。

图1-5-2制作遮罩层动画3.

熟练掌握遮罩层动画的制作方法下面通过案例进一步熟悉遮罩层动画的制作。在黑夜中，随着椭圆形的探照灯的移动，物体就从黑暗的背景中凸显出来，如图1-5-3所示。图1-5-4探照灯动画效果案例1-5-1制作“探照灯”动画被遮罩层动画，就是固定遮罩层的形状、大小或位置，通过在被遮罩层上使用形状补间动画、补间动画等来制作动画效果，如图1-5-5所示。

图1-5-5制作被遮罩层动画4.

熟练掌握被遮罩层动画的制作方法下面通过案例进一步学习被遮罩层动画的制作。繁星满天的背景下，一首静夜思古诗的文字由下而上缓慢地出现，效果如图1-5-6所示。图1-5-6“古诗”效果案例1-5-2制作“古诗”动画

利用遮罩层动画和被遮罩层动画技术，制作食物和文字逐渐出现的特效。绘制椭圆，创建补间形状动画；创建“茶杯”图片的的遮罩层动画；绘制矩形，导入文本图片，创建文本图片的被遮罩动画。效果如图1-5-34所示。图1-5-34“美食广告”动画效果案例1-5-3制作“美食广告”动画本任务主要介绍了遮罩的基本概念、遮罩动画的制作方法、遮罩层动画和被遮罩层动画的制作方法等，并通过案例介绍了将形状补间动画、补间动画灵活运用到遮罩中，以制作出炫目神奇的动画效果。任务小结一、实训目的1．掌握遮罩动画的制作方法2．掌握遮罩层和被遮罩层动画的制作方法3．能够运用遮罩来制作各种动画效果二、实训内容1．制作文字从左到右的“滚动字幕”效果，如图1-5-8所示。图1-5-8滚动字幕效果模拟实训2．制作百叶窗。百叶窗关闭时是一副美景图，当百叶窗“拉开”时，又是另一幅山水风景画，效果如图1-5-38所示。（提示：可导入两张图片，一张作为背景层，一张作为被遮罩层。再制作窗叶粗细变化的影片剪辑元件作为窗叶，用制作的窗叶影片剪辑元件排列组合成窗帘作为遮罩层。）如图1-5-10所示。图1-5-10百叶窗模拟实训项目一Animate制作基本功

任务6掌握引导层动画制作1了解引导层动画的概念2掌握引导层动画的制作方法任务目标引导层动画是指一个或多个对象沿着设计好的路径运动。引导层动画由引导层和被引导层两个部分组成，二者缺一不可。1．引导线引导线是引导层动画最主要的部分，对象的运动路径就是通过引导线来设定的。引导线也就是运动对象的运动路径，既可以是圆形、矩形、多边形，也可以是弧线、不规则的直线或曲线等。2．引导层和被引导层用于绘制引导线的图层称为引导层。运动对象所在的图层称为被引导层。在制作引导层动画时，必须是引导层在上，被引导层在下。

1.

了解引导层动画概念1．制作引导层动画的一般步骤：（1）在引导层上绘制运动路径。（2）在被引导层上制作补间动画。（3）让对象元件在开始关键帧和结束关键帧的位置上分别与引导线的起点和终点重合。图1-6-1创建引导层动画2.

掌握引导层动画的制作方法下面通过两个案例进一步学习引导层动画的制作。在明媚的春光中，蜜蜂跳着八字舞在花丛中采蜜，效果如图1-6-2所示。图1-6-2蜜蜂采蜜动画效果案例1-6-1制作“蜜蜂采蜜”动画顶着蘑菇头样的卡通小人，在不同高度的台子上跳跃，是不是很有超级玛丽的感觉呢？效果如图1-6-3所示。。图1-6-3“跳跃的蘑菇头”动画效果案例1-6-2制作“跳跃的蘑菇头”动画

本任务主要介绍了引导层动画的原理及概念、引导层和被引导层的创建，以及引导层动画的制作方法。运用引导层动画可以实现对象按照不规则路径运动的动画效果。任务小结一、实训目的1．掌握创建引导层和被引导层的方法2．掌握引导层动画的基本操作3．能够制作简单的引导层动画二、实训内容1．制作一只可爱美丽的蝴蝶在花丛中“飞舞”的场景，如图1-6-32所示。（提示：画蝴蝶飞舞引导曲线，制作蝴蝶运动动画，沿引导线运动。），如图1-6-4所示。图1-6-4蝴蝶特效模拟实训2．制作雪花在空中自由飘动的“下雪”的效果，如图1-6-33所示。（提示：插入背景图后，新建图形元件制做“雪花”，然后制作“雪花”沿引导线自由飘动下落的影片剪辑元件，在影片剪辑元件中使用了引导动画。完成影片剪辑元件后，回到场景中，多拖放几个影片剪辑元件到场景舞台的各个位置，并根据远近用自由变形工具改变影片剪辑元件实例大小，就可形成飘飞的“漫天大雪”场景。）如图1-6-5所示。图1-6-5下雪特效模拟实训项目一Animate制作基本功

任务7交互动画的制作1了解文档与脚本类型2掌握“动作”面板的使用任务目标2掌握“代码片段”面板的使用Animate既可以制作流畅的线性播放动画，也可以制作面向移动互联网应用的交互式动画。要制作交互式动画，就需要编写脚本代码。因为Animate支持面向不同平台的文档类型，所以脚本代码类型也不同。ActionScript3.0平台是面向PC端的创作平台，在此平台下主要发布传统的SWF动画，使用FlashPlayer播放器播放。ActionScript是AdobeFlashPlayer和AdobeAIR运行环境的编程语言，它在Aniamte、Flex、AIR应用程序中实现交互性、数据处理及其它多种功能。由于ActionScript3.0脚本和基于CreateJS的JavaScript脚本的编写规则不尽相同，且脚本语言的语法知识和代码编写技巧也不是本任务的重点，所以就不对脚本编写做太深入的介绍，只以ActionScript3.0为例，简单介绍一下基本脚本的编写及使用方法。

1.了解文档与脚本类型

“动作”面板就是ActionScript的编辑窗口。在Animate中，用户可以通过在菜单栏中选择“窗口”→“动作”命令或按“F9”键或右击，在弹出的快捷菜单中选择“动作”命令来打开“动作”面板，如图1-7-1所示。图1-7-1“动作”面板2.掌握“动作”面板的使用

“动作”面板由两部分组成：左侧部分是“脚本导航器”窗格，它列出了Animate文档中脚本的位置，可以单击脚本导航器中的项目，在右侧的“脚本”窗格快速查看这些脚本。右侧部分为“脚本”窗格，用于键入与当前所选帧相关联的ActionScript或JavaScript代码。2.掌握“动作”面板的使用图1-7-2“动作”面板1．代码片段的概念与类型

代码片段是Animate预置的一些功能代码，它允许用户直接在“脚本”窗口中添加大量模块化的脚本代码，而不需要任何JavaScript或ActionScript3.0方面的知识，从而使得非编程人员能够轻松地使用简单的JavaScript和ActionScript3.0。使用代码片段需打开“代码片段”面板，如图1-7-3所示。3.掌握“代码片段”面板的使用

1．代码片段的概念与类型

图1-7-3代码片段面板3.掌握“代码片段”面板的使用

图1-7-4制作star动画3.熟悉ActionScript命令分类及应用

2．如何使用代码片段为了便于理解，准备了一个“星形”由左往右移动的动画案例，“星形”实例名称命名为“star”；建立了一个“Actions”图层，用来放置脚本，如图1-7-4所示。图1-7-5代码片段3.熟悉ActionScript命令分类及应用

代码说明：star是“星形”实例的名称，fLClickToGoToWebPage是自定义的函数名称，可以更改，但要与后面使用该函数的地方保持一致。是链接要打开的网站网址，如图1-7-4所示。下面通过两个案例学习交互动画的制作。利用导入的素材制作四肢可以运动的“小老鼠”影片剪辑元件，并制作补间动画。通过时间轴控制脚本命令“stop()”停止动画的播放；通过在按钮上添加动作脚本来控制“小老鼠”的运动。效果如图1-7-6所示。图1-7-6“小老鼠爬梯子”动画效果案例1-7-1老鼠上楼梯我是可爱的小鸭，我有孙大圣的本领，当单击“大”按钮，我就会变大，当单击“小”按钮，我就会变小，不信你试试，如图1-7-7所示。图1-7-7会缩放的“小鸭”效果图案例1-7-2会缩放的“小鸭”本任务通过对如何使用代码片段给动画添加基本的脚本代码，进行介绍，讲解了ActionScript3.0命令的分类、应用，以及“动作”面板的使用，通过案例详细讲解了影