AxureRP官方教程翻译（91818）完结

　　最后10篇（前8篇点击查看）看看是否有自己感兴趣的模块，每个功能都挺有意思的。
　　这10篇分别是：
　　第9篇：账号登录
　　第10篇：旋转式幻灯放映机
　　第11篇：自动点击区域
　　第12篇：必填区域
　　第13篇：动态设置下拉选项
　　第14篇：根据下拉列表设置文本
　　第15篇：发送文本到另一个页面
　　第16篇：宽度充满的图片或横幅
　　第17篇：滚动激活固定的头部文字
　　第18篇：滑块
　　第9篇：账号登录
　　建立一个登录表单，这个登录表单使用条件式的逻辑来证实用户的登录资格。在这个原型里，你将会有一个合适有效的邮箱地址和一个合适有效的密码“password1”。（不要用自己的银行密码，朋友们。操练好的密码习惯。请查看www。passwordsgenerator。net）只有邮箱和密码都正确才能进入页面。实现效果如下：
　　STEP0：下载培训文档
　　如果你还没有培训文档，请点击下载AxureTraining。rp文档。这个文档包含了Axure培训网站上每个教程用到的相关页面。我们建议你一直都用我们准备的这个文档来完成教程，但是如果你不用，那也是可以的即使你没有使用我们的培训文档，我们也总是会告诉你为了完成每一个教程新文件里都创建了什么。
　　STEP1：设置
　　打开培训文档中的“Accountlogin”页面。这个页面包含了一个由一个邮箱区域和密码区域的登录表单，和一个提交按钮。这个页面还包括了错误信息提示组件当有错误登录请求时才会出现。
　　选择密码区域，在右边的属性标签栏下，定位到“类型”的下拉选项框并选择“密码”。
　　选择“Error”组件，点击样式标签栏的“隐藏”复选框来隐藏它。
　　STEP2：登录成功
　　如果输入的邮箱和密码都正确，那么“AccountHome”页面就会被打开。
　　选择“submit”按钮，在属性标签栏下，双击“单击”来添加一个新的单击实例。
　　在实例编辑器的顶部，点击“添加条件”按钮来打开条件创建器。保留第一个下拉选项框的值为“在组件里的文本”。在第二个下拉选项框，选择“Emailaddress”组件。
　　保留接下来两个控制设置“等于”和“值”不变。
　　在最后一个区域，输入（不包括方括号）。
　　点击右边的绿色“”号图标添加另一个条件。
　　保留第一个下拉选项框的选项“在组件里的文本”。在第二个下拉选项框里选择组件“Password”。
　　保留接下来两个控制设置“等于”和“值”不变。
　　在最后一个区域，输入“password1”（没有引号）。
　　在条件创建器的顶部，确认“满足”的下拉选项框为“所有”。
　　点击确定关闭条件创建器。
　　在实例编辑器的左边栏，点击“打开链接”行为。
　　在右边栏选择页面“Accounthome”。
　　点击确定关闭实例编辑器。
　　STEP3：登录失败
　　如果实例1设置的条件不满足，那么错误的信息则会出现。
　　仍然选中“Submitbutton”，再次双击属性标签栏中的“单击”来创建第二个实例，实例2。在对话框的中间，注意文字“否则”。这个实例只会在之前的实例不成立时才会发生。
　　在左边栏，点击“显示”行为。
　　在右边栏，点击复选框勾选“Error”组件。
　　点击确定关闭实例编辑器。
　　可选：额外的登录账号
　　你也许希望在你的原型中包含多个有效的登录信息。这非常有用如果你想要让不同的账号显示不同的内容或权限。尝试为submit按钮添加另一个“单击”实例，为他分配不同的邮箱名称和密码。（这里要确认新的实例需要用快捷键〔CTRL〕〔CMD〕〔〕来将它移动到实例2的上面，否则它无法生效。）
　　第9篇原文链接：https：www。axure。comsupporttrainingaccountlogintutorial
　　第10篇：旋转式幻灯放映机
　　建立一个图片旋转式幻灯放映机，轮换广告或者内容幻灯片。你可以设置成自动前进或者通过点击按钮来实现。实现的效果如下：
　　STEP1：设置
　　打开培训文档中的“Carousel”页面。
　　在这个页面有两个来自图标库的图标和三张图片。
　　STEP2：创建Carousel动态面板
　　创建一个carousel动态面板，将每一张图片放在它各自的状态里。
　　在“Image1”上右键选择“转化为动态面板”，命名为“Carsouel”。
　　双击动态面板打开动态面板状态管理器。
　　点击绿色的“”号两次，使动态面板一共有三个状态。
　　点击确定关闭对话框。
　　右键单击“Image2”选择“剪切”。
　　双击目录中的”状态2“打开进行编辑。
　　粘贴“Image2”到“状态2”的画布里。确定图片的坐标是（0，0）。
　　重复上面的步骤，将“Image3”粘贴到“状态3”。
　　STEP3：创建可交互的后退键
　　返回“Carousel”页面，选择“Backarrow”组件，在属性标签栏下，双击“单击”添加一个新的单击实例。
　　在左边栏，点击“设置面板状态”。
　　在右边栏，点击“Carsousel（动态面板）”。
　　在右边栏的底部，点击“选择状态”的下拉选项选择“前一个”。然后点击复选框“包括从最后一张到第一张”。这样图片能循环起来了。
　　给状态应用切换效果，使用“进入动画”和“退出动画”控制。将两个都设置成“向右滑动”（因为这是你的后退键）并且将持续时间设定500ms。
　　点击确定关闭实例编辑器。
　　STEP4：创建可交互前进键
　　对右边的箭头重复上面的步骤。这个过程大部分是类似的。
　　在“选择状态”下拉选项框，选择“后一个”代替“前一个”。
　　在动画设置项选择“向左滑动”代替“向右滑动”。
　　STEP5：让Carousel自动轮播起来
　　选择动态面板。在属性标签栏双击“Onload”来添加一个加载实例。
　　在左边栏，点击“设置面板状态”。
　　在右边栏，选择“这个组件”。
　　在右边栏的下面，点击选择状态的下拉选项框选择“下一个”，点击复选框“包括从最后一个到第一个”和“重复每一个”。这个默认设置是让图片每秒前进一次。你可以在这个区域自主设置时间长短。（尝试4000毫秒。）
　　如果勾选了“延迟1000毫秒改变状态”，在页面加载时，动态面板会先停留在第一个状态1秒，而不是马上切换到下一个状态。这个时间“1000毫秒”是根据上面“重复每一个”区域的修改而变化的。
　　设置你的“进入动画”和“退出动画”的值为“向左滑动”和“500毫秒”。
　　STEP6：预览
　　点击预览。
　　这个旋转式幻灯放映机会自动轮播。
　　第10篇原文链接：https：www。axure。comsupporttrainingrotatingcarouselbannertutorial
　　第11篇：自动点击区域
　　当一个输入框的值填写完毕后，自动跳到下一个区域。实现效果如下：
　　STEP1：开始
　　打开培训文档中的“Autotab区域”。
　　这个页面包含了三个文本区域排列成一个日期。这里有一个月份区域和一个天数区域，他们的数值都采用两位数，而年数区域则采用四位数。这些提示文本是使用提示文本功能。
　　选择第一个组件“Month”。在属性标签栏下，定位到区域“最大长度”，在这个区域输入2。对“Day”组件进行同样的操作。而对“Year”组件则将最大长度设置成4。
　　STEP2：自动从“Month”组件跳到“Day”组件
　　选择“Month”组件，在属性标签栏下，双击“当文本改变”来制作一个文本改变实例。
　　单击对话框顶部的“添加条件”按钮，打开条件编辑器。
　　在最左边栏的下拉选项框中选择“组件值的长度”。保留接下来三个值为默认值。分别是“这个组件”，“等于”，和“值”。
　　在最右边区域，填入数字2。
　　点击却低估关闭条件编辑器。
　　在实例编辑器的左边栏，点击行为“聚焦”。
　　在右边栏，点击复选框“Day”。
　　点击确定关闭对话框。
　　STEP3：自动从“Day”组件跳到“Year”组件
　　重复上面的操作应用在“Day”组件上。确定使用“聚焦”行为时将目标改成“Year”组件。
　　STEP4：预览
　　点击预览。
　　在“Month”区域输入两位数，接着会自动跳到“Day”区域。在“Day”区域输入两位数，会自动跳到“Year”区域。
　　第11篇原文链接：https：www。axure。comsupporttrainingautotabfieldstutorial
　　第12篇：必填区域
　　在提交表格前检查必填区域是否完成输入。实现效果如下：
　　STEP1：建立
　　打开培训文档中的“Requiredfields”页面。
　　这个页面包含了一个文本框用来输入邮箱地址和一个提交的按钮。它也包含了一个带有两种状态的动态面板，“Success”和“Error”。这个邮箱地址区域需要被填入东西才能让“Success”的消息显示出来。如果没有填，则显示“Error”状态。
　　选择“Submitmessage”动态面板将它隐藏。
　　STEP2：显示错误信息如果邮箱区域是空白的
　　选择submit按钮组件。在属性标签栏，双击“单击”来添加一个单击实例。
　　在实例编辑器的顶部，点击“添加条件”打开条件创建器。
　　保留第一个选项的值“组件上的文本”。在第二个下拉选项框，选择“Emailaddress”组件。接下来两个选项需要设置成“等于”和“值”。
　　在最后的区域，清除上面的文本以便该区域为空。
　　点击确定关闭条件创建器。
　　在实例编辑器中，点击左边栏的“设置面板状态”。
　　在右边栏，选择“Submitmessage”动态面板。
　　在下面栏，使用“选择状态”下拉框选择“Error”状态。然后点击勾选“显示面板如果隐藏”。
　　在左边栏，点击行为“等待”。
　　在右边栏，你可以配置“等待”行为的长度。将它改为2000毫秒。
　　在左边栏，选择“隐藏”行为。
　　在右边栏，勾选“Submitmessage”动态面板。
　　点击确定关闭对话框。
　　STEP3：当邮箱区域不为空时则显示成功的信息
　　再次双击在属性标签栏下的“单击”来创建一个新的实例。
　　这次不用添加条件，因为如果第一个实例不满足条件不发生，则第二个实例会被触发。
　　接下来的设置同上，不同的是要将动态面板的状态选择为“Success”状态即可。
　　STEP4：预览
　　点击预览。
　　尝试点击submit按钮在没有在邮箱区域输入任何文本的情况下。当错误信息消失，尝试在邮箱地址输入文本然后再次点击submit按钮。
　　第12篇原文链接：https：www。axure。comsupporttrainingrequiredfieldstutorial
　　第13篇：动态设置下拉选项
　　根据第一个下拉选项的不同，第二个下拉选项框会相应变化，效果如下：
　　STEP1：开始
　　打开培训文档中的“DynamicDroplist”页面。
　　页面中的表单是用来为雇员选择职位的。不同的部门拥有不同的职位头衔，基于这个第一个列表的选择，第二个下拉列表可获得不同的选项。
　　首先，这个页面包含一个“Department”下拉列表带有三个选项：“Operations”，“Sales”，“Development”。每个选项都对应有一个子下拉列表。每个子下拉列表有两个选项。都是那个部门下的职位头衔。
　　STEP2：创建动态面板
　　右键单击第一个“JobTitle”下拉列表，就是选项里写着“AdministrativeAssistant”，然后点击“转化为动态面板”。
　　在右边审查面板的顶部这个区域，将动态面板命名为“Jobtitle”。
　　在属性标签栏下，点击复选框“内容适应”。
　　双击动态面板进入动态面板状态管理器。
　　点击绿色“”号两次，现在动态面板共有三种状态。
　　轻轻双击每一个状态，并将它们按顺序重命名为：“Operations”，“Sales”，“Development”。
　　最后，将“Sales”和“Development”的下拉列表从主页面剪切粘贴它们各自对应的动态面板的状态页中，设置坐标为（0，0）。
　　STEP3：基于第一个下拉选框的选择设置动态面板的状态
　　回到“DynamicDroplist”页面。单击“Department”下拉组件。在属性标签栏中，双击“当选项改变”添加一个新的选项改变实例。
　　在左边栏，点击行为“设置面板状态”。
　　在右边栏，点击“Jobtitle”动态面板。
　　在右边栏底部，找到“选择状态”下拉选项然后点击“值”。
　　点击临近入口区域的“fx”按钮。
　　在下面的“本地变量”部分，修改第一个下拉选项为“选中的选项”。
　　在下一个下拉选项，选择“这个组件”。
　　在对话框的顶部区域，删除自动插入的数字1，点击“插入变量或者功能”。
　　在出现的下拉选项里找到“本地变量”，点击“LVAR1”。
　　点击确定关闭”编辑值”对话框，再次点击确定关闭实例编辑器对话框。
　　STEP4：预览
　　点击预览。
　　第13篇原文链接：https：www。axure。comsupportreferencedroplistselectionconditionallogictutorial
　　第14篇：根据下拉列表设置文本
　　根据下拉列表的选项来动态地设置一个组件上的文本。实现效果如下：
　　STEP1：开始
　　打开培训文档中的“SetTextwithDroplist”页面。
　　这个下拉列表是用来选择衬衫的大小的，这个大小会显示在衬衫组件的一个矩形组件上。
　　点击矩形组件，在审查面板的顶部将其命名为“Sizelabel”。
　　STEP2：创建设置文本行为
　　点击选择下拉列表选项，在属性标签栏下，双击“当选择改变”来添加一个实例。
　　在左边栏，点击行为“设置文本”。
　　在右边栏，勾选“SizeLabel（矩形）”。
　　在右边栏底部，修改”为其设置文本“下拉选项为“选中选项的”。
　　保留第二个下拉列表设置不变“这个”。
　　点击确定关闭实例编辑器。
　　STEP3：预览
　　点击预览
　　改变下拉选项来修改衬衫上的标签大小。
　　第14篇原文地址：https：www。axure。comsupporttrainingsettextwithdroplisttutorial
　　第15篇：发送文本到另一个页面
　　打开培训文档的“Passtexttonextpage”页面。效果如下：
　　STEP1：设置
　　这个页面包含了三个文本输入框：“Firstname”，“Lastname”，和“Emailaddress”。这里还有一个提交按钮。当点击提交按钮后会将填在三个输入框中的文本发送到“Nextpage”页面。
　　STEP2：创建变量
　　在AxureRP原型中为了从一个页面发送信息到另一个页面，需要用变量。在这个文件中，我们将需要三个变量：FirstNameVar，LastNameVar和EmailAddressVar。在目录的顶部，点击“工程全局变量”。
　　默认情况下，一个文件开始有一个叫做“加载变量”的变量。点击文本“加载变量”将其改为“FirstNameVar”。
　　点击绿色“”图标添加一个新的变量，命名为“LastNameVar”
　　点击绿色“”图标添加最后一个变量，命名为“EmailAddressVar”。
　　STEP3：创建交互设置变量和打开下一个页面
　　单击“Nextpage”按钮选中它。
　　在属性标签栏下，双击“单击”来添加一个单击实例。
　　在左边栏，点击复选框“设置变量值”。
　　在右边栏，勾选“FirstNameVar”的复选框。
　　在右边栏底部的“设置变量”部分，使用第一个下拉列表选择“组件上的文本”。使用第二个下拉列表选择“Firstname”文本区域组件。
　　对于其他两个变量，你不用添加一个新的“设置变量值”的行为你在同一个行为下设置多个变量。在右边栏的顶部，选择变量“LastNameVar”的复选框。
　　在底部“设置变量”区域，使用第一个下拉选项框选择“组件上的文本”。使用第二个下拉选项框选择“Lastname”。
　　回到顶部选择“EmailAddressVar”。
　　在底部“设置变量”区域，使用第一个下拉选项框选择“组件上的文本”。使用第二个下拉选项框选择“Emailaddress”。
　　在左边栏，点击行为“打开链接”。
　　在右边栏，点击“Nextpage”。
　　点击确定关闭实例编辑器。
　　STEP4：设置Nextpage的确认信息
　　在页面模块，打开页面“Nextpage”页面。这个页面有一个带有部分完成信息的段落组件。
　　在页面审查模块，双击“页面加载”来添加一个页面加载实例。
　　在左边栏，点击“设置文本”。
　　在右边栏，点击“ConfirmationMessage”复选框段落组件。
　　在右边栏底部，点击“fx”按钮。使用你的鼠标指针来选择第一行文本中的“Firstname”。
　　点击“插入变量或功能”，就在这个文本区域的上方。
　　在出现的下拉选项里选择“FirstName”。变量会以这个形式插入：〔〔FirstNameVar〕〕。这个方括号表明这是一个变量。
　　滑动选择文本中的“Lastname”。
　　点击“插入变量或者功能”然后选择“LastNameVar”。
　　滑动选择文本中的“email。addresswebsite。com”。
　　点击“插入变量或者功能”然后选择“EmailAddressVar”。
　　点击确定关闭文本对话框。
　　再次点击确定关闭实例编辑器。
　　STEP5：预览
　　点击预览。
　　尝试填入信息然后打开另一个页面。
　　第15篇原文链接：https：www。axure。comsupporttrainingpasstexttonextpagetutorial
　　第16篇：宽度充满的图片或横幅
　　添加一张可以自适应浏览器宽度的并且占满屏幕宽度的图片。实现效果如下：
　　STEP1：开始
　　打开培训文档中“Fullwidthimageorbanner”页面。
　　这个页面包含一个叫做“Fullwidthbackground”的动态面板。
　　选择“Fullwidthbackground”动态面板，在属性标签栏中，点击选择“百分百宽（浏览器生效）”复选框。
　　STEP2：添加背景图片
　　切换到样式标签栏，在“背景图片”区域，点击导入按钮。然后在本地选择一张图片。（如果不用图片，也可以用“背景颜色”来填充。）
　　STEP3：预览
　　点击预览。
　　尝试改变浏览器窗口大小。注意当屏幕宽度过大时，一些图片的尺寸会在数值方向上被剪切。这是因为图片为了保持比例而动态面板却没有。
　　第16篇原文链接：https：www。axure。comsupporttrainingfullwidthimageorbannertutorial
　　第17篇：滚动激活固定的头部文字
　　STEP1：设置
　　打开培训文档中的“Scrollactivatedstickyheader”。
　　这个页面包括了一个组叫做“Scrollingheader”。
　　右键单击这个组，复制它，然后将它到页面的顶部，设置它的坐标为（20，20）。将它命名为“Stickyheader”。
　　右键单击“Stickyheader”将它转化为动态面板。将其依然命名为“Stickyheader”，然后隐藏它。
　　STEP2：固定Stickyheader
　　依然选中Stickyheader，切换到属性标签栏下，点击“固定到浏览器”。
　　点击复选框“固定到浏览器”。
　　在横向固定方向上选择“左边”。
　　在垂直固定方向上选择“顶部”。
　　点击确定关闭对话框。
　　STEP3：添加交互来显示Stickyheader和隐藏“Scrollingheader”
　　点击画布空白区域切换到页面的审查面板。
　　在属性标签栏，双击“窗口滚动”来创建一个新的窗口滚动实例。
　　在实例编辑器的顶部，点击“添加条件”。
　　在第一个下拉选项，点击“值”。
　　点击临近第二个区域旁边的fx按钮。
　　点击该区域的顶部的“插入变量或功能”。
　　点开“窗口”部分的下拉列表选择“Window。scrollY”。
　　点击确定关闭对话框。
　　在条件创建器，点击中间的下拉选框，选择“大等于”。
　　保留下一个下拉列表的值为“值”。
　　在最后一个区域，清除文本输入数字180。
　　点击确定关闭条件创建器。
　　在实例编辑器的左边栏，点击“显示”。
　　在右边栏，点击“Stickyheader”动态面板。
　　在左边栏，点击“隐藏”。
　　在右边栏，点击“Scrollingheader”组
　　点击确定关闭实例编辑器。
　　STEP4：添加交互来显示Scrollingheader和隐藏“Stickyheader”
　　在属性标签栏下，双击“窗口滚动”来添加第二个窗口滚动实例。
　　在左边栏，点击“隐藏”。
　　在右边栏，点击“Stickyheader”。
　　在左边栏，点击“显示”。
　　在右边栏，点击“ScrollingHeader”。
　　点击确定关闭实例编辑器。
　　STEP5：预览
　　点击预览
　　尝试向下滚动页面，Stickyheader会显示，然后窗口向上滚动直到它消失。
　　第17篇原文链接：https：www。axure。comsupporttrainingscrollactivatedstickyheadertutorial
　　第18篇：滑块
　　创建一个带有一个可拖拽手柄的横向滑块或一个垂直滑块。实现效果如下：
　　STEP1：开始
　　打开培训文档中的“Slider”页面。
　　这个页面由一个带有两个矩形组件的组组成。一个是滑块的背景，另一个是滑块控制器。
　　点击组进入滑块控制器并选中它。右键选择“转化为动态面板”。（我们需要用到拖拽交互，而只有动态面板有这个功能。）然后将动态面板重命名为“Handle”。
　　STEP2：创建拖拽交互
　　继续选择“Handle”，双击属性标签栏下的“拖拽”来创建一个拖拽实例。
　　在实例编辑器的左边栏，点击“移动”。
　　在右边栏，点击“这个组件”。
　　在右边栏的底部，使用“移动”的下拉选框选择“拖动X轴”。这个会将组件限定在只能横向滑动。
　　在这个下面，点击“添加边界”。
　　在第一个下拉选项选择“左边”。在接下来的下拉选项选择“大等于”，点击“fx”进行编辑。
　　从编辑值对话框底部的“本地变量”部分开始。你可以保留第一个值“LVAR1”不变。
　　在一个下拉框，选择“组件”。
　　在最后一个下拉框，选择“Background”。
　　移动到对话框的顶部，输入以下文字：〔〔LVAR1。left〕〕
　　点击确定关闭编辑值窗口。
　　这样第一个边界就设置好了。
　　在次点击“添加边界”来设置滑块右边的边界。
　　在第一个下拉选项框中，点击“右边”。在第二个选项框，点击“小等于”，然后点击“fx”进行编辑。
　　从编辑值对话框底部的“本地变量”部分开始。你可以保留第一个值“LVAR1”不变。
　　在一个下拉框，选择“组件”。
　　在最后一个下拉框，选择“Background”。
　　移动到对话框的顶部，输入以下文字：〔〔LVAR1。right〕〕
　　点击确定关闭值编辑器。第二个边界也设置好了，这个组件现在最远只能够拉到背景的右端。
　　点击确定，关闭实例编辑器。
　　STEP3：预览
　　点击预览。
　　尝试拖拽滑块手柄。
　　第18篇原文地址：https：www。axure。comsupporttrainingslidertutorial
　　相关阅读
　　AxureRP官方教程翻译（1）：交互式按钮
　　AxureRP官方教程翻译（2）：文本链接
　　AxureRP官方教程翻译（3）：显示隐藏的部件
　　AxureRP官方教程翻译（4818）集合