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.课程设计理念以“教、学、做一体化”职教理念为基础，以充分的企业岗位调研为依据，本课程在设计时强调以“动画制作员”的职业能力为培养重点，并根据移动互联网的快速发展趋势，增加相关的知识，通过真实的项目，开展基于工作过程的项目化教学，体现了教学过程的职业性、实践性和开放性。
Animate二维动画制作 第3章基本动画应用
在QQ、微信表情包越来越丰富的时代， 网络动图因其表现效果直接、生动，能够较 大程度满足使用者的需求，带来视觉冲击， 被广大用户所喜爱。本项目将利用AN软件 中的逐帧动画功能来制作两个网络动图。
知识目标：掌握逐帧动画的原理。 技能目标：学会逐帧动画的制作。 教学重点：逐帧动画的制作方法。 教学难点：逐帧动画帧内容的绘制与设计。 教学方法：案例分析、讲练结合
如果要控制更加复杂的形状变化，可以使用AN中为我们提供的形状提示命令进行精确控制。 即在制作好一段形状补间动画后，利用“修改|形状|添加形状提示”菜单命令，或按 Ctrl+Shift+H快捷键，为动画添加形状提示点。
第三章基本动画应用
301 项目实战
本项目通过图形变形案例效果的制 作，讲解形状补间动画的制作技巧。
第三章基本动画应用
3.3传统补间动画——生日贺卡
301 项目实战
本项目通过生日贺卡案例效果的制 作，讲解元件、实例的具体应用，元件 透明度的调整，元件的复制，传统补间 动画的制作技巧。
提示： 若要调整动画的速度、旋转效果时， 需要先制作好传统补间动画后，再在属 性面板中进行调整。
案例效果
第三章基本动画应用
Animate
二维动画制作技术
DESIGNED
BY
ANIMATE
动感十足，创意无限，让学习变得更精彩！
第三章 基本动画应用
学习目标： 掌握逐帧动画的制作原理及技巧 掌握形状补间动画的制作原理及技巧 掌握传统补间动画的制作原理及技巧 掌握摄像机动画的制作原理及技巧 掌握补间动画的制作原理及技巧 掌握引导动画的制作原理及技巧 掌握遮罩动画的制作原理及技巧 掌握骨骼动画的制作原理及技巧
提示： 形状补间动画因为是矢量形状之间 的变形，因此，要求动画中每个关键帧 的内容必须是完全分离的矢量图形，如 果是文字、组、元件、绘制对象做为关 键帧内容，则必须将它们按Ctrl+B键分 离。
Animate CC 2017课件(6)
图2-118 选择“1.gif ”文件
图2-119 单击“是”按钮
图2-120 将序列图片导入到舞台
2. 在Animate CC 2017中制作逐帧动画
除了前面使用外部导入的方式创建逐帧动画外，还可以在Flash 软件中 制作每一个关键帧中的内容，从而创建逐帧动画。图2-121 为利用逐帧绘制 方法制作出的人物走路的画面分解图。
图2-131 提示对话框
在创建补间动画时，对象所处的图层类型可以是系统默认的常规图层，也
可以是比较特殊的引导层、遮罩层或被遮罩层。在创建补间动画后，如果原图 层是常规图层，那么它将成为补间图层；如果是引导层、遮罩层或被遮罩层， 那么它将成为补间引导、补间遮罩或补间被遮罩图层。 创建补间形状动画有以下两种方法。
键帧的对象应用交互元件的操作，而是将整体动画应用于交互的元件； 补间动画也不能在属性面板的“循环”选项下设置图形元件的“单帧”数。
2. 创建补间动画
与前面的传统补间动画一样，补间动画对于创建对象的类型也有所限制， 只能应用于元件的实例和文本字段，并且要求同一图层中只能选择一个对象。 如果选择同一图层中的多个对象，将会弹出一个用于提示是否将选择的多个 对象转换为元件的提示框，如图2-131所示。
提示：如果创建后的补间形状动画以一条绿色背景的虚线段表示，则说明补间形状动画没有创建成功， 原 因是两个关键帧中的对象可能没有满足创建补间形状动画的条件。
图2-128 选择“创建补间形状”命令
图2-129 “创建形状补间”后的时间轴
如果要删除创建的补间形状动画，其方法与前面介绍的删除传统补间动
画相同。只要选择已经创建的补间形状动画的两个关键帧之间的任意一帧， 然后单击右键，从弹出的快捷菜单中选择“删除补间”命令即可。
AnimateCC动画制作与应用
删除图层
通过菜单栏中的“图层”>“删除图 层”来删除不需要的图层。
新建帧
在时间轴中，点击右键，选择“插 入帧”来新建帧。
删除帧
在时间轴中，选中要删除的帧，然 后按Delete键来删除帧。
创建基础动画
创建补间动画
通过在时间轴中插入补间动画来创建补间动画。
创建形状补间动画
通过在时间轴中插入形状补间动画来创建形状补间动画。
发布设置
在发布前设置输出格式、尺寸、帧率等参 数。
导出为HTML5
将动画导出为HTML5文件，方便在Web上 发布和分享。
导出为其他格式
还可以导出为GIF、JPEG、PNG等格式。
04
Animate CC案例制作
案例一：制作一个简单的动画短片
总结词
通过这个案例，我们将学习如何使用Animate CC制作一个简单的动画短片 。
使用元件和实例
实例化
将元件应用于动画中，可以创 建多个实例，对实例进行修改 不会影响原始元件。
影片剪辑元件
用于创建具有复杂动画效果的 元件。
创建元件
将动画元素创建为独立的元件 ，可以在其他动画中重复使用 ，提高效率。
图形元件
用于创建可重复使用的图形元 素，如背景、按钮等。
按钮元件
用于创建具有交互功能的按钮 。
详细描述
首先，我们需要确定动画的主题和风格， 并选择适合的音乐和图像素材。接着，我 们将创建动画的关键帧和特效，例如文字 动画、图形变形和粒子效果等。最后，我 们会对动画进行测试和优化，确保它能够 与音乐和图像素材完美结合。
案例五：制作一个产品展示动画
总结词
这个案例将教我们如何使用Animate CC制 作一个产品展示动画，展示产品的特点和功 能。
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，可以动态 生成及渲染图形、图表、图像及动画 。
《Animate CC动画制作案例教程》模块3 基础动画
1．补间形状的特点 （1）组成元素：补间形状只能针对分离的矢量图形，若要使用实例、组或位图图像等，需先分 离这些元素。 （2）在时间轴面板上的表现形式：创建补间形状后，两个关键帧之间的背景变为淡绿色，在起 始帧和结束帧之间有一个长长的箭头。
案例7 奥运篆书——补间形状
2．补间形状的制作方法
模块3 基础动画
案例6 植物生长——逐帧动画 案例7 奥运篆书——补间形状 案例 8 秋游快乐行——元件和库 案例9 经典咏流传——传统补间动画 案例10 海底世界——补间动画
案例6 植物生长——逐帧动画 案例描述:
用逐帧动画展现植物生长的过程，如图3-1所示。
图3-1
案例6 植物生长——逐帧动画
(3) 控制绘图纸外观的显示
图3-11
单击“绘图纸外观轮廓”按钮,将具有绘图纸外观的帧显示为轮廓。 将“绘图纸外观标记”的指针拖到一个新位置。 若要编辑绘图纸外观标记之间的所有帧，单击“编辑多个帧”按钮。从而显示绘图纸外观标记之间 的每个帧的内容，并且无论哪个帧为当前帧，都可以进行编辑。如图3-11所示。
置关键帧的帧，然后从上下文菜单中选择“插入关键帧”，或按【F6】。 创建新的空白关键帧，执行菜单“插入→时间轴→空白关键帧”命令，或者右键单击
要在其中放置关键帧的帧，然后从快捷菜单中选择“插入空白关键帧”，或按【F7】。
（4）复制或粘贴帧
选择帧或序列并选择“编辑→时间轴→复制帧”，选择要替换的帧、序列或空白 处，然后选择“编辑→时间轴→粘贴帧”。
单击图层名称右侧的“轮廓”列，该图层上所有对象显示为轮廓或关闭轮廓显示。 单击轮廓图标，所有图层上的对象显示为轮廓。 按住Alt键单击图层名称右侧的“轮廓”列，将除当前图层以外的所有图层上的对象显示为轮
animate知识点总结
animate知识点总结一、界面与工具1. 工作区域：Animate的工作区域主要分为舞台、时间轴和属性面板。
舞台是动画的展示区域，时间轴是用来编辑动画帧的地方，属性面板用来调整对象的属性。
2. 工具栏：Animate有着丰富多样的工具，包括选择工具、绘图工具、填充工具、文本工具等，可以满足各种制作需求。
二、基本动画制作1. 关键帧动画：在时间轴上设置关键帧，可以制作简单的动画效果，如位移、旋转、缩放等。
2. 形状动画：通过形状补间和形状提示来制作形状变化的动画效果。
3. 骨骼动画：使用骨骼工具和绑定骨骼的方式来制作更加复杂的动画效果。
三、高级动画技术1. 插值：Animate支持各种插值方法，如线性插值、贝塞尔曲线插值等，可以制作出流畅的动画效果。
2. 动画路径：通过设置物体的路径，可以制作出沿着指定轨迹移动的动画效果。
3. 动画过渡：使用缓动效果和过渡动画来使动画变得更加生动和自然。
四、制作效果与特效1. 过滤器与混合模式：Animate拥有各种过滤器和混合模式，可以制作出各种特效效果，如模糊、阴影、发光等。
2. 粒子系统：通过粒子系统可以制作出各种粒子效果，如火花、雨滴、烟雾等。
3. 图形变换：使用图形变换可以制作出各种图形的变形效果，如扭曲、膨胀、旋转等。
五、输出与导出1. 动画导出：Animate支持多种格式的动画导出，包括SWF、视频、GIF等，可以根据需要选择合适的输出格式。
2. 导出设置：Animate还提供了丰富的导出设置，可以调整导出的参数，如分辨率、帧率、压缩方式等。
六、交互式动画1. 动画控制器：Animate可以制作出交互式动画，通过设置动画控制器和按钮来实现用户与动画的互动。
2. 动画导航：通过设置动画导航和链接来制作出交互式动画，可以实现页面之间的跳转和交互。
七、适用领域Animate广泛应用于各种领域，包括广告制作、游戏开发、影视制作、教育培训等，是一款功能强大的动画制作工具。
AnimateCC动画制作课程教案
AnimateCC动画制作课程教案一、教学内容本节课教学内容选自《Animate CC动画制作教程》的第二章“Animate CC基础入门”和第三章“动画制作基本技巧”。
具体内容包括：Animate CC软件的界面认识、基本工具的使用、帧动画的制作、元件的创建与应用以及简单的动画效果实现。
二、教学目标1. 了解Animate CC软件的基本功能，掌握软件界面的操作方法。
2. 学会使用Animate CC的基本工具，能独立完成帧动画的制作。
3. 掌握元件的创建与应用，实现简单的动画效果。
三、教学难点与重点难点：帧动画的制作、元件的创建与应用。
重点：Animate CC软件的基本功能、基本工具的使用、动画效果的实现。
四、教具与学具准备1. 教师准备：电脑、投影仪、Animate CC软件安装包。
2. 学生准备：安装有Animate CC软件的电脑。
五、教学过程1. 实践情景引入（5分钟）展示一组有趣的动画作品，引导学生思考动画制作的原理。
2. 知识讲解（15分钟）介绍Animate CC软件的基本功能，讲解软件界面的操作方法。
讲解基本工具的使用，如选择工具、变形工具等。
3. 例题讲解（20分钟）以一个简单的帧动画为例，演示制作过程，讲解关键步骤。
讲解元件的创建与应用，实现简单的动画效果。
4. 随堂练习（30分钟）学生跟随教师一起完成一个帧动画的制作，巩固所学知识。
学生独立完成一个简单的动画作品，练习元件的创建与应用。
学生分享自己的学习心得，提出疑问。
六、板书设计1. Animate CC动画制作课程2. 内容：Animate CC基本功能基本工具的使用帧动画制作步骤元件的创建与应用七、作业设计1. 作业题目：制作一个简单的帧动画，要求至少包含5个关键帧。
使用元件创建一个动态效果，如飘动的云彩、闪烁的星星等。
2. 答案：帧动画：自行创意，符合题目要求即可。
动态效果：自行创意，符合题目要求即可。
八、课后反思及拓展延伸1. 反思：本节课的教学效果，学生的掌握情况，及时调整教学方法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
15
3.2：帧动画制作
二维动画设计与制作
三、帧的分类
关键帧 对象变化过程中的关键点。它定
义了动画中对象属性的变化或分配了 动作，对象属性包括位置、大小、颜 色等。关键帧用黑色圆点表示。
普通帧（延续帧） 延续前一关键帧内容的帧。普通
响应鼠标事件的交互式按钮。 按钮元件的几种状态
5
3.1：元件的使用
二维动画设计与制作
四、实例及其属性设置
1.什么是实例 实例就是元件在时间轴（舞台）
上的一个副本。元件存放在库中，被 拖放到舞台上的元件称为实例。
2.图形元件的实例属性 实例的颜色 实例的交换 实例播放模式
6
3.1：元件的使用
2
3.1：元件的使用
二维动画设计与制作
一、元件的概念与特点
1.什么是元件 元件是由其它对象构成的用来被
重复使用的一种元素集合，是 Animate动画的重要组成部分。
2.元件的特点 元件由其它对象构成，有自身
独立的时间轴、图层和工作区 元件存在的目的一是为了重复
利用，方便管理相同的元素并 减小体积；二是补间和传统补 间必须要使用元件 元件是可以嵌套的
练习： .2：帧动画制作
二维动画设计与制作
六、洋葱皮工具的应用
修改绘图纸标记 设置绘图纸标记的显示状态和范
二维动画设计与制作
第三单元： 基本动画制作
3.1元件的使用 3.2帧动画制作 3.3形状补间动画与传统补间动画 3.4补间动画与动画编辑器
3.1：元件的使用
二维动画设计与制作
❖ 内容大纲
元件的概念与特点 元件的创建与编辑 元件的类型 实例及其属性设置 元件与实例的编辑 元件的应用 库的应用 练习：小球跳动与控制 拓展项目：音乐海报
间动画，则两关键帧之间的所有帧称 为过渡帧。不同类型补间的帧呈现的 颜色不一样，传统补间帧呈浅蓝色， 形状补间帧呈浅绿色，补间动画帧呈 深蓝色。
其它 加入音乐的帧，加入脚本语言的
帧，错误过渡帧，帧标签帧等。
17
3.2：帧动画制作
二维动画设计与制作
四、帧的操作
帧的选择(注意防止帧的移动) 选择单帧 选择同一层的不连续帧或连续帧 选择多层的不连续帧或连续帧 选择层上的所有帧：单击层名称 选择时间轴上的所有帧：
4
3.1：元件的使用
二维动画设计与制作
三、元件的类型
图形元件 图形元件一般是静态的对象或与
影片主时间轴同步的动画，无法给图 形元件添加脚本。其时间轴受制于主 时间轴。
影片剪辑元件 影片剪辑一般是一段小动画，或
是静态的对象，具有独立时间轴，它 的播放与主时间轴没有直接关系。
按钮元件 用于感知用户的鼠标动作，创建
3
3.1：元件的使用
二维动画设计与制作
二、元件的创建与编辑
1.创建元件 新建空白元件（Ctrl+F8） 将其他对象转换为元件 (按F8或
右击) 注册点：用来确认对象坐标的原 点。 2.编辑元件 从库中双击元件 双击舞台上的实例 3.删除元件 从库中可将元件删除，从舞台上 删除只是删除了元件的实例。
二维动画设计与制作
四、实例及其属性设置
3.影片剪辑的实例属性 实例的混合模式 实例的滤镜应用 4.按钮元件的实例属性
7
3.1：元件的使用
二维动画设计与制作
五、元件与实例的编辑
1.重命名元件 2.更改元件类型 3.修改元件 一般编辑模式（双击库中元件
或按Ctrl+E） 当前位置编辑模式（直接双击
一、时间轴及其设置
时间轴是进行图层和帧操作的地 方，也是组织动画的地方，主要任务 是显示和控制帧。
1.时间轴的构成 图层及设置 帧的刻度及帧 播放头 帧的信息显示及其它
2.帧在时间轴的显示方式 更改帧在时间轴的显示方式 各种显示方式的区别和特点
14
3.2：帧动画制作
二维动画设计与制作
二、帧的概念
一帧可以看作是一个静态的画 面，在Animate中，动画就是由一个 个帧按一定的时间顺序进行播放的。 实例如“狐狸踢球”、人物跑动。
帧中的对象与它前面关键帧中的内容 保持一致，用于延长关键帧内容的显 示时间。
空白关键帧 如果关键帧中没有任何对象，则
称为空白关键帧，用空心圆表示。
16
3.2：帧动画制作
二维动画设计与制作
三、帧的分类
空白帧 空白的延续帧，说明前一个关键
帧是空白关键帧。 过渡帧（普通帧） 在两个关键帧之间如果定义了补
19
3.2：帧动画制作
二维动画设计与制作
四、帧的操作
帧的移动 先选择要移动的帧，将鼠标移上
去进行拖动即可 帧的清除、剪切和删除 帧的复制和粘贴 帧的其他操作
练习： （1）小狗快跑 （2）贝克汉姆奔跑 （3）小女孩走动
20
3.2：帧动画制作
二维动画设计与制作
五、逐帧动画的制作
逐帧动画即动画的帧全是或基本 上全是关键帧，其特点是操作复杂， 适合于制作动作复杂精确的动画，如 角色运动动画
元件的实例） 4.更改实例类型 5.分离实例 6.交换实例 7.对实例的变形
8
3.1：元件的使用
二维动画设计与制作
六、元件的应用
小球的跳动与控制
9
3.1：元件的使用
二维动画设计与制作
七、库的应用
库的打开与关闭 库的构成 库项目与库文件夹 在影片间共享库 公用库的使用 自定义库
10
3.1：元件的使用
Ctrl+Alt+A或使用编辑菜单
18
3.2：帧动画制作
二维动画设计与制作
四、帧的操作
帧的插入(先选择要插入的位置) （1）使用插入菜单或右键插入
帧 （2）按F6，如果前面有内容，
则插入的是关键帧（此帧内容与前面 一致），如果前面无内容或是空白关 键帧，则插入的是空白关键帧
（3）按F7直接插入空白关键帧 （4）如果选择的位置是多个 帧，则插入的也将是多个关键帧或空 关键帧 （5）按F5插入普通帧，内容与 前关键帧相同
二维动画设计与制作
八、拓展项目：音乐海报
11
二维动画设计与制作
第三单元： 基本动画制作
3.2帧动画制作
3.2：帧动画制作
二维动画设计与制作
❖ 内容大纲
时间轴及其设置 帧的概念 帧的分类 帧的操作 逐帧动画的制作 洋葱皮工具的应用 翻转帧动画
13
3.2：帧动画制作
二维动画设计与制作