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二维动画制作 第6章二维广告短片
第六章二维广告短片——《福彩》
6.1 项目介绍
101 项目介绍
本项目为一则《福彩》广告，采用二维动画短片的形式进行设计与制作。针对该广告需要 在电视乡村频道播放宣传且受众群体范围大的特点，前期设计师通过认真观察生活细节，将该 广告设计成一部在风格上新颖、独特，在剧情上诙谐幽默，片长约30秒的二维动画短片。本次 设计二维表现形式为主，采用了手绘板绘制，并重点结合了AN这一强大的二维制作软件来制 作动画。
备注
第六章二维广告短片——《福彩》
6.3 项目实战
201 角色设定
本短片中有两个主要角色，即翠花和富贵。角色造型和色指定如下：
第六章二维广告短片——《福彩》
6.3 项目实战
201 角色设定
本短片中有两个主要角色，即翠花和富贵。角色造型和色指定如下：
第六章二维广告短片——《福彩》
301 场景设定
DESIGNED
BY
ANIMATE
6.3 项目实战
第六章二维广告短片——《福彩》
6.3 项目实战
01 5 动画后期合成
动画片后期主要就是场景合成，镜头衔接，特效，字幕等等。 1．场景合成：按照分镜设计，将制作完成的每一镜头的背景、角色、道具进行合成，使画面 效果符合剧情需要，视觉效果好。 2．镜头合成：将每一镜头进行合理衔接，听音对位，避免无效空镜头、空帧的出现。 3．特效合成：为指定镜头添加特效，包括声音特效、视觉特效等。 4．字幕合成：根据客户需求，为动画添加字幕。 5．主要技术
，为了让动画师的工作变得方便快捷，角色绘制师会事先准备“镜头元件细分列表”以防有所
疏漏。
角色
翠花
富贵
场景
场景1（室外 ） 场景2（气氛 ）
AnimateCC二维动画设计与制作-课程标准
《二维动画设计与制作》课程标准一、课程基本信息适用专业：数字媒体应用技术 学 时 数：56学时 学 分 数：4学分先修课程：计算机应用基础、设计素描与色彩、计算机图形图像设计与处理 后续课程：网页制作技术、三维动画制作、毕业设计二、 课程性质与地位《二维动画设计与制作》是我院为数字媒体应用技术专业（影视动画方向）开设的专业必修核心课程之一，主要面向影视传媒、广告、新媒体、互联网等企业的“动画制作员”、“Web 前端设计师”岗位，通过“教、学、做”一体化的教学模式，让学生掌握计算机二维动画设计与制作的基本知识与创作技巧，能制作不同类型的简单二维动画及相关的交互式功能。
此课程面向动画制作员岗位，是培养学生核心职业技能的关键课程之一。
课程对应的岗位、工作任务和职业能力的分析图如下所示：图1 课程设置依据三、课程教学目标1. 能力目标课程设置依据岗位分析典型工作任务分析能力分析动画制作员矢量图的绘制自然现象动画制作 网页Animate 动画制作Animate 宣传片、Animate 广告、Animate 故事短片等形式媒体制作 Animate 互动媒体开发 Animate 简单游戏开发动画鉴赏与策划能力 分镜头创作能力动画艺术表现能力 各种类型动画的制作能力矢量图绘制能力 Animate 软件操作能力 Animate 脚本编写能力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.课程设计理念以“教、学、做一体化”职教理念为基础，以充分的企业岗位调研为依据，本课程在设计时强调以“动画制作员”的职业能力为培养重点，并根据移动互联网的快速发展趋势，增加相关的知识，通过真实的项目，开展基于工作过程的项目化教学，体现了教学过程的职业性、实践性和开放性。
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，可以动态 生成及渲染图形、图表、图像及动画 。
学习使用AdobeAnimate进行动画制作和交互设计
学习使用AdobeAnimate进行动画制作和交互设计Adobe Animate是一种强大的动画制作和交互设计软件，它为设计师和创作者提供了丰富多样的工具和功能，使他们能够创建出生动、富有创意和交互性的动画作品。
本文将深入探讨学习使用Adobe Animate进行动画制作和交互设计的过程和技巧。
第一章：介绍Adobe AnimateAdobe Animate是Adobe公司旗下的一款专业动画制作和交互设计软件，它在过去被称为Flash Professional。
它集成了强大的矢量绘图工具、动画制作工具、插件和交互设计功能，为用户提供了丰富多样的设计选择。
学习使用Adobe Animate需要先了解它的界面和常用工具，如时间轴、层面板、绘图工具和舞台。
第二章：创建动画在Adobe Animate中，可以使用多种方法创建动画。
首先，可以使用绘图工具直接在舞台上绘制图形，然后通过关键帧来控制其运动。
其次，可以导入外部图片、矢量图形或视频，并在时间轴中对其进行处理和编辑。
此外，还可以使用运动指南、形状补间和骨骼动画等高级技术来创建更复杂的动画效果。
第三章：实现交互设计Adobe Animate提供了强大的交互设计功能，可以使动画与用户进行互动。
通过添加按钮、链接和动作脚本，可以创建用户可点击的交互元素。
还可以使用内置的事件处理器来响应用户的交互行为，并通过编写ActionScript代码实现复杂的交互逻辑。
此外，还可以将动画导出为HTML5文件，使其可以在各种平台上进行交互和播放。
第四章：优化动画效果为了使动画效果更加出色，需要运用一些优化技巧。
首先，可以使用图层和嵌套动画来实现分层和深度效果。
其次，可以使用动画补间和缓动功能来平滑过渡和增强动画效果。
此外，还可以使用滤镜和特效来提升动画的视觉效果，并使用声音和音乐来增强用户体验。
第五章：导出和发布一旦完成动画制作，就可以将其导出为各种格式，如SWF、HTML5和视频文件。
AnimateCC动画制作与应用
动画关键帧制作
关键帧设置
关键帧是动画制作中的重要概念，它定义了动画中的重要时刻。在AnimateCC中 ，可以手动设置关键帧，也可以使用程序预设的关键帧设置。
关键帧调整
在设置关键帧后，可以根据需要调整它们的属性，如位置、大小、旋转等，以实 现更丰富的动画效果。
动画曲线编辑
曲线编辑器
AnimateCC提供了强大的曲线编辑器，可以用于调整动画中 各个属性的变化趋势。通过曲线编辑器，可以轻松地实现平 滑的动画效果。
游戏角色动画制作案例
游戏角色动画制作概述
案例
应用分析
游戏角色动画是游戏开发中的重要组 成部分，通过生动的角色形象和流畅 的动作设计可以提高游戏的可玩性和 吸引力。
某网络游戏角色动画制作。该游戏以 武侠题材为主，利用AnimateCC制作 了各种角色的动作设计，如行走、跑 步、战斗等动作，以及角色的表情变 化等细节效果。
新技术与新功能展望
01
人工智能与机器学习
未来的AnimateCC可能会融入更多的人工智能和机器学习技术，使得
动画制作更加智能化，减少人工操作，提高制作效率。
02
实时渲染技术
随着计算机硬件性能的提升，AnimateCC可能会采用更高效的实时渲
染技术，使得动画制作过程中的预览和渲染速度更快。
03
增强现实与虚拟现实
AnimateCC在游戏角色动画制作方面 具有很大的优势，可以快速实现角色 的动作设计和细节表现。同时， AnimateCC还可以配合游戏引擎实现 游戏中的实时渲染和交互，提高游戏 的运行效率和视觉效果
05
AnimateCC与其他软件的协同工作
与Adobe其他软件的协同
与Adobe Photoshop的协同
《Animate CC二维动画设计与制作(微课版)》读书笔记模板
6.3.1代码片段的概念与类型 6.3.2如何使用代码片段 6.3.3应用代码片段 应用案例：控制气球移动
小结 课后练习
7.2动画的运动规 律
7.1动画基础知识
7.3小结与课后练 习
7.1.1动画常识 7.1.2动画中的构图与透视 7.1.3镜头语言与镜头应用
7.2.1动画的基本力学原理 7.2.2一般运动规律 7.2.3人物的运动规律 7.2.4自然现象的运动规律
2.7.1对象的类型 2.7.2对象的基本操作 2.7.3对象的排列、对齐和分布 2.7.4对象的组合与分离 2.7.5对象的变形 2.7.6位图编辑
2.8.1文本的类型 2.8.2创建文本 2.8.3文本属性设置 2.8.4基本文字效果制作 应用案例：圣诞卡片
小结 课后练习
3.1元件的使 用
4.2引导层 与动画制作
0 4
4.4骨骼动 画的制作
0 6
4.6图层父 子关系
0 3
4.3遮罩层 与动画制作
0 5
4.5摄像头 与高级图层 动画
4.7图层效果
4.8小结与课 后练习
4.1.1图层的基本操作 4.1.2图层的类型 4.1.3高级图层
4.2.1创建引导层，建立引导关系 4.2.2利用引导层制作传统补间动画 应用案例：蝴蝶飞到花丛中
目录分析
1.1 Animate CC二 维动画制作概述
1.2 Animate CC工 作界面
1.3 Animate CC文 档操作
1.4小结与课后练习
1.1.1 Animate CC简介 1.1.2 Animate CC的应用领域 1.1.3 Animate CC新增及改进的功能 1.1.4 Animate CC运行的硬件配置需求
Animate CC动画设计完整教程
Animate CC动画设计完整教程Animate CC是一款由Adobe开发的全面的动画设计和制作软件，广泛应用于游戏开发、电影制作、网页设计等领域。
本教程将详细介绍Animate CC的基本功能和操作方法，帮助初学者快速掌握动画设计的技巧和流程。
一、动画设计基础1.1 Animate CC简介Animate CC是一种基于时间轴的动画制作工具，支持2D、3D动画设计。
它提供了丰富的绘图工具、动画效果和交互性的功能，可以创建各种类型的动画作品。
1.2 创建新项目在打开Animate CC后，点击“新建”按钮，选择创建新项目。
可以设置画布大小、帧速率等参数，确定后新的项目将被创建。
1.3 时间轴Animate CC的核心是时间轴，它以帧为单位显示动画的每一帧。
可以在时间轴上添加图层，每个图层可包含不同的元素。
通过在时间轴上添加关键帧，可以实现元素的运动和变形。
二、基本绘图工具的使用2.1 画笔工具由于Animate CC是基于矢量图形的动画软件，所以画笔工具是常用的绘图工具之一。
可以选择不同的画笔样式、粗细和颜色，在画布上绘制形状。
2.2 形状工具Animate CC提供了各种形状工具，如矩形工具、椭圆工具、多边形工具等。
通过选择不同的形状工具，在画布上绘制各种形状，并进行填充和描边的设置。
2.3 文字工具Animate CC还提供了文字工具，可以在画布上添加文本内容，并进行字体、大小、颜色的设置。
文字元素也可以在时间轴上进行动画效果的调整。
三、动画效果的制作3.1 关键帧和补间动画Animate CC中的关键帧可以用来表示动画的每一帧的状态。
通过在不同的关键帧上设置元素的属性和位置，然后使用补间动画功能，Animate CC会自动生成中间的过渡帧，从而实现元素的平滑运动。
3.2 动画路径在Animate CC中，可以通过绘制路径来实现元素的指定路径运动。
选中一个元素，使用动画路径工具绘制路径，然后通过在时间轴上的关键帧上调整元素的位置，使其沿着路径运动。
AnimateCC维动画设计与制作-第单元：交互动画制作 (一)
AnimateCC维动画设计与制作-第单元：交互动画制作 (一)Animate CC是由Adobe公司推出的一款专业的动画制作软件，作为动画制作领域的一个重要工具，Animate CC拥有众多的功能和特点，其中最为突出的是其交互动画制作功能。
本文将以AnimateCC维动画设计与制作-第一单元：交互动画制作为主题，为大家介绍Animate CC 在交互动画制作方面的特点和应用。
1. 交互动画制作的基本概念交互动画制作是一种基于用户操作而产生的动画效果。
交互动画可以通过用户的输入、鼠标的移动、键盘事件的响应等多种形式来激活。
交互动画可以增强用户体验，提高网站或应用的交互性。
2. Animate CC的交互动画制作功能Animate CC是一个强大的交互动画制作工具，它的交互动画制作功能可以让用户很方便地创建出符合自己需求的交互动画效果，具体体现在以下几个方面：（1）图像与对象交互Animate CC可以直接与图像与对象进行交互，通过设置交互规则，用户可以让图像和对象自动地进行相互交互。
比如，可以通过设置鼠标点击事件，让图像翻转、旋转等。
（2）用户事件响应Animate CC可以对用户的各种事件进行响应，包括鼠标点击、鼠标悬停、滚轮事件等。
用户可以根据自己的需要，制定对应的事件响应规则，让用户在操作时，产生出不同的交互动画效果。
（3）特效制作Animate CC拥有多种交互动画特效制作功能，比如，可以制作出类似幻灯片效果的交互动画、通过设置特效，使图片翻页、旋转等效果等。
3. 如何制作交互动画在使用Animate CC进行交互动画制作时，需要掌握以下几个步骤：（1）确定交互动画的功能需求在进行交互动画之前，需要先了解自己想实现的功能并进行规划，例如，是需要开启鼠标悬停触发的效果，还是需要通过点击按钮触发效果。
（2）设计交互动画效果在确定功能需求后，需要对交互动画进行设计。
可以通过Animate CC提供的各种工具和面板制定出对应的交互动画效果。
Animate动画设计实例教程高职全套教学课件.(1)
Animate动画设计实例教程高职全套教学课件.一、教学内容本课件基于《Animate动画设计》教材第四章“动画制作基础”至第六章“交互式动画设计”，详细内容涉及动画制作的基本原理、关键帧动画、形变动画、遮罩动画、程序动画以及交互式动画的设计与实现。
二、教学目标1. 理解并掌握Animate动画设计的基本原理和操作流程。
2. 能够独立制作关键帧动画、形变动画、遮罩动画等常见类型的动画。
3. 学会设计和实现简单的交互式动画，提升动画作品的互动性和趣味性。
三、教学难点与重点教学难点：程序动画的逻辑设计、交互式动画的触发条件设置。
教学重点：关键帧动画的制作、遮罩动画的应用、交互式动画的设计与实现。
四、教具与学具准备1. 教具：电脑、投影仪、白板、标记笔。
2. 学具：电脑、Animate软件安装包、教程文档、随堂练习素材。
五、教学过程1. 导入：通过展示一组有趣的Animate动画作品，引发学生的兴趣，导入新课。
2. 理论讲解：a. 介绍动画制作的基本原理。
b. 讲解关键帧动画、形变动画、遮罩动画的制作方法。
c. 演示程序动画和交互式动画的设计与实现。
3. 实践操作：a. 指导学生制作一个简单的关键帧动画。
b. 让学生分组练习制作形变动画和遮罩动画。
c. 引导学生尝试设计一个简单的交互式动画。
4. 例题讲解：针对教学难点，讲解一个程序动画和交互式动画的实例。
5. 随堂练习：让学生根据所学内容，完成指定的动画制作任务。
六、板书设计1. 动画制作基本原理2. 关键帧动画制作步骤3. 形变动画与遮罩动画的应用4. 程序动画与交互式动画设计要点七、作业设计1. 作业题目：a. 制作一个关于四季变化的关键帧动画。
b. 利用遮罩动画制作一个水波荡漾的效果。
c. 设计一个简单的按钮，实现动画的播放与暂停。
2. 答案：a. 春季：植物生长、鲜花盛开；夏季：烈日炎炎、绿树成荫；秋季：落叶纷飞、果实累累；冬季：白雪皑皑、冰天雪地。
《Animate 动画设计实例教程》电子教案
《Animate 动画设计实例教程》电子教案第一章：Animate 简介1.1 课程目标了解Animate 的发展历程和基本功能。
掌握Animate 的工作界面和基本操作。
1.2 教学内容Animate 的起源和发展。
Animate 的工作界面和功能。
Animate 基本操作：新建文档、导入图片、创建形状等。
1.3 教学活动讲解Animate 的起源和发展。
演示Animate 的工作界面和功能。
引导学生进行实际操作，掌握Animate 基本操作。
1.4 教学评价学生能简述Animate 的起源和发展。
学生能操作Animate 进行基本操作。
第二章：动画原理与制作2.1 课程目标了解动画的基本原理。
掌握Animate 中的动画制作方法。
2.2 教学内容动画的基本原理：帧、时间、速度等。
Animate 中的动画制作方法：补间动画、逐帧动画等。
2.3 教学活动讲解动画的基本原理。
演示Animate 中的动画制作方法。
引导学生进行实际操作，制作简单的动画。
2.4 教学评价学生能理解动画的基本原理。
学生能使用Animate 制作简单的动画。
第三章：图形设计与编辑3.1 课程目标掌握Animate 中的图形设计工具。
学会使用Animate 进行图形的编辑和变形。
3.2 教学内容Animate 中的图形设计工具：线条、椭圆、矩形等。
图形的编辑和变形：移动、缩放、旋转、扭曲等。
3.3 教学活动讲解Animate 中的图形设计工具。
演示图形的编辑和变形方法。
引导学生进行实际操作，设计并编辑图形。
3.4 教学评价学生能熟练使用Animate 中的图形设计工具。
学生能对图形进行基本的编辑和变形。
第四章：色彩与阴影4.1 课程目标学会在Animate 中为对象添加色彩。
掌握在Animate 中创建和应用阴影效果。
4.2 教学内容为对象添加色彩：纯色、渐变、位图等。
创建和应用阴影效果：投影、发光等。
4.3 教学活动讲解如何为对象添加色彩。
学习使用AnimateCC进行动画制作和交互设计
学习使用AnimateCC进行动画制作和交互设计第一章：AnimateCC的介绍AnimateCC是Adobe公司开发的一款专业动画制作和交互设计软件。
它提供了丰富的工具和功能，可以帮助设计师轻松地创作出精美的动画效果和交互设计。
与其他动画制作软件相比，AnimateCC具有更多的创作灵活性和广泛的应用领域。
第二章：AnimateCC的基本操作在使用AnimateCC进行动画制作之前，我们需要了解软件的基本操作。
首先，打开AnimateCC后，我们会看到一个预览面板、时间轴和库面板等主要界面元素。
时间轴是动画制作的核心，可以让我们按照时间来组织动画元素的运动轨迹。
库面板则是存放各种素材资源，如图像、声音等。
通过拖动素材到舞台上，并在时间轴上设置运动帧，我们可以创作出各种动画效果。
第三章：动画制作技巧在动画制作过程中，一些技巧可以帮助我们创作出更加生动和有趣的动画效果。
首先是使用缓动效果，通过给动画元素设置缓动类型和缓动参数，可以让物体的运动更加柔和和自然。
其次是利用关键帧和补间动画，关键帧可以控制动画的起始和结束状态，补间动画可以在关键帧之间自动生成过渡动画。
此外，还可以运用遮罩效果、透明度、淡入淡出等特效，增加动画的层次感和视觉效果。
第四章：交互设计原理除了动画制作，AnimateCC也可以用于交互设计。
交互设计是指为用户提供更好的操作体验和功能实现的设计过程。
在交互设计中，需要考虑用户的心理行为和界面的易用性。
其中，心理行为包括用户的期望、认知、情感等，界面的易用性包括导航、反馈、可视性等方面。
通过合理的交互设计，可以提高产品的用户满意度和可用性。
第五章：动画与交互的结合动画和交互在设计中是相互关联的，在实际项目中常常需要将二者结合起来。
通过动画可以增强交互的可视化效果，使交互更加生动和直观。
例如，可以通过动画来引导用户注意和提示行为，提高用户对交互元素的点击率。
此外，动画还可以用于展示产品的功能和特性，吸引用户的注意和兴趣。
《Animate cc 2018动画设计与制作》教学课件—06基本动画制作
图6-47 自定义缓动
图6-48 添加节点并进行调节
6.8 摄像头动画
摄像头动画可以利用Animate CC 2018的“摄像头工具”来实现，利用该工具可以控制摄像头的摆位、平 移、放大、缩小以及旋转摄像头的特殊效果，指挥角色和对象在舞台上的运动。
图6-50 摄像头工具
图6-51 添加摄像头
图6-52摄像头图层与摄像头控制台
6.6 旋转动画
旋转动画是一种有别于传统的引导动画和基于对象补间动画的一种特殊动画，如风车的旋转、汽车车轮的 转动以及自行车车轮的转动等，都可以用旋转动画来实现。旋转有顺时针旋转和逆时针旋转两种，通过属性面 板中的旋转设置选项中的选项可以很容易实现效果设置。
6.7 自定义缓动动画
自定义缓动动画与前面学过的传统补间动画有很大不同，通过属性面板，利用“自定义缓动”功能可以准确 地模拟对象运动速度等属性的各种变化，使其更能符合对象的运动特性。
逐帧动画的创建除了外部导入方式创建，还有一种也比较常用的创建方式，即直接利用Animate CC 2018软件来制作逐帧动画，该方式相对于外部导入方式来说稍微复杂一些，需要制作每一个关键帧的内容， 来创建逐帧动画。
6.2逐帧动画
形状补间动画不同于逐帧动画，该动画是一种基于对象的动画，是一种全新的动画类型，通过形状补间便可 以创建类似于形变的动画效果，可使一个形状变为另一种形状，如圆变为长方形、长方形变为正方形、正方形变 为三角形等，此外，还可实现诸如人物衣服摆动、窗帘飘动、人物头发飘动以及牛象互变等动物形状的改变。
6.5 引导动画
引导动画也称之为引导层动画，是指动画对象沿着引导层中绘制的线条进行运动的动画。绘制的线条通 常是不封闭的，以便于Animate CC系统找到线条的头和尾（动画开始位置及结束位置）从而进行运动，被引 导层通常采用传统补间动画来实现运动效果，被引导层中的动画可与普通传统补间动画一样，设置除位置变 化外的其他属性，如：Alpha和大小等属性的变化。
AnimateCC维动画设计与制作-第单元：交互动画制作 (二)
AnimateCC维动画设计与制作-第单元：交互动画制作 (二)AnimateCC维动画设计与制作-第单元：交互动画制作本文将为大家介绍AnimateCC维动画设计与制作的第一单元：交互动画制作。
在这个单元中，我们将学习如何使用AnimateCC制作交互动画，包括按钮、鼠标交互和键盘交互等。
以下是本单元的具体内容：1. 按钮制作在AnimateCC中制作按钮非常简单。
首先，我们需要创建一个按钮对象。
在库面板中选择“按钮”选项，然后将其拖动到舞台上。
接下来，我们需要设置按钮的属性，包括名称、大小、位置和样式等。
最后，我们需要添加按钮的交互效果，例如当用户单击按钮时，可以跳转到另一个页面或执行某个动作等。
2. 鼠标交互鼠标交互是指当用户将鼠标指针悬停在某个对象上时，对象会发生变化。
在AnimateCC中，我们可以使用“鼠标事件”来实现鼠标交互。
例如，当用户将鼠标指针悬停在一个按钮上时，按钮可以变成另一种颜色或显示提示信息等。
3. 键盘交互键盘交互是指当用户按下键盘上的某个键时，对象会发生变化。
在AnimateCC中，我们可以使用“键盘事件”来实现键盘交互。
例如，当用户按下键盘上的空格键时，可以播放一个动画或跳转到另一个页面等。
总结本文介绍了AnimateCC维动画设计与制作的第一单元：交互动画制作。
在本单元中，我们学习了如何使用AnimateCC制作按钮、鼠标交互和键盘交互等交互动画。
通过本单元的学习，我们可以更好地掌握AnimateCC的基本技能，为后续的动画制作打下坚实的基础。
Animate CC课件制作案例教学经典教程PPT课件(共12章)第6章课件的交互与导航
给按钮实例命名
实 例 命 名 遵 循 以 下 的 简 单 规 则 。 （ 1 ） 除 下 画 线 外 ， 不 能 使 用 空 格 和 特 殊 标 点 符 号 。 （ 2 ） 不 能 以 数 字 开 头 。 （ 3 ） 区 分 大 小 写 。 （ 4 ） 建 议 按 钮 名 称 的 末 尾 用 “ _ b t n ” ， 虽 然 不 是 强 制 ， 但 有 助 于 对 按 钮 元 件 的 标 识 。 （5）不能使用 Flash ActionScript 关键字和预留的任何单词。 为每个按钮实例命名是为了更好地 被 AS3.0 引用，这容易被初学者忽略，但是它是至关重要的步骤，希望大家能够牢记。
（6）在“属性”面板中把 X 和 Y 值均设置为 0。“量筒” 图像左上角将与元件中心点对齐。
（7）在时间轴上选择“点击”帧，并选择“插 入”→“时 间轴”→“帧”命令，扩展时间轴。此时“量筒按钮”元 件将出现“弹起”、“指针经过”、“按 下”和“点击”4 种状态（如上图所示）。将元件命名为“Singer”，并设 置“类型”为“影片剪辑”
直接复制按钮元件
既然创建了一个按钮，其他按钮就容易创建了。只需要复制一个按钮，在下一节中更改图像和声 音，然后继续此操作直至所需按钮制作完毕。
在“库”面板中选中“量筒按钮”元件右击，在弹出的快捷菜单中选择“直接复制” 命令。在 “直接复制元件”对话框中选择类型为“按钮”，并重命名为“烧杯按钮”（如下图所示）。然 后单击“确定”按钮。
创建一个按钮
（1）在“库”面板上创建文件夹，命名为“仪器 按钮”。 （2）选择“插入”→“新建元件”命令。
（3）在“创建新建元件”对话框中，选择类型为“按钮” 并把文件命名为“量筒按钮”（如上图所示），单击“确 定”按钮，将按钮移至“仪器按钮”文件夹中。 （4）双击创建的“量筒按钮”，进入新建元件的编辑界 面。 （5）在“库”面板中，展开名为“新元件”的文件夹， 把图形元件“量筒”拖曳到“舞 台”中间（如下图所 示）。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
二维动画设计与制作 6.1： 平台、文档与脚本类型
二、Animate脚本简介
1.ActionScript 3.0 ActionScript（简称AS）是 Animate前身Flash所使用的脚本语 言，在Animate中依然可以使用（在 as3文档类型下）。它可以向应用程 序添加复杂的交互性、播放控制和数 据显示，其语法特点与javascript相 似。 2. CreateJS脚本 CreateJS即CreateJS库，属于 javascrpit库的一种，是一款主要为 HTML5游戏开发的引擎。
4
二维动画设计与制作
6.1： 平台、文档与脚本类型
二、Animate脚本简介
其它语言程序一样，animate的脚本包 括有函数、方法、属性、事件、类和语法。
3.脚本演示：用键盘移动的气球 4.一些术语： （1）实例名称：可以给舞台上的影片 剪辑和按钮命名，但图形元件不可以命名。 （2）属性：即舞台上对象的属性，如 坐标位置、大小等。 （3）值 （4）变量（变量名区分大小写） （5）事件：具体发生的一个操作，如 鼠标被按下、键盘被按下、剪辑被载入等。 脚本由事件触发，然后影片就可以对许多事 件做出反应。
注释行：通过在代码行的开头加 上双斜杠“//”可对其进行注释。
注释块：可以对若干行代码进行 注释，在代码块的开头加上一个斜杠 和一个星号“/*”，并在代码块的结 尾加上一个星号和一个斜杠“*/”
11
二维动画设计与制作 6.2： 动作面板的使用
二、代码注释
取消注释：将光标置于含有注释 的代码行中，或者选择已注释的代码 块，单击鼠标右键，在弹出的快捷菜 单中选择“取消注释”，或使用快捷 键Ctrl + Shift + M组合键即可取消 注释所选内容。
12
二维动画设计与制作 6.2： 动作面板的使用
三、使用动作码向导
动作码向导是Aniamte CC新增 加的功能，通过使用“动作”面板中 的“使用向导添加”选项，不需要手 动输入代码就可以将交互功能添加到 HTML5 组件中。要注意的是只有 HTML5 Canvas文档才支持动作码向 导。
13
二维动画设计与制作
8
二维动画设计与制作
第六单元：交互动画制作
6.2动作面板的使用
二维动画设计与制作 6.2： 动作面板的使用
一、动作面板的结构
动作面板包含以下两个窗格。 左侧窗格为“脚本导航器” 右侧窗格为“脚本”窗格
10
二维动画设计与制作 6.2： 动作面板的使用
二、代码注释
代码注释是代码中被脚本编译器 忽略的部分。代码注释可解释代码的 操作，让代码看上去更易理解，也可 以暂时停用不想删除的代码。代码注 释有两种形与制作 6.1： 平台、文档与脚本类型
二、Animate脚本简介
（13）注释：用//表示单行注释， /*…….*/表示中间的内容都为注释
（14）帧标签
三、Animate动作面板介绍
7
二维动画设计与制作 6.1： 平台、文档与脚本类型
四、使用代码片段添加AS（按键盘 移动小汽球）
1.给对象添加实例名称 2.给对象添加代码片段 3.修改代码片段 4.设置变量记录移动速度 5.通过两个按钮增加或减少速度 6.通过输入框和按钮来改变速度 7.控制气球的移动范围 五、使用代码片段添加HTML5脚本
1. ActionScript 3.0平台与脚本 ActionScript 3.0平台是面向PC 端的创作平台，在此平台下主要发布 传统的SWF动画，使用FlashPlayer 播放器播放。该平台使用的是 ActionScript 3.0脚本。
2
二维动画设计与制作
6.1： 平台、文档与脚本类型
一、不同平台与文档、脚本
二维动画设计与制作
第六单元：交互动画制作
项目五：小游戏制作 6.1 平台、文档与脚本类型 6.2代码片段的使用 6.3对象的属性 6.4使用animate脚本编写动画
二维动画设计与制作 6.1： 平台、文档与脚本类型
一、不同平台与文档、脚本
因为Animate CC可以创建跨平 台的影片和应用，所以在创建文档的 时候，需要选择某种文档类型，不同 类型的文档使用的编辑脚本也不一样 。
第六单元：交互动画制作
6.3代码片段的使用
二维动画设计与制作
6.3： 代码片段的使用
一、概念与类型
“代码片段”是Animate CC预 置的一些功能代码，它允许用户直接 在脚本窗口添加大量模块化的脚本代 码，而不需要任何JavaScript 或 ActionScript 3.0 方面的知识，从而 使得非编程人员能够轻松地为影片添 加交互功能。
2. HTML5 Canvas平台与脚本 HTML5 Canvas文档是Aniamte CC支持互联网，特别是移动互联网 环境的一种文档类型。HTML5是目 前非常火爆的新一代超文本标记语言 ，Canvas 是 HTML5 中的一个新元 素，它提供了多个 API，可以动态生 成及渲染图形、图表、图像及动画， 因此它对创建丰富的交互性 HTML5 内容提供本地支持。这样我们可以使 用传统的Animate 时间轴、工作区 及工具来创建内容，然后Animate会 自动通过CreateJS生成 HTML5 网页 输出。
代码片段主要有3类，分别是 ActionScript类、HTML5 Canvas类 和WebGL类，对应于3种不同的文档 类型，即每种文档类型只能使用对应 的代码片段。每种类型下面又根据不 同的代码功能进行了分类，
15
二维动画设计与制作 6.3： 代码片段的使用
5
二维动画设计与制作 6.1： 平台、文档与脚本类型
二、Animate脚本简介
（6）操作符：=、<、>、+、-、*、/ 等
（7）关键字：语法中具有特殊用途的 保留字词，它们不能用于变量、函数或标签 名称。
（8）变量与常量 （9）括号：大括号之间的内容可能是 一组操作，小括号中的内容一般是一个值。 （10）分号：语句之间用分号隔开 （11）点：一是用来表示到达指定时间 轴的目标路径，二是用来分隔对象名称与其 属性或要调用的方法 （12）引号：一般用来表示字符串