使用工具:互动大师
操作时长:大约2小时
操作准备:在“互动大师注册账号”,并了解工具的基本操作。
主要为3个页面:姓名输入页面、结果显示页面、朋友圈分享页面
再看下在ih5编辑器里的对象树构成,本案例共9个页面,其中有1个姓名输入页面以及8个结果页面,舞台上放置姓名变量,以备结果页和微信分享标题里调用。
下面聊聊具体的制作:
一、舞台设置:
1、新建一个项目,并设置舞台大小为640x1008(大小可自定义,640*1008是贱贱建议的舞台大小)。
2、点击工具栏变量图标
二、姓名输入页设置:
1、在对象树里右击添加页面,并重命名为”姓名输入“,添加背景底图+一个输入框+一个透明按钮,为了简单,底图是一张整图。
2、输入框设置时,勾选透明背景,提示文字为”请输入姓名或公号“,另外在绑定对象设置里绑定舞台上的姓名变量,目的是把输入的值传送给变量a
3、在"获取10w+秘籍”图形上方添加透明按钮,并重命名为”获取秘籍“,后面需要给按钮添加事件跳转到结果页。
三、结果输入页设置:
1、结果输入页模板一样,在舞台添加一个模板页,添加背景底图+两个文本框+一个透明按钮,贱贱在这里同样使用了一张整图作为底图
2、一个文本框为空,直接调用姓名变量的值即可,另一个文本框是自定义的结果文字
3、在“告知朋友圈好友”图形上方添加透明按钮,并重命为“分享朋友圈”,点击按钮可以触发事件并引导分享。
到这里,页面需要的对象都齐了,下面就是动作事件的设置。
四、获取秘籍按钮的事件设置
事件一:点击按钮,结果页的姓名文本框,调用姓名变量
事件二:点击按钮,页面跳转到随机结果页
由于获取秘籍的按钮同时触发多个相同的事件,可以直接为该对象添加事件组,触发条件为”轻触“
五、调用姓名事件:为姓名文本框设置的目标动作为”设定文字”,值为“$a”(调用变量时切记要加上美元符号)
六、跳转结果事件:为舞台设置目标动作为”跳转页面”,页面为“随机页面”,当然还要排除姓名输入页面,也就是设置不包含页面1
七、分享朋友圈按钮的事件设置
这里主要讲下如何自定义微信里的分享标题,给“分享朋友圈”按钮添加“手指按下”的触发条件。
目标对象为“舞台”,目标动作选“微信设定标题”,想获取姓名的话就需要调用姓名变量a,变量调用记得加美元符号$前缀。
不同的结果页就设置不同的标题啦,一个结果页设置后好,其他结果页可以复制粘贴,再修改局部文字。
八、输入框的事件设置
为了逻辑更加严谨,给输入框还需要添加一个事件,当输入不为空时,获取秘籍按钮才可以点击。
到这里教程就讲完了。