Adobe Animate MG動畫+UI動效設計實踐教程
程磊、廖丹、董雪
相關主題
商品描述
目錄大綱
目 錄
第 1章 MG動畫的概述 ..................................................................................................1
1.1 MG動畫歷史 ................................................................................................................ 2
1.2 MG動畫的應用 ............................................................................................................ 3
1.2.1 企業宣傳 ................................................................................................................................... 3
1.2.2 動態海報 ................................................................................................................................... 4
1.2.3 廣告 ........................................................................................................................................... 4
1.2.4 科教宣傳 ................................................................................................................................... 6
1.2.5 影視節目包裝 ........................................................................................................................... 6
1.2.6 動態 LOGO ............................................................................................................................... 7
1.2.7 音樂 MV .................................................................................................................................... 7
第 2章 UI動效的概述 ....................................................................................................9
2.1 UI概念 ........................................................................................................................... 9
2.2 UI動效時長 ................................................................................................................... 9
2.3常見的 UI動效應用 ...................................................................................................... 9
2.3.1 導航欄動效 ............................................................................................................................. 10
2.3.2 移動端頁面切換動效 ............................................................................................................. 10
2.3.3 按鈕動效 ................................................................................................................................. 10
2.3.4加載界面動效 ......................................................................................................................... 11
2.3.5 動態網頁 ................................................................................................................................. 12
第 3章設計基本原理 ...................................................................................................14
3.1視頻基礎知識 .............................................................................................................. 14
3.1.1 屏幕寬高比 ............................................................................................................................. 14
3.1.2 視頻顯示分辨率 ..................................................................................................................... 15
3.1.3 幀速率 ..................................................................................................................................... 15
3.1.4 視頻封裝及編碼格式 ............................................................................................................. 15
3.2圖形設計原理 .............................................................................................................. 16
3.2.1 對稱 ......................................................................................................................................... 16
3.2.2 對比 ......................................................................................................................................... 16
3.2.3 對齊 ......................................................................................................................................... 16
3.2.4 相似 ......................................................................................................................................... 16
3.2.5 重復 ......................................................................................................................................... 17
3.2.6 空間 ......................................................................................................................................... 17
·VI· Adobe Animate MG動畫+UI動效設計實踐教程
3.3視覺暫留原理 .............................................................................................................. 17
3.4動畫設計原理 .............................................................................................................. 17
3.4.1 擠壓和拉伸 ............................................................................................................................. 18
3.4.2 預備動作 ................................................................................................................................. 18
3.4.3 漸入漸出（緩入緩出） ......................................................................................................... 18
3.4.4 慣性與重疊 ............................................................................................................................. 19
3.5敘事技巧 ...................................................................................................................... 19
3.5.1 景別 ......................................................................................................................................... 19
3.5.2 構圖的表現對象 ..................................................................................................................... 22
3.5.3 影視構圖的常見基本形式 ..................................................................................................... 22
3.5.4 構圖的基本原則 ..................................................................................................................... 25
3.5.5 鏡頭的角度 ............................................................................................................................. 26
3.5.6 鏡頭的運動方式 ..................................................................................................................... 27
3.5.7 軸線 ......................................................................................................................................... 28
3.5.8 常用剪輯及轉場方式 ............................................................................................................. 29
3.6動態界面設計 .............................................................................................................. 32
3.6.1 界面動效設計需考慮的問題 ................................................................................................. 32
3.6.2 界面動效常見轉場形式 ......................................................................................................... 32
第 4章素材導入與應用................................................................................................34
4.1聲音的理解 .................................................................................................................. 34
4.1.1 聲音的分類 ............................................................................................................................. 34
4.1.2 聲畫關系 ................................................................................................................................. 35
4.2聲音在 AN中的應用 .................................................................................................. 35
4.2.1 AN支持的聲音格式............................................................................................................... 35
4.2.2 聲音在 AN中導入 ................................................................................................................. 36
4.2.3 聲音在 AN中編輯 ................................................................................................................. 36
4.2.4 禁用及刪除導入聲音 ............................................................................................................. 37
4.2.5 其他註意事項 ......................................................................................................................... 38
4.3靜態素材的導入 .......................................................................................................... 38
4.3.1 靜態素材格式 ......................................................................................................................... 38
4.3.2 位圖在 AN中的導入及應用 .................................................................................................. 38
4.3.3 其他軟件源文件導入及應用 ................................................................................................. 40
4.3.4 實例—MG動畫：媒婆動畫 .............................................................................................. 42
4.4動態素材的導入 .......................................................................................................... 43
4.4.1 可導入的視頻格式 ................................................................................................................. 43
4.4.2 導入視頻 ................................................................................................................................. 43
目錄 ·VII·
第 5章初識 Animate ....................................................................................................47
5.1軟件介紹 ...................................................................................................................... 47
5.2源文件介紹 .................................................................................................................. 48
5.2.1 創建源文件 ............................................................................................................................. 48
5.2.2 保存源文件 ............................................................................................................................. 49
5.2.3 關閉源文件及退出軟件 ......................................................................................................... 50
5.2.4 打開源文件 ............................................................................................................................. 50
5.2.5 修改源文件屬性 ..................................................................................................................... 51
5.2.6 源文件類型介紹 ..................................................................................................................... 52
5.3軟件界面介紹 .............................................................................................................. 52
5.3.1 軟件界面顏色設置 ................................................................................................................. 52
5.3.2 工作區佈局 ............................................................................................................................. 53
5.3.3 面板的調整 ............................................................................................................................. 53
5.3.4 “傳統”模式下界面佈局介紹 .............................................................................................. 54
第 6章繪圖工具 ..........................................................................................................58
6.1繪制線條工具介紹 ...................................................................................................... 58
6.1.1線條工具 ................................................................................................................................. 58
6.1.2 實例—繪制馬路線 ............................................................................................................. 60
6.1.3 鉛筆工具和畫筆工具 ............................................................................................................. 63
6.1.4 鋼筆工具組 ............................................................................................................................. 63
6.1.5 實例—UI桃心圖標製作 .................................................................................................... 64
6.1.6 寬度工具 ................................................................................................................................. 65
6.1.7 其他可繪制的線條工具 ......................................................................................................... 66
6.2繪制圖形工具介紹 ...................................................................................................... 66
6.2.1 傳統畫筆工具 ......................................................................................................................... 67
6.2.2 流暢畫筆工具 ......................................................................................................................... 68
6.2.3 矩形工具 ................................................................................................................................. 68
6.2.4 基本矩形工具 ......................................................................................................................... 69
6.2.5 橢圓工具 ................................................................................................................................. 70
6.2.6 基本橢圓工具 ......................................................................................................................... 70
6.2.7 多角星形工具 ......................................................................................................................... 70
6.2.8 實例—UI圖標製作 ............................................................................................................ 71
6.2.9 滴管工具 ................................................................................................................................. 75
6.2.10 墨水瓶工具 ........................................................................................................................... 75
6.2.11 顏料桶工具 ........................................................................................................................... 75
6.2.12 漸變變形工具 ....................................................................................................................... 75
6.3創建畫筆功能介紹 ...................................................................................................... 77
·VIII· Adobe Animate MG動畫+UI動效設計實踐教程
6.3.1 創建畫筆方法 ......................................................................................................................... 77
6.3.2 創建畫筆類型 ......................................................................................................................... 77
6.3.3 實例—MG動畫：自定義線條樣式 .................................................................................. 78
第 7章圖形的選取及修改 ............................................................................................80
7.1選取工具 ...................................................................................................................... 80
7.1.1 套索工具 ................................................................................................................................. 80
7.1.2 多邊形工具 ............................................................................................................................. 80
7.1.3 魔術棒工具 ............................................................................................................................. 81
7.2修改工具 ...................................................................................................................... 81
7.2.1 橡皮工具 ................................................................................................................................. 81
7.2.2 任意變形工具 ......................................................................................................................... 82
7.2.3 部分選取工具 ......................................................................................................................... 82
7.3可選取可修改工具 ...................................................................................................... 82
7.3.1 修改圖形邊緣方法 ................................................................................................................. 83
7.3.2 修改圖形邊角方法 ................................................................................................................. 83
7.3.3 添加新錨點修改圖形 ............................................................................................................. 83
7.3.4 直接復制圖形 ......................................................................................................................... 83
7.4多圖形處理方式 .......................................................................................................... 83
7.4.1 基本處理功能 ......................................................................................................................... 83
7.4.2 圖形屬性及轉換方法介紹 ..................................................................................................... 84
7.4.3 圖形排列 ................................................................................................................................. 86
7.4.4 “對齊”面板 ......................................................................................................................... 87
7.4.5 實例—MG動畫：越野車繪制 .......................................................................................... 87
第 8章時間軸與基礎動畫製作 .....................................................................................93
8.1幀的介紹 ...................................................................................................................... 93
8.1.1 自動關鍵幀 ............................................................................................................................. 93
8.1.2 幀的顯示 ................................................................................................................................. 93
8.1.3 幀的不同類型 ......................................................................................................................... 94
8.1.4 幀的常用命令 ......................................................................................................................... 94
8.1.5 實例—UI動效：逐幀動畫 ................................................................................................ 96
8.2圖層的介紹 .................................................................................................................. 98
8.2.1 圖層的基本操作 ..................................................................................................................... 98
8.2.2 圖層的控制 ............................................................................................................................. 99
8.3繪圖紙外觀功能 ........................................................................................................ 101
8.3.1 功能介紹 ............................................................................................................................... 101
8.3.2 實例—MG動畫：寫字 .................................................................................................... 102
8.4補間形狀動畫 ............................................................................................................ 105
目錄 ·IX·
8.4.1 基本內容介紹 ....................................................................................................................... 105
8.4.2 實例—UI動效：補間形狀動畫製作 .............................................................................. 105
8.4.3 實例—MG動畫：變形動畫............................................................................................ 107
8.5傳統補間動畫 ............................................................................................................ 108
8.5.1 功能介紹 ............................................................................................................................... 108
8.5.2 實例—MG動畫：寫字動畫............................................................................................ 109
8.6補間動畫 .................................................................................................................... 110
第 9章文本與動畫 ..................................................................................................... 111
9.1文本基本內容介紹 .................................................................................................... 111
9.1.1 文本的分類 ........................................................................................................................... 111
9.1.2 文本的創建 ........................................................................................................................... 111
9.2基本文本屬性 ............................................................................................................ 112
9.2.1 字符 ....................................................................................................................................... 112
9.2.2 段落 ....................................................................................................................................... 112
9.2.3 選項 ....................................................................................................................................... 112
9.2.4 濾鏡 ....................................................................................................................................... 113
9.3拆分字符 .................................................................................................................... 114
9.4實例—文本動畫： Logo動效 ............................................................................... 115
第 10章元件與動畫 ................................................................................................... 122
10.1 元件創建與存儲 ...................................................................................................... 122
10.1.1 創建元件 ............................................................................................................................. 122
10.1.2元件存儲 ............................................................................................................................. 122
10.2元件類型 .................................................................................................................. 123
10.2.1 元件類型介紹 ..................................................................................................................... 123
10.2.2 實例—UI動效：齒輪圖標自轉動畫 ............................................................................ 124
10.2.3 實例—UI動效：數字加載動畫 .................................................................................... 126
10.2.4 實例—MG動畫：濾鏡效果松樹繪制 .......................................................................... 129
10.2.5 實例—基礎按鈕 ............................................................................................................. 130
10.2.6 實例—動態按鈕 ............................................................................................................. 131
第 11章升級動畫 ...................................................................................................... 134
11.1 父子關系動畫 .......................................................................................................... 134
11.1.1 建立父子關系 ..................................................................................................................... 134
11.1.2 解除及更改父子關系 ......................................................................................................... 134
11.2 遮罩動畫 .................................................................................................................. 135
11.2.1 遮罩層的建立與解除 ......................................................................................................... 135
11.2.2 遮罩層註意事項 ................................................................................................................. 135
·X· Adobe Animate MG動畫+UI動效設計實踐教程
11.2.3 實例—UI動效：進度條加載動畫 ................................................................................ 135
11.3 引導線動畫 .............................................................................................................. 138
11.3.1 建立引導關系 ..................................................................................................................... 138
11.3.2 引導關系註意事項 ............................................................................................................. 138
11.3.3 其他功能 ............................................................................................................................. 138
11.3.4 實例—MG動畫：星空動畫 .......................................................................................... 139
11.4 圖層混合動畫 .......................................................................................................... 143
11.4.1 混合模式建立 ..................................................................................................................... 143
11.4.2 混合模式理解 ..................................................................................................................... 144
11.4.3 實例—UI動效：Logo變色動畫 ................................................................................... 144
11.5 攝像頭動畫 .............................................................................................................. 145
11.5.1 啟用及關閉攝像頭 ............................................................................................................. 145
11.5.2 攝像頭的運動方式 ............................................................................................................. 146
11.5.3攝像頭圖層色調設置 ......................................................................................................... 147
11.5.4圖層深度功能 ..................................................................................................................... 147
11.5.5附加或分離攝像頭圖層控制功能 ...................................................................................... 148
11.5.6 實例 —MG動畫：越野車動畫 ...................................................................................... 149
11.6 3D動畫 .................................................................................................................... 158
11.6.1 調整 3D工具 ...................................................................................................................... 158
11.6.2 實例—UI動效：3D翻轉動畫 ...................................................................................... 159
11.7 骨骼動畫 .................................................................................................................. 162
11.7.1 對元件添加骨骼 ................................................................................................................. 162
11.7.2 控制骨骼方式 ..................................................................................................................... 162
11.7.3 實例—MG動畫：台燈動畫 .......................................................................................... 162
11.7.4 對形狀添加骨骼 ................................................................................................................. 165
11.7.5 綁定工具 ............................................................................................................................. 166
11.7.6 骨骼約束 ............................................................................................................................. 166
11.7.7 骨骼彈簧 ............................................................................................................................. 167
11.8資源變形動畫 .......................................................................................................... 167
11.8.1資源變形工具 ..................................................................................................................... 167
11.8.2“資源變形工具”與“骨骼工具”的差異 ...................................................................... 168
11.8.3 “資源變形工具”的其他功能 .......................................................................................... 168
11.8.4 實例—MG動畫：飄揚的旗幟 ...................................................................................... 168
11.9 緩動動畫 .................................................................................................................. 171
11.9.1 形狀及傳統補間動畫緩動效果 .......................................................................................... 171
11.9.2 補間動畫的緩動效果 ......................................................................................................... 172
11.10默認動畫 ................................................................................................................ 173
目錄 ·XI·
11.11交互動畫 ................................................................................................................ 174
第 12章 Animate發布格式 ........................................................................................ 177
12.1 導出 PNG序列幀 .................................................................................................... 177
12.1.1 元件導出 PNG序列 ........................................................................................................... 177
12.1.2 場景內容導出 PNG序列 ................................................................................................... 178
12.2 導出 GIF格式文件 ................................................................................................. 179
12.3 導出 SVG格式文件 ................................................................................................ 180
12.4 導出視頻 .................................................................................................................. 181
12.5 導出其他格式 .......................................................................................................... 181
12.5.1 導出 SWF文件 ................................................................................................................... 182
12.5.2 導出放映文件 ..................................................................................................................... 182
12.5.3 導出其他靜態圖片格式 ..................................................................................................... 183
12.6 與 Adobe其他視頻軟件協作 ................................................................................. 183
12.6.1 AN與 Premiere Pro協作 .................................................................................................... 183
12.6.2 AN與 After Effects協作 .................................................................................................... 183
參考文獻 ....................................................................................................................... 185
