可视化H5页面与交互动画设计制作 木疙瘩标准教程

　　本书是根据教育部职业技能等级认证考核的要求，为了满足“融媒体内容制作”1+X职业技能等级证书考核认证的教学和培训需求，以及各类企业、高校关于融媒体技术与应用人才培养的需要编写的。本书结合实际应用案例，以任务为驱动，由浅到深、由简单到复杂地组织内容。技术上，以木疙瘩为平台，系统地介绍了可视化H5页面与交互动画的设计思路、设计方法与实现技术。本书内容涵盖了1+X职业技能等级证书的初级和中级标准的全部内容，以及高级标准的部分内容。全书共7章，主要内容包括移动通信、信息传播与H5，木疙瘩平台与专业版H5编辑器的基本操作与管理，H5页面制作基础，行为、触发条件与交互，帧动画设计、制作与应用，特型动画，以及关联动画。附录部分介绍了实用工具及控件的基本操作与使用。本书为木疙瘩官方标准教程，内容全面、案例丰富，具有很强的可读性和实用性，适用于“融媒体内容制作”1+X职业技能等级证书考核认证的教学与培训，还适合作为学校相关专业和各类H5培训班的教材，也可作为新媒体从业人员自学H5页面设计与制作的参考书。

　　彭澎，教授，硕士研究生导师，“设计数学”硕士专业创建者，教育管理信息中心特聘专家，出版教材、专著40余部，2016年提出开创融媒体专业，并组建团队研究和建设融媒体核心课程。姜旭，北京信息职业技术学院数字艺术学院院长，中国出版协会装帧艺术工作委员会委员，长期从事教学研究及平面设计工作，主讲“版式设计”“包装设计”“艺术插图设计”等多门专业课程，设计书籍装帧设计作品百余件。

001　第１章　移动通信、信息传播与H5
002　1．1　移动通信技术概述
002　1．1．1　通信与移动通信
002　1．1．2　移动通信的发展阶段
003　1．1．3　移动通信的优势及应解决的关键问题
004　1．2　信息内容与信息传播
004　1．2．1　信息内容及其表达形式
005　1．2．2　信息传播
006　1．3　融媒体、H5与交互动画
006　1．3．1　融媒体
006　1．3．2　H5
008　1．3．3　交互动画
008　1．4　H5制作平台与H5案例体验
008　1．4．1　可视化H5制作平台
008　1．4．2　H5案例体验
009　1．5　H5页面设计的基本原则与规范
009　1．5．1　H5页面设计的基本原则
012　1．5．2　H5页面设计的基本规范
013　1．6　【基础学习任务】了解H5页面设计的基本流程
013　1．6．1　策划与页面设计
014　1．6．2　设计案例介绍
016　1．6．3　素材收集与整理
018　第 2章　木疙瘩平台与专业版H5编辑器的基本操作与管理
019　2．1　【基础学习任务】木疙瘩基本操作与管理
019　2．1．1　注册、登录与退出木疙瘩操作
021　2．1．2　新建作品与作品文件管理操作
026　2．1．3　模板管理与素材管理操作
027　2．1．4　班级管理与作品分享操作
029　2．2　【基础学习任务】专业版H5编辑器界面及其操作
029　2．2．1　菜单栏
034　2．2．2　工具栏
036　2．2．3　页面栏、页面编辑区和舞台
038　2．2．4　工具箱
043　2．2．5　属性面板
045　2．2．6　时间轴和图层
046　第3章　H5页面制作基础
047　3．1　【技能型任务】图文公益广告“为梦想起航”
047　3．1．1　规划与设计
047　3．1．2　任务制作
053　3．2　【技能型任务】长图新闻故事“节日里的城市守护者”
053　3．2．1　规划与设计
053　3．2．2　任务制作
058　3．3　【技能型任务】绘图交互宣传广告“我的家乡邀请你”
059　3．3．1　规划与设计
059　3．3．2　任务制作
066　3．4　任务训练
068　第4章　行为、触发条件与交互
069　4．1　【基础学习任务】了解行为与触发条件的作用
069　4．1．1　“醒一醒”交互动画作品的解析
070　4．1．2　行为与触发条件在交互设计中的作用
072　4．2　【基础学习任务】交互控制基本原理及图层和帧的操作
072　4．2．1　图层及基本操作
073　4．2．2　帧的基本类型
074　4．2．3　帧的基本操作
075　4．2．4　交互控制基本原理
076　4．3　【技能型任务】属性控制交互——“安全驾驶”公益广告
076　4．3．1　规划与设计
077　4．3．2　任务制作
082　4．4　【技能型任务】页行为交互——“昆明老街与重庆市井”影集
083　4．4．1　规划与设计
083　4．4．2　任务制作
085　4．5　【技能型任务】帧行为交互——“看图猜成语”游戏
085　4．5．1　规划与设计
086　4．5．2　任务制作
089　4．6　【技能型任务】限时拼图交互——“电影洗印设备拼图”游戏
089　4．6．1　规划与设计
090　4．6．2　任务制作
094　4．7　任务训练
095　第5章　帧动画设计、制作与应用
096　5．1　【技能型任务】帧动画的基本制作——“油菜花节”宣传广告
096　5．1．1　规划与设计
096　5．1．2　任务制作
098　5．2　【技能型任务】交互帧动画制作——“把精彩留给自己”公益广告
099　5．2．1　完成3个页面的基本制作
102　5．2．2　控制赛车的运动速度：插入、删除帧的操作
102　5．2．3　帧动画重复播放设置：复制、移动帧的操作
103　5．3　【技能型任务】运动镜头帧动画制作——“中国电影博物馆”宣传介绍
104　5．3．1　规划与设计
104　5．3．2　任务制作
107　5．4　【技能型任务】逐帧动画“倒霉的猫”
108　5．4．1　规划与设计
109　5．4．2　任务制作
111　5．5　【技能型任务】逐帧交互动画“风景如画”
112　5．5．1　规划与设计
112　5．5．2　任务制作
113　5．5．3　循环交互效果逐帧动画设计与制作
114　5．6　任务训练
116　第6章　特型动画
117　6．1　【技能型任务】制作基本特型动画
117　6．1．1　进度动画——“节约用水”公益广告
118　6．1．2　路径动画——“UFO来了”动画
121　6．1．3　变形动画——“企业标志转换为产品”动画
123　6．1．4　遮罩动画——“春节快乐”音乐贺卡
126　6．2　【技能型任务】交互动画——“走进云南”旅游宣传
126　6．2．1　规划与设计
127　6．2．2　任务制作
130　6．3　【技能型任务】元件、元件动画设计与制作
131　6．3．1　元件动画制作与调用——“C919大飞机介绍”动画
135　6．3．2　元件交互动画制作与播放控制——“新龟兔赛跑”动画
140　6．4　【技能型任务】交互游戏——“双、单按钮控制轿车行驶”游戏
141　6．4．1　“双按钮控制轿车行驶”的规划与设计
141　6．4．2　“双按钮控制轿车行驶”的任务制作
145　6．4．3　“单按钮控制动画播放与暂停”的设计与制作
147　6．5　【技能型任务】自定义预置动画——“物体自动上升摆动”动画
147　6．5．1　任务制作
148　6．5．2　自定义预置动画的使用
148　6．6　任务训练
149　第7章　关联动画
150　7．1　【基础学习任务】关联的概念及基本操作
150　7．1．1　认识关联
150　7．1．2　“矩形与圆形互动”关联制作
152　7．2　【技能型任务】舞台关联动画—“观国宝”动画
152　7．2．1　规划与设计
153　7．2．2　任务制作
154　7．3　【技能型任务】遮罩关联动画—“定位”动画
154　7．3．1　规划与设计
155　7．3．2　任务制作
157　7．4　【技能型任务】元件关联动画—“射击”游戏
157　7．4．1　规划与设计
158　7．4．2　任务制作
162　7．5　任务训练
164　附录　实用工具及控件的基本操作与使用
165　附录A　微信定制工具—定制微信头像、昵称和图片
166　附录B　表单工具—“城市人口爱好”调查表
169　附录C　数据统计—查看作品发布后的浏览次数等数据
170　附录D　编辑表单工具—制作个人联系方式表单
171　附录E　预置考题工具—制作计算机基础练习试卷
175　附录F　陀螺仪控件—左右摇摆的孔明灯
177　附录G　点赞控件—为你更喜欢的车点赞
178　附录H　排行榜控件—成绩排名
181　附录I　投票控件—为你喜欢的颜色投票
184　附录J　抽奖控件—促销活动抽奖
188　附录K　虚拟现实工具—文化古街“国子监街”
192　附录L　连线控件—识别车辆行进标志