可视化H5页面设计与制作 Mugeda实用教程 PDF下载

第 1章

为什么要学习H5应用开发技术

1.1移动互联网与信息传播　1

1.2智能手机的产生与发展　2

1.3现在人们为什么离不开智能手机　3

1.4H5的特征　4

1.5H5开发及开发工具　5

1.6H5营销　6





第 2章

H5页面制作工具Mugeda

2.1初识Mugeda　7

2.1.1Mugeda开发背景　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从创建到发布——制作并发布一个简单的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创意名片　33

3.2元件　34

3.2.1任务解析——壁纸设计与制作　34

3.2.2课堂实训——用元件制作企业宣传招贴　42

3.3组与长数据　42

3.3.1任务解析——轮播图片的设计与制作　42

3.3.2课堂实训——利用长数字制作轮播图片并发布　45

3.4模板的使用与生成　46

3.4.1任务解析——利用模板制作端午节粽子营销广告　47

3.4.2课堂实训——利用模板制作母亲节贺卡　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发布信息设置　68

4.6.1任务解析——为“暴饮暴食”H5设置发布信息　68

4.6.2课堂实训——设计新年晚会H5邀请函，并设置发布信息　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章

行为、触发事件与交互控制

5.1行为与触发事件　85

5.1.1帧动画行为控制与触发事件体验　85

5.1.2任务解析——安全驾驶的交互动画1　88

5.1.3行为/触发事件实验　93

5.1.4行为与触发事件介绍 　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章

素材优化处理

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任务解析——音乐播放/暂停控制与按钮设计　145

7.3.5课堂实训——为7.1.3节课堂实训中完成的作品添加背景

音乐　150



第8章

特殊应用功能

8.1虚拟现实　151

8.1.1任务解析——制作虚拟场景　151

8.1.2课堂实训——制作室内虚拟场景　161

8.2网页及手机定制功能　161

8.2.1网页功能　162

8.2.2课堂实训——利用网页功能发布网页　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表单及统计　175



9.2.1任务解析——城市人口爱好调查表　176

9.2.2课堂实训——制作本年度受欢迎的旅游景区调查表　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节日贺卡　191

9.7陀螺仪　191

9.7.1任务解析——制作放飞孔明灯的动画　191

9.7.2　课堂实训——设计并制作一个不倒翁小游戏　194

9.8随机数　194

9.8.1任务解析——动态产品广告的设计与制作　194

9.8.2课堂实训——设计制作打地鼠小游戏　197

9.9计时器　197

9.9.1任务解析——制作H5新闻页面　197

9.9.2课堂实训——制作毕业设计作品集　200