Axure教程:动态面板实现广告循环播放

淘宝、天猫和京东等购物网站已经成为我们生活中的一部分,每每打开我们都可以看到有一个广告窗口,图片在里面循环滚动播放,那么它是怎么实现的呢?利用Axure软件我们可以简单实现,下面我将向大家分享一下具体步骤,希望能够帮助到大家。

guanggaobofang

原材料:

图片、动态面板、按钮、状态栏

2016-06-09_081126

注意命名,状态栏内的原点按钮命名和对应的图片一致,后面有妙用;按钮和状态栏都可以用矩形轻松制作而成。

步骤/方法

第一步:设置动态面板内容

动态面板状态设置成两层动态状态,分别是img1、img2,内置相应的图片,并将图片和动态面板的大小调成一致,本次案例中的大小是W:850,H:400。

2016-06-09_080247

在主界面将按钮和状态移入动态面板框内,调整好位置,设置left和right按钮的默认状态为“隐藏”。

2016-06-09_081805

8

第二步:设置动态面板滚动状态

选中动态面板“dong1”—元件交互与说明“载入时”添加用例—动态面板“设置面板状态”—dong1(动态面板)—“previous”“向前循环”“循环间隔4000毫秒”—进入动画“向左滑动”“向左滑动”—“如果隐藏则显示面板” (以上秒数可以自由选择)

2016-06-09_081606

第三步:设置点击图片打开广告链接的交互动作

双击动态面板“dong1”进入动态面板状态管理—进入面板状态“img1”—选中图片“img1”—元件交互与说明“鼠标单击时”—链接“打开链接”—打开位置“当前窗口”(也可以选中新窗口)—勾选“链接到url或文件”—超链接“http://www.baidu.com”(输入你的目标链接地址)(“img2”同)

1

第四步:设置按钮、状态栏“选中”状态

选中“left”按钮—元件属性与样式“属性”—交互样式设置“选中”(注意不要点错为禁用复选框的选中)—勾选“填充颜色”复选框并选择一个较深颜色,如#999999。(“right”同)

选中状态栏的原点按钮“img1”—元件属性与样式“属性”—交互样式设置“选中”—勾选“填充颜色”复选框并选择一个橙色,如#FF6600。(“img2”同)

选中状态栏的原点按钮“img1”和“img2”—元件属性与样式“属性”—输入[选项]组名称—输入“zu1”(随意输入都可以)

第五步:设置按钮、状态栏的交互事件

选中“left”按钮—元件交互与说明“鼠标单击时”—动态面板“设置面板状态”—dong1(动态面板)—“next”“向前循环”—进入动画“向右滑动”“向右滑动”

选中“right”按钮—元件交互与说明“鼠标单击时”—动态面板“设置面板状态”—dong1(动态面板)—“provious”“向前循环”—进入动画“向左滑动”“向左滑动”

left

left

10

right

选中“left”按钮—元件交互与说明“鼠标移入时”—元件“选中”—勾选“当前元件”—选中状态“值”“true”(“right”同)

选中“left”按钮—元件交互与说明“鼠标移出时”—元件“选中”—勾选“当前元件”—选中状态“值”“false”(“right”同)

2016-06-09_082321

选中状态栏的原点按钮“img1”—元件交互与名称“鼠标单击时”—动态面板“设置面板状态”—勾选“dong1”—选择状态“Value”—状态名称“[[This.name]]”(利用到了我们之间巧妙的命名了)(“img2”同)

2

第六步:设置动态面板与按钮和状态栏的交互

选中动态面板“dong1”—元件交互与说明“鼠标移入时”:

  • 元件“显示”—勾选“right”“left”—可见性“显示”
  • 动态面板“设置面板状态”—勾选“set dong1”—选择状态“停止循环”

选中动态面板“dong1”—元件交互与说明“状态改变时”—

  • “添加条件”—面板状态“this”==状态“img1”(即描述“if 面板状态于 This == img1”)—元件“选中”—勾选“img1(形状)”—“值”“true” (这里的img1(形状)指的是状态栏里的原点按钮1)
  • “添加条件”—面板状态“this”==状态“img2”(即描述“Else if 面板状态于 This == img2”)—元件“选中”—勾选“img2(形状)”—“值”“true” (这里的img2(形状)指的是状态栏里的原点按钮2)

完成后动态面板的交互如下图

3

第七步:动态面板“鼠标移出”交互设置(方法一)

情形一:不设置移出条件

选中动态面板“dong1”—元件交互与说明“鼠标移出时”—元件“隐藏”—勾选“left”和“right”—可见性“隐藏”—动态面板“设置面板动态”(重复第二步)

Bug:当鼠标从动态面板(图片)移入“left”和“right”按钮时,也同样属于鼠标移出动态面板,导致图片恢复滚动效果,“left”和“right”在隐藏和显示出反复闪屏转换。

情形二:在情形一的基础上设置移出条件

此步骤需要使用到函数和局部变量。鼠标的函数“Cursor.x”和“Cursor.y”,可以点击“fx”,再点击“插入变量或函数”来获取。

局部变量主要是点击“fx”—“添加局部变量”—“dong1”=“元件”“dong1”(如下图)

4

选中动态面板“dong1”—元件交互与说明“鼠标移出时”—添加条件—符合“任何”

  • “值”“[[Cursor.y]]””<””值”“[[dong1.top]]” (含义就是:鼠标的y坐标小于动态面板“dong1”的上边界)
  • “值”“[[Cursor.y]]””>””值”“[[dong1.bottom]]” (含义就是:鼠标的y坐标小于动态面板“dong1”的下边界)
  • “值”“[[Cursor.x]]””<””值”“[[dong1.left]]” (含义就是:鼠标的y坐标小于动态面板“dong1”的左边界)
  • “值”“[[Cursor.x]]””>””值”“[[dong1.right]]” (含义就是:鼠标的y坐标小于动态面板“dong1”的右边界)

5

这样子是不是就可准确实现鼠标移出效果了呢?

Bug:鼠标移出效果将会失效,即移出鼠标时仍然不会执行动态窗口滚动的效果。原因是,该动作只在鼠标移出动态窗口“dong1”的那一瞬间执行,此时,对于鼠标的坐标定位会早于移出动作执行,即鼠标坐标定位仍然停留在动态窗口内,因此条件判断不符合条件,动作无法执行。

情形三:在情形二的基础上缩小移出的判断空间范围

基于情形二的bug,鼠标定位会比移出动作执行早一点,可以转换思路,将判断范围缩小。

选中动态面板“dong1”—元件交互与说明“鼠标移出时”—添加条件—符合“任何”

  • “值”“[[Cursor.y]]””<””值”“[[dong1.top+10]]” (上边界向下缩小了10)
  • “值”“[[Cursor.y]]””>””值”“[[dong1.bottom-10]]” (下边界向上缩小了10)
  • “值”“[[Cursor.x]]””<””值”“[[dong1.left+10]]” (左边界向右缩小了10)
  • “值”“[[Cursor.x]]””>””值”“[[dong1.right-10]]” (右边界向左缩小了10)

这样子修改之后基本上可以满足使用要求,但仍存在bug。用极限思想思考一下,当鼠标移动速度无限接近无穷时,总会在达到一个临界速度后,在执行移动动态窗口所需的时间内移出距离超过缩短的边界值10,则又会出现情形二的bug。

第八步:新增动态面板“dong2”解决bug(方法二)

第七步提供的是一种实现移出效果的思路,虽然有小bug,但也是非常值得学习的,用在其他需要的原型中也是可以取到很好的效果的。

步骤七无法解决的问题,实质是无法做到让“移入‘left’和‘right’按钮”不包括在“移出动态面板‘dong1’”这个动作范围内。因此,我们可以转换思路将“left”、“right”按钮和状态栏都纳入到动态面板内,但因为“left”、“right”按钮和状态栏是不随图片滚动,所以无法放置在同一个动态面板内。我们将采取的解决方法是用另一个相同大小的动态面板“dong2”对动态面板“dong1”进行覆盖,并将“left”、“right”按钮和状态栏放置在动态面板“dong2”内。

1)放入动态面板“dong2”,设置大小W:850,H:400;将“left”、“right”按钮和状态栏剪切粘贴放入动态面板“dong2”的面板状态“state1”中,同时,重新设置第六步动态面板“dong1”与状态栏按钮“img1”和“img2”的选中交互。

2)设置动态面板“dong2”交互动作:

选中动态面板“dong2”—元件交互与说明“鼠标移入时”—元件“显示”—“right”“left”—动态面板“设置面板状态”—勾选“dong1”—选择状态“停止循环”

选中动态面板“dong2”—元件交互与说明“鼠标移出时”—元件“隐藏”—“right”“left”—动态面板“设置面板状态”—勾选“dong1”—选择状态“previous”“向前循环”“循环间隔4000毫秒”—进入动画“向左滑动”“向左滑动”—“如果隐藏则显示面板”

6

经过动态面板“dong2”对“dong1”的覆盖可以完美地解决地第七步中存在的问题,但又会出现新的问题,由于“dong1”已经被覆盖,所以第三步中设置的点击图片打开链接的功能将会失效。因此,我们需要借助一个矩形来使解决这一问题。

3)打开动态面板“dong2”的面板状态“state1”,设置一个透明的矩形大小与动态面板“dong2”完全重合,并将矩形置于底层。

4)选中矩形—元件交互和说明“鼠标单击时”—添加条件—“面板状态”“dong1”==“状态”“img1”(即if 面板状态于 dong1 == img1)—链接“打开链接”—打开位置“当前位置”—勾选“连接到url或文件”—超链接“http://www.baidu.com”(同理设置动态面板“dong1”==img2时)

选中矩形—元件交互和说明“鼠标单击时”—添加条件—“面板状态”“dong1”==“状态”“img2”(即if 面板状态于 dong1 == img2)—链接“打开链接”—打开位置“当前位置”—勾选“连接到url或文件“—超链接“www.taobao.com”

7

至此,已经完美的实现广告循环播放效果,本文主要是跟大家交流对于实现循环播放效果的两种不同思路,如果认为后一种方法更好的可以将第三步和第七步多余的命令删除。

第一次写这种教案式的文章,可能写得有点啰嗦(我自己都觉得有些啰嗦,但又怕太简洁小白看不懂),希望大家多多包涵,有什么问题也希望大家可以指出来,以后会继续努力争取做的更好。谢谢阅读!

 

本文由 @jianyang 原创发布于人人都是产品经理。未经许可,禁止转载。