坚信不疑，网易已经变成了以H5驱动的广告公司。
不然怎么会既《你工位有猫，我工位有刀》和《睡姿大比拼》后，《生成你的说明书》又火了，短短一晚上，就被超300万人玩过，数据简直吓死人了！
有没有发现，这类人格测试类H5已经多次占领朋友圈了。这种“套路型”H5无非就是抓住了用户心理，引发对自我性格的探秘和好奇心，其中以图文型测试、音频型测试、视频型测试这三种形式最为常见。
其中的文案相当重要，必须是中性词，放在谁身上都说的通。让用户测试完，一边觉得特别准，一边转着朋友圈，引起更大圈层的转发。
这种测试题类H5，目测今年还会收割好几波流量红利……
下面就以木疙瘩（www.mugeda.com）为创作工具，以「网易《生成你的说明书》」为复现案例，总共5步法，让你也可以制作和“网易网红”比肩的爆款H5！
电脑端打开共享编辑地址：
https://www.mugeda.com/animation/edit/94c6ef35
注：如果是木疙瘩新用户，请先注册，然后「文件」—「另存为」，即可把此案例demo保存到自己账号中。
一、整体解析「网易《生成你的说明书》」
先观察H5，不难发现，整个H5分成四个部分，分别是“数字连续变化的加载页”、“首页引导用户输入名字”、“测试题目”和“结果页面”：
主要运用到的知识点包括序列帧动画、设置首页名字为必填项、测试题的设置、随机跳转到页。整体解析完案例，下面进入到制作环节！
二、数字联系变化的加载页
1）序列帧动画
两位数字的连续变化加载页，运用的是“序列帧动画”。新建图层0，选中要添加的图片，勾选“以序列帧形式添加”，就能一键完成序列帧动画的制作。
这里需要注意的是，不用添加从0~100的图片素材，否则加载页会特别长，影响用户体验。
2）调整图片坐标
新建图层1，仍然以“以序列帧形式添加”，这里添加的是加载页面显示的个位数字。需要注意的是，需要在“属性面板”调整数字位置。
3）添加素材
新建两个图层，分别放置“%”素材和“Loading”字样。
此时，记得「文件」—「保存」，这步非常关键！
三、设置首页名字为必填项
新建一页，开始首页制作，需要实现“用户需要输入名字”并提交后，才能进入到测试环节的效果。
1）添加文本框
首先在图层0上，导入事先做好的背景素材。新建图层1，在需要的位置添加文本框，在右侧“属性面板”设置文本框为“必填”。
2）添加提交表单行为
在图层1，给文本添加提交表单的行为，提交对象为文本框取名，此处为“文本输入1”，行为设置为“跳转到下一页”。
3）添加禁止翻页行为
新建图层3，在第一帧位置添加“禁止翻页”行为，要实现的效果是用户不能跳转到其他页面，需要输入名字点击确定后才会跳到下一页。
4）浏览效果
至此，加载页和首页完成了，大家记得保存，然后可以浏览此时的效果。
四、如何制作听力测试题
从这里开始，我们进入H5主体制作，新建一页（第3页），此页用来制作H5测试题目。
1）导入题目素材
插入空白关键帧，导入我们之前制作的测试题页面，一共有6帧，对应6道题目。
2）插入音频
新建图层2，插入空白关键帧，对应图层1题目内容，插入音效。注意的是，插入的声音需要移到舞台外，并且给声音设置“自动播放/循环”模式。
3）出现就暂停
新建图层3（行为层），添加“出现就暂停”行为，要实现的是用户进入到这一页，画面是停止的。
4）复制粘贴帧
新建图层4（选择层），给第1帧添加“点击跳转到下一帧”和“停止所有声音”两个行为，由于每个测试题的效果一致，所以只需要做一次，其余的复制粘贴即可。
五、制作随机跳转页面
接下来就是见证奇迹的时刻了！玩过这个游戏好几遍的同学就知道了，即使你每次选择同一选项，最后的生成结果也会不同。
1）添加随机数
新建一页，制作随机跳转的结果页。新建图层，添加随机数，最小值1，最大值5，来控制结果页出现的频率。
2）跳转到帧并停止
新建图层，插入空白关键帧，用导入PSD功能，分层导入结果页面；第1帧添加行为“跳转到帧并停止”。
跳转到帧的设置，必须注意用英文状态下的分号分隔。
3）获取日期和姓名
新建图层，通过添加文本框的方式获取当前的日期和时间。
4）添加“改变元素属性”行为
新建图层，给文本框添加“改变元素属性”行为，取值方式“{{文本输入1}}”，用这个来获取用户输入的名字。
六、做测试题类H5的温馨提示
1）中间穿插的小动画尽量精致，网易这则H5在题目和转场方面做的很优秀，大家可以多模仿练习，对提升动画感觉很有帮助；
2）转发标题和描述务必体现测试结果，提升社交货币的价值；
3）做得都挺累的，记得保存！保存！保存！
电脑端打开共享编辑地址：
https://www.mugeda.com/animation/edit/94c6ef35
注：如果是木疙瘩新用户，请先注册，然后「文件」—「另存为」，即可把此案例demo保存到自己账号中。
