Overview
1. Basic Interactions Demo
2. Interactions
3. Defining a Basic Link
4. Actions
5. Multiple Cases
6. Page Level Interactions: OnPageLoad
1. Basic Interactions Demo
Please turn on speakers for audio
To view in HD on Vimeo, please click here.
2. Interactions
The Interactions pane is used to define the behavior of the widgets on the wireframes. Interactions can be added ranging from basic links to Rich Internet Application (RIA) behavior. The defined interactions will function in the generated prototype.
Interactions are made up of Events, Cases, and Actions.
Some examples of Events are OnClick, OnMouseEnter, and OnMouseOut.
Each Event can have one or more Cases. For example, the OnClick event of a button, can have two cases: one leading to Page 1 and the other leading to Page 2.
Each Case can perform one or more Actions. An example of an Action is Open Link in Current Window which is a basic link.
Cases can be copied by right clicking on a case or event and selecting copy case. To paste the copied case to an event on the same or different widget, right click on the event and select paste case.
3. Defining a Basic Link
Below are the steps to adding a basic link to a Button widget.
Add a Button widget to a wireframe and select it.
Add a Case: To add a case to the OnClick event of that button, select OnClick in the Interactions pane and click "Add Case" (or simply double click on OnClick). This brings up the Interaction Case Properties dialog where you choose which actions to perform.
Add an Action: In the dialog, check the Open Link in Current Window action.
Edit Action Options: Click "Link" to open the Link properties dialog box and link to a page in the design or link to an external URL.
To quickly add a basic link to a widget, select the widget, click on Quick Link at the top of the Interactions pane and choose the target page.
4. Actions
There are many Actions available in Axure RP in addition to basic links. One or more of these Actions can be performed on any Case on an Event. Below is a list of the Actions available in Axure RP.
Open Link in Current Window: Opens the page in the current window.
Open Link in Popup Window: Opens the page in a popup window.
Open Link in Parent Window: Used from a popup window to change the page loaded in the window that opened the popup.
Close Current Window: Closes the current window.
Open Link in Frame: Used with the inline frame widget to change the page loaded in the inline frame.
Set Panel state to state: Set the current state of one or more dynamic panels.
Show Panel(s): Shows (makes visible) one or more dynamic panels.
Hide Panel(s): Hides one or more dynamic panels.
Toggle Visibility for Panel(s): Shows or hides dynamic panels based on their current visiblity.
Move Panel: Move a dynamic panel to a specific location or by a specified distance.
Set Variable and Widget value(s) equal to Value(s): Sets the value of one or more variables and/or widgets.
Open Link in Parent Frame: Opens a page in the parent frame. Used from pages loaded in inline frames.
Scroll to Image Map Region (Anchors): Scroll a page to a specific location horizontally, vertically or both.
Enable Widget: Enable form widgets like a droplist or text field.
Disable Widget: Disable form widgets.
Wait Time: Delays actions by a specified time.
Other: Shows a textual description of an action such as "Send email to user".
5. Multiple Cases
Multiple Cases can be added to an Event to communicate conditional flows or interactions.
For example, you could have two cases on the OnClick event of a button. The first case could be given a description "If Yes" and an Action to open Page 1. The second case could be given a description "If No" and an Action to open Page 2.
When the button is clicked in the prototype, the descriptions for each case ("If Yes" and "If No") are shown. Clicking on a description will perform the associated Action.
Using descriptions is effective for communicating conditional flow. However, if a higher fidelity prototype is required, Axure RP supports defining conditional logic on Cases to perform Actions
based on values entered in form widgets in the prototype or values stored in variables. This is discussed in AXURE 202 Article 1: Conditional Logic.
6. Page Level Interactions: OnPageLoad
The OnPageLoad event occurs when a page loads in the prototype.
The OnPageLoad interaction is defined in the Interactions pane within the Page Notes pane. Cases are added to this event the same as adding Cases to Events on widget interactions.
The OnPageLoad Event is discussed in more detail in AXURE 202 Article 5: OnPageLoad Event.