Animate動(dòng)畫設(shè)計(jì)教程（Animate CC 2018 微課版）

項(xiàng)目一 走進(jìn)Animate動(dòng)畫世界　1
任務(wù)一　認(rèn)識(shí)Animate動(dòng)畫\t2
一、任務(wù)目標(biāo)\t2
二、相關(guān)知識(shí)\t2
（一）Animate動(dòng)畫設(shè)計(jì)的優(yōu)勢(shì)\t2
（二）Animate動(dòng)畫的應(yīng)用領(lǐng)域\t3
（三）Animate動(dòng)畫文件類型\t5
（四）動(dòng)畫制作流程\t5
三、任務(wù)實(shí)施\t6
（一）打開Animate文件\t6
（二）預(yù)覽與發(fā)布動(dòng)畫\t7
任務(wù)二　制作“豹子奔跑”動(dòng)畫 \t8
一、 任務(wù)目標(biāo)\t8
二、相關(guān)知識(shí)\t8
（一）Animate CC 2018的工作界面\t9
（二）Animate CC 2018動(dòng)畫文件的基本操作\t11
三、任務(wù)實(shí)施\t13
（一）新建Animate文件\t13
（二）制作與預(yù)覽Animate動(dòng)畫\t14
實(shí)訓(xùn)一　轉(zhuǎn)換“放大鏡”動(dòng)畫的類型并發(fā)布\t14
實(shí)訓(xùn)二　調(diào)整“宇宙”動(dòng)畫的尺寸大小 \t15
課后練習(xí)\t\t\t16
技巧提升\t\t\t17
項(xiàng)目二 繪制與編輯圖形 18
任務(wù)一　繪制卡通小熊圖形 \t19
一、任務(wù)目標(biāo)\t19
二、相關(guān)知識(shí)\t19
（一）圖形圖像的基礎(chǔ)知識(shí)\t19
（二）幾何繪圖工具\(yùn)t21
（三）自由繪圖工具\(yùn)t25
（四）繪圖輔助工具\(yùn)t27
（五）選擇類工具\(yùn)t29
三、任務(wù)實(shí)施\t30
（一）繪制小熊頭部\t30
（二）繪制小熊的身體\t32
任務(wù)二　為“荷塘月色”填色 \t33
一、任務(wù)目標(biāo)\t33
二、相關(guān)知識(shí)\t34
（一）認(rèn)識(shí)顏色\t34
（二）“顏色”面板\t34
（三）“樣本”面板\t35
（四）編輯漸變填充\t35
（五）使用填充工具\(yùn)t37
三、任務(wù)實(shí)施\t38
（一）線性漸變填充\t38
（二）徑向漸變填充\t40
任務(wù)三　制作郊外場(chǎng)景 \t41
一、任務(wù)目標(biāo)\t41
二、相關(guān)知識(shí)\t41
（一）變形對(duì)象\t41
（二）翻轉(zhuǎn)對(duì)象\t43
（三）合并對(duì)象\t43
（四）組合與分離對(duì)象\t44
（五）排列與對(duì)齊對(duì)象\t45
三、任務(wù)實(shí)施\t46
（一）調(diào)整背景、草地、太陽和云\t46
（二）調(diào)整樹木、房屋和花\t47
實(shí)訓(xùn)一　繪制臉譜 \t48
實(shí)訓(xùn)二　繪制卡通場(chǎng)景 \t49
課后練習(xí)\t\t\t50
技巧提升\t\t\t51
項(xiàng)目三 添加與編輯文本 52
任務(wù)一　制作“音樂節(jié)”海報(bào) \t53
一、任務(wù)目標(biāo)\t53
二、相關(guān)知識(shí)\t53
（一）文本工具\(yùn)t53
（二）文本工具的“屬性”面板\t54
（三）“時(shí)間軸”面板\t54
三、任務(wù)實(shí)施\t56
任務(wù)二　制作招聘DM單\t59
一、 任務(wù)目標(biāo)\t59
二、相關(guān)知識(shí)\t60
（一）文本變形\t60
（二）文本填充\t61
（三）文本邊框\t61
三、任務(wù)實(shí)施\t61
（一）制作標(biāo)題文本\t61
（二）添加其他文本\t63
實(shí)訓(xùn)一　制作中秋橫幅廣告 \t64
實(shí)訓(xùn)二　制作環(huán)保宣傳廣告 \t64
課后練習(xí)\t\t\t65
技巧提升\t\t\t66
項(xiàng)目四 使用元件與素材 67
任務(wù)一　制作生日賀卡 \t68
一、任務(wù)目標(biāo)\t68
二、相關(guān)知識(shí)\t68
（一）認(rèn)識(shí)元件和實(shí)例\t68
（二）創(chuàng)建元件\t69
（三）編輯元件\t70
（四）為實(shí)例添加濾鏡效果\t70
（五）認(rèn)識(shí)“庫”面板\t72
（六）調(diào)用外部庫文件\t72
三、任務(wù)實(shí)施\t73
（一）從外部庫文件中調(diào)用素材\t73
（二）創(chuàng)建元件并添加濾鏡\t74
任務(wù)二　制作“水彩畫”動(dòng)畫\t75
一、 任務(wù)目標(biāo)\t75
二、相關(guān)知識(shí)\t75
（一）導(dǎo)入一般位圖\t75
（二）導(dǎo)入PSD文件\t76
（三）導(dǎo)入AI文件\t77
（四）將位圖轉(zhuǎn)換為矢量圖\t77
三、任務(wù)實(shí)施\t78
實(shí)訓(xùn)一　制作小池場(chǎng)景 \t80
實(shí)訓(xùn)二　制作夏日沙灘場(chǎng)景 \t81
課后練習(xí)\t\t\t81
技巧提升\t\t\t83
項(xiàng)目五 制作基本動(dòng)畫 84
任務(wù)一　制作“跳動(dòng)文字”動(dòng)畫 \t85
一、任務(wù)目標(biāo)\t85
二、相關(guān)知識(shí)\t85
（一）幀的編輯\t85
（二）圖層的運(yùn)用\t87
（三）動(dòng)畫播放控制\t91
三、任務(wù)實(shí)施\t92
（一）插入關(guān)鍵幀\t92
（二）添加效果\t93
任務(wù)二　制作“風(fēng)景相冊(cè)”動(dòng)畫\t94
一、 任務(wù)目標(biāo)\t94
二、相關(guān)知識(shí)\t95
（一）Animate的基本動(dòng)畫類型\t95
（二）各種動(dòng)畫在時(shí)間軸中的標(biāo)識(shí)\t96
（三）創(chuàng)建逐幀動(dòng)畫\t96
（四）創(chuàng)建補(bǔ)間形狀動(dòng)畫\t97
（五）創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫\t97
（六）創(chuàng)建補(bǔ)間動(dòng)畫\t98
三、任務(wù)實(shí)施\t98
（一）制作傳統(tǒng)補(bǔ)間動(dòng)畫\t98
（二）制作補(bǔ)間形狀動(dòng)畫\t100
任務(wù)三　制作“促銷廣告”動(dòng)畫\t101
一、 任務(wù)目標(biāo)\t101
二、相關(guān)知識(shí)\t102
（一）設(shè)置補(bǔ)間形狀動(dòng)畫屬性\t102
（二）設(shè)置傳統(tǒng)補(bǔ)間動(dòng)畫屬性\t103
（三）設(shè)置補(bǔ)間動(dòng)畫屬性\t104
三、任務(wù)實(shí)施\t105
（一）創(chuàng)建傳統(tǒng)補(bǔ)間動(dòng)畫和補(bǔ)間動(dòng)畫\t105
（二）為動(dòng)畫添加緩動(dòng)效果\t109
實(shí)訓(xùn)一　制作“汽車行駛”動(dòng)畫 \t109
實(shí)訓(xùn)二　制作“籃球”動(dòng)畫 \t110
課后練習(xí)\t\t\t111
技巧提升\t\t\t112
項(xiàng)目六 制作高級(jí)動(dòng)畫 113
任務(wù)一　制作“紙飛機(jī)”動(dòng)畫 \t114
一、任務(wù)目標(biāo)\t114
二、相關(guān)知識(shí)\t114
（一）引導(dǎo)動(dòng)畫原理\t114
（二）創(chuàng)建引導(dǎo)動(dòng)畫\t114
（三）引導(dǎo)動(dòng)畫的“屬性”面板\t115
（四）制作引導(dǎo)動(dòng)畫的注意事項(xiàng)\t116
三、任務(wù)實(shí)施\t116
（一）創(chuàng)建引導(dǎo)動(dòng)畫\t116
（二）設(shè)置引導(dǎo)動(dòng)畫的屬性\t117
任務(wù)二　制作“高山流水”動(dòng)畫\t118
一、 任務(wù)目標(biāo)\t118
二、相關(guān)知識(shí)\t119
（一）遮罩動(dòng)畫原理\t119
（二）創(chuàng)建遮罩層\t119
（三）創(chuàng)建遮罩動(dòng)畫的注意事項(xiàng)\t120
三、任務(wù)實(shí)施\t120
（一）創(chuàng)建補(bǔ)間動(dòng)畫\t120
（二）創(chuàng)建遮罩動(dòng)畫\t121
任務(wù)三　制作“人物行走”動(dòng)畫\t123
一、 任務(wù)目標(biāo)\t123
二、相關(guān)知識(shí)\t124
（一）認(rèn)識(shí)骨骼動(dòng)畫\t124
（二）添加骨骼\t124
（三）編輯骨骼\t125
（四）創(chuàng)建骨骼動(dòng)畫\t127
（五）設(shè)置骨骼動(dòng)畫的屬性\t128
三、任務(wù)實(shí)施\t128
（一）創(chuàng)建骨骼\t128
（二）編輯骨骼動(dòng)畫\t129
實(shí)訓(xùn)一　制作“楓葉飄落”動(dòng)畫 \t130
實(shí)訓(xùn)二　制作海浪效果 \t131
實(shí)訓(xùn)三　制作“舞蹈剪影”動(dòng)畫 \t132
課后練習(xí)\t\t\t133
技巧提升\t\t\t134
項(xiàng)目七 添加音頻和視頻 135
任務(wù)一　制作“音樂片頭”動(dòng)畫 \t136
一、任務(wù)目標(biāo)\t136
二、相關(guān)知識(shí)\t136
（一）聲音的格式\t136
（二）導(dǎo)入與添加聲音\t137
（三）修改與刪除聲音\t137
（四）設(shè)置聲音播放次數(shù)\t137
（五）設(shè)置聲音的屬性\t137
三、任務(wù)實(shí)施\t139
（一）添加背景音樂\t139
（二）添加按鈕音效\t139
任務(wù)二　制作“夜色朦朧”動(dòng)畫\t140
一、 任務(wù)目標(biāo)\t141
二、相關(guān)知識(shí)\t141
（一）視頻的格式\t141
（二）導(dǎo)入視頻文件\t141
三、任務(wù)實(shí)施\t143
（一）制作背景\t143
（二）導(dǎo)入視頻\t144
實(shí)訓(xùn)一　制作“有聲飛機(jī)”動(dòng)畫 \t144
實(shí)訓(xùn)二　制作“電視節(jié)目預(yù)告”動(dòng)畫 \t146
課后練習(xí)\t\t\t146
技巧提升\t\t\t147
項(xiàng)目八 制作腳本與組件動(dòng)畫 148
任務(wù)一　制作“動(dòng)態(tài)風(fēng)光”相冊(cè) \t149
一、任務(wù)目標(biāo)\t149
二、相關(guān)知識(shí)\t149
（一）JavaScript和CreateJS\t149
（二）“動(dòng)作”面板的使用\t150
（三）變量\t151
（四）數(shù)據(jù)類型\t152
（五）表達(dá)式和運(yùn)算符\t152
（六）函數(shù)\t154
（七）語句\t154
（八）時(shí)間軸導(dǎo)航函數(shù)\t156
（九）事件處理\t157
三、任務(wù)實(shí)施\t157
（一）添加圖片和按鈕\t157
（二）輸入腳本程序代碼\t158
任務(wù)二　制作“電子時(shí)鐘”動(dòng)畫\t161
一、 任務(wù)目標(biāo)\t161
二、相關(guān)知識(shí)\t161
（一）處理時(shí)間和日期\t161
（二）顯示動(dòng)態(tài)文本\t161
三、任務(wù)實(shí)施\t162
（一）繪制動(dòng)態(tài)文本框\t162
（二）輸入腳本程序代碼\t163
任務(wù)三　制作“雪花飛舞”動(dòng)畫\t164
一、 任務(wù)目標(biāo)\t164
二、相關(guān)知識(shí)\t165
（一）隨機(jī)函數(shù)\t165
（二）設(shè)置影片剪輯屬性\t165
（三）使用腳本從庫中創(chuàng)建對(duì)象\t166
三、任務(wù)實(shí)施\t166
（一）制作雪花飄落影片剪輯元件\t166
（二）輸入腳本程序代碼\t167
任務(wù)四　制作問卷調(diào)查表\t168
一、任務(wù)目標(biāo)\t168
二、相關(guān)知識(shí)\t168
（一）組件的類型\t168
（二）組件的操作\t169
（三）常用組件的使用\t169
（四）調(diào)試腳本程序\t171
三、任務(wù)實(shí)施\t173
（一）輸入文本并添加組件\t173
（二）輸入腳本程序代碼\t175
實(shí)訓(xùn)一　制作交互式滾動(dòng)廣告 \t177
實(shí)訓(xùn)二　制作“鐘表”動(dòng)畫 \t178
實(shí)訓(xùn)三　制作美食問卷調(diào)查表 \t179
課后練習(xí)\t\t\t180
技巧提升\t\t\t181
項(xiàng)目九 優(yōu)化、發(fā)布與導(dǎo)出動(dòng)畫 182
任務(wù)一　測(cè)試和優(yōu)化“雪夜”動(dòng)畫 \t183
一、任務(wù)目標(biāo)\t183
二、相關(guān)知識(shí)\t183
（一）測(cè)試動(dòng)畫\t183
（二）優(yōu)化動(dòng)畫\t184
三、任務(wù)實(shí)施\t186
（一）測(cè)試動(dòng)畫\t186
（二）優(yōu)化動(dòng)畫\t186
任務(wù)二　發(fā)布“恭賀新禧”動(dòng)畫\t189
一、 任務(wù)目標(biāo)\t189
二、相關(guān)知識(shí)\t189
（一）發(fā)布設(shè)置\t189
（二）發(fā)布動(dòng)畫\t193
三、任務(wù)實(shí)施\t193
任務(wù)三　導(dǎo)出“汽車廣告”動(dòng)畫\t194
一、 任務(wù)目標(biāo)\t194
二、相關(guān)知識(shí)\t195
（一）導(dǎo)出圖像\t195
（二）導(dǎo)出影片\t196
（三）導(dǎo)出視頻\t196
（四）導(dǎo)出GIF動(dòng)畫\t197
三、任務(wù)實(shí)施\t198
實(shí)訓(xùn)一　測(cè)試并發(fā)布“動(dòng)態(tài)風(fēng)光相冊(cè)” \t199
實(shí)訓(xùn)二　導(dǎo)出“有聲飛機(jī)”動(dòng)畫 \t200
課后練習(xí)\t\t\t201
技巧提升\t\t\t202
項(xiàng)目十 綜合案例 203
任務(wù)一　制作網(wǎng)站進(jìn)入動(dòng)畫 \t204
一、任務(wù)目標(biāo)\t204
二、相關(guān)知識(shí)\t204
（一）構(gòu)建Animate網(wǎng)站的常用技術(shù)\t204
（二）如何規(guī)劃Animate網(wǎng)站\t204
三、任務(wù)實(shí)施\t205
（一）制作進(jìn)入動(dòng)畫\t205
（二）制作網(wǎng)頁導(dǎo)航條動(dòng)畫\t209
任務(wù)二　制作“打地鼠”游戲\t214
一、任務(wù)目標(biāo)\t214
二、相關(guān)知識(shí)\t214
（一）Animate游戲概述\t214
（二）Animate游戲制作流程\t214
三、任務(wù)實(shí)施\t216
（一）制作動(dòng)畫界面\t216
（二）編輯元件\t218
（三）編輯交互式腳本\t225
（四）測(cè)試和發(fā)布動(dòng)畫\t226
實(shí)訓(xùn)一　制作“童年”MV \t227
實(shí)訓(xùn)二　制作“青蛙跳”游戲\t228
課后練習(xí)\t\t\t229
技巧提升\t\t\t230