《HTML5動畫製作神器——Adobe Edge Animate CC一本通》是2015年電子工業出版社出版的圖書,作者是張曉景。
基本介紹
- 中文名:HTML5動畫製作神器——Adobe Edge Animate CC一本通
- 作者:張曉景
- 出版社:電子工業出版社
- 出版時間:2015年1月1日
- 頁數:304 頁
- 定價:59.8 元
- 開本:16 開
- ISBN:9787121250712
內容簡介,圖書目錄,作者簡介,
內容簡介
《HTML5動畫製作神器:Adobe Edge Animate CC一本通》詳細地介紹了Edge Animate CC中的所有知識點,以通俗易懂的文字、精美的案例仔譽才和新穎的版式講解各種類型互動動畫的製作方法和技巧,將Edge Animate CC的知識點與實際套用案例相結合,使讀者易學易用、快速掌握使用Edge Animate CC製作互動動畫的相關知識。
《HTML5動畫製作神器:Adobe Edge Animate CC一本通》共分為11章,分別講解初識Edge Animate、掌握Edge Animate的基本操作、圖形的創建槓旬挨罪與操作、添加文本和格式化文本、使用時間軸製作動畫、使用觸發器動作、符號元素在動畫中的使用、HTML和CSS樣式在Edge Animate中的套用、使用JavaScript和jQuery控制動畫、Edge Animate動畫製作技巧和Edge Animate動畫的發布與輸出等內容。在內容安排上,從基礎出發,講解Edge Animate的各個知識點,深入淺出,使讀者能夠在最短的時間裡輕鬆掌握各種類型互動式動畫的製作流程和方法。
《HTML5動畫製作神器:Adobe Edge Animate CC一本通》的配套光碟中提供了書中所有實例的源檔案和相關素材,以及書中實例的視頻教程,方便讀者學習和參考。
圖書目錄
第1章 初識 Adobe Edge Animate
1.1 Adobe Edge Animate簡介002
1.1.1 Adobe Edge Animate的誕生003
1.1.2 Adobe Edge Animate概述003
1.1.3 Adobe Edge Animate功能簡介003
1.2 安裝和卸載 Adobe Edge Animate005
1.2.1 Adobe Edge Animate的系統要求006
1.2.2 Adobe Edge Animate的系統要求006
1.2.3 卸載Adobe Edge Animate008
1.2.4 啟動Adobe Edge Animate009
1.2.5 退出Adobe Edge Animate009
1.3 Adobe Edge Animate工作界面009
1.3.1 Edge Animate歡迎界面010
1.3.1 Edge Animate歡迎界面012
1.4 Edge Animate的選單欄013
1.4.1 “File(檔案)”選單013
1.4.2 “Edit(編輯)烏遙市”選單014
1.4.3 “View(視圖)”選單015
1.4.4 “Modify(修改)”選單016
1.4.5 “Timeline(時間軸)”選單017
1.4.6 “Window(視窗阿多腿)”選單019
1.4.7 “Help(幫助)”選單020
1.5 Edge Animate中的面板021
1.5.1 工具列021
1.5.2 舞台022
1.5.3 “Timeline(時間軸)”面板024
1.5.4 “Properties(屬性)”面板024
1.5.5 “Elements(元素)”面板025
1.5.6 “Library(庫)”面板025
1.5.7 “Lessons(教程)”面板026
1.6自定義Edge Animate工作界面027
1.6.1 手動調整默認工作界面027
1.6.2 自定義工作界面027
1.6.3 刪除工作界面029
1.6.4 復位工作界面029
本章小結030
第2章 掌握Edge Animate的基本操作
2.1 新建Edge Animate項目檔案032
2.1.1 新建空白的Edge Animate項目檔案032
2.1.2 設定舞台屬性033
2.1.3 創鑽嫌疊建快照照嘗榆灶與下級瀏覽器舞台035
2.1.4 設定項目檔案的預載方式037
2.1.5 從模板新建Edge Animate項目檔案038
2.2 打開/關閉Edge Animate項目檔案038
2.2.1 打開Edge Animate項目檔案038
2.2.2 關閉Edge Animate項目檔案039
2.3 保存Edge Animate項目檔案039
2.3.1 直接保存Edge Animate項目檔案039
2.3.2 另外儲存為Edge Animate項目檔案040
2.3.3 另外儲存為Edge Animate模板檔案040
2.4 套用標尺和輔她盛助線041
2.4.1 顯示/隱藏舞台標尺041
2.4.2 創建輔助線041
2.4.3 貼緊至輔助線042
2.4.4 顯示/隱藏輔助線042
2.5 使用模板製作Edge Animate動畫043
2.5.1 製作網站圖片展示動畫043
2.5.2 製作文章展示動畫046
2.5.3 製作選項卡式面板049
2.6 本章小結052
第3章 圖形的創建與操作
3.1 使用Edge Animate中的基本繪圖工具054
3.1.1 認識Edge Animate中的繪圖工具054
3.1.2 繪製矩形055
3.1.3 繪製圓角矩形055
3.1.4 繪製橢圓形055
3.2 圖形屬性設定056
3.2.1 設定顯示與隱藏屬性056
3.2.2 設定位置和大小屬性059
3.2.3 設定顏色和框線屬性062
3.2.4 設定純色063
3.2.5 設定漸變顏色064
3.2.6 設定變換屬性066
3.2.7 設定游標效果070
3.2.8 設定角效果072
3.2.9 設定投影效果073
3.2.10 設定對象濾鏡效果076
3.2.11 設定裁切屬性078
3.2.12 設定對象的可訪問性080
3.3 導入外部元素080
3.3.1 支持的圖像素材格式080
3.3.2 導入點陣圖素材081
3.3.3 導入矢量圖素材083
3.3.4 支持的音頻素材格式084
3.3.5 製作圖像淡入淡出動畫084
3.4 多對象操作087
3.4.1 對齊操作087
3.4.2 分布操作088
3.4.3 排列操作088
3.5 本章小結089
第4章 添加文本和格式化文本
4.1 在動畫中添加文字092
4.1.1 在動畫中添加文字的幾種方法092
4.1.2 在動畫中添加文字093
4.2 設定文字屬性095
4.3 添加字型097
4.3.1 添加web文字097
4.3.2 添加中文字型098
4.4 剪下文本邊緣101
4.5 使用文字特效103
4.5.1 陰影效果103
4.5.2 彈跳效果107
4.5.3 設定文字連結109
4.6 Edge Animate中的HTML標籤114
4.7 本章小結114
第5章 使用時間軸製作動畫
5.1 關於元素層116
5.1.1 元素層的類型116
5.1.2 創建元素層117
5.1.3 選擇元素層117
5.2 編輯元素層118
5.2.1 為元素層重命名118
5.2.2 複製元素層119
5.2.3 調整元素層順序119
5.2.4 展開/摺疊元素層屬性120
5.2.5 設定元素層顏色120
5.3 元素層的狀態121
5.3.1 顯示和隱藏元素層121
5.3.2 鎖定和解鎖元素層121
5.4 “Timeline(時間軸)”面板122
5.4.1 認識“Timeline(時間軸)”面板122
5.4.2 使用快捷鍵控制時間軸124
5.5 “Timeline(時間軸)”面板的基本操作125
5.5.1 設定“Timeline(時間軸)”面板格線125
5.5.2 在“Timeline(時間軸)”面板中添加標籤126
5.5.3 編輯標籤126
5.5.4 製作開場動畫127
5.6 使用緩動效果131
5.6.1 緩動效果詳解131
5.6.2 製作網站廣告條132
5.6.3 製作紙飛機飛行動畫134
5.6.4 製作模糊入場動畫139
5.7 本章小結142
第6章 使用觸發器動作
6.1 了解觸發器144
6.1.1 什麼是觸發器144
6.1.2 “Trigger(觸發器)”對話框145
6.2 使用觸發器動作146
6.2.1 為元素添加觸發器動作146
6.2.2 觸發事件詳解149
6.2.3 觸發動作詳解150
6.2.4 為文本元素添加觸發器動作154
6.2.5 編輯觸發器動作156
6.2.6 刪除觸發器動作156
6.3 舞台觸發器使用技巧157
6.3.1 舞台觸發事件詳解157
6.3.2 為舞台添加觸發器動作158
6.4 時間軸觸發器使用技巧161
6.4.1 時間軸觸發事件詳解161
6.4.2 添加時間軸觸發器使動畫循環播放161
6.4.3 在時間軸中使用標籤164
6.4.4 添加觸發器到某個時間點165
6.5 非線性思考與設計169
6.6 iPhone和Android觸發器173
6.7 本章小結178
第7章 符號元素在動畫中的使用
7.1 關於符號180
7.2 創建符號181
7.2.1 轉換為符號181
7.2.2 導出符號182
7.2.3 導入符號182
7.3 使用符號183
7.3.1 將符號套用到舞台183
7.3.2 製作氣泡動畫183
7.3.3 編輯符號186
7.3.4 複製符號187
7.3.5 重命名符號188
7.3.6 刪除符號188
7.4 在符號時間軸上的運用188
7.5 使用滑過變換動畫創建按鈕符號193
7.5.1 製作基礎網頁按鈕動畫193
7.5.2 製作複雜網頁按鈕動畫195
7.6 創建下拉選單選項200
7.6.1 製作垂直導航選單200
7.6.2 製作下拉導航選單205
7.7 使用滑過變換動作創建文字標註212
7.8 本章小結214
第8章 HTML和CSS樣式在Edge Animate中的套用
8.1 認識HTML216
8.1.1 關於HTML文檔216
8.1.2 HTML文檔標籤217
8.1.3 關於HTML5217
8.2 認識CSS樣式218
8.2.1 關於CSS樣式218
8.2.2 CSS樣式語法218
8.2.3 CSS樣式規則218
8.2.4 為元素套用ID CSS樣式219
8.2.5 為元素套用類CSS樣式219
8.2.6 4種套用CSS樣式的方式219
8.3 Edge Animate與HTML的關係220
8.3.1 讀懂Edge Animate創建的HTML文檔220
8.3.2 以Edge Animate開啟HTML文檔221
8.4 在網頁中套用動畫224
8.5 在同一個網頁中套用兩個不同的動畫227
8.6 本章小結228
第9章 使用JavaScript和jQuery控制動畫
9.1 了解JavaScript和jQuery231
9.1.1 什麼是JavaScript231
9.1.2 JavaScript基礎231
9.1.3 什麼是jQuery231
9.2 Edge Animate創建的JavaScript231
9.2.1 認識自動創建的JavaScript231
9.2.2 Edge Animate動畫項目相關的JavaScript檔案232
9.3 JavaScript和jQuery基礎233
9.3.1 JavaScript語法中的基本要求233
9.3.2 JavaScript數據類型235
9.3.3 定義變數235
9.3.4 JavaScript運算符235
9.3.5 JavaScript條件和循環語句236
9.3.6 了解文檔對象模型236
9.4 了解jQuery的選擇方式237
9.5 在動畫中實現獲取滑鼠位置及跟隨滑鼠功能237
9.6 使用jQuery製作拼圖動畫效果240
9.7 本章小結244
第10章 Edge Animate動畫製作技巧
10.1 更多顯示與隱藏技巧246
10.1.1 切換對象的顯示與隱藏247
10.1.2 延遲的顯示、隱藏與切換248
10.1.3 淡入淡出250
10.1.4 上下滑動252
10.1.5 Edge Animate中更多的視覺特效253
10.1.6 實現滑塊向左和向右滑動258
10.2 在Edge Animate中交換素材圖像259
10.3 識別並更改元素和符號262
10.3.1 變數賦值262
10.3.2 使用“Trigger(觸發器)”對話框為變數賦值262
10.3.3 為文本框賦予HTML代碼266
10.4 控制符號內的元素269
10.5 播放符號的時間軸274
10.6 在Edge Animate動畫中使用音頻278
10.6.1 Edge Animate中所支持的音頻格式278
10.6.2 為動畫添加背景音樂278
10.6.3 對動畫中的音頻進行控制279
10.7 在Edge Animate動畫中嵌入視頻282
10.7.1 Edge Animate中支持的視頻格式282
10.7.2 在動畫中嵌入視頻282
10.8 本章小結284
第11章 Edge Animate動畫的發布與輸出
11.1 關於動畫尺寸286
11.1.1 使動畫尺寸自適應瀏覽器視窗286
11.1.2 設定動畫最大和最小寬度288
11.2 發布Edge Animate動畫291
11.2.1 “Publish Settings(發布設定)”對話框291
11.2.2 發布為Web格式292
11.2.3 發布為Animate Deployment Package格式292
11.2.4 發布為iBook/OS X格式293
11.3 本章小結294
作者簡介
張曉景,Adobe 網頁設計師認證講師,國家信息產業部653工程講師。Adobe專家組成員,參與中央電大網頁設計課程體系開發。曾並參與設計了999集團設計宣傳冊,北京西單金澤大廈設計VI設計,以及國務院國資委電子資料室設計製作網站等眾多設計工作。從事網站設計開發近10個年頭,開發過數十個多媒體商業網站。有豐富的教學經驗,曾在北京大學、北京師範大學等重點院校以及Adobe創意大學和新東方等培訓機構教授網頁設計課程。對網頁色彩搭配有獨特見解。出版網頁設計與設計類書籍數十種,並參與清華大學中職教材的編寫工作。
1.4.5 “Timeline(時間軸)”選單017
1.4.6 “Window(視窗)”選單019
1.4.7 “Help(幫助)”選單020
1.5 Edge Animate中的面板021
1.5.1 工具列021
1.5.2 舞台022
1.5.3 “Timeline(時間軸)”面板024
1.5.4 “Properties(屬性)”面板024
1.5.5 “Elements(元素)”面板025
1.5.6 “Library(庫)”面板025
1.5.7 “Lessons(教程)”面板026
1.6自定義Edge Animate工作界面027
1.6.1 手動調整默認工作界面027
1.6.2 自定義工作界面027
1.6.3 刪除工作界面029
1.6.4 復位工作界面029
本章小結030
第2章 掌握Edge Animate的基本操作
2.1 新建Edge Animate項目檔案032
2.1.1 新建空白的Edge Animate項目檔案032
2.1.2 設定舞台屬性033
2.1.3 創建快照與下級瀏覽器舞台035
2.1.4 設定項目檔案的預載方式037
2.1.5 從模板新建Edge Animate項目檔案038
2.2 打開/關閉Edge Animate項目檔案038
2.2.1 打開Edge Animate項目檔案038
2.2.2 關閉Edge Animate項目檔案039
2.3 保存Edge Animate項目檔案039
2.3.1 直接保存Edge Animate項目檔案039
2.3.2 另外儲存為Edge Animate項目檔案040
2.3.3 另外儲存為Edge Animate模板檔案040
2.4 套用標尺和輔助線041
2.4.1 顯示/隱藏舞台標尺041
2.4.2 創建輔助線041
2.4.3 貼緊至輔助線042
2.4.4 顯示/隱藏輔助線042
2.5 使用模板製作Edge Animate動畫043
2.5.1 製作網站圖片展示動畫043
2.5.2 製作文章展示動畫046
2.5.3 製作選項卡式面板049
2.6 本章小結052
第3章 圖形的創建與操作
3.1 使用Edge Animate中的基本繪圖工具054
3.1.1 認識Edge Animate中的繪圖工具054
3.1.2 繪製矩形055
3.1.3 繪製圓角矩形055
3.1.4 繪製橢圓形055
3.2 圖形屬性設定056
3.2.1 設定顯示與隱藏屬性056
3.2.2 設定位置和大小屬性059
3.2.3 設定顏色和框線屬性062
3.2.4 設定純色063
3.2.5 設定漸變顏色064
3.2.6 設定變換屬性066
3.2.7 設定游標效果070
3.2.8 設定角效果072
3.2.9 設定投影效果073
3.2.10 設定對象濾鏡效果076
3.2.11 設定裁切屬性078
3.2.12 設定對象的可訪問性080
3.3 導入外部元素080
3.3.1 支持的圖像素材格式080
3.3.2 導入點陣圖素材081
3.3.3 導入矢量圖素材083
3.3.4 支持的音頻素材格式084
3.3.5 製作圖像淡入淡出動畫084
3.4 多對象操作087
3.4.1 對齊操作087
3.4.2 分布操作088
3.4.3 排列操作088
3.5 本章小結089
第4章 添加文本和格式化文本
4.1 在動畫中添加文字092
4.1.1 在動畫中添加文字的幾種方法092
4.1.2 在動畫中添加文字093
4.2 設定文字屬性095
4.3 添加字型097
4.3.1 添加web文字097
4.3.2 添加中文字型098
4.4 剪下文本邊緣101
4.5 使用文字特效103
4.5.1 陰影效果103
4.5.2 彈跳效果107
4.5.3 設定文字連結109
4.6 Edge Animate中的HTML標籤114
4.7 本章小結114
第5章 使用時間軸製作動畫
5.1 關於元素層116
5.1.1 元素層的類型116
5.1.2 創建元素層117
5.1.3 選擇元素層117
5.2 編輯元素層118
5.2.1 為元素層重命名118
5.2.2 複製元素層119
5.2.3 調整元素層順序119
5.2.4 展開/摺疊元素層屬性120
5.2.5 設定元素層顏色120
5.3 元素層的狀態121
5.3.1 顯示和隱藏元素層121
5.3.2 鎖定和解鎖元素層121
5.4 “Timeline(時間軸)”面板122
5.4.1 認識“Timeline(時間軸)”面板122
5.4.2 使用快捷鍵控制時間軸124
5.5 “Timeline(時間軸)”面板的基本操作125
5.5.1 設定“Timeline(時間軸)”面板格線125
5.5.2 在“Timeline(時間軸)”面板中添加標籤126
5.5.3 編輯標籤126
5.5.4 製作開場動畫127
5.6 使用緩動效果131
5.6.1 緩動效果詳解131
5.6.2 製作網站廣告條132
5.6.3 製作紙飛機飛行動畫134
5.6.4 製作模糊入場動畫139
5.7 本章小結142
第6章 使用觸發器動作
6.1 了解觸發器144
6.1.1 什麼是觸發器144
6.1.2 “Trigger(觸發器)”對話框145
6.2 使用觸發器動作146
6.2.1 為元素添加觸發器動作146
6.2.2 觸發事件詳解149
6.2.3 觸發動作詳解150
6.2.4 為文本元素添加觸發器動作154
6.2.5 編輯觸發器動作156
6.2.6 刪除觸發器動作156
6.3 舞台觸發器使用技巧157
6.3.1 舞台觸發事件詳解157
6.3.2 為舞台添加觸發器動作158
6.4 時間軸觸發器使用技巧161
6.4.1 時間軸觸發事件詳解161
6.4.2 添加時間軸觸發器使動畫循環播放161
6.4.3 在時間軸中使用標籤164
6.4.4 添加觸發器到某個時間點165
6.5 非線性思考與設計169
6.6 iPhone和Android觸發器173
6.7 本章小結178
第7章 符號元素在動畫中的使用
7.1 關於符號180
7.2 創建符號181
7.2.1 轉換為符號181
7.2.2 導出符號182
7.2.3 導入符號182
7.3 使用符號183
7.3.1 將符號套用到舞台183
7.3.2 製作氣泡動畫183
7.3.3 編輯符號186
7.3.4 複製符號187
7.3.5 重命名符號188
7.3.6 刪除符號188
7.4 在符號時間軸上的運用188
7.5 使用滑過變換動畫創建按鈕符號193
7.5.1 製作基礎網頁按鈕動畫193
7.5.2 製作複雜網頁按鈕動畫195
7.6 創建下拉選單選項200
7.6.1 製作垂直導航選單200
7.6.2 製作下拉導航選單205
7.7 使用滑過變換動作創建文字標註212
7.8 本章小結214
第8章 HTML和CSS樣式在Edge Animate中的套用
8.1 認識HTML216
8.1.1 關於HTML文檔216
8.1.2 HTML文檔標籤217
8.1.3 關於HTML5217
8.2 認識CSS樣式218
8.2.1 關於CSS樣式218
8.2.2 CSS樣式語法218
8.2.3 CSS樣式規則218
8.2.4 為元素套用ID CSS樣式219
8.2.5 為元素套用類CSS樣式219
8.2.6 4種套用CSS樣式的方式219
8.3 Edge Animate與HTML的關係220
8.3.1 讀懂Edge Animate創建的HTML文檔220
8.3.2 以Edge Animate開啟HTML文檔221
8.4 在網頁中套用動畫224
8.5 在同一個網頁中套用兩個不同的動畫227
8.6 本章小結228
第9章 使用JavaScript和jQuery控制動畫
9.1 了解JavaScript和jQuery231
9.1.1 什麼是JavaScript231
9.1.2 JavaScript基礎231
9.1.3 什麼是jQuery231
9.2 Edge Animate創建的JavaScript231
9.2.1 認識自動創建的JavaScript231
9.2.2 Edge Animate動畫項目相關的JavaScript檔案232
9.3 JavaScript和jQuery基礎233
9.3.1 JavaScript語法中的基本要求233
9.3.2 JavaScript數據類型235
9.3.3 定義變數235
9.3.4 JavaScript運算符235
9.3.5 JavaScript條件和循環語句236
9.3.6 了解文檔對象模型236
9.4 了解jQuery的選擇方式237
9.5 在動畫中實現獲取滑鼠位置及跟隨滑鼠功能237
9.6 使用jQuery製作拼圖動畫效果240
9.7 本章小結244
第10章 Edge Animate動畫製作技巧
10.1 更多顯示與隱藏技巧246
10.1.1 切換對象的顯示與隱藏247
10.1.2 延遲的顯示、隱藏與切換248
10.1.3 淡入淡出250
10.1.4 上下滑動252
10.1.5 Edge Animate中更多的視覺特效253
10.1.6 實現滑塊向左和向右滑動258
10.2 在Edge Animate中交換素材圖像259
10.3 識別並更改元素和符號262
10.3.1 變數賦值262
10.3.2 使用“Trigger(觸發器)”對話框為變數賦值262
10.3.3 為文本框賦予HTML代碼266
10.4 控制符號內的元素269
10.5 播放符號的時間軸274
10.6 在Edge Animate動畫中使用音頻278
10.6.1 Edge Animate中所支持的音頻格式278
10.6.2 為動畫添加背景音樂278
10.6.3 對動畫中的音頻進行控制279
10.7 在Edge Animate動畫中嵌入視頻282
10.7.1 Edge Animate中支持的視頻格式282
10.7.2 在動畫中嵌入視頻282
10.8 本章小結284
第11章 Edge Animate動畫的發布與輸出
11.1 關於動畫尺寸286
11.1.1 使動畫尺寸自適應瀏覽器視窗286
11.1.2 設定動畫最大和最小寬度288
11.2 發布Edge Animate動畫291
11.2.1 “Publish Settings(發布設定)”對話框291
11.2.2 發布為Web格式292
11.2.3 發布為Animate Deployment Package格式292
11.2.4 發布為iBook/OS X格式293
11.3 本章小結294
作者簡介
張曉景,Adobe 網頁設計師認證講師,國家信息產業部653工程講師。Adobe專家組成員,參與中央電大網頁設計課程體系開發。曾並參與設計了999集團設計宣傳冊,北京西單金澤大廈設計VI設計,以及國務院國資委電子資料室設計製作網站等眾多設計工作。從事網站設計開發近10個年頭,開發過數十個多媒體商業網站。有豐富的教學經驗,曾在北京大學、北京師範大學等重點院校以及Adobe創意大學和新東方等培訓機構教授網頁設計課程。對網頁色彩搭配有獨特見解。出版網頁設計與設計類書籍數十種,並參與清華大學中職教材的編寫工作。