一天上手Axure RP (2.2) Web案例

续：《一天上手Axure RP (2.1) Web案例》

这次我们完成第二阶段，Banner。

STEP 1 . Banner内容

---

动态面板：把准备的Banner第一张包含的内容，放在画布上，全选（内容）后右键，选择"Convert to Dynamic Panel"转为动态面板。

然后调整面板的大小、位置。当然，也有另外中方式添加动态面板，就是从组件库(Libraries)中拖出动态面板。

Dynamic Panel

新增面板状态：一个状态就是一个滚动的页面，我们现在添加至三个，并在里面添加不同内容。

add State

最后就会形成这样的结构(右侧Outline面板)：

Outline

STEP 2 . 前/后控制手柄

---

手柄icon：组件库中拖出"Angle Left"icon，拉大后发现线条很粗。改一些样式，就可以让它"减肥"。

Angle Left

"Angle Right"一样设置。

隐藏手柄：同时选中左右手柄，右键选择"Set Hidden"隐藏它们。

Set Hidden

显示手柄：当鼠标进入Banner动态面板的时候，手柄就会出现，离开时就会隐藏。

在Banner动态面板的"PROPERTIES > Interactions"中好像没有鼠标进入离开的事件？....点击"More Events"就会发现更多事件。

我们这里选择"OnMouseEnter"和"OnMouseOut"事件。

Mouse Enter

为了在配置事件时能方便找到某些组件，这就是为什么要为组件命名的原因。"OnMouseOut"同理，最后事件如下：

Mouse Event

STEP 3 . 控制Banner

---

分析：按左边手柄，则显示上一张Banner，如果到了第一张则自动循环到最后一张，其动画效果是往右边滑动出现。所以：

Set Panel State

右边手柄则反之。

打完收工，可以看到听话的Banner了。

Result

看视频可以看到，更多内容，更细节的操作哟。

工具能表现你的思考结果，甚至过程，过分依赖工具则会束缚你的思维。