方寸之地显示大量图片

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

网站主页以有限空间显示多幅照片,用同一位置交替显示是上策。实现这个效果并不需要Flash等专业软件,也不需要自己编写程序代码,借助一个小工具即可实现。

我们以3幅图片轮番演示,用按钮实现跳转播放为例来说明。更多图片的复杂的演示设计按此技术扩展即可。(图1)

1420ASW-XQXZPLFB-图1

图1

1. 简单设计播放界面

这个过程主要是图片播放界面的设计。

打开Axure RP Pro 7.0后,在左边的“站点地图”面板右击,将其余页面删除,只保留一个主页面,并将其重命名为“照片欣赏”。从部件库将“图片”部件拖入到这个主页面中并调整好大小。在图片部件的属性窗口点击“导入”按钮导入所需图片,导入时不要自动调整大小。(图2)

1420ASW-XQXZPLFB-图2

图2

2. 动态面板展现神奇

这个过程就是利用动态面板的各种状态来轮番显示图片。

首先,将添加的图片部件右击转化为动态面板,并将这个动态面板命名为“轮番显示”。在“部件管理”窗口复制“状态1”两次,双击复制出的状态并在窗口中选定相应的图片部件,利用导入按钮将所需要的图片分别导入到两个新复制的状态中。可在部件管理窗口双击动态面板对动态面板的每个状态进行重命名。(图3)

1420ASW-XQXZPLFB-图3

图3

返回到照片欣赏主页,在动态面板合适位置添加3个形状按钮,在“部件属性和样式”面板设置每个按钮的名称,填充色为蓝色,选择形状为圆形,选中后的颜色设置为红色,设置选项组名称为“状态点”(第一次需要输入,以后只需点取)。(图4)

1420ASW-XQXZPLFB-图4

图4

要想使动态面板显示神奇效果,还需要对它进行设置。选中动态面板,在“部件交互和注释”面板双击“载入时”,在弹出的“用例编辑器”窗口的“第二步:点击新增动作”处点击部件下的“设置选择/选中”,在“第四步:配置动作”处勾选“d1(形状)”(意思是当名称为d1的按钮选中时该按钮的颜色变为红色),接下来添加杂项下的“等待”动作并设置时间为3000毫秒。最后添加动态面板下的“设置面板状态”动作,在配置动作处勾选“设置轮番显示”,选择状态设置为“Next”,勾选循环和循环间隔,并设置间隔时间为3000毫秒,进入和退出时动画均为“向左滑动”,用时500毫秒。(图5)

1420ASW-XQXZPLFB-图5

图5

双击“鼠标移入时”,添加动态面板下的“设置图板状态”,在配置动作处勾选“设置轮番显示”,选择状态为“停止循环”;双击“鼠标移出时”,添加杂项中的“等待”动作,时间为3000毫秒,点击动态面板下的“设置图板状态”,在配置动作处勾选“设置轮番显示”,选择状态设置为“Next”,勾选循环和循环间隔,并设置间隔时间为3000毫秒,进入和退出时动画均为“向左滑动”,用时500毫秒;选定“动态面板状态改变时”,点击“新增用例”,为动态面板新3个用例用来当图片轮番播放时状态按钮显示不同颜色。在“用例编辑器”窗口点击“新增条件”按钮,在“条件生成器”窗口设置动态面板的显示状态为图片1,确定后返回用例编辑器窗口,新增部件下的“设置选择/选中”动作,在配置动作处勾选“d1(形状)”,(图6)其他两个用例设置与之相似。

1420ASW-XQXZPLFB-图6

图6

小提示:

以上动画等待时间和滑动用时参数可以改变,值越大想,效果越明显。若值设得太小会一闪而过,没有动的效果。

3. 控制按钮随心设置

以上的设置满足了图片的自动播放,如果想要人为控制图片播放还需要对3个形状按钮进行设置。

选定第1个形状按钮,在“部件交互和注释”面板双击“单击鼠标时”,新增动态面板下的“设置图板状态”动作,在配置动作处勾选“设置轮番显示”,选择状态设置为“图片1”,勾选循环和循环间隔,并设置间隔时间为3000毫秒,进入和退出时动画均为“向左滑动”,用时500毫秒。(图7)

1420ASW-XQXZPLFB-图7

图7

其他两个按钮的设置与之类似。

4. 文件发布易于分享

所有部件都设置完成后,接下来就是见证奇迹的时候了。

选择“发布→生成HTML文件”菜单对文件进行发布。发布完成后直接运行生成的index.html文件,看看是不是图片进行轮番播放了?

小提示:

生成的HTML网页类型的文件可以在大多数电脑上运行,便于和朋友分享,但分享时要把发布生成的所有文件都发给朋友,直接运行index.html文件就可以了。