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

第 1章
為什么要學(xué)習(xí)H5應(yīng)用開發(fā)技術(shù)
1．1移動(dòng)互聯(lián)網(wǎng)與信息傳播　1
1．2智能手機(jī)的產(chǎn)生與發(fā)展　2
1．3現(xiàn)在人們?yōu)槭裁措x不開智能手機(jī)　3
1．4H5的特征　4
1．5H5開發(fā)及開發(fā)工具　5
1．6H5營(yíng)銷　6

第 2章
H5頁面制作工具M(jìn)ugeda
2．1初識(shí)Mugeda　7
2．1．1Mugeda開發(fā)背景　7
2．1．2動(dòng)畫與交互動(dòng)畫　7
2．1．3什么是Mugeda　8
2．1．4Mugeda平臺(tái)特點(diǎn)　8
2．2Mugeda的基本功能與應(yīng)用　9
2．2．1Mugeda的基本功能　9
2．2．2Mugeda的應(yīng)用　9
2．3體驗(yàn)Mugeda制作H5動(dòng)畫過程　11
2．3．1操作基本流程概述　11
2．3．2注冊(cè)Mugeda賬號(hào)　11
2．3．3從創(chuàng)建到發(fā)布——制作并發(fā)布一個(gè)簡(jiǎn)單的H5作品　12
2．4Mugeda的界面　17
2．4．1主界面　17
2．4．2菜單欄　18
2．4．3工具欄　21
2．4．4時(shí)間軸　21
2．4．5舞臺(tái)與頁面欄　22
2．4．6工具箱　22
2．4．7屬性面板 　23

第3章
基本H5頁面制作
3．1屬性　25
3．1．1任務(wù)解析——“鹿”字的來歷　25
3．1．2課堂實(shí)訓(xùn)——制作H5創(chuàng)意名片　33
3．2元件　34
3．2．1任務(wù)解析——壁紙?jiān)O(shè)計(jì)與制作　34
3．2．2課堂實(shí)訓(xùn)——用元件制作企業(yè)宣傳招貼　42
3．3組與長(zhǎng)數(shù)據(jù)　42
3．3．1任務(wù)解析——輪播圖片的設(shè)計(jì)與制作　42
3．3．2課堂實(shí)訓(xùn)——利用長(zhǎng)數(shù)字制作輪播圖片并發(fā)布　45
3．4模板的使用與生成　46
3．4．1任務(wù)解析——利用模板制作端午節(jié)粽子營(yíng)銷廣告　47
3．4．2課堂實(shí)訓(xùn)——利用模板制作母親節(jié)賀卡　52

第4章
H5動(dòng)畫頁面的制作及相關(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ù)置動(dòng)畫　58
4．3．1任務(wù)解析——制作護(hù)眼臺(tái)燈產(chǎn)品廣告　58
4．3．2課堂實(shí)訓(xùn)——制作公益廣告宣傳頁面　62
4．4幀動(dòng)畫　62
4．4．1任務(wù)解析——制作“放飛自我”幀動(dòng)畫　63
4．4．2課堂實(shí)訓(xùn)——制作汽車行駛的移鏡頭效果　66
4．5加載頁設(shè)置　66
4．6H5發(fā)布信息設(shè)置　68
4．6．1任務(wù)解析——為“暴飲暴食”H5設(shè)置發(fā)布信息　68
4．6．2課堂實(shí)訓(xùn)——設(shè)計(jì)新年晚會(huì)H5邀請(qǐng)函，并設(shè)置發(fā)布信息　70
4．7屏幕適配　70
4．7．1手機(jī)屏幕尺寸計(jì)量與換算　70
4．7．2手機(jī)尺寸與分辨率　70
4．7．3　iPhone 4S手機(jī)舞臺(tái)屏幕適配 　71
4．7．4課堂實(shí)訓(xùn)——用橫屏顯示方式制作龜兔賽跑的H5作品　74
4．8文件夾管理與使用　74
4．9層數(shù)據(jù)縮放與舞臺(tái)縮放　76
4．10圖層數(shù)據(jù)調(diào)整　81
4．11標(biāo)尺與輔助線　82

第5章
行為、觸發(fā)事件與交互控制
5．1行為與觸發(fā)事件　85
5．1．1幀動(dòng)畫行為控制與觸發(fā)事件體驗(yàn)　85
5．1．2任務(wù)解析——安全駕駛的交互動(dòng)畫1　88
5．1．3行為/觸發(fā)事件實(shí)驗(yàn)　93
5．1．4行為與觸發(fā)事件介紹 　93
5．1．5課堂實(shí)訓(xùn)——安全駕駛的交互動(dòng)畫2　96
5．2幀行為交互控制　96
5．2．1任務(wù)解析——輪播甲骨文“鹿”“虎”“比”“從”1　96
5．2．2課堂實(shí)訓(xùn)——利用幀行為控制4格漫畫的播放效果　98
5．3頁行為交互控制　99
5．3．1任務(wù)解析——輪播甲骨文“鹿”“虎”“比”“從”2　99
5．3．2課堂實(shí)訓(xùn)——利用頁行為控制4格漫畫播放　101
5．4多圖層幀的交互設(shè)計(jì)與制作　101
5．4．1任務(wù)解析——輪播甲骨文“從、比、北”　101
5．4．2課堂實(shí)訓(xùn)——種花生小游戲　104

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

第7章
素材優(yōu)化處理
7．1圖片壓縮處理　130
7．1．1對(duì)PSD 文件進(jìn)行格式轉(zhuǎn)換　130
7．1．2對(duì)PNG文件進(jìn)行壓縮處理 　132
7．1．3課堂實(shí)訓(xùn)——制作一個(gè)5頁的個(gè)人作品集　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更換添加音效后的聲音圖標(biāo)　143
7．3．3利用“背景音樂”屬性添加背景音樂　143
7．3．4任務(wù)解析——音樂播放/暫?？刂婆c按鈕設(shè)計(jì)　145
7．3．5課堂實(shí)訓(xùn)——為7．1．3節(jié)課堂實(shí)訓(xùn)中完成的作品添加背景
音樂　150
第8章
特殊應(yīng)用功能
8．1虛擬現(xiàn)實(shí)　151
8．1．1任務(wù)解析——制作虛擬場(chǎng)景　151
8．1．2課堂實(shí)訓(xùn)——制作室內(nèi)虛擬場(chǎng)景　161
8．2網(wǎng)頁及手機(jī)定制功能　161
8．2．1網(wǎng)頁功能　162
8．2．2課堂實(shí)訓(xùn)——利用網(wǎng)頁功能發(fā)布網(wǎng)頁　163
8．2．3手機(jī)功能　163
8．2．4課堂實(shí)訓(xùn)——利用手機(jī)功能實(shí)現(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課堂實(shí)訓(xùn)——制作一個(gè)游記H5頁面　171

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