從目前動畫的發展趨勢來看，瀏覽器的功能越來越強大，包括對三維的支持都在飛速發展，所以，未來網頁動畫、跨平臺動畫將是一個潮流。
而Animate cc是由Flash發展而來的，它非常成熟的矢量動畫制作功能及它對新事物的支持能力，比如VR、攝像機等等，及它在交互這塊對HTML5 Canvas的支持，采用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件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.2Graphics123

5.4.3Shape125

5.4.4 Filter屬性 126

5.4.5Shadow屬性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