可視化H5頁面設計與製作

《可視化H5頁面設計與製作》是2018年12月1日人民郵電出版社出版的圖書，作者是彭澎、姜旭。

基本介紹

• 中文名：可視化H5頁面設計與製作
• 作者：彭澎、姜旭
• 出版社：人民郵電出版社
• ISBN：9787115503862

內容簡介

《可視化H5頁面設計與製作 Mugeda實用教程》以Mugeda為平台，系統地介紹了可視化H5動畫頁面的設計思路、設計方法與技術實現。

《可視化H5頁面設計與製作 Mugeda實用教程》共9章，主要內容為H5頁面設計與製作的意義，Mugeda的操作界面及基本功能套用，基本的H5頁面製作，H5動畫頁面的製作及相關設定，行為、觸發事件與互動控制，動畫套用，素材最佳化處理，虛擬現實、微信功能、第三方文字和圖的調用等特殊功能，以及曲線圖表、幻燈片、計時器等實用工具。

《可視化H5頁面設計與製作 Mugeda實用教程》為Mugeda官方推薦用書，內容全面、案例豐富，具有很強的可讀性和實用性，可作為高校相關專業和各類H5培訓班的教材，也可作為新媒體從業人員自學H5頁面設計與製作的參考書。

圖書目錄

第 1章

為什麼要學習H5套用開發技術

1．1移動網際網路與信息傳播　1

1．2智慧型手機的產生與發展　2

1．3現在人們為什麼離不開智慧型手機　3

1．4H5的特徵　4

1．5H5開發及開發工具　5

1．6H5行銷　6

第 2章

H5頁面製作工具Mugeda

2．1初識Mugeda　7

2．1．1Mugeda開發背景　7

2．1．2動畫與互動動畫　7

2．1．3什麼是Mugeda　8

2．1．4Mugeda平台特點　8

2．2Mugeda的基本功能與套用　9

2．2．1Mugeda的基本功能　9

2．2．2Mugeda的套用　9

2．3體驗Mugeda製作H5動畫過程　11

2．3．1操作基本流程概述　11

2．3．2註冊Mugeda賬號　11

2．3．3從創建到發布——製作並發布一個簡單的H5作品　12

2．4Mugeda的界面　17

2．4．1主界面　17

2．4．2選單欄　18

2．4．3工具列　21

2．4．4時間軸　21

2．4．5舞台與頁面欄　22

2．4．6工具箱　22

2．4．7屬性面板 　23

第3章

基本H5頁面製作

3．1屬性　25

3．1．1任務解析——“鹿”字的來歷　25

3．1．2課堂實訓——製作H5創意名片　33

3．2元件　34

3．2．1任務解析——壁紙設計與製作　34

3．2．2課堂實訓——用元件製作企業宣傳招貼　42

3．3組與長數據　42

3．3．1任務解析——輪播圖片的設計與製作　42

3．3．2課堂實訓——利用長數字製作輪播圖片並發布　45

3．4模板的使用與生成　46

3．4．1任務解析——利用模板製作端午節粽子行銷廣告　47

3．4．2課堂實訓——利用模板製作母親節賀卡　52

第4章

H5動畫頁面的製作及相關設定

4．1完整H5作品包含的基本內容　53

4．1．1　載入頁　53

4．1．2　內容頁　54

4．2素材導入與使用　54

4．2．1　導入圖片　54

4．2．2　導入視頻和聲音　57

4．3預置動畫　58

4．3．1任務解析——製作護眼檯燈產品廣告　58

4．3．2課堂實訓——製作公益廣告宣傳頁面　62

4．4幀動畫　62

4．4．1任務解析——製作“放飛自我”幀動畫　63

4．4．2課堂實訓——製作汽車行駛的移鏡頭效果　66

4．5載入頁設定　66

4．6H5發布信息設定　68

4．6．1任務解析——為“暴飲暴食”H5設定發布信息　68

4．6．2課堂實訓——設計新年晚會H5邀請函，並設定發布信息　70

4．7螢幕適配　70

4．7．1手機螢幕尺寸計量與換算　70

4．7．2手機尺寸與解析度　70

4．7．3　iPhone 4S手機舞台螢幕適配 　71

4．7．4課堂實訓——用橫屏顯示方式製作龜兔賽跑的H5作品　74

4．8資料夾管理與使用　74

4．9層數據縮放與舞台縮放　76

4．10圖層數據調整　81

4．11標尺與輔助線　82

第5章

行為、觸發事件與互動控制

5．1行為與觸發事件　85

5．1．1幀動畫行為控制與觸發事件體驗　85

5．1．2任務解析——安全駕駛的互動動畫1　88

5．1．3行為/觸發事件實驗　93

5．1．4行為與觸發事件介紹 　93

5．1．5課堂實訓——安全駕駛的互動動畫2　96

5．2幀行為互動控制　96

5．2．1任務解析——輪播甲骨文“鹿”“虎”“比”“從”1　96

5．2．2課堂實訓——利用幀行為控制4格漫畫的播放效果　98

5．3頁行為互動控制　99

5．3．1任務解析——輪播甲骨文“鹿”“虎”“比”“從”2　99

5．3．2課堂實訓——利用頁行為控制4格漫畫播放　101

5．4多圖層幀的互動設計與製作　101

5．4．1任務解析——輪播甲骨文“從、比、北”　101

5．4．2課堂實訓——種花生小遊戲　104

第6章

動畫套用

6．1進度動畫　105

6．1．1任務解析——製作繪製小房子的進度動畫　105

6．1．2課堂實訓——製作保護動物的動畫廣告　106

6．2路徑動畫　107

6．2．1任務解析——製作汽車行駛的路徑動畫　107

6．2．2課堂實訓——製作汽車動畫廣告　109

6．3曲線動畫　109

6．3．1任務解析——製作“和爸爸一起釣魚”動畫　109

6．3．2課堂實訓——製作一個LED燈的H5動畫廣告　116

6．4遮罩動畫　116

6．4．1任務解析——製作按鈕走光效果　116

6．4．2課堂實訓——按鈕走光效果製作　118

6．5元件動畫　119

6．5．1任務解析——製作飛機群飛動畫　119

6．5．2課堂實訓——製作禁菸廣告素材元件　121

6．6圖層複製與幀複製 　121

6．6．1任務解析——複製圖層　121

6．6．2任務解析——複製幀　124

6．7動畫控制　127

6．7．1任務解析——雙按鈕動畫控制　127

6．7．2任務解析——單按鈕動畫控制　128

第7章

素材最佳化處理

7．1圖片壓縮處理　130

7．1．1對PSD 檔案進行格式轉換　130

7．1．2對PNG檔案進行壓縮處理 　132

7．1．3課堂實訓——製作一個5頁的個人作品集　134

7．2視頻處理　135

7．2．1從素材庫中導入視頻　135

7．2．2調整視頻檔案大小及播放位置　135

7．3聲音處理　142

7．3．1聲音上傳　142

7．3．2更換添加音效後的聲音圖示　143

7．3．3利用“背景音樂”屬性添加背景音樂　143

7．3．4任務解析——音樂播放/暫停控制與按鈕設計　145

7．3．5課堂實訓——為7．1．3節課堂實訓中完成的作品添加背景

音樂　150

第8章

特殊套用功能

8．1虛擬現實　151

8．1．1任務解析——製作虛擬場景　151

8．1．2課堂實訓——製作室內虛擬場景　161

8．2網頁及手機定製功能　161

8．2．1網頁功能　162

8．2．2課堂實訓——利用網頁功能發布網頁　163

8．2．3手機功能　163

8．2．4課堂實訓——利用手機功能實現朋友間聯絡　165

8．3微信功能　165

8．3．1微信頭像處理　165

8．3．2微信暱稱處理　166

8．3．3定製圖片處理　167

8．3．4錄音處理　167

8．4調用第三方文字和圖片　169

8．4．1導入文字　169

8．4．2導入圖片　171

8．4．3課堂實訓——製作一個遊記H5頁面　171

第9章

實用工具及其套用

9．1曲線圖表　172

9．1．1任務解析——製作學生成績曲線圖表　172

9．1．2課堂實訓—— 設計製作自己上一周每天的消費支出

明細表　175

9．2表單及統計　175

9．2．1任務解析——城市人口愛好調查表　176

9．2．2課堂實訓——製作本年度受歡迎的旅遊景區調查表　183

9．3幻燈片　184

9．4擦玻璃　185

9．5點讚與投票　186

9．5．1任務解析——活動招貼 　186

9．5．2課堂實訓——設計一個對聯點讚頁　188

9．6繪圖板　188

9．6．1默認繪畫板　188

9．6．2自製繪畫板　189

9．6．3課堂實訓——製作一個H5節日賀卡　191

9．7陀螺儀　191

9．7．1任務解析——製作放飛孔明燈的動畫　191

9．7．2　課堂實訓——設計並製作一個不倒翁小遊戲　194

9．8隨機數　194

9．8．1任務解析——動態產品廣告的設計與製作　194

9．8．2課堂實訓——設計製作打地鼠小遊戲　197

9．9計時器　197

9．9．1任務解析——製作H5新聞頁面　197

9．9．2課堂實訓——製作畢業設計作品集　200