可視化H5頁面設計與制作 Mugeda實用教程

第 1章
為什么要學習H5應用開發(fā)技術
1．1移動互聯網與信息傳播　1
1．2智能手機的產生與發(fā)展　2
1．3現在人們?yōu)槭裁措x不開智能手機　3
1．4H5的特征　4
1．5H5開發(fā)及開發(fā)工具　5
1．6H5營銷　6

第 2章
H5頁面制作工具Mugeda
2．1初識Mugeda　7
2．1．1Mugeda開發(fā)背景　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從創(chuàng)建到發(fā)布——制作并發(fā)布一個簡單的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創(chuàng)意名片　33
3．2元件　34
3．2．1任務解析——壁紙設計與制作　34
3．2．2課堂實訓——用元件制作企業(yè)宣傳招貼　42
3．3組與長數據　42
3．3．1任務解析——輪播圖片的設計與制作　42
3．3．2課堂實訓——利用長數字制作輪播圖片并發(fā)布　45
3．4模板的使用與生成　46
3．4．1任務解析——利用模板制作端午節(jié)粽子營銷廣告　47
3．4．2課堂實訓——利用模板制作母親節(jié)賀卡　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發(fā)布信息設置　68
4．6．1任務解析——為“暴飲暴食”H5設置發(fā)布信息　68
4．6．2課堂實訓——設計新年晚會H5邀請函，并設置發(fā)布信息　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章
行為、觸發(fā)事件與交互控制
5．1行為與觸發(fā)事件　85
5．1．1幀動畫行為控制與觸發(fā)事件體驗　85
5．1．2任務解析——安全駕駛的交互動畫1　88
5．1．3行為/觸發(fā)事件實驗　93
5．1．4行為與觸發(fā)事件介紹 　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章
素材優(yōu)化處理
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任務解析——音樂播放/暫?？刂婆c按鈕設計　145
7．3．5課堂實訓——為7．1．3節(jié)課堂實訓中完成的作品添加背景
音樂　150
第8章
特殊應用功能
8．1虛擬現實　151
8．1．1任務解析——制作虛擬場景　151
8．1．2課堂實訓——制作室內虛擬場景　161
8．2網頁及手機定制功能　161
8．2．1網頁功能　162
8．2．2課堂實訓——利用網頁功能發(fā)布網頁　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表單及統(tǒng)計　175
9．2．1任務解析——城市人口愛好調查表　176
9．2．2課堂實訓——制作本年度受歡迎的旅游景區(qū)調查表　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節(jié)日賀卡　191
9．7陀螺儀　191
9．7．1任務解析——制作放飛孔明燈的動畫　191
9．7．2　課堂實訓——設計并制作一個不倒翁小游戲　194
9．8隨機數　194
9．8．1任務解析——動態(tài)產品廣告的設計與制作　194
9．8．2課堂實訓——設計制作打地鼠小游戲　197
9．9計時器　197
9．9．1任務解析——制作H5新聞頁面　197
9．9．2課堂實訓——制作畢業(yè)設計作品集　200