Axure新手养成计划(连载18)

Axure书籍 小楼一夜听春语 20985℃ 0评论

6.3.3.2.      框架页面切换

我们在前面讲到,内联框架可以将其他页面嵌入到当前的页面,其实,在动作中我们还可以控制内联框架打开其他页面。比如:我们可以制作一个案例,在点击不同的按钮时,可以在框架中打开不同的搜索引擎界面。

具体步骤如下:

1、首先,放入一个内联框架,命名为“myframe”;

2、设置框架宽度为整个屏幕的大小,以我的电脑为例,我把框架宽度设置为1366;高度可以随意设置,比如580。

3、然后,拖入几个形状按钮,并为每个按钮的【鼠标单击时】事件添加用例,在框架中打开链接【内联框架】“myframe”为【超链接】,填入搜索引擎的地址。注意要以“http://”开头。(图108)

108

(图108)

通过以上几步,就完成了点击按钮时打开搜索引擎页面的效果。

6.3.3.3.      元件焦点控制

我们常常能够看到这样一个功能:一个用户名输入框,没有输入文字,点击登录按钮,会给出提示要求输入用户名,并且光标回到用户名输入框中闪动。这样的效果就需要我们使用让元件【获取焦点】的动作。整个实现过程如下:

思路关键点:

  • 触发:登录按钮鼠标单击时;
  • 判断:文本框为空;
  • 执行:显示提示;设置焦点到文本框。
  • 包含元件:文本框(username)、文本标签(msg)、形状按钮(login)

实现步骤:(图109)

1、点中形状按钮;

2、双击【鼠标单击时】事件,打开用例编辑界面;

3、点击【添加条件】进行条件设置,选择条件判断内容为【元件文字】“username”【==】【值】“”,点击【确定】,返回用例编辑界面;

注意:这里在值后面的文本框中不输入任何内容。

备注:“==“是关系运算符,用来判断左右条件内容相等,即”等于“。在之后还会有相关的讲解。

4、设置动作1为:【设置文本】“msg”为【值】“用户名不能为空!”;

5、设置动作2为:【获取焦点】到“username”;点击【确定】关闭用例编辑界面。

经过以上5个步骤,就实现了我们想要的效果。

109

(图109)

6.3.3.4.      元件移动控制

有这样一个交互效果:菜单栏的某项被点击时,会有一个滑块作为背景,滑动到被点击的菜单项底层。这个交互如果没有滑动的效果,就可以参照“唯一选项组”的案例,但是有了滑动的效果就需要用到元件的【移动】动作了。

在这里我们需要接触几个概念:

坐标:指编辑区中的位置,编辑区的左上顶点为坐标的原点(x0,y0)。

x:x轴坐标,指水平坐标,编辑区的左侧边界x坐标为0。水平坐标可以为负数。

y:y轴坐标,指垂直坐标,编辑区的顶部边界x坐标为0。垂直坐标可以为负数。

元件坐标:指元件的左上顶点,在编辑区中的实际坐标。(图110)

110

(图110)

备注:元件坐标为负数时会有部分或者全部被边界所遮盖。

绝对位置:编辑区中某一点的实际坐标,比如:x58,y162。

相对距离:指编辑区中两点之间的距离,比如:A(x120,y80)相对于B(x50,y140)的相对距离为(x70,y-60)。而B相对于A的相对距离为(x-70,y60)。一般相对距离用于元件移动时是指元件移动后相对于移动前的相对距离。(图111)

111

(图111)

备注:关于图中的垂直辅助线可以在左侧标尺按住鼠标左键拖至编辑区松开,水平辅助线则是在上方标尺上按住鼠标左键拖至编辑区松开。而背景中的小圆点,我们叫它们网格,是通过在编辑区空白处点右键选择【栅格和辅助线】-【显示网格】来显示的。并且,网格也可以在【栅格和辅助线】-【网格设置】中进行设置,比如调整网格的填充(间距)、样式、颜色等。

了解了以上概念之后,我们已然知道每个元件在编辑区中都有自己的坐标。那么我们要做的效果中每个菜单项按钮也都有自己的坐标。我们只需要在点击按钮的时候让滑块移动到当前元件的坐标就能实现了。

实现步骤:

1、选中所有矩形菜单项,取消背景色或者设置填充色不透明度为0,;(图112)

112

(图112)

2、将矩形菜单项添加需要的文字。然后,放入一个与矩形菜单项相同尺寸的矩形,命名为“slider”,设置其背景色为蓝色,并点击快捷功能区中的【置于底层】按钮,将其置于底层。然后,将它与首个矩形菜单项按钮重合摆放。(图113)

113

(图113)

3、为每个矩形菜单项的【鼠标单击时】事件添加用例,设置动作为移动元件“slider”到【绝对位置】x为当前矩形菜单项的x轴坐标,y为当前矩形菜单项的y轴坐标。比如:第2个菜单项的坐标为x360,y240,我们就设置移动元件“slider”到【绝对位置】x360,y240。

这里为了能有滑动效果,还需要设置一个移动时的动画【线性】“500”毫秒,是指滑块由移动开始至结束为耗时500毫秒的匀速移动。(图114)

114

(图114)

以上就是元件移动的操作方法。关于这个效果在之后我们学习了函数之后还可以进行优化。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure新手养成计划(连载18)

喜欢 (33)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(12)个小伙伴在吐槽
  1. 为什么,我按步骤操作的,就是没有出现想要的提示呢,之前章节十五也是。
    秋风秋雨愁煞人2015-09-21 11:37 回复
    • 我的可以哦,是哪里不对吧?
      柳暗花明又一村2015-10-07 14:51 回复
    • 可能你选用的组件和文章用的不是一个。
      雪海2015-12-11 11:03 回复
    • 浏览器的原因,多换几个浏览器。
      阿花2016-08-17 16:06 回复
  2. 感觉难度升级了,看3.3看了好久
    pp2015-11-19 11:14 回复
    • 小楼一夜听春语
      别慌,等再升一级,爽死你!
      小楼一夜听春语2015-11-19 20:46 回复
  3. 文字提示出现后怎么自动消失呢?
    albeebaby2015-11-19 11:51 回复
    • 是不是第二次正确输入,然后要提示消失?我是添加了一个case2 else if 。。。。然后msg的值为空就好
      mm2016-01-12 11:54 回复
  4. 如果用户名文本框中用了提示文字“请输入用户名”,然后又要判断用户名是否为空,要怎么操作?
    小草2016-01-27 17:49 回复
  5. 6.333 username和msg能在同一个位置上吗?
    竹目和一2016-01-28 16:37 回复
  6. hao
    天天2016-06-16 15:16 回复
  7. 很棒很棒 :mrgreen:
    倔强的心2017-08-07 11:14 回复