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

第 1章
為什么要學習H5應(yīng)用開發(fā)技術(shù)
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的基本功能與應(yīng)用　9
2．2．1Mugeda的基本功能　9
2．2．2Mugeda的應(yīng)用　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任務(wù)解析——“鹿”字的來歷　25
3．1．2課堂實訓(xùn)——制作H5創(chuàng)意名片　33
3．2元件　34
3．2．1任務(wù)解析——壁紙設(shè)計與制作　34
3．2．2課堂實訓(xùn)——用元件制作企業(yè)宣傳招貼　42
3．3組與長數(shù)據(jù)　42
3．3．1任務(wù)解析——輪播圖片的設(shè)計與制作　42
3．3．2課堂實訓(xùn)——利用長數(shù)字制作輪播圖片并發(fā)布　45
3．4模板的使用與生成　46
3．4．1任務(wù)解析——利用模板制作端午節(jié)粽子營銷廣告　47
3．4．2課堂實訓(xùn)——利用模板制作母親節(jié)賀卡　52

第4章
H5動畫頁面的制作及相關(guān)設(shè)置
4．1完整H5作品包含的基本內(nèi)容　53
4．1．1　加載頁　53
4．1．2　內(nèi)容頁　54
4．2素材導(dǎo)入與使用　54
4．2．1　導(dǎo)入圖片　54
4．2．2　導(dǎo)入視頻和聲音　57
4．3預(yù)置動畫　58
4．3．1任務(wù)解析——制作護眼臺燈產(chǎn)品廣告　58
4．3．2課堂實訓(xùn)——制作公益廣告宣傳頁面　62
4．4幀動畫　62
4．4．1任務(wù)解析——制作“放飛自我”幀動畫　63
4．4．2課堂實訓(xùn)——制作汽車行駛的移鏡頭效果　66
4．5加載頁設(shè)置　66
4．6H5發(fā)布信息設(shè)置　68
4．6．1任務(wù)解析——為“暴飲暴食”H5設(shè)置發(fā)布信息　68
4．6．2課堂實訓(xùn)——設(shè)計新年晚會H5邀請函，并設(shè)置發(fā)布信息　70
4．7屏幕適配　70
4．7．1手機屏幕尺寸計量與換算　70
4．7．2手機尺寸與分辨率　70
4．7．3　iPhone 4S手機舞臺屏幕適配 　71
4．7．4課堂實訓(xùn)——用橫屏顯示方式制作龜兔賽跑的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任務(wù)解析——安全駕駛的交互動畫1　88
5．1．3行為/觸發(fā)事件實驗　93
5．1．4行為與觸發(fā)事件介紹 　93
5．1．5課堂實訓(xùn)——安全駕駛的交互動畫2　96
5．2幀行為交互控制　96
5．2．1任務(wù)解析——輪播甲骨文“鹿”“虎”“比”“從”1　96
5．2．2課堂實訓(xùn)——利用幀行為控制4格漫畫的播放效果　98
5．3頁行為交互控制　99
5．3．1任務(wù)解析——輪播甲骨文“鹿”“虎”“比”“從”2　99
5．3．2課堂實訓(xùn)——利用頁行為控制4格漫畫播放　101
5．4多圖層幀的交互設(shè)計與制作　101
5．4．1任務(wù)解析——輪播甲骨文“從、比、北”　101
5．4．2課堂實訓(xùn)——種花生小游戲　104

第6章
動畫應(yīng)用
6．1進度動畫　105
6．1．1任務(wù)解析——制作繪制小房子的進度動畫　105
6．1．2課堂實訓(xùn)——制作保護動物的動畫廣告　106
6．2路徑動畫　107
6．2．1任務(wù)解析——制作汽車行駛的路徑動畫　107
6．2．2課堂實訓(xùn)——制作汽車動畫廣告　109
6．3曲線動畫　109
6．3．1任務(wù)解析——制作“和爸爸一起釣魚”動畫　109
6．3．2課堂實訓(xùn)——制作一個LED燈的H5動畫廣告　116
6．4遮罩動畫　116
6．4．1任務(wù)解析——制作按鈕走光效果　116
6．4．2課堂實訓(xùn)——按鈕走光效果制作　118
6．5元件動畫　119
6．5．1任務(wù)解析——制作飛機群飛動畫　119
6．5．2課堂實訓(xùn)——制作禁煙廣告素材元件　121
6．6圖層復(fù)制與幀復(fù)制 　121
6．6．1任務(wù)解析——復(fù)制圖層　121
6．6．2任務(wù)解析——復(fù)制幀　124
6．7動畫控制　127
6．7．1任務(wù)解析——雙按鈕動畫控制　127
6．7．2任務(wù)解析——單按鈕動畫控制　128

第7章
素材優(yōu)化處理
7．1圖片壓縮處理　130
7．1．1對PSD 文件進行格式轉(zhuǎn)換　130
7．1．2對PNG文件進行壓縮處理 　132
7．1．3課堂實訓(xùn)——制作一個5頁的個人作品集　134
7．2視頻處理　135
7．2．1從素材庫中導(dǎo)入視頻　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任務(wù)解析——音樂播放/暫停控制與按鈕設(shè)計　145
7．3．5課堂實訓(xùn)——為7．1．3節(jié)課堂實訓(xùn)中完成的作品添加背景
音樂　150
第8章
特殊應(yīng)用功能
8．1虛擬現(xiàn)實　151
8．1．1任務(wù)解析——制作虛擬場景　151
8．1．2課堂實訓(xùn)——制作室內(nèi)虛擬場景　161
8．2網(wǎng)頁及手機定制功能　161
8．2．1網(wǎng)頁功能　162
8．2．2課堂實訓(xùn)——利用網(wǎng)頁功能發(fā)布網(wǎng)頁　163
8．2．3手機功能　163
8．2．4課堂實訓(xùn)——利用手機功能實現(xiàn)朋友間聯(lián)絡(luò)　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導(dǎo)入文字　169
8．4．2導(dǎo)入圖片　171
8．4．3課堂實訓(xùn)——制作一個游記H5頁面　171

第9章
實用工具及其應(yīng)用
9．1曲線圖表　172
9．1．1任務(wù)解析——制作學生成績曲線圖表　172
9．1．2課堂實訓(xùn)—— 設(shè)計制作自己上一周每天的消費支出
明細表　175
9．2表單及統(tǒng)計　175
9．2．1任務(wù)解析——城市人口愛好調(diào)查表　176
9．2．2課堂實訓(xùn)——制作本年度受歡迎的旅游景區(qū)調(diào)查表　183
9．3幻燈片　184
9．4擦玻璃　185
9．5點贊與投票　186
9．5．1任務(wù)解析——活動招貼 　186
9．5．2課堂實訓(xùn)——設(shè)計一個對聯(lián)點贊頁　188
9．6繪圖板　188
9．6．1默認繪畫板　188
9．6．2自制繪畫板　189
9．6．3課堂實訓(xùn)——制作一個H5節(jié)日賀卡　191
9．7陀螺儀　191
9．7．1任務(wù)解析——制作放飛孔明燈的動畫　191
9．7．2　課堂實訓(xùn)——設(shè)計并制作一個不倒翁小游戲　194
9．8隨機數(shù)　194
9．8．1任務(wù)解析——動態(tài)產(chǎn)品廣告的設(shè)計與制作　194
9．8．2課堂實訓(xùn)——設(shè)計制作打地鼠小游戲　197
9．9計時器　197
9．9．1任務(wù)解析——制作H5新聞頁面　197
9．9．2課堂實訓(xùn)——制作畢業(yè)設(shè)計作品集　200