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