续：《一天上手Axure RP (2.1) Web案例》，《一天上手Axure RP (2.2) Web案例》。
Web案例的最后一阶段，相对要复杂些。不过不要担心，相信自己，稍微思考下就能理解。
STEP 1 . 准备内容
因为内容较多，这就不一一讲如何添加的了，相信看了前面操作的同学能轻松搞定。这次我们稍微把内容排多一些，这样才能有Y滚动效果。最后效果如图：
感觉好真
当然，内容可以再多些。
STEP 2 . 固定导航栏
分析：当页面往下滑动时，导航栏会离开我们的视野。这并不是我们想要的，我们希望它一直固定到顶部。由此可见，触发事件应该是页面滚动，然后来改变导航栏的坐标位置，让它一直在顶部(y=0)。
1. 将要固定的导航栏，整块转为动态面板。
2. 我们需要监听页面(Page)的"OnWindowScroll"事件。当往下滑动超出(大于)导航距离最顶部的距离时(y=44)，导航的y值就要等于滑动的垂直距离，这样就可以保持导航一直出现在浏览器的顶部。
OnWindowScroll
y设定的值是"[[Window.scrollY]]"，那么这个"[[Window.scrollY]]"是从哪来的呢？
在值文本框后面有个"fx"的按钮，点击后可以看见一个值编辑页面。在这里，我们可以调用一些Axure为我们提供的[变量]或[方法]。可以看见我们这用到的Window.scrollY变量。（在视频中，我们有讲到如何直观的去查看这些值）
Window.scrollY
3. 当scrollY不大于44的时候，我们应该把导航放回原位。
Interactions
STEP 3 . 播放外部视频
这里我们使用"Inline Frame"组件，来链接到外部视频/网站，显示在我们原型中。
Inline Frame
我们将链接设置其中：
link to an external url
把它转为动态面板，并固定在浏览器中央。
Pin to Browser Center
"Set Hidden"，在页面加载完后显示，以模态形式。我们需要Page的"OnPageLoad"事件。
Show Video
这样，在进入该页面时就会自动显示视频并播放。点击周围任意空白处则隐藏视频。
Result
这样，Web案例就算完毕了。感觉怎么样？欢迎通过任何方式给我反馈哟。
看视频可以看到，更多内容，更细节的操作哟。
工具能表现你的思考结果，甚至过程，过分依赖工具则会束缚你的思维。
网友评论