Animate动画制作立体化教程（Animate 2021）课件 项目4 应用帧、库、元件与实例

项目4应用帧、库、元件与实例Animate动画制作立体化教程（Animate2021）（微课版）新形态立体化精品系列教材

2任务4.1制作星星闪烁动画任务4.2制作“优惠券”动态标签内容导航综合实战任务4.1 制作星星闪烁动画米拉拿到星星闪烁动画的制作资料后，便开始构思动画效果，她准备在夜空图像中放置不同的星星元素，通过编辑星星所在的帧，制作星星闪烁的动态效果。为防止大量图像素材直接堆积在舞台中，她准备将所有图像素材统一导入“库”面板，再分别放置在不同的帧中。【任务描述】任务背景某亲子星空露营地打算制作一段星星闪烁动画，用于宣传和吸引游客。该动画需要展示在深邃的星空下，营地中的一对父女正观赏星星闪烁的景象，要求营造出温馨的氛围。任务目标①

制作尺寸为1280像素×720像素，时长为3s，帧速率为24帧/秒，平台类型为ActionScript3.0的动画文件。②

结合“导入”命令和“库”面板来添加素材，通过图层与帧布局动画场景，展现父女一同观赏璀璨星空的温馨景象。③

通过编辑帧改变星星的数量，在视觉上形成星星闪烁的动态效果。知识要点“打开外部库”命令、“库”面板、选择帧、插入帧、转换帧、复制与粘贴帧、删除帧、移动帧。【任务描述】本任务的参考效果如上图所示【知识准备】1．插入和编辑帧（1）插入帧创建新图层时，新图层的第1帧将自动被设置为空白关键帧。若需要插入其他类型的帧，可采用以下两种方法。通过菜单命令插入：

选择【插入】/【时间轴】命令，在弹出的子菜单中选择“插入帧”或“插入关键帧”或“插入空白关键帧”命令。通过快捷菜单插入：

在时间轴上单击鼠标右键，在弹出的快捷菜单中选择“插入帧”或“插入关键帧”或“插入空白关键帧”命令。【知识准备】1．插入和编辑帧（2）选择与移动帧移动帧时，往往需要先选择帧。Animate对于选择不同位置、数量的帧提供了不同方式，以提升制作效率。（3）复制、剪切、粘贴与删除帧选择单个帧或多个帧后，可以进行以下4种操作。选择单个帧选择多个连续的帧复制帧剪切帧选择多个不连续的帧选择所有帧

粘贴帧删除帧【知识准备】1．插入和编辑帧（4）翻转帧翻转帧是指颠倒多个帧的顺序，使开头的帧移至末尾，末尾的帧移至开头，前后效果对比如下图所示。（5）转换帧选择普通帧，单击鼠标右键，在弹出的快捷菜单中选择“转换为关键帧”或“转换为空白关键帧”命令，可将普通帧转化为关键帧或空白关键帧。【知识准备】2．使用“库”面板（1）调用本文件“库”面板的内容导入素材到“库”面板后，选择【窗口】/【库】命令，或按【Ctrl＋L】组合键打开“库”面板，在其中能查看已导入的素材信息，选择素材后将其拖曳到舞台中便可使用。右图所示为“库”面板。【知识准备】2．使用“库”面板（2）调用其他文件“库”面板的内容调用其他文件“库”面板的内容，除了可以使用“选择文件”下拉列表外，还可以直接导入未打开文件的“库”面板，这种方式可以有效避免打开较多文件带来的卡顿情况。另外，拖曳其他文件“库”面板中的内容到当前文件的舞台上，该内容将自动保存到当前文件的“库”面板中。选择【文件】/【导入】/【打开外部库】命令，打开“打开”对话框，选择需要的文件，单击”打开“按钮，可在当前文件中打开该文件的“库”面板，且它会与当前文件的“库”面板同时存在于工作界面中。【任务实施】米拉搜集了一些图像素材和动画素材，准备将它们导入新建的动画文件中，以便调用这些素材来布局动画场景，具体操作如下。1．导入素材和外部库01导入素材到“库”面板02导入外部库【任务实施】目前星星闪烁动画所需的素材都已在新文件中，米拉准备结合图层和帧功能来布局场景，并且为方便后期编辑，她准备根据帧内容来重命名图层，具体操作如下。2．创建布局场景所需的关键帧01创建星空背景关键帧并重命名图层02创建流星关键帧03舞台中的画面04舞台中的画面【任务实施】星星闪烁效果可采用保持其他未放置星星的图层内容不变，只编辑“稀疏星星”和“群星”图层中的帧的方式来制作。米拉准备通过转换、复制和粘贴帧的操作，为画面中的夜空制作星星闪烁效果。由于当前动画的持续时长少于客户的要求，因此米拉打算采用统一插入普通帧的方式来增加帧数量，以延长动画时长，具体操作如下。3．编辑帧以制作星星闪烁效果

01插入普通帧前后的效果对比【任务实施】3．编辑帧以制作星星闪烁效果

02将普通帧转换为空白关键帧

03复制与粘贴帧

04星星闪烁动画的最终效果15任务4.1制作星星闪烁动画任务4.2制作“优惠券”动态标签内容导航综合实战任务4.2 制作“优惠券”动态标签米拉完成星星闪烁动画的制作后，需要制作某购物网站的“优惠券”动态标签。由于未接触过该题材，她先调阅了公司优秀的动态标签案例，通过分析这些动画，她发现制作动态标签需要用到各种各样的元件和实例，尤其需要在画面中添加按钮元件，使其能与观众进行交互。为此她准备先研究元件和实例的相关用法，再展开制作。【任务描述】任务背景某购物网站准备举行优惠活动，为让更多消费者参与到该活动中，现需要制作一个“优惠券”动态标签，并为其制作交互效果，使其能与消费者展开互动，让网页更加生动有趣，从而加深消费者对网站的印象。任务目标①

制作尺寸为800像素×800像素，时长为3s，帧速率为24帧/秒，平台类型为HTML5Canvas的动画文件。②

分别创建不同类型的元件，并在其中添加内容，再通过创建和编辑对应元件的实例来组成完整的动态标签，使其具有层级性、交互性和视觉美感。知识要点“新建元件”命令、“创建新元件”对话框.【任务描述】本任务的参考效果如上图所示【知识准备】1．元件的类型在Animate中，元件是由多个独立的元素和动画合并而成的整体，每个元件都有单独的时间轴和舞台，以及多个图层。元件有图形元件、影片剪辑元件和按钮元件3种类型。图形元件：

图形元件是构成动画的基本元素之一，用于创建静态图像，或可重复利用的、与主场景的时间线控制区有关联的运动对象。影片剪辑元件：

影片剪辑元件具有独立的时间线控制区，不受主场景的时间线控制区影响，用于创建图像、声音或其他影片剪辑实例。按钮元件：按钮元件是用于响应单击、鼠标指针经过和其他动作的交互式按钮，包含“弹起”“指针经过”“按下”“点击”4种状态。【知识准备】2．创建与转换元件在Animate中，元件的产生有两种方式，一种是先创建空白元件，再为其添加内容，另一种是将舞台中已存在的对象转换为元件。创建元件：创建元件：选择【插入】/【新建元件】命令，打开“创建新元件”对话框，设置元件名称和类型后，单击“确定”按钮，打开一个空白元件的场景，在该场景的舞台中添加内容后，便可完成元件的创建。转换元件：在舞台中选择素材，单击鼠标右键，在弹出的快捷菜单中选择“转换为元件”命令，打开“转换为元件”对话框，设置元件名称和类型，单击“确定”按钮。【知识准备】3．编辑元件（1）编辑元件的类型在“库”面板中选择要修改的元件，单击鼠标右键，在弹出的快捷菜单中选择“属性”命令，打开“元件属性”对话框，在“类型”下拉列表里选择元件类型后，单击“确定”按钮。（2）编辑元件的内容创建好的元件是一个整体，使用工具箱中的工具和菜单栏中的命令可以对其进行旋转、缩放、翻转等操作，但是若要编辑元件中的内容，则需要进入元件编辑窗口，即元件编辑模式。【知识准备】4．创建与编辑实例将元件从“库”面板中拖曳到舞台上，便可创建该元件的实例。实例是指在舞台上或嵌套在另一个元件内的元件副本，可视为元件在舞台上的具体体现。05．“转换为元件”按钮06．“分离”按钮07．“反向循环播放图形”按钮08．“倒放图形一次”按钮01．元件类型02．实例名称03．“交换元件”按钮04.“编辑元件属性”按钮09．“图形播放单帧”按钮10．“播放图形一次”按钮11．“循环播放图形”按钮12．“嘴形”同步按钮【任务实施】米拉打算先制作客户强调的交互效果，由于按钮元件可借助鼠标与消费者展开互动，为此米拉打算制作一个按钮元件，作为动态标签的一部分，具体操作如下。1．应用按钮元件制作“领”按钮01创建按钮元件02编辑按钮元件的状态【任务实施】米拉准备为动态标签制作一个变色框，用于吸引消费者的注意力。因为该效果不需要与消费者产生交互，所以她准备采用影片剪辑元件来制作，具体操作如下。2．应用影片剪辑元件制作变色框预览变色框的变色效果【任务实施】米拉打算通过绘制矩形和添加文本的方式，制作动态标签的主体部分。为方便整合所需的内容，她打算将主体部分制作成一个图形元件，具体操作如下。3．应用图形元件制作标签主体01绘制正圆角矩形02编辑复制所得的正圆角矩形03动态标签主体效果【任务实施】目前，动态标签的组成部分都被放置在不同的元件中，米拉需要使用这些元件来创建实例，再通过编辑这些实例来布局画面，使其构成完整的动态标签，具体操作如下。4．创建与编辑实例以布局画面01创建与编辑实例的外形02创建并缩放实例03编辑实例的色彩效果27任务4.1制作星星闪烁动画任务4.2制作“优惠券”动态标签内容导航综合实战综合实战

制作校规大讲堂动画老洪见米拉顺利地完成了星星闪烁动画和动态标签的制作任务，认为米拉已经具备独立制作动态效果的能力，于是便将制作校规大讲堂动画的任务交给她。米拉拿到任务资料后，发现如果仅制作教师张嘴说话的动作，会显得生硬，于是她便想添加一些晃头动作，使该角色的动态效果更加真实、生动。【实战描述】实战背景某艺术学校准备以动画的形式向学生讲述学校规定，现需设计师制作相关动画，主要内容为教师正在张嘴说话，画面场景为讲台和黑板，通过动态效果吸引学生注意力，让学生更加聚精会神地观看校规内容。实战目标①

制作尺寸为1280像素×720像素，时长为4s，帧速率为24帧/秒，平台类型为ActionScript3.0的动画文件。②

结合关键帧和元件功能制作各类元件，这些元件构成动画的主要内容和场景，使时间轴中的内容简洁、舞台中的画面美观。③

教师嘴部和头部的动态效果生动、自然，场景配色和谐。知识要点插入关键帧、影片剪辑元件、图形元件。【实战描述】本实战的参考效果如左图所示。【思路及步骤】教师需要位于黑板和讲台之间，形成空间感，因此可将场景分为3部分，结合元件进行制作。其中包含教师的元件因要包含嘴部和头部动态效果，可用影