Adobe Animate MG動畫+UI動效設計實踐教程

程磊、廖丹、董雪

  • 出版商: 清華大學
  • 出版日期: 2024-08-01
  • 定價: $359
  • 售價: 8.5$305
  • 語言: 簡體中文
  • ISBN: 7302669937
  • ISBN-13: 9787302669937
  • 下單後立即進貨 (約4週~6週)

  • Adobe Animate MG動畫+UI動效設計實踐教程-preview-1
  • Adobe Animate MG動畫+UI動效設計實踐教程-preview-2
  • Adobe Animate MG動畫+UI動效設計實踐教程-preview-3
Adobe Animate MG動畫+UI動效設計實踐教程-preview-1

相關主題

商品描述

"《Adobe Animate MG動畫+UI動效設計實踐教程》採用理論與實踐相結合的教學方法,由理論引入,通過真實案例循循漸進完成對Adobe Animate軟件的介紹。 本書以Adobe Animate CC 2024版軟件介紹為前提,以軟件的實際應用為目的,所涉及的案例詳解可對UI動效、表情包、網頁加載動效、按鈕動效等方向在實際製作中提供一定的幫助,內容集作者多年教學經驗所得,力求內容全面、深入淺出、實用性強。《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