《AxureRP9网站与App原型设计》教学教案—08用Axure元件行为制作交互效果.docxVIP

第8章 用Axure元件行为制作交互效果 课时内容 用Axure元件行为制作交互效果 课时 6 教学目标 掌握Axure的元件行为，学会使用元件行为制作交互效果 教学重点 Axure的元件行为 教学难点 Axure的元件行为 教学设计 1.教学思路：通过实例引入元件行为的概念；通过多媒体演示和实机操讲解显示/隐藏、设置文本和设置图片、设置选中、设置列表选中项、启用/禁用、移动/旋转、置于顶层/底层、获取焦点和展开/收起树节点等元件行为。 2.教学手段：多媒体+计算机 3.教学资料：教材、多媒体课件 教学内容 Axure除了可以使用链接行为制作交互效果，同时也可以使用Axure元件行为来完成交互效果的制作，包括元件的显示/隐藏、设置文本、设置图片、设置选中、设置列表选中项、启用/禁用、移动/旋转、置于顶层/底层、获取焦点、展开/收起树节点等行为，通过元件动作的交互效果，可以制作出高级交互效果。 Axure元件动作 8.1 显示/隐藏 元件的显示/隐藏行为是经常会用到的一种交互效果，常用于二级菜单的显示与隐藏交互效果，下面一起来学习显示与隐藏行为。 实战演练8.1.1 切换方式控制元件显示隐藏 实战演练 （1）拖曳一个“矩形1”元件到工作区域，将其宽度设置为100，高度设置为30，文本内容重新命名为“导航一”，拖曳一个“垂直菜单”元件到工作区域，将其作为导航一的二级菜单，把它的标签命名为“导航一的二级菜单”。 一级菜单和二级菜单 （2）把导航一的二级菜单先隐藏起来，单击导航一的时候，才显示出其二级菜单。选中导航一，为其添加鼠标单击时触发事件，在添加动作面板单击“显示/隐藏”选项，勾选“导航一的二级菜单”复选项，为其添加一个动画效果，在设置动作面板单击“切换”按钮，在显示动画下拉列表中选择“向下滑动”选项，在隐藏动画下拉列表中选择“向上滑动”选项。 导航一菜单交互效果 元件有显示行为和隐藏行为，交互编辑器提供了可以在这两者之间进行切换的行为，叫作切换可见性，作用是在显示和隐藏切换显示。 （3）按F5键发布原型看一看效果，单击导航一，它的二级菜单向下滑动显示出来，退出的时候，二级菜单向上滑动，从而实现了二级菜单显示与隐藏效果。 发布原型 8.1.2 变量方式控制元件显示隐藏 通过使用切换可见性行为，可以控制元件的显示与隐藏效果，除了使用这样方式，还可以通过变量方式控制元件的显示与隐藏。 实战 实战演练 （1）复制“导航一”和“导航一的二级菜单”两个元件，把“导航一”元件重命名为“导航二”，把它的二级菜单标签重命名为“导航二的二级菜单”。 复制导航一和二级菜单 （2）添加一个全局变量，将其命名为“flag”，默认值为0，选中导航二菜单，修改其鼠标单击时触发事件，单击添加条件，设置变量值“flag”等于0，使其显示二级菜单。 显示导航二的二级菜单 （3）在添加动作面板中单击“设置变量值”选项，勾选“flag”复选项，在设置动作面板的设置为下拉列表中选择“值”，在值数值框中输入1。 修改变量值 （4）再单击鼠标单击时触发事件，单击新增条件，设置变量值“flag”=1，来隐藏二级菜单，在添加动作面板单击“显示/隐藏”动作，勾选“导航二的二级菜单”复选项，在设置动作面板单击“隐藏”按钮，在动画下拉列表中选择“向上滑动”选项，接着把变量“flag”值设置为0。 隐藏导航二的二级菜单 （5）按F5键发布原型检查效果，单击导航二菜单，其二级菜单向下滑动显示出来，再单击一次导航二菜单，其二级菜单向上滑动隐藏起来，从而实现想要的效果。通过显示与隐藏的交互设置，就能让导航菜单互动起来，模拟真实的效果。 发布原型 8.1.3 多个导航菜单联动效果 当单击导航一菜单的时候，想让导航一和导航二的二级菜单都显示出来。但是怎么才能实现两个甚至多个导航菜单的联动效果呢？ 二级菜单都显示出来 实战 实战演练 （1）复制导航一及其二级菜单，把导航一重命名为“导航三”，把二级菜单标签重命名为“导航三的二级菜单”。 导航三及二级菜单 （2）复制导航一及其二级菜单，把导航一命名为“导航四”，把二级菜单标签重命名为“导航四的二级菜单”。 导航四及二级菜单 （3）实现“导航三”菜单和“导航四”菜单的联动效果。选中“导航三”菜单，为其添加鼠标单击时触发事件，在设置动作面板单击“显示”按钮，使其显示“导航三的二级菜单”，动画效果为向下滑动，单击“隐藏”按钮，将“导航四的二级菜单”隐藏起来，动画效果为向上滑动。 导航三菜单交互效果 （4）选中“导航四”菜单，为其添加鼠标单击时触发事件，在设置动作面板单击“显示”按钮，使其显示“导航四的二级菜单”，动画效果为向下滑动，单击“隐藏”按钮，将“导航三的二级菜单”隐藏起来，动画效果为向上滑动。 导航四菜单交互效果 发布原型检查效果，单