Features

Learn

Community

Company

Buy

Download

Axure Share

Forum

Manage Licenses

You can add a wide range of interactions to your wireframe from basic page links to dynamic “AJAX-y” behaviors to conditional logic and math functions.

 

The amount of interactivity needed for a prototype frequently depends on the audience and purpose. Sometimes a quick click-through is the way to go, but if you're doing user testing, you may want to invest in making the prototype closer to the final application. Before building the more complex interactions, it's a good idea to consider whether you need to.

Of course, sometimes it's just fun to make

it all work.

 

Interactions in Axure RP are made up of three main parts: events, cases, and actions.

 

Cases are the possible paths in response to an event. For example, on the click of a hyperlink, there may be a single case to open a page. Or on the click of a Login button, there may be two cases. If the login succeeds, open a page or if it fails, show an error. In Axure RP, these cases can be presented in the prototype as options or you can define conditional logic to automatically perform the desired case based on the values in the fields.

Below is a list of the available actions:

Events are triggers for an interaction. For example, a click, a mouse over, a drag, a drop, etc. Different widgets respond to

different events.

 

Below is a list of all the events available in Axure RP.

 

 

BASIC INTERACTIONS

Page links and beyond

INTERACTIONS OVERVIEW

Widget Events

Cases Overview

Actions Overview

Events are triggers for an interaction. For example, a click, a mouse over, a drag, a drop, etc. Different widgets respond to

different events.

 

Below is a list of all the events available in Axure RP.

 

Page Events

EVENTS

CASES

At the top, you can edit the description for the case. The description is presented in the prototype if there are multiple cases on the event and no conditional logic.

 

Add one or more actions to a case by clicking an action from the list on the left-hand section.

 

The actions you choose appear in the middle section. You can add an action multiple times. The actions fire in the order shown. For example, if you add a “Set Variable Value” action after “Open Link”, the browser will link to the next page before the variables get set.

 

They can be reordered by drag and drop or by clicking on the down arrow next to the action (or right click on the action) and selecting the option to move the action up or down.

 

Select the action in the 'Organize actions' section to configure the properties in the right-hand section.

 

When you are finished, click OK and the case and actions will appear in the Widget Interactions and Notes Pane.

 

There are scenarios where triggering an event could take multiple paths or cases. To define additional cases on an event, repeat the steps for adding a case. You can use the case descriptions to describe the scenario. For example, on the OnClick of a button, you can have two cases with the descriptions “If Login Succeeds” and “If Login Fails”. In the prototype, clicking on the button displays the descriptions and you can choose one to perform the related action.

 

A well written case description is an effective way to communicate conditional flow and is easy to maintain and update. When you need the prototype to perform the right case automatically, you can define conditional logic on the cases to perform actions based on values stored in variables or entered by the user in the prototype. Head over to

the Conditional Logic article to learn more.

 

Adding Cases

Defining Multiple Cases

Select a widget in the wireframe to display the events available for that widget in the Interactions tab of the Widget Properties Pane.

 

To add a case, select an event and double-click on the event, or click “Add Case”. This opens the Case Editor dialog where you can choose and configure the actions you want to perform.

Case Editor

ACTIONS

Actions are the responses to an event that are defined within a case. Take a basic link example: on the click of the button, open a page in the current window. The action in this case is “open a page in the current window”.

Available Actions

Want to take things a step further? Try adding conditions to your interactions.

Learn how to add and format a widget, add a basic link, and generate your first prototype.

 

Go to Core Training #1: Getting Started

This tutorial shows how to add multiple cases to an event, display a dynamic error message, and edit case descriptions to show the different paths a user can take in a login scenario.

 

Go to Show Hidden Widget Tutorial

BASIC INTERACTION TUTORIALS

Core Training #1:

Getting Started

Show Hidden

Widget Tutorial

This tutorial shows how to dynamically enable, disable, and set focus on widgets using actions.

 

Go to Core Training #4: Building interactions

Core Training #4:

Building Interactions

Shortcut to Create a Link

The easiest way to create basic page links in Axure is by clicking Create Links. 

 

Select a widget and click "Create Link" in the Interactions tab. Choose a page and voila!

You can move widgets with an animation effect as well as show and hide them with a fade effect.

 

Warning: These animations may be easy and fun for you to prototype but difficult for the developers to build :)

 

When defining the Move Panel action, you can choose a transition like swing or bounce and specify the duration of the animation.

 

And when defining Show Panel, Hide Panel, or Toggle Panel Visibility, you can choose a fade or slide animation.

Animation and

Transition Effects

These options are available when using the Show/Hide actions to help you build common design patterns faster.

 

Bring to front: Will bring the shown widget(s) to the "top" of your design

 

Treat as lightbox: Will bring the widget(s) to the front and create a colored background surrounding the widgets.

 

Treat as flyout: Will create an invisible area between the widgets where the cursor can travel without the widget being hidden.  If the cursor goes outside of this area, the widget being shown will hide.

 

Push/pull widgets: Will move below/right widgets down or up when the widget is being shown/hidden. More Info

Show/Hide Options

This tutorial shows how to hide widgets and show them using an OnMouseEnter event with the "Show" action and treat as flyout.

 

Go to Custom Tooltip Tutorial

Custom Tooltip Tutorial

This tutorial shows us how to use OnPageLoad, "Set Selected" action, and masters to highlight the current page in a navigation menu.

 

Go to Navigation Menu Tutorial

Navigation Menu Tutorial

OnClick: When a widget is clicked

OnMouseEnter: When the cursor is moved over a widget

OnMouseOut: When the cursor is moved away from a widget                               

OnDoubleClick: When a widget is double-clicked

OnContextMenu: When a widget is right-clicked

OnMouseDown: When a widget is clicked but not yet released

OnMouseUp: When a widget is clicked, this event triggers on the release

OnMouseMove: When a cursor is moved while over a widget, fires continually while moving

OnMouseHover: When the cursor hovers over a widget for one second

OnLongClick: When a widget is clicked or pressed and held

OnKeyDown: When a keyboard key is pressed while typing in a widget

OnKeyUp: When a keyboard key is released while typing in a widget

OnMove: When a panel is moved

OnShow: When a panel is shown through an interaction

OnHide: When a panel is hidden through an interaction

OnFocus: When a form widget gets focus by clicking or tabbing in

OnLostFocus: When a form widget loses focus

OnPanelStateChange: When a dynamic panel state is set using the “Set Panel State to State” action

OnDragStart: When a drag begins

OnDrag: When a panel is being dragged

OnDragDrop: When a drag ends

OnSwipeLeft: When a panel is swiped from right to left

OnSwipeRight: When a panel is swiped from left to right

OnLoad: When a dynamic panel is initiated from a page loading

OnSwipeUp: When a panel is swiped from bottom to top

OnSwipeDown: When a panel is swiped from top to bottom

OnScroll: When a panel with scrollbars is scrolled up or down

OnResize: When a panel is resized through an interaction, states switched resizing panel size, if "Fit to Content" (**)

 

Learn about these in further detail in the article Advanced Dynamic Panels.

OnSelectionChange: When a droplist option is selected, typically used with a condition.

OnCheckedChange: When a radio button or checkbox option is selected.

OnTextChange: When text is added or removed from a text field or text area.

Widget Specific

Dynamic Panel Events

u144_start u144_end u144_line
u146_start u146_end u146_line
u148_start u148_end u148_line

OnPageLoad: When a page initially loads

OnWindowResize: When a browser window is resized

OnWindowScroll: When a browser window is scrolled

OnPageClick: When any part of the page that does not include a widget is clicked

OnPageDoubleClick: When any part of the page that does not include a widget is double-clicked

OnPageContextMenu: When any part of the page that does not include a widget is right-clicked

OnPageMouseMove: When the mouse is moved anywhere on the wireframe

OnPageKeyDown: When a keyboard key is pressed

OnPageKeyUp: When a keyboard key is released

OnAdaptiveViewChange: When an Adaptive View other than the Base View is shown

u152_start u152_end u152_line
u154_start u154_end u154_line
u156_start u156_end u156_line
u158_start u158_end u158_line

Current Window: Opens a page or external URL in the current window.

New Window/Tab: Opens a page or external URL in a new window or tab.

Popup Window: Opens a page or external URL in a popup window. You can specify the size and properties of the window.

Parent Window: Used from a popup window to change the page loaded in the parent window that opened it.

Close Window: Closes the current window.         

Open Link in Inline Frame: Used to change the page loaded in an inline frame.

Open Link in Parent Frame: Opens a page in the parent frame. Used from a page loaded in an inline frame.

Scroll to Widget (Anchor Link): Scrolls a page to the location of a widget.

Open Link:

Show: Shows (makes visible) a widget which was set to hidden.

Hide: Hides a widget.   

Toggle Visibility: Shows or hides dynamic panels based on their current visibility.

Set Panel State: Shows a specific state of a dynamic panel.

Set Text: Changes the text on a widget.

Set Image: Changes an image.

Set Selected/Checked: Sets the style of a widget to its selected style.

Not Selected: Sets the style of a widget to its unselected (default) style.

Toggle: Sets a selected widget to not selected and vice versa.

Set Selected List Option: Sets a list option of a droplist or listbox to selected.

Enable: Set widget to active/selectable/default.

Disable: Set widget to inactive/unselectable.

Move: Move a widget to a specific coordinate.

Bring to Front: Brings a widget to the front layer of the page.

Send to Back: Sends a widget to the back layer of the page.

Set Focus on Widget: Sets the focus of the cursor on a form widget (i.e., a text field).

Set Panel Size: Changes the size of a dynamic panel.

Expand Tree Node: Expands the nodes of a tree widget.

Collapse Tree Node: Collapses the nodes of a tree widget.

Widgets:

u168_start u168_end u168_line
u170_start u170_end u170_line
u172_start u172_end u172_line

Set Variable Value: Sets the value of one or more variables and/or widget values (i.e., the text value on a widget).

Variables:

u178_start u178_end u178_line

Add Item to Repeater: Add data to the repeater.

Add to Selected Items: Selects data items .

Remove From Selected Items: Unselects data items.

Edit Selected Items: Edit data items for specific properties.

Delete Selected Items: Deletes the selected items.

Add Filter: Filter the items in the data set using a query.

Remove Filter: Remove all or a single filter.

Add Sort: Sort the items in the data set using a query.

Remove Sort: Remove all or a single sort.

Set Current Page: Shows a specific page when using pagination.

Set Number of Items per Page: Sets number of repeater items displayed when using pagination.

 

Repeaters and Data Sets:

u184_start u184_end u184_line

Wait Time (ms): Delays actions by a specified time.

Other: Shows a specified text description of an action such as “Send email to user”.

Miscellaneous:

u190_start u190_end u190_line
u192_start u192_end u192_line
u194_start u194_end u194_line
u196_start u196_end u196_line
u198_start u198_end u198_line
u200_start u200_end u200_line

Still need help? Check out the forum or drop us a line at support@axure.com.

THE ROUND UP

Home

Features

Community

Learn

Support

Company

Download

Buy

Contact

Privacy

Legal

Sitemap

© 2002-2014 Axure Software Solutions, Inc. All rights reserved. Axure is a registered trademark of Axure Software Solutions Inc.

u237_start u237_end u237_line

Patents

u277_start u277_end u277_line

MORE PROTOTYPING BASICS ARTICLES ::