張曉景,暢銷書作者,Adobe 專家委員會成員 Adobe 網頁設計師認證講師Adobe UI設計工程師 國家信息產業部653工程講師 參與國家開放大學網頁設計和網頁界面設計課程體系開發。從事平面設計、網站設計和UI設計多年,參與開發過數十個多媒體商業網站。對UI設計風格有獨特見解。有豐富的教學經驗,為中國石油、中國鐵路等大型企業做專業企業培訓,曾在中國傳媒大學、北京大學、北京師范大學、北京交通大學等重點院校以及Adobe創意大學和新東方等培訓機構教授設計課程。
第1 章 初識Edge Animate CC
1.1 Edge Animate 簡介.......................... 002
1.1.1 Edge Animate 的誕生.....................................003
1.1.2 Edge Animate 概述.........................................003
1.1.3 Edge Animate 功能簡介.................................003
1.2 Edge Animate CC 2015 的安裝 ?
和卸載............................................. 006
1.2.1 Edge Animate CC 的系統要求.......................006
1.2.2 安裝Edge Animate CC..................................006
1.2.3 卸載Edge Animate CC..................................007
1.2.4 啟動Edge Animate CC..................................008
1.3 Edge Animate CC 的工作界面............ 009
1.3.1 Edge Animate CC 的歡迎界面.......................009
1.3.2 認識Edge Animate CC 的操作界面..............011
1.4 Edge Animate CC 的菜單欄............... 013
1.4.1 “文件”菜單................................................013
1.4.2 “編輯”菜單................................................014
1.4.3 “顯示”菜單................................................015
1.4.4 “修改”菜單................................................016
1.4.5 “時間軸”菜單.............................................017
1.4.6 “窗口”菜單................................................019
1.4.7 “幫助”菜單................................................020
1.5 Edge Animate CC 中的面板............... 020
1.5.1 工具欄............................................................020
1.5.2 舞臺................................................................022
1.5.3 “時間軸”面板.............................................024
1.5.4 “屬性”面板................................................025
1.5.5 “元素”面板................................................025
1.5.6 “庫”面板....................................................025
1.5.7 “教程”面板................................................026
1.6 自定義Edge Animate CC 的工作界面.. 027
1.6.1 手動調整默認工作界面.................................027
1.6.2 自定義工作界面.............................................028
1.6.3 刪除工作界面................................................029
1.6.4 重置工作界面................................................029
1.7 本章小結......................................... 030
第2 章 Edge Animate CC 的基本操作
2.1 新建Edge Animate 項目文件............. 032
2.1.1 新建空白的Edge Animate 項目文件.............033
2.1.2 設置舞臺屬性................................................033
2.1.3 捕獲圖像與低版本舞臺.................................037
2.1.4 設置項目文件的預載效果.............................040
2.1.5 從模板新建Edge Animate 項目文件.............041
2.2 Edge Animate CC 文件的基本操作...... 042
2.2.1 打開Edge Animate 文件................................042
2.2.2 關閉Edge Animate 文件................................042
2.2.3 直接保存Edge Animate 文件.........................042
2.2.4 另存為Edge Animate CC 文件......................043
2.2.5 保存為Edge Animate 模板文件.....................043
2.3 應用標尺和導軌................................ 044
2.3.1 顯示/ 隱藏舞臺標尺.....................................044
2.3.2 創建導軌........................................................044
2.3.3 貼緊至導軌....................................................044
2.3.4 顯示/ 隱藏導軌.............................................045
2.4 使用模板制作Edge Animate 動畫....... 045
2.4.1 下載Edge Animate 模板................................046
2.4.2 使用文章展示模板.........................................046
2.5 本章小結......................................... 050
第3 章 繪制圖形與導入外部素材
3.1 使用Edge Animate CC 中的基本 ????????????
繪圖工具......................................... 052
3.1.1 認識Edge Animate CC 中的繪圖工具..........053
3.1.2 繪制矩形........................................................053
3.1.3 繪制圓角矩形................................................054
3.1.4 繪制橢圓形....................................................054
3.2 導入外部素材................................... 055
3.2.1 支持的圖像素材格式.....................................055
3.2.2 導入位圖素材................................................055
3.2.3 導入矢量素材................................................057
3.3 圖形對象屬性設置............................. 058
3.3.1 顯示與隱藏屬性.............................................058
3.3.2 位置和尺寸屬性.............................................061
3.3.3 背景顏色和邊框屬性.....................................065
3.3.4 設置純色........................................................066
3.3.5 設置漸變顏色................................................071
3.3.6 變形屬性........................................................072
3.3.7 光標效果屬性................................................077
3.3.8 角效果屬性....................................................078
3.3.9 陰影效果屬性................................................080
3.3.10 濾鏡效果屬性...............................................083
3.3.11 剪裁屬性......................................................085
3.3.12 輔助屬性......................................................088
3.4 素材圖像的屬性設置.......................... 088
3.4.1 圖像布局的偏好設置.....................................088
3.4.2 圖像屬性........................................................093
3.5 多對象的操作................................... 097
3.5.1 對齊操作........................................................097
3.5.2 分布操作........................................................097
3.5.3 排列操作........................................................098
3.6 本章小結......................................... 099
第4 章 添加和格式化文本
4.1 在動畫中添加文字............................. 102
4.1.1 在動畫中添加文字的幾種方法.....................102
4.1.2 在動畫中添加文字.........................................103
4.2 設置文字屬性................................... 105
4.3 添加字體......................................... 108
4.3.1 添加Edge Web 字體......................................108
4.3.2 添加和使用中文字體.....................................109
4.4 剪裁文本邊緣................................... 112
4.5 使用文字特效................................... 114
4.5.1 文字陰影效果................................................115
4.5.2 文字彈跳效果................................................118
4.5.3 文字鏈接........................................................120
4.6 Edge Animate 中的HTML 標簽......... 126
4.7 本章小結......................................... 127
第5 章 使用時間軸制作動畫
5.1 關于元素層...................................... 130
5.1.1 元素層的類型................................................130
5.1.2 選擇元素層....................................................131
5.2 編輯元素層...................................... 132
5.2.1 為元素層重命名.............................................132
5.2.2 復制元素層....................................................133
5.2.3 調整元素層順序.............................................133
5.2.4 展開/ 折疊元素層屬性.................................134
5.2.5 設置元素層顏色.............................................135
5.3 元素層的狀態................................... 135
5.3.1 顯示和隱藏元素層.........................................135
5.3.2 鎖定和解鎖元素層.........................................136
5.4 “時間軸”面板................................ 136
5.4.1 認識“時間軸”面板.....................................137
5.4.2 使用快捷鍵控制時間軸.................................139
5.5 “時間軸”面板的基本操作................. 140
5.5.1 設置“時間軸”面板網格.............................140
5.5.2 在“時間軸”面板中添加標簽.....................141
5.5.3 編輯標簽........................................................141
5.5.4 制作開場動畫................................................142
5.6 使用“緩和”動畫效果....................... 145
5.6.1 “緩和”效果詳解.........................................145
5.6.2 制作網站廣告條.............................................146
5.6.3 制作紙飛機飛行動畫.....................................149
5.6.4 制作模糊入場動畫.........................................153
5.7 本章小結......................................... 156
第6 章 使用觸發動作腳本
6.1 了解觸發動作................................... 158
6.1.1 什么是觸發....................................................158
6.1.2 “動作”窗口................................................159
6.1.2 “觸發”窗口................................................161
6.2 在動畫中使用動作............................. 162
6.2.1 為元素添加動作.............................................162
6.2.2 觸發事件詳解................................................165
6.2.3 動作詳解........................................................166
6.2.4 為文字元素添加動作.....................................173
6.2.5 編輯動作........................................................177
6.2.6 刪除動作........................................................177
6.3 舞臺動作的使用方法.......................... 178
6.3.1 舞臺觸發事件詳解.........................................178
6.3.2 為舞臺添加動作.............................................178
6.4 時間軸動作的使用方法....................... 182
6.4.1 時間軸觸發事件詳解.....................................182
6.4.2 添加時間軸動作使動畫循環播放.................182
6.4.3 添加觸發動作到某個時間點.........................185
6.5 非線性思考與設計............................. 189
6.6 適用于iOS 和Android 系統的動作....... 194
6.7 本章小結......................................... 198
第7 章 符號元素在動畫中的應用
7.1 符號元素概述................................... 200
7.2 創建符號......................................... 201
7.2.1 轉換為符號元素.............................................201
7.2.2 導出符號........................................................202
7.2.3 導入符號........................................................202
7.3 使用符號元素................................... 203
7.3.1 將符號應用到舞臺.........................................203
7.3.2 在動畫中創建和使用符號元素.....................203
7.3.3 編輯符號........................................................207
7.3.4 復制符號........................................................208
7.3.5 重命名符號....................................................208
7.3.6 刪除符號........................................................209
7.4 符號元素時間軸的運用....................... 209
7.5 使用滑過變換動畫創建按鈕符號........... 213
7.5.1 制作基礎網頁按鈕動畫.................................213
7.5.2 制作復雜網頁按鈕動畫.................................216
7.6 創建導航菜單動畫............................. 220
7.6.1 制作垂直導航菜單.........................................220
7.6.2 制作下拉導航菜單.........................................225
7.7 使用滑過變換動作創建文字標注........... 233
7.8 本章小結......................................... 235
第8 章 多媒體元素在動畫中的應用
8.1 在Edge Animate 動畫中使用音頻....... 238
8.1.1 Edge Animate 所支持的音頻格式..................239
8.1.2 設置音頻屬性................................................239
8.1.3 對動畫中的音頻進行控制.............................246
8.2 在Edge Animate 動畫中嵌入視頻....... 250
8.2.1 Edge Animate 所支持的視頻格式..................250
8.2.2 設置視頻屬性................................................250
8.2.3 自定義視頻播放控制組件.............................253
8.3 在Edge Animate 動畫中使用子畫面表. 259
8.4 本章小結......................................... 264
第9 章 HTML 和CSS 樣式在Edge
Animate 中的應用
9.1 認識HTML 文檔.............................. 266
9.1.1 關于HTML 文檔...........................................267
9.1.2 HTML 文檔標簽............................................267
9.1.3 關于HTML5..................................................268
9.2 認識CSS 樣式.................................. 268
9.2.1 關于CSS 樣式................................................268
9.2.2 CSS 樣式語法.................................................269
9.2.3 CSS 樣式規則.................................................269
9.2.4 為元素應用ID CSS 樣式...............................269
9.2.5 為元素應用類CSS 樣式................................270
9.2.6 4 種應用CSS 樣式的方式.............................270
9.3 Edge Animate 與HTML 的關系......... 271
9.3.1 讀懂Edge Animate 創建的HTML 文檔........271
9.3.2 制作網站歡迎頁面動畫.................................272
9.4 在網頁中應用動畫............................. 277
9.5 在同一個網頁中應用兩個不同的動畫..... 281
9.6 本章小結......................................... 281
第10 章 使用JavaScript 和jQuery
控制動畫
10.1 了解JavaScript 和jQuery 的歷史發展... 284
10.1.1 什么是JavaScript..........................................285
10.1.2 JavaScript 基礎..............................................285
10.1.3 什么是jQuery..............................................285
10.2 Edge Animate 創建的JavaScript..... 285
10.2.1 認識自動創建的JavaScript...........................285
10.2.2 Edge Animate 動畫項目相關的JavaScript ?
文件...............................................................287
10.3 JavaScript 和jQuery 基礎................ 288
10.3.1 JavaScript 語法中的基本要求.......................288
10.3.2 JavaScript 的數據類型...................................290
10.3.3 定義變量......................................................291
10.3.4 JavaScript 運算符..........................................291
10.3.5 JavaScript 條件和循環語句...........................292
10.3.6 了解文檔對象模型.......................................293
10.4 了解jQuery 的選擇方式................... 293
10.5 在動畫中實現獲取鼠標位置及跟隨 ?
鼠標功能....................................... 293
10.6 使用jQuery 制作拼圖動畫效果.......... 298
10.7 本章小結....................................... 303
第11 章 Edge Animate 動畫制作 ?
技巧
11.1 更多顯示與隱藏技巧........................ 306
11.1.1 切換對象的顯示與隱藏...............................307
11.1.2 延遲的顯示、隱藏與切換...........................309
11.1.3 淡入淡出......................................................311
11.1.4 上下滑動......................................................313
11.1.5 Edge Animate 中更多的視覺特效................316
11.1.6 實現滑塊向左或向右滑動...........................321
11.2 在Edge Animate 中交換素材圖像..... 323
11.3 識別并更改元件和符號..................... 326
11.3.1 變量賦值......................................................326
11.3.2 通過為變量賦值改變元素屬性...................327
11.3.3 為文字元素賦予HTML 代碼......................330
11.4 識別符號內的元素........................... 333
11.5 播放符號元素的時間軸..................... 337
11.6 本章小結....................................... 342
第12 章 Edge Animate 動畫的發布
與輸出
12.1 關于動畫尺寸................................. 344
12.1.1 使動畫尺寸自適應瀏覽器窗口...................344
12.1.2 設置動畫最大和最小寬度...........................348
12.2 發布Edge Animate 動畫................. 350
12.2.1 “發布設置”對話框...................................350
12.2.2 發布為Web 格式.........................................351
12.2.3 發布為Animate 部署包格式........................353
12.2.4 發布為iBooks/OS X 格式...........................354
12.3 本章小結....................................... 354