AnimateCC二维动画设计与制作 第四单元：图层的应用
AnimateCC二维动画设计与制作-课程标准精选全文
可编辑修改精选全文完整版《二维动画设计与制作》课程标准一、课程基本信息适用专业：数字媒体应用技术 学 时 数：56学时 学 分 数：4学分先修课程：计算机应用基础、设计素描与色彩、计算机图形图像设计与处理 后续课程：网页制作技术、三维动画制作、毕业设计二、 课程性质与地位《二维动画设计与制作》是我院为数字媒体应用技术专业（影视动画方向）开设的专业必修核心课程之一，主要面向影视传媒、广告、新媒体、互联网等企业的“动画制作员”、“Web 前端设计师”岗位，通过“教、学、做”一体化的教学模式，让学生掌握计算机二维动画设计与制作的基本知识与创作技巧，能制作不同类型的简单二维动画及相关的交互式功能。
此课程面向动画制作员岗位，是培养学生核心职业技能的关键课程之一。
课程对应的岗位、工作任务和职业能力的分析图如下所示：图1 课程设置依据课程设置依据岗位分析典型工作任务分析能力分析动画制作员矢量图的绘制自然现象动画制作 网页Animate 动画制作Animate 宣传片、Animate 广告、Animate 故事短片等形式媒体制作 Animate 互动媒体开发 Animate 简单游戏开发动画鉴赏与策划能力 分镜头创作能力动画艺术表现能力 各种类型动画的制作能力矢量图绘制能力 Animate 软件操作能力 Animate 脚本编写能力三、课程教学目标1. 能力目标A1.会安装、设置Animate软件A2.能绘制矢量图和简单处理位图A3.能制作逐帧动画、形状补间动画、传统补间动画和新补间动画A4.能制作引导层动画A5.能灵活使用遮罩层制作遮罩效果动画A6.会制作简单的骨骼动画A7.会使用虚拟摄像头制作动画A8.会利用图层父子关系制作动画A9.能灵活使用多种手段制作各种类型动画A10.能简单设计动画分镜头A11.能将声音、视频等多媒体对象添入进动画并进行简单控制A12.能用代码片段制作简单的人机交互动画A13.能用脚本制作简单游戏A14.能使用其它工具辅助Animate进行动画制作A15.会简单对动画进行后期处理2.知识目标K1.掌握二维动画的制作方法和流程K2.了解动画剧本的创作方法和流程K3.了解分镜头设计格式与方法K4.了解动画美术设计的要求与方法K5.了解Animate软件的用途、优点、特点，熟悉Animate的工作环境K6.掌握矢量图和位图的处理方法及各自的风格特点K7.掌握Animate基本绘图工具的作用K8.掌握Animate文本的属性与效果K9.理解Animate元件与实例的概念K10.掌握Animate时间轴、层和帧的概念K12.掌握逐帧动画的原理及制作要求K13.掌握形变动画、补间动画的制作特点、条件和适用范围K14.理解引导层的概念及使用条件K15.掌握遮罩层的概念及遮罩效果动画的制作条件K16.了解骨骼动画的制作条件K17.了解外部多媒体对象的导入条件K18.了解Action Script基本语法及格式K19.了解简单常用的Action Script命令及代码片段K20.掌握动画输出与发布的相关设置3.素质目标Q1.掌握简单的Animate动画制作和Animate软件中涉及到的专业英语词汇Q2.能追踪Animate动画和Animate软件的发展动态，及时更新相应知识和能力Q3.培养对艺术创作的兴趣和对技术运用的完美追求Q4.能够让学生掌握与人协作能力、创新能力、自我学习和模仿能力Q5.具有良好的职业道德、规范操作意识Q6.具备良好的团队合作精神和组织协调能力Q7.具有求真务实的工作作风和开拓创新的学习精神Q8.具有良好的语言文字表达能力四、课程设置与设计思路1.课程设计理念以“教、学、做一体化”职教理念为基础，以充分的企业岗位调研为依据，本课程在设计时强调以“动画制作员”的职业能力为培养重点，并根据移动互联网的快速发展趋势，增加相关的知识，通过真实的项目，开展基于工作过程的项目化教学，体现了教学过程的职业性、实践性和开放性。
如何使用AdobeAnimate进行动画制作
如何使用AdobeAnimate进行动画制作如何使用Adobe Animate进行动画制作第一章：Adobe Animate的介绍与基本操作Adobe Animate是一款专业的动画制作软件，可以创建各种类型的动画，包括2D和互动式动画。
在使用之前，首先需要下载并安装Adobe Animate软件，然后进行注册和登录。
安装完成后，打开软件，我们将会看到主界面以及一些基本工具栏和面板。
第二章：基本工具和图层管理在Adobe Animate中，我们可以使用各种基本工具来绘制和编辑动画。
主要工具包括铅笔、刷子、橡皮擦、选择和移动工具等。
通过这些工具的组合使用，可以绘制出线条、形状和颜色，实现动画效果。
此外，还可以通过图层面板来管理不同元素的叠加顺序，方便进行编辑和调整。
第三章：动画制作技巧和关键帧在进行动画制作时，关键帧是非常重要的概念。
关键帧是指在时间轴中标记出的重要帧，它们定义了动画中的变化和动作。
通过在不同关键帧上对图层进行调整和变形，可以创建出流畅的动画效果。
在Adobe Animate中，可以通过插入和删除关键帧、修改关键帧属性等方法来控制动画的呈现方式。
第四章：使用图形库和素材库Adobe Animate提供了丰富的图形库和素材库，其中包含了各种准备好的图形和动画元素。
我们可以通过直接拖拽这些素材到舞台上来快速构建动画场景。
同时，也支持导入外部媒体文件，如图片、音频和视频等，以满足不同动画制作需求。
第五章：动画的时间轴和补间动画时间轴是用来控制动画的播放和分解的重要工具。
通过时间轴，可以对关键帧进行编辑和调整，实现动画的速度和流畅度控制。
另外，补间动画是一种常用的动画效果，它允许我们在两个关键帧之间自动插入中间帧，从而实现物体的平滑移动和变形。
第六章：添加声音和导出动画在Adobe Animate中，我们可以给动画添加背景音乐、配音和音效等各种声音元素，以增强动画的表现力。
通过添加声音，可以让动画更加生动有趣。
AnimateCC动画制作与应用
04
AnimateCC动画应用实例
文字动画的制作
01
02
03
文字动画类型
支持多种文字动画类型， 如淡入淡出、缩放、旋转 等。
文字动画效果
可添加阴影、发光、变形 等效果，增强文字动画的 表现力。
文字动画时间
可设置动画的持续时间、 延迟时间等，让文字动画 更加自然流畅。
图像动画的制作
1 2
图像动画类型
可以对声音进行剪辑和合成，实现声 音的淡入淡出、变速、变调等效果。 同时，还可以将多个声音进行混合， 实现更加丰富的声音效果。
声音特效
可以通过添加音效、环境音等声音特 效，增强动画的沉浸感和表现力。例 如，在动画中添加风声、雨声等环境 音，可以让观众更加身临其境地感受 动画的氛围。同时，还可以通过添加 音效来增强动画的交互性和表现力， 如点击按钮时的声音、鼠标滑过时的 声音等。
图形变形
AnimateCC提供了图形变形功能 ，可以将一个图形变为另一个图 形，如将一个圆形变为正方形， 或者将一个线条变为曲线等。
动画制作中的色彩运用
选择颜色
选择合适的颜色可以增强动画 的视觉效果。在选择颜色时， 需要考虑背景色、前景色和补
色等因素。
色彩模式
AnimateCC支持多种色彩模式 ，如RGB、HSB等。不同的色彩 模式在不同的场景下具有不同
动画的基本过程
创建关键帧
在时间轴中单击即可创建一个关键帧 ，每个关键帧上可以显示一个元素的 属性值。
设置动画属性
通过属性面板中的动画选项，可以为 关键帧设置动画属性，如运动路径、 旋转、缩放等。
Байду номын сангаас
添加过渡效果
在时间轴中两个关键帧之间添加过渡 效果，可以使动画更加平滑自然。
Animate二维动画制作 第4章动画规律应用
知识目标：理解跳跃运动规律；学习制作跳跃动 画。 技能目标：能完成跳跃的动画效果。
教学重点：跳跃规律应用；角色动作制作。
教学难点：各层各元件整体调整、动画节奏控制。
教学方法：案例分析、讲练结合
第四章AN绘画技法
4.5项目十五：《福彩》角色跳——富贵跳跃动画
2 跳跃运动规律
人的跳跃通常由三个基本动作组成。即 ：下蹲、腾起、落下。身体下蹲时腿呈弯曲 状、臀部不能下沉太低、双臂向后摆动；身 体腾起时，双臂快速向上前方摆动、同时身 体立起、双脚后跟抬起；身体落下时，双腿 一般呈微曲状，落地时身体下沉后再立起。
第四章AN绘画技法
4.2项目十二：《福彩》角色表情——翠花表情动画
301 项目实战
本项目主要讲解角色表情的制作，此项目动画效果截取自广告短片《福彩》。这段表情 是翠花听到富贵对“快三”的理解后所做出的“嫌弃 Nhomakorabea表情变化。
第四章AN绘画技法
4.3项目十三：《福彩》角色走路——翠花走路动画
101 项目介绍
4.1 动画运动基本规律
第四章AN绘画技法
4.1 动画运动基本规律
01 5 基本规律动画中的应用
在下面这个龙猫弹跳的案例中，我们通过制作龙猫的弹跳动作，感受“挤压与拉伸”、 “时间与间距”和“预备与缓冲”在动画中的应用。
第四章AN绘画技法
4.2项目十二：《福彩》角色表情——翠花表情动画
101 项目介绍
在一部动画作品中,角色的走路是最常 见、最基本的动作。如何让角色走起来是本 项目解决的主要问题。在掌握了人物行走基 本动作的表现方法后,再根据动画角色的性 别年龄、性格状态、生动表演等剧本要求, 进入深入细致的刻画,才能将动画创作提升 到一个新的高度。本项目将介绍向前走和循 环走的两种制作技巧。
Animate CC 2017动画制作入门与进阶 第4章 图形编辑操作
4.5 进阶实战
本章的进阶实战部分为绘制彩虹这个综合实例操作，用户通过 练习从而巩固本章所学知识。
在Animate CC 2017中，复制和粘贴图形对象可以使用菜单 命令或键盘组合键，在【变形】面板中，还可以在复制对象的 同时对对象应用变形。
4.1.3 排列和对齐图形
在同一图层中，绘制的Animate图形会根据创建的顺序层叠对象，用户 可以使用【修改】|【排列】命令对多个图形对象进行上下排列，还可以使用 【修改】|【对齐】命令将图形对象进行横向排列 。
移动图形 复制和粘贴图形 排列和对齐图形 组合和分离图形 贴紧图形 图形的变形
4.1.1 移动图形
在Animate CC中，【选择】工具免当前编辑的 对象影响到其他对象，可以使用【锁定】命令来锁定图形对象 。
4.1.2 复制和粘贴图形
4.2.3 调整色彩效果
在Animate CC 2017中可以调整舞台中图形或其他对象的色 彩显示效果，能够改变对象的亮度、色调以及透明度等，为动 画的制作提供了更高层次的特殊效果 。
4.3 添加3D和滤镜效果
使用Animate CC 2017提供的3D变形工具可以在3D空间对2D对 象进行动画处理，还可以对文本、影片剪辑或按钮添加滤镜效 果。
添加3D效果 添加滤镜效果
4.3.1 添加3D效果
使用Animate CC 2018提供的3D变形工具可以在3D空间对2D对 象进行动画处理，3D变形工具包括【3D旋转工具】和【3D平移 工具】。
4.3.2 添加滤镜效果
滤镜是一种应用到对象上的图形效果。Animate CC允许对 文本、影片剪辑或按钮添加滤镜效果，如投影、模糊、斜角等 特效，使动画表现的更加丰富。
《Animate CC 2017动画制作入门与进阶》
AnimateCC动画制作与应用
删除图层
通过菜单栏中的“图层”>“删除图 层”来删除不需要的图层。
新建帧
在时间轴中，点击右键，选择“插 入帧”来新建帧。
删除帧
在时间轴中，选中要删除的帧，然 后按Delete键来删除帧。
创建基础动画
创建补间动画
通过在时间轴中插入补间动画来创建补间动画。
创建形状补间动画
通过在时间轴中插入形状补间动画来创建形状补间动画。
发布设置
在发布前设置输出格式、尺寸、帧率等参 数。
导出为HTML5
将动画导出为HTML5文件，方便在Web上 发布和分享。
导出为其他格式
还可以导出为GIF、JPEG、PNG等格式。
04
Animate CC案例制作
案例一：制作一个简单的动画短片
总结词
通过这个案例，我们将学习如何使用Animate CC制作一个简单的动画短片 。
使用元件和实例
实例化
将元件应用于动画中，可以创 建多个实例，对实例进行修改 不会影响原始元件。
影片剪辑元件
用于创建具有复杂动画效果的 元件。
创建元件
将动画元素创建为独立的元件 ，可以在其他动画中重复使用 ，提高效率。
图形元件
用于创建可重复使用的图形元 素，如背景、按钮等。
按钮元件
用于创建具有交互功能的按钮 。
详细描述
首先，我们需要确定动画的主题和风格， 并选择适合的音乐和图像素材。接着，我 们将创建动画的关键帧和特效，例如文字 动画、图形变形和粒子效果等。最后，我 们会对动画进行测试和优化，确保它能够 与音乐和图像素材完美结合。
案例五：制作一个产品展示动画
总结词
这个案例将教我们如何使用Animate CC制 作一个产品展示动画，展示产品的特点和功 能。
AnimateCC维动画设计与制作-第单元：图层的应用 (一)
AnimateCC维动画设计与制作-第单元：图层
的应用 (一)
AnimateCC作为一款强大的动画设计与制作软件，图层的应用是非常重要的。
本文将从几个方面来阐述AnimateCC中图层的应用方法。
第一、图层的背景设置
在AnimateCC软件中，每一个图层都可以设置自己的背景颜色或图片，通过选择图层并在属性面板中编辑背景，可以给动画增添更多的层次感。
同时，还可以利用图片图层来增加特效的效果，比如可以在图片
图层上加入烟雾特效，来营造出一个神秘的氛围。
第二、图层的叠加关系
每一个图层都可以设置自己在场景中的叠加关系，通过叠加关系的修改，可以实现多种特效效果。
比如通过叠加透明图层，在原有的图层
上实现虚化的效果。
还可以利用图层的叠加关系，将多个图层合并在
一起，来实现复杂的特效效果。
第三、图层的分组
如果动画的场景比较复杂，那么图层的分组就很重要了。
我们可以将
相似的图层分为一组，并且将每一组的图层都放在同一层级之下，来
降低动画的复杂度。
通过组合图层，还可以实现复杂的动画特效，如
即便在多个图层中进行变形操作时，仍然可以保持各图层整体的连贯性，更容易实现动态想法。
第四、图层的命名
在AnimateCC中，图层数目可能很多，而图层命名是非常必要的。
通
过为每个图层指定一个有意义的命名，可以让我们更详细的了解图层
的内容，同时可以快速定位到想要修改的图层上，避免出现修改了错误图层的情况。
在动画的制作中，图层的应用十分重要。
本文介绍了图层背景设置、图层叠加关系、图层分组、图层命名四个方面的应用，希望对您的动画制作有所帮助。
AnimateCC二维动画设计与制作 第一单元：课程概述
二维动画设计与制作 1.1：课程分析与职业素质训导
四、广义动画的应用领域
新媒体页面 网络或电视上的广告动画 网络或电视上的情节故事短片 桌面端或移动端的小游戏 电子贺卡或相册 辅助教学课件 简单网站 移动端小应用程序开发 UI动效
8
二维动画设计与制作
1.1：课程分析与职业素质训导
狭义动画：传统的有故事情节 的动画片
6
二维动画设计与制作 1.1：课程分析与职业素质训导
三、典型二维动画制作软件
传统专业级： RETAS（如《海贼王》、《火
影忍者》、《机器猫》） ANIMO，如《埃及王子》 Softimage
互联网应用级： Adobe Animate CC （Flash） HTML5+CSS+JavaScript iH5、易企秀、兔展、MAKA等
八、学习材料推荐与学习建议
2.课程学习建议： ① 多去欣赏并琢磨网上的优秀
Animate和HTML5动画 ② 去图书馆借一两本实例型的
Animate书籍 ③ 多去相关的教程网站上学习 ④ 多去模仿与： 课程概述
1.2软件初识与入门案例
二维动画设计与制作 1.2：软件初识与入门案例
操作方式基本一样，源文件格式都为 .fla格式，只是发布的文件类型不一 样。
18
二维动画设计与制作 1.2：软件初识与入门案例
三、Animate文档类型与文件操作 1.文档类型 HTML5 Canvas HTML5 Canvas是Animate 新
增的文档类型，可以使用传统的时间 轴、工作区及工具来创建动画内容， 而生成的是 HTML5 输出，以便跨平 台地发布动画。
Canvas 是 HTML5 中的一个新 元素，它提供了多个 API，可以动态 生成及渲染图形、图表、图像及动画 。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图层是多数设计类软件都有 的术语，可以将其理解为一张 透明的胶片，可以在胶片上绘 制不同的对象，将多张胶片叠 加在一起就可以组成更复杂的 画面。所以，图层可以帮助我 们来组织不同的对象，在一个 图层上绘制和编辑对象，不会 影响其他图层上的对象。当给 对象做动画时，不同的对象尽 量放在不同的图层，以便更好 地进行管理和控制。
16
二维动画设计与制作 4.2：摄像头动画制作
三、像头图层调色
可通过摄像头给舞台上的所有对象 同时调色。方法是启用摄像头属性面板 上的“色调”及“调整颜色”功能。“ 色调” 相当于在原来颜色基础上覆盖了 一层新的颜色；而“调整颜色”可对视
图进行亮度、对比度、饱和度和色相 的调整。
17
二维动画设计与制作 4.2：摄像头动画制作
四、高级图层
如何启用高级图层
5
二维动画设计与制作 4.1：引导层与遮罩层应用
五、引导层动画
1.引导层动画简介与案例 引导层动画即使用一条线作为对 象的运动路径，让对象沿着此条路径 运动。这条线即为“引层线”，它所 在的图层称为“引导层”。 案例展示：蝴蝶飞舞、落叶
6
二维动画设计与制作 4.1：引导层与遮罩层应用
二维动画设计与制作
第四单元： 图层的应用
4.1引导层与遮罩层应用 4.2摄像头动画制作 4.3骨骼动画的制作 4.4图层父子关系与图层效果
二维动画设计与制作 4.1：引导层与遮罩层应用
❖ 内容大纲
图层的概念与操作 图层的类型 制作引导层动画 制作遮罩层动画 练习与作业
2
二维动画设计与制作 4.1：引导层与遮罩层应用
一、启用摄像头
（2）启用与禁用摄像头 单击“工具箱”中的“摄像头”
工具或“时间轴”中的“添加/删除 摄像头”按钮，可以启用/禁用摄像 头。
摄像头呈现为一个单独的图层。 一个文档只允许有一个摄像头图层， 且只能建立于主时间轴中，在元件内 部是不能建立摄像头图层的。建立摄 像头图层后，看到的其他图层会像透 过摄像头来看一样，可以在摄像头图 层添加关键帧和补间，以便制作摄像 头的镜头变换的动画效果。
关系要存在
4.一个引导层可以引导多个层
练习：蝴蝶飞舞、落叶
8
二维动画设计与制作
4.1：引导层与遮罩层应用
六、遮罩层动画
1.遮罩的概念与案例 遮罩即Mask、蒙版，它是一种 用来遮挡其它层对象的图形（可以是 形状、文字或元件实例）。遮罩就像 在图层上挖了一个孔，下方图层与这 个孔重叠的区域才可见，而其他区域 是被遮住的。 用来放置遮罩的图层称为遮罩 层，被遮挡的图层称为被遮罩层。被 遮罩层与遮罩层相重叠的部分能显 示，其它部分会被隐藏。 案例：卷轴动画、折扇动画、 扫光效果
四、制作摄像头动画
可以把摄像头看作一个独立的实 例，为其制作传统补间动画和补间动 画。如镜头的移动、缩放、旋转及色 调的变化都可以记录为动画。
案例1：拿剑的武士
18
二维动画设计与制作 4.2：摄像头动画制作
五、图层附加到摄像头
为了让动画的一些对象保持在摄像头 的视图中，如游戏中显示的时间表、按钮或 血量等，可以将该图层在摄像头移动时同步 移动。方法是使用Animate 中的“附加到摄
15
二维动画设计与制作
4.2：摄像头动画制作
二、变换摄像头
（1）平移摄像头 使用摄像头工具在摄像头边界内拖 动。 使用属性面板“摄像头属性”中的 坐标 X 和 Y 来精确平移摄像头。
（2）缩放摄像头 使用屏幕上的缩放控件或设置摄像
头属性面板中的“缩放”值，可缩放对 象。 （3）旋转摄像头
使用屏幕上的旋转控件或设置摄像 头属性面板中的“旋转”值，可旋转对 象。
五、引导层动画
2.引导层动画创建过程 （1）为动画图层添加引导层 （2）绘制引导线 （3）将动画对象运动的起始点和 结束点都拖到引层线上
7
二维动画设计与制作 4.1：引导层与遮罩层应用
五、引导层动画
3.引导层动画创建条件 引导层的对象是线条，被引导
的对象是元件实例 对象动画的起始和结束时的位
置都在引导线上 注意引导层和被引导层的引导
11
二维动画设计与制作
第四单元： 图层的应用
4.2摄像头动画制作
二维动画设计与制作 4.2：摄像头动画制作
❖ 内容大纲
启用摄像头 变换摄像头 摄像头图层调色 摄像头与图层深度 摄像头动画制作
资源链接： https:///cn/ animate/using/workingwith-camera-in-animatecc.html
13
二维动画设计与制作 4.2：摄像头动画制作
一、启用摄像头
（1）什么是摄像头图层 以前要模仿一个镜头的推拉，需
要直接缩放图层上的对象，如果画面 内容很多，会很麻烦。现在新版 Animate CC提供了摄像头功能，允 许动画制作人员模拟真实的摄像机， 对视图进行推拉摇移。
14
二维动画设计与制作
4.2：摄像头动画制作
一个遮罩层可以有多个被遮罩层。 描边轮廓不能作为遮罩层，需转换
为填充才可以。
10
二维动画设计与制作 4.1：引导层与遮罩层应用
六、遮罩层动画
3.练习 （1）简单遮罩效果 （2）折扇的展开 （3）岁月留声文字动画 （4）卷轴动画
思考：如何让遮罩的边缘透明 （或模糊、羽化）？
项目三：“马爹利”网站片头动画
9
二维动画设计与制作
4.1：引导层与遮罩层应用
六、遮罩层动画
2.遮罩的原理与条件 遮罩原理与PS中的剪切蒙版很 像，用一个图形作蒙版，与其重叠的 对象显示，其它隐藏。
遮罩对象与被遮罩对象在不同的层 ，遮罩层在上，被遮罩层在下。
遮罩层中的对象与颜色和透明度无 关。
遮罩层和被遮罩层中的内容可以是 形状、元件实例或文字，它和被遮 罩层中的对象都可以做动画。
3
二维动画设计与制作 4.1：引导层与遮罩层应用
二、图层的操作
新建图层与图层文件夹 选择图层 重命名图层 复制与拷贝图层 剪切与删除图层 排列图层 锁定/解锁图层 隐藏/显示图层 轮廓显示图层
4
二维动画设计与制作 4.1：引导层与遮罩层应用
三、图层的类型
普通图层 引导层 遮罩层与被遮罩层 补间图层 骨架图层 摄像头图层