坚信不疑，网易已经变成了以H5驱动的广告公司。

不然怎么会既《你工位有猫，我工位有刀》和《睡姿大比拼》后，《生成你的说明书》又火了，短短一晚上，就被超300万人玩过，数据简直吓死人了！

扫描二维码看案例

有没有发现，这类人格测试类H5已经多次占领朋友圈了。这种“套路型”H5无非就是抓住了用户心理，引发对自我性格的探秘和好奇心，其中以图文型测试、音频型测试、视频型测试这三种形式最为常见。

其中的文案相当重要，必须是中性词，放在谁身上都说的通。让用户测试完，一边觉得特别准，一边转着朋友圈，引起更大圈层的转发。

这种测试题类H5，目测今年还会收割好几波流量红利……

下面就以木疙瘩（www.mugeda.com）为创作工具，以「网易《生成你的说明书》」为复现案例，总共5步法，让你也可以制作和“网易网红”比肩的爆款H5！

电脑端打开共享编辑地址：

https://www.mugeda.com/animation/edit/94c6ef35

注：如果是木疙瘩新用户，请先注册，然后「文件」—「另存为」，即可把此案例demo保存到自己账号中。

如果你想看更详细的分解式教学，点击这里 即可购买。新课上线（5.30~6.5）限时1折，原价9.9，现价仅需1.99！

一、

整体解析「网易《生成你的说明书》」

先观察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保存到自己账号中。

如果你想看更详细的分解式教学，点击这里 即可购买。新课上线（5.30~6.5）限时1折，原价9.9，现价仅需1.99！

网易爆款H5，原来就是个套路！你还不赶紧动手做做看，说不定下一个刷屏的就是你哦！

如果觉得文章对你有所帮助，欢迎点赞并且推荐给你的好友。

·  福 ·  利  ·  来  ·  啦  ·

6月13日上午10点，木疙瘩H5大讲堂直播课《快闪H5制作》，1节课教你掌握制作快闪H5的关键心法，关键直播课还是免费的哦！

扫描二维码，快来报名参加吧！