动画交互技术：Animate CC 2020+CreateJS

　　本书是一本HTML5 Canvas交互动画的制作教程，使用中文版Animate CC 2020和CreateJS。AnimateCC 2020是Adobe公司**推出的专业化动画制作软件；CreateJS是基于HTML5开发的一套模块化的库 和工具。基于这些，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。 本书从教学实际需求出发，合理安排知识结构：将Animate CC 2020分解成工具使用和动画制作， 完成动画实现；从零开始、由浅入深、循序渐进地讲解CreateJS，实现动画的交互。本书将基本概念、 技巧集成在每章的实例中，便于深化理解，所用实例全面而实用。 全书共分为10章：第1、2章介绍Animate CC 2020，可快速掌握平台工具的使用和动画制作；第 3～8章从使用代码片断让平台为用户写代码开始学习CreateJS，逐渐到系统学习CreateJS，再到应用 CreateJS；第9、10章介绍两个综合应用，一个是游戏，另一个是网页短片。 本书可以作为高等院校计算机专业、非计算机专业本科生的教材，也可以作为对动画制作感兴趣 的读者的参考书。

　　黎红 单位：广东培正学院 职务、职称：专业负责人副教授性别：女 年龄：51 专业：数字媒体技术 学历：硕士 研究领域：计算机应用 图形图像 研究成果：著有《视频增强算法及其应用》《ACCESS数据库应用基础》《Photoshop平面图像处理教程》等。

第1章 Animate CC 2020基础1
1.1 Animate CC 2020的系统要求1
1.1.1 Windows操作系统要求1
1.1.2 Mac OS操作系统要求 2
1.2 Animate CC 2020的基本工作环境2
1.2.1 启动Animate CC 20202
1.2.2 新建文档3
1.2.3 工作区 4
1.3 Animate CC 2020的常用工具6
1.3.1 绘图工具6
1.3.2 其他工具7
1.4 Animate CC 2020基本术语7
1.4.1 元件7
1.4.2 绘制对象9
1.5 实例：茶广告首页的制作9
1.6 本章小结13
第2章 Animate CC 2020动画14
2.1 逐帧动画14
2.1.1 开始 15
2.1.2 操作步骤 15
2.2 补间动画17
2.2.1 开始18
2.2.2 操作步骤 18
2.3 形变动画20
2.3.1 开始21
2.3.2 操作步骤 21
2.4 遮罩动画23
2.4.1 开始24
2.4.2 操作步骤 24
2.5 摄像头动画27
2.6 其他类型动画29
2.6.1 骨骼动画 29
2.6.2 嘴形同步 29
2.6.3 VR30
2.6.4 资源变形工具31
2.7 本章小结32
第3章 Animate CC 2020动画 
代码片断33
3.1 时间轴导航33
3.1.1　时间轴导航代码片断详解34
3.1.2　实例35
3.2 动作39
3.2.1 动作代码片断详解39
3.2.2 实例41
3.3 事件处理函数45
3.4 动画46
3.4.1 动画代码片断详解46
3.4.2 实例48
3.5 CreateJS API50
3.5.1 CreateJS API代码片断详解50
3.5.2 实例一54
3.5.3 实例二57
3.6 组件63
 
IV
3.6.1 组件代码片断详解63
3.6.2 实例66
3.7 摄像头72
3.7.1 摄像头代码片断详解72
3.7.2 实例74
3.8 本章小结76
第4章 JavaScript基础78
4.1 JavaScript基本语法79
4.1.1 JavaScript基本规则79
4.1.2 JavaScript变量 81
4.1.3 JavaScript数据类型83
4.2 复合类型91
4.2.1　对象91
4.2.2 数组93
4.2.3 函数97
4.3 运算符99
4.3.1 算术运算符99
4.3.2 比较运算符99
4.3.3 赋值运算符 100
4.3.4 逻辑运算符 100
4.3.5 条件运算符 101
4.3.6 typeof运算符和instanceof
 运算符101
4.4 异常处理102
4.4.1 异常抛出语句102
4.4.2 异常捕捉语句102
4.4.3 实例 103
4.5 流程控制103
4.5.1 顺序 104
4.5.2 分支 104
4.5.3 循环 107
4.6 实例110
4.7 本章小结113
第5章 CreateJS基础——EaselJS114
5.1 EaselJS简介114
5.2 CreateJS概述116
5.3 EaselJS文本117
5.3.1 开始 118
5.3.2 Text119
5.3.3 Shadow属性121
5.3.4 实例 122
5.4 EaselJS绘图123
5.4.1　开始 123
5.4.2　Graphics123
5.4.3　Shape125
5.4.4 Filter属性 126
5.4.5　Shadow属性129
5.4.6　实例一130
5.4.7　实例二131
5.5 EaselJS容器133
5.6 本章小结135
第6章 CreateJS基础——EaselJS 
图片136
6.1 EaselJS图片136
6.1.1 图片 136
6.1.2 sourceRect属性 138
6.1.3 Shadow属性139
6.1.4 Filter属性 140
6.1.5 Mask属性 144
6.1.6 实例 145
6.2 Sprite147
6.2.1 Sprite147
6.2.2 SpriteSheet148
6.2.3 一帧动画151
6.2.4 动画 153
6.3 本章小结154
 
V
第7章 CreateJS基础——EaselJS 
事件155
7.1 帧循环事件155
7.1.1 Ticker156
7.1.2 侦听器157
7.1.3 Ticker使用158
7.2 动画基础160
7.2.1 三角学160
7.2.2 圆与椭圆168
7.2.3 波171
7.3 遮罩动画176
7.3.1 程序帧实现遮罩动画原理177
7.3.2 X光机 178
7.3.3 你看见了什么179
7.4 神奇的tick事件179
7.4.1 下雪 179
7.4.2 冒泡 182
7.4.3 红包雨184
7.4.4 数字雨185
7.4.5 动态曲线186
7.4.6 图片轮播188
7.4.7 星星鼠标191
7.5 鼠标事件192
7.5.1 舞台的鼠标事件193
7.5.2 显示对象的鼠标事件195
7.5.3 实例 197
7.6 小应用199
7.6.1 制作相册199
7.6.2　制作简易计算器202
7.7 本章小结205
第8章 CreateJS基础——TweenJS、 
ProloadJS、SoundJS206
8.1 TweenJS206
8.1.1 Tween 206
8.1.2 应用 211
8.2 ProloadJS212
8.2.1 LoadQueue212
8.2.2 应用 213
8.3 SoundJS215
8.3.1 Sound215
8.3.2 应用 219
8.4 碰撞检测220
8.4.1 基础语句220
8.4.2 应用 221
8.5 本章小结225
第9章 小游戏制作226
9.1 制作小游戏226
9.1.1 什么是小游戏226
9.1.2 小游戏制作方法227
9.2 设计思路227
9.2.1 捕蝴蝶设计思路227
9.2.2 制作捕蝴蝶流程 228
9.3 制作捕蝴蝶小游戏228
9.3.1 制作捕一只蝴蝶小游戏228
9.3.2 制作捕一群蝴蝶小游戏232
9.4 本章小结236
第10章 动画短片制作237
10.1 剧本237
10.1.1 故事237
10.1.2 剧本内容238
10.2 分镜剧本239
10.2.1 动画分镜239
10.2.2 分镜稿 239
10.3 幕制作241
10.3.1 幕场景制作242
10.3.2 幕交互243
10.4 第二幕制作244
 
10.4.1 第二幕场景制作244
10.4.2 第二幕交互244
10.5 第三幕制作245
10.5.1 第三幕场景制作245
10.5.2 第三幕交互247
10.6 制作“六一”礼物248
10.6.1 “六一”礼物场景制作249
10.6.2 “六一”礼物交互249
10.6.3 编写完整代码 250
10.7 本章小结254
参考文献256
附录257