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

第 1章
為什么要學習H5應用開發(fā)技術
1．1移動互聯(lián)網(wǎng)與信息傳播　1
1．2智能手機的產(chǎn)生與發(fā)展　2
1．3現(xiàn)在人們?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組與長數(shù)據(jù)　42
3．3．1任務解析——輪播圖片的設計與制作　42
3．3．2課堂實訓——利用長數(shù)字制作輪播圖片并發(fā)布　45
3．4模板的使用與生成　46
3．4．1任務解析——利用模板制作端午節(jié)粽子營銷廣告　47
3．4．2課堂實訓——利用模板制作母親節(jié)賀卡　52

第4章
H5動畫頁面的制作及相關設置
4．1完整H5作品包含的基本內(nèi)容　53
4．1．1　加載頁　53
4．1．2　內(nèi)容頁　54
4．2素材導入與使用　54
4．2．1　導入圖片　54
4．2．2　導入視頻和聲音　57
4．3預置動畫　58
4．3．1任務解析——制作護眼臺燈產(chǎn)品廣告　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層數(shù)據(jù)縮放與舞臺縮放　76
4．10圖層數(shù)據(jù)調(diào)整　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 文件進行格式轉(zhuǎn)換　130
7．1．2對PNG文件進行壓縮處理 　132
7．1．3課堂實訓——制作一個5頁的個人作品集　134
7．2視頻處理　135
7．2．1從素材庫中導入視頻　135
7．2．2調(diào)整視頻文件大小及播放位置　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節(jié)課堂實訓中完成的作品添加背景
音樂　150
第8章
特殊應用功能
8．1虛擬現(xiàn)實　151
8．1．1任務解析——制作虛擬場景　151
8．1．2課堂實訓——制作室內(nèi)虛擬場景　161
8．2網(wǎng)頁及手機定制功能　161
8．2．1網(wǎng)頁功能　162
8．2．2課堂實訓——利用網(wǎng)頁功能發(fā)布網(wǎng)頁　163
8．2．3手機功能　163
8．2．4課堂實訓——利用手機功能實現(xiàn)朋友間聯(lián)絡　165
8．3微信功能　165
8．3．1微信頭像處理　165
8．3．2微信昵稱處理　166
8．3．3定制圖片處理　167
8．3．4錄音處理　167
8．4調(diào)用第三方文字和圖片　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任務解析——城市人口愛好調(diào)查表　176
9．2．2課堂實訓——制作本年度受歡迎的旅游景區(qū)調(diào)查表　183
9．3幻燈片　184
9．4擦玻璃　185
9．5點贊與投票　186
9．5．1任務解析——活動招貼 　186
9．5．2課堂實訓——設計一個對聯(lián)點贊頁　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隨機數(shù)　194
9．8．1任務解析——動態(tài)產(chǎn)品廣告的設計與制作　194
9．8．2課堂實訓——設計制作打地鼠小游戲　197
9．9計時器　197
9．9．1任務解析——制作H5新聞頁面　197
9．9．2課堂實訓——制作畢業(yè)設計作品集　200