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

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

ANIMATED SCREEN TRANSITION

Transition between pages in your mobile prototype with a rich animation.

STEP 1: SETUP

In the mobile training document, open the page named "Animated Screen Transition". On the canvas are two widget groups, one for each screen of our prototype, "Home" and "Settings".


Select both groups on the canvas. Right-click the selection and choose "Convert to Dynamic Panel" in the context menu. Then, drag the dynamic panel's right edge in until it lines up with the "Home" group's right edge, making the dynamic panel 360px wide. This restricts the dynamic panel's visible area so that only one of the two groups will be shown at a time.

STEP 2: SHOW "SETTINGS" WHEN THE GEAR ICON IS CLICKED

In the Outline pane, double-click "State1" of the new dynamic panel to open it for editing.


Once you're in the dynamic panel state, select "gear settings menu button" in the Outline pane. (This is the gear icon at the top-right of the "Home" group's header on the canvas.) Then, double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.


The first thing we need to do in this case is to prepare the "Settings" group for the animated transition. We'll do this by hiding it and placing it in the dynamic panel's visible area.


In the Case Editor, choose the "Hide" action under "Show/Hide". Under "Configure Actions", check "Settings". (Note: You can search for "Settings" in the column's search bar to locate the group more quickly.)


Back in the left column, choose the "Move" action. Under "Configure actions", check "Settings".


At the bottom of the right column, change the "Move" dropdown to "to" and enter "20" in the "y" field. This will move the "Settings" group to (0,20) on the dynamic panel's canvas.

STEP 4: PREVIEW

Preview the prototype. Click the gear icon to bring up the "Settings" screen, and click the arrow icon to go back to the "Home" screen.


Next, we'll execute the actual transition using a Show action and another Move action.


In the left column, choose the "Show" action under "Show/Hide". Under "Configure Actions", check "Settings".


At the bottom of the right column, select "fade" in the "Animate dropdown and enter "300" in the "t" field. Then, check the box for "Bring to Front".

Back in the left column, select the "Move" action once more. Under "Configure actions", check "Settings".


At the bottom of the right column, change the "Move" dropdown to "to", and leave both the "x" and "y" fields at "0". (Since the "Settings" group will be at (0, 20) after the previous "Move" action, this will have the effect of moving it upward by 20 pixels.) In the "Animate" dropdown, select "swing", and enter "350" in the "t" field.


Click "OK" to close the Case Editor.

STEP 3: HIDE "SETTINGS" WHEN THE ARROW ICON IS CLICKED

The transition back to the "Home" screen is simpler—all we have to do is hide and move the "Settings" group again.


In the Outline pane, select "arrow home screen button". (This is the arrow icon at the top-left of the "Settings" group on the canvas.) Then, double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.


In the Case Editor, choose the "Hide" action under "Show/Hide". Under "Configure Actions", check "Settings".


At the bottom of the right column, select "fade" in the "Animate dropdown. (Notice that the "t" field uses the same value, 300, that we entered in the other "Hide" action before.)


Back in the left column, select the "Move" action. Under "Configure actions", check "Settings".


At the bottom of the right column, change the "Move" dropdown to "to" and enter "20" in the "y" field. In the "Animate" dropdown, select "swing". (Notice that the "t" field uses the same value, 350, that we entered in the other "Move" action before.)


Click "OK" to close the Case Editor.

 

 

 

 

 

(Note: If you would like to preview this page in the device frame provided on the "Device Frame" page, open that page, double-click the "Content Frame" inline frame, and select "[[PageName]]" in the dialog that appears.)

STEP 0: DOWNLOAD THE MOBILE TRAINING FILE

If you don't already have it, download AxureMobileTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials in the Axure mobile tutorials module.