AxureRP教程–幻灯片效果

经常会在各个网站上看到有图片新闻,是图片的循环播放,类似幻灯片的效果,虽然各种各样的幻灯片样式不一样,展示风格各异,可能实现形式也不一样,有的是用Flash,有的是用JS来实现,但在原型设计的时候不需要考虑这么细致入微,只需要将大体的功能表现出来,配合演示即可。当然并不是说AxureRP无法做到界面很美观,只要有合适的素材,AxureRP一样可以做的非常漂亮,只是那样的追求比较高一点,一般的把功能实现就可以了,这样也符合AxureRP快速原型设计的理念。

制作图片的幻灯片播放效果,要借助动态面板组件。添加两个动态面板,面板pic作图片轮换展示,设置三个状态,每个状态下加载一张图片,再用矩形组件设计一个数字导航条,放置在每个状态下,并在每个数字上设置OnClick事件,使其支持单击后切换动态面板显示状态。面板zhushi放置在pic下面,用做图片新闻的注释,也设置三个状态,并对应的每个状态对相应的图片状态进行说明,并将面板zhushi的状态切换交互事件加到数字导航条的OnClick事件里。

初始化完成后,当前设置就已经支持手动播放图片的幻灯片效果了。若要使其支持自动播放,还需设置当前页面的OnPageLoad事件,设置如下:

这个意思是每过2000毫秒切换一次两个面板的状态,并在切换到最后一个状态后,重新加载当前页面。重新加载当前页面用的是“在当前窗口打开链接”的交互事件,此时的链接属性设置窗口会多出两个单选项,一是重新载入当前页面(变量修改起作用),二是返回上个页面(变量修改不起作用),这里选择的是重新载入当前页面,这两个选项类似于浏览器上的刷新和回退功能,中间涉及的变量修改即自定义变量的一些赋值操作,关于变量的使用后续会介绍。

下面再介绍一种图片幻灯片播放效果,这是别人做的,稍微修改了一点。与上面那种不同的是,这种把上面的数字导航条用图片的缩略图替代,并采用了OnMouseEnter事件和OnMouseOut事件来控制,还引入变量来控制图片轮换状态,且图片的轮换方式是采用图片定位坐标的方式来实现的,个人感觉比较复杂,其实也可以用动态面板的不同状态层来实现图片的轮换。

这个实例的实现原理是:整个实例分图片轮换和缩略图轮换两个部分,图片轮换部分用两个动态面板来实现,一个作自动循环播放用,一个作手动播放用,两个动态面板的详细设置是一样的。里面还嵌了一个动态面板,这个面板就是用来做图片定位坐标用,这个面板也只有一层状态,状态页里面将所有图片排成一排,并在每张图片上设置OnMouseEnter事件和OnMouseOut事件控制手动播放动态面板的可见属性,变量的赋值及缩略图图片的定位坐标,以此来达到控制缩略图轮换的效果。缩略图轮换部分也用两个动态面板来实现,一个作自动循环播放用,一个作手动播放用,两个动态面板的详细设置也是一样的。里面还嵌了一个动态面板,这个面板就是用来做图片定位坐标用,这个面板也只有一层状态,状态页里面将所有图片排成一排,并在每张图片上设置OnMouseEnter事件和OnMouseOut事件控制手动播放动态面板的可见属性,变量的赋值及展示图片的定位坐标,以此来达到控制图片轮换的效果。

自动循环播放也采用OnPageLoad事件,只不过这里控制的都是上面所述的自动循环播放动态面板的状态,控制原理与第一个例子相同,只不过多了变量的条件判断。

整个效果看下来会让人觉得非常复杂,放这个例子是为了提供两种图片幻灯片效果的实现方式和展示样式,这个实例放在这里供参考,有兴趣的朋友可以尝试将其改造成用动态面板的状态来实现的方式,而不是例子中所用的位移加变量的方式。

例子在AxureRP5.5版本下调试通过

点此查看演示

点此下载源文件

增加一个在AxureRP 6.0下带鼠标悬停效果的幻灯片源文件

点此下载源文件



无觅相关文章插件,快速提升流量

“AxureRP教程–幻灯片效果”4 条评论

书生 | 2011-07-8 15:02 |
commenter

谢谢分享,对初学者很有帮助,希望能持续更新。很人性化,提供原型查看和源文件的共享。

初学者 | 2011-07-22 17:46 |
commenter

借鉴学习了,收藏这个例子

commenter

2011-09-28增加一个在AxureRP 6.0下带鼠标悬停效果的幻灯片源文件testloop.rp

JUMP | 2013-04-11 11:05 |
commenter

这网站太好了!!!