提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
春节时,广汽传祺的一个抽奖H5的浏览量突破420万,成为2017年首个现象级H5轻广告。
详情可以查看往期文章《2017年首个百万级PV案例居然是这个H5!!》
抽奖H5的实用性不用多说了,因为传播方便,即开即玩,它完全适用于节日营销、商家推广、品牌传播、用户导流等场景。
那么,当今抽奖H5的需求大吗?
十分大!但通常商家的推广经费不足以支撑动辄4、5万的外包定制费用...所以,如果你学会用工具制作同等效果的抽奖H5,这些有需求的商家就是你的金主。
今天赵四就教大家使用ih5.cn从零开始,一步一步,做出一个完整的抽奖H5。
目前用于抽奖的H5有哪些形式?
试着整理了一下,发现还挺多的——
这些看似完全不同的抽奖H5,其实背后的原理几乎是一样的,所以只需搞懂其中一类,就可以举一反三了。
为了大家学到真功夫,这次赵四在开源网站上搜到了一个名为《Canvas自适应宽度大转盘抽奖代码》的转盘抽奖H5当作教学对象,效果如下:
按正常的套路来说,一个完整的转盘抽奖,通常是这样的——
OK,弄明白整套流程之后,我们就逐步拆分讲解。
一、时间轴——大力出奇迹!让转盘转起来!!
转盘转动效果实质是转盘内轮的旋转角度不断增大,做绕圆心的单向运动罢了。
So...我们要用到时间轴功能,不断调整旋转角度,实现绕圆心运动效果。
1.转盘素材的导入
类似PS的图层层次关系,我们依次把背景图、外轮、内轮、按钮等素材导入。
这里为新手们提个醒,因为后续的页面数比较多,我们需要在舞台下添加“页面”,再将刚上传的素材Ctrl+x/v至页面下即可。
2.转盘转动效果(重点)
如你所见,转盘转动是通过数个时间轴预设好的,诀窍在于由中奖概率机制判定是否中奖(下面会讲到),以此控制不同结果的时间轴播放。
以其中一条时间轴为例,关键点在于修改关键帧时间节点的旋转角度。
时间轴此时关键帧的旋转角度增幅不太一致,这是遵循转盘转动速度先快后慢的原则。在时间间隔一致的前提下,旋转角度的增幅越大,旋转得越快,加速效果也越平滑。
你可以先设数个时间间隔为0.5秒的关键帧,然后在第二关键帧处设一个旋转角度为X,以此作为后面旋转角度增幅的重要依据。
比如后续关键帧分别设为X、3X、10X、12X、13X、13.5X...
如果想偷懒,可以按照上面配图的数值设置。
明白原理后,我们就照版煮碗,做出五条时间轴,命名为不同的奖项名称。
有几点需要注意:
①负责旋转的内轮素材,必须是正圆的PNG,且保证四面相切不留空白,否则不能绕圆心旋转。
②最后一帧的N值,决定转盘最后停止时的位置,需要手动调整。
③把全部时间轴全部装在“容器”功能下,方便后序的操作和管理。
如果初学者不清楚如何使用时间轴,可以参考下方教学视频(声音挺nice的):
https://v.qq.com/x/page/f0173cwckrh.html
二、计数器——设置中奖概率,中不中奖就靠它!
中奖概率看起来很玄乎,实质是一个随机生成的过程,这恰好可以用计数器的“生成随机数”事件代替。
这可以理解为常见的数学问题——随机抓小球。我们预设好几个数,然后让计数器随机生成一个数,当随机生成的数恰好等于我们预设的数字,即为中奖。
明白原理,接下来就好办了。对此我们需要做两件事:
①添加一个透明按钮,以触发计数器能生成随机数
透明按钮的添加十分简单,点击左侧“透明按钮”组件,在“GO”图标的上方拖拽一片区域,这片区域就是透明按钮的触发区。
在透明按钮下添加一个触发条件为轻触,让计数器生成随机数的事件——
上面是该触发事件的属性界面,里面填写的数值范围就决定了这个H5的中奖几率。
数值范围越大,相当于概率的分母越大,中奖概率越小。
②在计数器下插入事件,对生成的随机数进行判断
计数器生成随机数后,只需播放其中一条时间轴&隐藏其他,这两个步骤都是基于同一个触发条件——当数值等于X,因此我们可以用到“事件组”功能来进行组队式触发。
两个事件:从头播放、隐藏同层控件。有两点需要注意:
①上面提到的“隐藏同层控件”,由于ih5.cn不支持把时间轴选为对象,所以我们转个弯,用容器再把时间轴分别装起来,让几个容器变成同层关系,这时选容器为对象,以此代表时间轴。
②由于上面预设的计数器生成随机数的范围是1-10,那么“不中奖”的数值范围就应当是填写为5-10。
来到这里,先呼一口气,已经完成一半啦!转盘的雏形也出来了,我们预览看看效果。
因为转盘转得太快了,录屏的帧数跟不上,大家可以扫下方二维码预览此时的效果。
三、事件&数据库——信息反馈要做足!
站在用户体验角度,信息反馈是不能省的,用户抽完奖,中奖与否都要告诉用户。一般而言,可以采用跳转反馈页面——
新起一个页面,老套路,用容器把同类型的图片装起来。这些反馈图片需要跟前面生成的数值匹配,所以我们得在页面1的计数器下动手脚:
这个逻辑设置好了,那么跳转页面2的逻辑呢?
很简单,在每个转盘时间轴结束后跳转就OK了~!直接在时间轴下添加一个事件即可——
·触发条件:结束
·触发对象:舞台
·目标动作:跳转页面
·页面:页面2
三、数据库、二维变量、输入框——记录哪些人中奖了!
呼...终于来到最后一步了,咱们再坚持一下就完成了!!撸起袖子继续干!
这部分需要用到数据库跟二维变量,这俩货比较难也比较抽象。
为了照顾新手,我们先来初步认识一下这俩货:
数据库:可以理解为一个装数据的大容器,支持上传数据、提取预设好的数据。
二维变量:跟变量相似,扮演连接数据库的角色。同时也可以作为数据库提取时的临时存放地点。
数据库的应用,很容易搞混乱出错,所以我们得先捋清楚逻辑再动手:
①抽奖的结果必须记录
抽奖的结果决定于一开始生成随机数的计数器。
②中奖了的人要登记个人信息
登记需要输入,需用到输入框。
我们先在左侧功能栏里找到数据库功能,在舞台下添加一个数据库。紧接着,添加数据库下重命名为“奖品”的字段。
在页面1的计数器下的每个事件组下,分别添加“赋值”事件:
光是赋值,数据库此时还是没数据的,还需要在赋值后做一个“提交”的逻辑,我们干脆就利用前面的时间轴的事件组,设置数据库的提交。
此时,我们把舞台属性栏下的“微信登录”打开。预览试着抽一次,就可以在后台看到数据库记录下的结果了。
终于有点模样了...咱们继续~
按套路来说,抽奖H5都会要求大家填写相关信息,用输入框再适合不错了。
我们上传一个名为“信息登记”的素材,与输入框等一并装进容器下方便管理。
与此同时,在数据库下新增两个文本字段,用来装载用户填写的名字和微信号。这时,数据库后台的列表样式会是这样的:
在脑袋里记住这个画面,我们在输入框里绑定二维变量时要选的位置,就是根据这个而定的~
完成这步时,我们可以用$a[1][2]代表输入的名字会绑定到二维变量的一行二列处,同理$a[1][3]代表微信号会绑定到一行三列处。
这里有个难点,我们此时不能再次用“提交数据库”的事件了。
因为数据库的数据是以“行”作为基准的,这意味着我提交过一次的前提下,再次提交会导致新的数据另开一行,导致录入的数据对不上号。
可以这么理解,有一个篮子,我们放了一个苹果进去然后用包装纸封起来了,此时我们就不能再放新的苹果进去,只能用另外的篮子装。除非把包装纸拆掉,放新的苹果进去再包装回来。
那么,新的数据如何放进这个“篮子”里呢?用二维变量——
二维变量无形无色,是一个很虚的概念,结合上面的例子,我们可以理解成它是一双手:
撕开包装纸,然后把里面的苹果拿出来(输出旧数据),再连同新的苹果捏在手里(二维变量),重新放进篮子里(更新数据库)。
不妨将这个输出到更新的过程拆分:
①将数据库输出到二维变量——将原有苹果拿出来
我们以页面2的显示作为触发条件,设置数据库输出到二维变量的事件。
因为当前数据库只有“奖品”的数据,所以脑补二维变量此时的列表应该是这样的——
②赋值新数据,更新数据库——将新的苹果放到篮子里
将用户在输入框输入的这两个值分别赋值到二维变量中,此时二维变量的列表是这样的——
紧接着!最后一步!将全部苹果放进篮子里——更新数据库!!!
大功告成
为了方便大家练习
我已经把这个案例的素材上传了
大家可以在文章右下角自行下载
(剩下一些无关紧要的逻辑,我就不啰嗦了
不然篇幅真的很长很长...有不懂的,尽管问我哈)
想搞定二维变量的难点,记住这个操作顺序就可以了:
①先赋值,接着提交一次数据库,形成“旧数据”
②将旧数据输出到二维变量
③将新数据以X行X列的形式赋值到二维变量中
④以二维变量更新数据库
憋着尿看到这里的朋友,赵四给你跪了,都是爱...
这篇全案教程,有点长,但不求别的,只为大家能学到真功夫。
先来感受一下最终的效果:
文首说好的惊喜呢?!
长久以来
一直没机会表达我对大家的爱
趁这个机会
给广大支持赵四的粉丝们送一波福利
发红包
怎么拿?
去上面的转盘H5里抽!
抽中,俺就给你发~
仅是个人立场的一份心意,如果争议,解释权归我~(嘿嘿嘿)
活动期限是多久?那就要看我钱包里还剩多少钱了...(抽中一粒瓜子是随机红包..大家悠着点...)
中奖几率有多大?大家尽管抽,能中奖算你赢。(微笑脸)
想学更多实用的H5,记得继续关注赵四的动向啦~
咱们下期见,拜拜~
为了完成这篇教程,忍了三小时的尿,大兄弟你就不为我点个赞么 Orz
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册