|
|
|
以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
