翻亮图片 自制幸运抽奖

软件先锋 2016-01-01 04:54网络整理点击: 标签:

我们经常会在电视综艺节目中看到翻牌抽奖游戏,那么,如果不熟悉编程软件,是否也可做翻牌抽奖游戏呢?让我们一同尝试!

实例:如图所示,在页面中有3行3列9个图片构成的抽奖区,点击开始按钮后在抽奖区中点击任意图片,图片就会翻转显示奖品并锁定;当鼠标移入其他图片时图片翻转可以看到其他奖品,移出时图片翻转成原样;点击“再来一次”按钮可进行再一次抽奖游戏。(图1)

1421ASW-FLTPXYCJ-图1

1. 显示图片轻松设置

打开Axure RP Pro 7.0软件,在站点地图面板将不需要的页面右击删除掉,将所保留的页面重命名(如“幸运大抽奖”)。在部件库拖动中继器到页面中,双击这个中继器,在中继器页面利用部件属性和样式面板对原有的矩形进行样式设置;在中继器数据集面板增加3列,字段名分别为ImgA(用于存放背景图)、ImgB(用于存放不同的奖品图)、sjs(用于图片的随机显示),添加行并分别在ImgA和ImgB列右击导入背景图和奖品图。在Repeater Style面板设置布局为水平,勾选换行,每row包含3个。(图2)

1421ASW-FLTPXYCJ-图2

接下来,右击矩形转化成动态面板并命名为“图片显示”,在部件管理面板双击动态面板中的“状态1”,在状态1窗口,拖动图片部件到矩形中,调整其大小与矩形内径相同,导入临时背景图。右击状态1复制成状态2和状态3,调整状态2和状态3窗口中的矩形和图片宽度越来越小。(图3)

1421ASW-FLTPXYCJ-图3

依次复制状态3、状态2、状态1,把状态1-6从上到下排列好,重新命名为1-6,这样就能实现图片的翻转效果。为了在选中图片时,图片边框变红,需要把状态6中的图片命名为tu,点击部件属性和样式面板中属性标签交互样式中的“选中”属性设置好选中时的边框颜色为红色,线形加宽。

接着,切换到中继器窗口,在中继器项目交互面板双击Case 1,在用例编辑器窗口右击删除原有语句,添加6个“设置图像”动作,在配置动作处勾选中图片显示下的“设置(图片)”,默认设置为“值”,点击fx按钮,在编辑值窗口点击“插入变量、属性、函数或运算符”,在弹出的下拉列表中前3个选择Item.ImgA,后3个选择Item.ImgB。(图4)

1421ASW-FLTPXYCJ-图4

2. 动画效果按需控制

利用“项目→全局变量”菜单添加名称为bian、默认值为1的变量。然后,为中继器窗口中动态面板的“鼠标单击时”新增用例,在用例编辑器窗口新增变量bian等于1时的条件,添加设置面板状态动作,在配置动作处勾选当前部件,选择状态设置为6;增加选中动作,勾选tu;添加禁用动作,勾选图片显示;添加设置变量动作,勾选bian,值为空。分别为“鼠标移入时”和“鼠标移出时”添加用例,在各自的用例编辑器窗口都新增一条变量bian等于空时的条件,都添加设置面板状态动作,勾选当前部件,鼠标移入时选择状态为Next,鼠标移出时选择状态为Previous,循环间隔都为50毫秒。(图5)

1421ASW-FLTPXYCJ-图5

小提示:

可通过改变循环间隔时间调整动画效果为最合适。

3. 巧设奖品随机排列

首先,在中继器窗口的图片上添加单选按钮部件,命名为xz,右击它设置为隐藏,并为它的“选中状态改变时”添加用例。在窗口中新增条件为这个部件的选中状态为true时,添加更新行动作,选择sjs列,值为Math.random();添加新增排序动作,勾选中继器,属性为sjs,顺序为升序。(图6)

1421ASW-FLTPXYCJ-图6

4. 不用代码控制抽奖

在幸运大抽奖主页中增加一个矩形部件,大小与图片区域相等,透明度为30%,置于顶层,名称为fg。在主页合适位置添加形状按钮,双击标签修改为开始。右击它转化成动态面板,名称为anniu。右击anniu的状态1复制成状态2,将状态2里面的按钮标签改为“再来一次”。为状态1中“开始”按钮的“单击鼠标时”增加用例,添加选中动作,勾选xz,值为true;添加隐藏动作,勾选fg;添加设置面板状态动作,勾选anniu,选择状态为状态2;再增加选中动作,勾选xz,值为false。同样为状态2中“再来一次”按钮的“单击鼠标时”增加用例。添加选中动作,勾选xz,值为true;增加设置面板状态动作,勾选图片显示,选择状态设置为1;增加设置变量值动作,勾选bian,值为1;增加显示动作,勾选fg;增加设置面板状态动作,勾选anniu,选择状态为“状态1”;再增加选中动作,勾选xz,值为false。(图7)

1421ASW-FLTPXYCJ-图7

切换到“幸运大抽奖”主页面,在“页面交互”面板为“页面载入时”增加用例,添加设置面板状态动作,勾选“图片显示(动态面板)”,选择状态设置为1。

以上任务完成后,发布生成HTML文件。点击该文件启动网络浏览器,便能够演示抽奖了。