在Axure8.0中创建简单交互事件

banner轮播

在浏览网页网页时,我们经常看到精美的banner还有动态效果,但是在网页中这种动态交互事件大多是用JS实现的,那我们在Axure中也可以实现这种动态效果。

1.打开Axure,新建一个项目。在元件库拖入一个“动态面板”到工作区域,并设置好尺寸。


2.在右侧“概要”,动态面板下方,单击“+”号,创建几个state页面;


3.双击打开state页面,在虚线框内放入图片,一个state页面放入一张图片,调节图片大小,让图片尽量位于虚线框内(因为框外的内容显示不出来);

4.图片放好后,我们再回到刚开始的页面(page3),在图片左右加上一个按钮,并设置为隐藏,让按钮实现左右切换图片的功能,


5.放好按钮以后,我们把按钮和动态面板组合起来(为了避免出现按钮闪烁不灵的情况),在“概要”下面选中两个按钮和动态面板,单击击鼠标右键,选择“组合”;


6.布局好以后,就要开始实现动态效果了。先给按钮设置一个点击事件:先点击“设置面板状态”,勾选刚刚到图片的动态面板,并在下方“选择状态”的下拉菜单栏中选着“Next”,勾选向后循环,则这个按钮实现的是点击切换带下一张图片;点击切换上一张图片步骤相同,在选择状态时,选择“previous” 勾选“向前循环”,确定;


7.划重点了!!这一步是实现自动播放和鼠标移上去停止播放并出现两个按钮的关键。

(1)单击“动态面板”,在其上方选择“载入时”,单击进入选择“设置面板状态”,勾选该动态面板,在其下方的选择状态选择“Next”,“向后循环”“循环间隔**毫秒”“首个状态延时**秒”,确定;


(2)选择该组合,单击上方的“更多事件”,在更多事件中单击“鼠标移入时”,①在出现的页面中选择“显示”,选择两个按钮,(实现鼠标移入时出现两个按钮),②选择“设置面板状态”,勾选该动态面板,下方“选择状态”设为“停止循环”,(实现鼠标移入时停止播放图片)确定;


(2)“组合”→“更多事件”→“鼠标移出时”→①“隐藏”→选择两个按钮→确定(鼠标移出时隐藏按钮),②

(3)“组合”→“更多事件”→“鼠标移出时”→“设置面板状态”→勾选该动态面板→选择状态选择“Next”,→“向后循环” “循环间隔**毫秒”  “首个状态延时**秒”,确定。


好了,现在所有步骤都完成了,按F5在浏览器中预览一下效果吧。

喜欢的话给个心心支持一下吧  (๑╹╹)ノ""

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 小楼老师的教程汇总,一篇搞定! (一) Axure rp的界面 1-主菜单工具栏:大部分类似office软件,不做...
    纪同学说阅读 5,514评论 1 33
  • 本文通过还原简书App原型的过程,进行了大量的交互设计。在原型制作过程中,几乎实现了最常见的交互效果,主要包括:轮...
    银海系阅读 849评论 0 2
  • 我想换个手机,等我有了钱。 我想买个电脑,等我有了钱。 我想去旅行下,等我有了钱。 我想做个网站,等我有了钱。 我...
    山楂叶阅读 408评论 1 1
  • 我是勤行道 目前是一家三甲医院的康复治疗师 也是马拉松运动的体验者 ...
    勤行乐道阅读 360评论 0 1
  • 我妈回老家回来,好了一个月么有发脾气,这两天又开始了。 先是和我爸吵说我爸洗碗没洗干净,我爸告诉她不能要求男人把家...
    super贝贝阅读 196评论 0 0