可视化H5页面设计与制作 Mugeda实用教程
作者：彭澎，姜旭编著
出版时间： 2019年版
内容简介
《可视化H5页面设计与制作 Mugeda实用教程》以Mugeda为平台，系统地介绍了可视化H5动画页面的设计思路、设计方法与技术实现。《可视化H5页面设计与制作 Mugeda实用教程》共9章，主要内容为H5页面设计与制作的意义，Mugeda的操作界面及基本功能应用，基本的H5页面制作，H5动画页面的制作及相关设置，行为、触发事件与交互控制，动画应用，素材优化处理，虚拟现实、微信功能、第三方文字和图的调用等特殊功能，以及曲线图表、幻灯片、计时器等实用工具。《可视化H5页面设计与制作 Mugeda实用教程》为Mugeda官方推荐用书，内容全面、案例丰富，具有很强的可读性和实用性，可作为高校相关专业和各类H5培训班的教材，也可作为新媒体从业人员自学H5页面设计与制作的参考书。
目录
第 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
