查看: 4627|回复: 0

[使用教程] 免费的零代码H5随机刮刮卡制作教程

[复制链接]

0

主题

15

回帖

25

积分

会员

Rank: 5Rank: 5

积分
25
发表于 2015-8-26 16:33:37 | 显示全部楼层 |阅读模式
尹广磊公众帐号




随机刮刮卡:可分别设置不同奖项出现的概率,点击再来一次,可以重新刮奖。

5.4随机刮刮卡51.png



1.登录。百度搜索找到互动大师官网,注册账号并登录。

5.4随机刮刮卡79.png



2.创建作品。在“我的作品”里创建一个新的手机案例,进入编辑页面。

5.4随机刮刮卡114.png



3.用工具栏的图片工具和文本工具在舞台下添加一个刮奖图和四个文本,四个文本分别是一等奖、二等奖、三等奖和谢谢惠顾。

5.4随机刮刮卡173.png



4.用画图工具制作一个刮奖图层。填充颜色设置为灰色,并在这设置为不透明的图层,因为要有刮奖的效果,所以画笔类型要选择橡皮擦,允许画图选择YES。另外画图属性中线条的宽度也可以做相应的设定,这就是在刮奖时刮除时线条的宽度。

5.4随机刮刮卡285.png



5.接下来利用计数器设置事件绑定文本的出现。设置计数器显示不同的数字时不同文本的出现。计数器为0的时候文本3即三等奖显示(事件1),计数器为1时文本2即二等奖显示(事件2),计数器为2时文本1即一等奖显示(事件3)。计数器为负数的时候文本4即谢谢惠顾显示(事件4)。

5.4随机刮刮卡420.png



6.然后对舞台添加事件,使计数器生成随机数。生成随机数的数值范围根据计数器的事件设定。这里可以通过对计数器随机数范围的设定和计数器事件的设定来分别制定不同奖项出现的概率。这里设置生成随机数的范围是-2到2,所以一二三等奖出现的概率都是五分之一,而谢谢惠顾出现的概率是五分之二。

5.4随机刮刮卡560.png



7.最后添加“再来一次”的文本,文本加事件设置点击重新加载舞台,这样就可以在点击之后重新进行刮奖了。

5.4随机刮刮卡612.png



8.最后就是保存作品了,点击舞台上方的保存按钮,会弹出保存信息的一个框,我们可以自己设置作品的标题,介绍,上传作品的封面(封面图大小为200*200),设置作品分类和状态(公开状态下他人才能通过链接看到你的作品)。

5.4随机刮刮卡721.png




任何技术性的问题可以加入“VXPLO互动大师技术服务”群:301817884
或者点击“VXPLO互动大师”直接进入官网体验
VXPLO互动大师欢迎对交互设计有想法的各位朋友们的加入!
您需要登录后才可以回帖 登录 | 新用户注册

本版积分规则

QQ|友情链接|版权声明|关于我们|Axure中文社区 |网站地图

GMT+8, 2025-6-20 05:22

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表