官方教程翻译完结

　　最后10篇（前8篇点击查看）看看是否有自己感兴趣的模块，每个功能都挺有意思的。
　　这10篇分别是：
　　第9篇：账号登录
　　第10篇：旋转式幻灯放映机
　　第11篇：自动点击区域
　　第12篇：必填区域
　　第13篇：动态设置下拉选项
　　第14篇：根据下拉列表设置文本
　　第15篇：发送文本到另一个页面
　　第16篇：宽度充满的图片或横幅
　　第17篇：滚动激活固定的头部文字
　　第18篇：滑块
　　第9篇：账号登录
　　建立一个登录表单，这个登录表单使用条件式的逻辑来证实用户的登录资格。在这个原型里，你将会有一个合适有效的邮箱地址lt；roseclassyharbor。comgt；和一个合适有效的密码password1。（不要用自己的银行密码，朋友们。操练好的密码习惯。请查看www。passwordsgenerator。net）只有邮箱和密码都正确才能进入页面。实现效果如下：lt；roseclassyharbor。comgt；
　　STEP0：下载培训文档
　　如果你还没有培训文档，请点击下载AxureTraining。rp文档。这个文档包含了Axure培训网站上每个教程用到的相关页面。我们建议你一直都用我们准备的这个文档来完成教程，但是如果你不用，那也是可以的即使你没有使用我们的培训文档，我们也总是会告诉你为了完成每一个教程新文件里都创建了什么。
　　STEP1：设置
　　打开培训文档中的Accountlogin页面。这个页面包含了一个由一个邮箱区域和密码区域的登录表单，和一个提交按钮。这个页面还包括了错误信息提示组件当有错误登录请求时才会出现。
　　选择密码区域，在右边的属性标签栏下，定位到类型的下拉选项框并选择密码。
　　选择Error组件，点击样式标签栏的隐藏复选框来隐藏它。
　　STEP2：登录成功
　　如果输入的邮箱和密码都正确，那么AccountHome页面就会被打开。
　　选择submit按钮，在属性标签栏下，双击单击来添加一个新的单击实例。
　　在实例编辑器的顶部，点击添加条件按钮来打开条件创建器。保留第一个下拉选项框的值为在组件里的文本。在第二个下拉选项框，选择Emailaddress组件。
　　保留接下来两个控制设置等于和值不变。
　　在最后一个区域，输入lt；roseclassyharbor。comgt；（不包括方括号）。lt；roseclassyharbor。comgt；
　　点击右边的绿色号图标添加另一个条件。
　　保留第一个下拉选项框的选项在组件里的文本。在第二个下拉选项框里选择组件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。在目录的顶部，点击工程amp；gt；全局变量。
　　默认情况下，一个文件开始有一个叫做加载变量的变量。点击文本加载变量将其改为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）集合