Mugeda零代碼可視化H5設計實戰

目　錄

第1章  融媒體傳播與H5概述

1.1　信息傳播 004

1.1.1.信息傳播簡介 004

1.1.2.信息傳播的特點 004

1.2　融媒體 004

1.2.1.融媒體簡介 004

1.2.2.融媒體的優勢 005

1.2.3.融媒體落地實施 006

1.3　H5簡介 007

1.3.1.H5的概念 007

1.3.2.H5的基本特徵 007

1.3.3.H5的應用 008

1.3.4.H5的傳播與營銷 011

1.4　H5設計 012

1.4.1.H5策劃的原則 012

1.4.2.H5的策劃步驟 015

1.4.3.H5的營銷小技巧 015

1.4.4.H5的微信功能 016

1.4.5.H5頁面設計法則 016

第2章  Mugeda操作基礎

2.1　Mugeda簡介 022

2.1.1.Mugeda平臺 022

2.1.2.Mugeda的優勢 022

2.1.3.Mugeda賬號註冊.方法 023

2.1.4.Mugeda的版本 023

2.2　Mugeda基本操作.流程 024

2.2.1.新建文件的方法 024

2.2.2.發布流程 025

2.2.3.問題處理途徑 027

2.3　Mugeda平臺編輯.界面及快捷鍵 029

2.3.1.菜單欄 029

2.3.2.工具欄 032

2.3.3.面板 033

2.3.4.快捷鍵 038

2.4　作品尺寸與屏幕

　　  .適配 039

2.4.1.作品尺寸設置 039

2.4.2.屏幕適配設置 039

2.5　Mugeda賬戶管理 041

2.5.1.我的作品 041

2.5.2.我的模板 043

2.5.3.素材管理 044

2.5.4.回收站 044

2.5.5.我的賬戶 044

第3章  編輯素材

3.1　“選擇”工具組 048

3.1.1.“選擇”工具 048

3.1.2.“節點”工具 048

3.1.3.“變形”工具 049

3.1.4.“縮放”工具 049

3.1.5.“快捷”工具 049

3.1.6.“輔助線”工具 050

3.2　“繪制”工具組 051

3.2.1.“直線”工具 051

3.2.2.“曲線”工具 052

3.2.3.“矩形”工具 052

3.2.4.“圓角矩形”工具 052

3.2.5.“橢圓”工具 052

3.2.6.“多邊形”工具 053

3.3　圖形的屬性設置 053

3.3.1.寬高屬性 053

3.3.2.坐標屬性 054

3.3.3.鎖定邊距 054

3.3.4.填充色 054

3.3.5.邊框色 056

3.3.6.邊框類型 056

3.3.7.透明度 056

3.3.8.旋轉 057

3.3.9.端點和接合點 058

3.3.10.濾鏡屬性設置 058

3.4　圖形的排布組合 060

3.4.1.排列 060

3.4.2.對齊 061

3.4.3.變形 061

3.4.4.組合 061

3.4.5.合並 062

3.4.6.相交 062

3.4.7.剪裁 062

3.5　課堂案例：繪制.精美CD 063

3.6　課後習題：旭日.東升 067

第4章  媒體工具

4.1　素材的壓縮與上傳 070

4.1.1.圖片素材 070

4.1.2.Photoshop（PSD）.素材 074

4.1.3.音頻素材 075

4.1.4.視頻素材 078

4.2　編輯文本 082

4.2.1.文字編輯 082

4.2.2.預置文本 082

4.2.3.雲字體 083

4.2.4.裁剪組 084

4.2.5.文本段落工具 085

4.3　添加媒體 085

4.3.1.添加幻燈片 085

4.3.2.添加網頁 086

4.3.3.添加圖表 087

4.3.4.添加虛擬現實 088

4.3.5.添加直播 091

4.4　課堂案例：製作.手機屏保 092

4.5　課後習題：今昔.對比 095

第5章  動畫製作

5.1　時間線與幀 098

5.1.1.“時間線”面板 098

5.1.2.編輯幀 099

5.2　動畫類型 101

5.2.1.序列幀動畫 101

5.2.2.關鍵幀動畫 102

5.2.3.元件動畫 104

5.2.4.路徑動畫 105

5.2.5.進度動畫 106

5.2.6.變形動畫 108

5.2.7.遮罩動畫 110

5.3　屬性動畫 113

5.3.1.濾鏡動畫 113

5.3.2.編輯運動曲線 114

5.4　預置動畫 120

5.4.1.添加預置動畫 120

5.4.2.設置預置動畫 120

5.4.3.自定義預置動畫 121

5.5　課堂案例：風景加載動畫 121

5.6　課後習題：手機短信 126

第6章  行為交互

6.1　行為概述 130

6.1.1.行為的定義 130

6.1.2.添加行為 130

6.1.3.行為的觸發 130

6.2　行為控制 131

6.2.1.幀的行為 131

6.2.2.頁的行為 134

6.2.3.動畫的控制 137

6.2.4.播放元件片段 139

6.2.5.聲音的控制 141

6.2.6.視頻的控制 144

6.2.7.改變元素屬性 148

6.2.8.圖片的控制 150

6.3　課堂案例：頭像.生成器 156

6.4　課後習題：問答.測試 162

第7章  關聯與表單

7.1　關聯綁定 166

7.1.1.舞臺動畫關聯 166

7.1.2.元件動畫關聯 168

7.1.3.屬性關聯 169

7.1.4.自動關聯 170

7.1.5.公式關聯 172

7.2　表單 172

7.2.1.自定義表單 172

7.2.2.定製文字 178

7.3　邏輯判斷 180

7.3.1.多種表達式的寫法 180

7.3.2.條件判斷 190

7.3.3.邏輯表達式判斷 191

7.4　課堂案例：音樂.播放器 192

7.5　課後習題：滑動.解鎖 201

第8章

綜合案例8.1　視頻彈幕 204

8.1.1.案例效果 204

8.1.2.製作步驟 204

8.2　星語心願 212

8.2.1.案例效果 212

8.2.2.製作步驟 212

8.3　拼圖游戲 221

8.3.1.案例效果 221

8.3.2.製作步驟 221

8.4　課後習題：邀請函 230