刘健亮微信教程：2小时学会随机结果类H5制作
最近的朋友圈又被各种随机结果类H5刷屏啦，网易娱乐的“我要上头条”、XX新年签……，撇开营销的念头，贱贱跟大家普及下这类H5的制作思路。
使用工具：互动大师
操作难度：★★★☆☆
操作时长：大约2小时
操作准备：在互动大师（ih5.cn）注册账号，并了解工具的基本操作。
大家可以先扫描下面二维码，看下案例示范：2016年XXX写出10w+文章主要靠XXX
主要为3个页面：姓名输入页面、结果显示页面、朋友圈分享页面
再看下在ih5编辑器里的对象树构成，本案例共9个页面，其中有1个姓名输入页面以及8个结果页面，舞台上放置姓名变量，以备结果页和微信分享标题里调用。
下面聊聊具体的制作：
舞台设置：
1).新建一个项目，并设置舞台大小为640x1008(大小可自定义，640*1008是贱贱建议的舞台大小)。
2).点击工具栏变量图标 ，在舞台新增一个变量对象，在对象树里选中变量对象右击可以重命名为“姓名变量”方便识别 。在姓名变量的属性设置里，设置变量名称为“a”，后面变量调用会用到。
姓名输入页设置：
1).在对象树里右击添加页面，并重命名为”姓名输入“，添加背景底图+一个输入框+一个透明按钮，为了简单，贱贱没有切图，底图是一张整图。
2.输入框设置时，勾选透明背景，提示文字为”请输入姓名或公号“，另外在绑定对象设置里绑定舞台上的姓名变量，目的是把输入的值传送给变量a
3.在"获取10w+秘籍”图形上方添加透明按钮，并重命名为”获取秘籍“，后面需要给按钮添加事件跳转到结果页。
结果输入页设置：
1).结果输入页模板一样，在舞台添加一个模板页，添加背景底图+两个文本框+一个透明按钮，贱贱在这里同样使用了一张整图作为底图
2). 一个文本框为空，直接调用姓名变量的值即可，另一个文本框是自定义的结果文字
3.在“告知朋友圈好友”图形上方添加透明按钮，并重命为“分享朋友圈”，点击按钮可以触发事件并引导分享，贱贱这里使用了一个gif
到这里，页面需要的对象都齐了，下面就是动作事件的设置。
获取秘籍按钮的事件设置
事件一：点击按钮，结果页的姓名文本框，调用姓名变量
事件二：点击按钮，页面跳转到随机结果页
由于获取秘籍的按钮同时触发多个相同的事件，可以直接为该对象添加事件组，触发条件为”轻触“
调用姓名事件：为姓名文本框设置的目标动作为”设定文字”，值为“$a”(调用变量时切记要加上美元符号)
跳转结果事件：为舞台设置目标动作为”跳转页面”，页面为“随机页面”，当然还要排除姓名输入页面，也就是设置不包含页面1
分享朋友圈按钮的事件设置
这里主要讲下如何自定义微信里的分享标题，给“分享朋友圈”按钮添加“手指按下”的触发条件。
目标对象为“舞台”，目标动作选“微信设定标题”，想获取姓名的话就需要调用姓名变量a，变量调用记得加美元符号$前缀。
不同的结果页就设置不同的标题啦，一个结果页设置后好，其他结果页可以复制粘贴，再修改局部文字。
输入框的事件设置
为了逻辑更加严谨，给输入框还需要添加一个事件，当输入不为空时，获取秘籍按钮才可以点击。
到这里，这个案例就讲完啦，够详细吧？
这个教程只作启发，相信大家可以制作更多有趣实用的作品（比如随机抽奖）。PS:纯抽签类H5在微信朋友圈传播有风险哦
评论
评论
推荐评论
全部评论（6条）