Learn how to move between your iPhone App screens with a sliding animation using dynamic panels.

iPhone App Navigation with Dynamic Panels

When prototyping iPhone apps, it's common to want one screen to transition to another with an animation like sliding. To do that in Axure RP, the screens can be designed inside a dynamic panel and the Set Panel State action can be used to apply the sliding transition from one screen to the next.  This iPhone app tutorial shows you how to do that.

On a side note, building your iPhone app prototype inside dynamic panels is a nice way to put your entire app on a single page. But to prevent an overload of dynamic panels which may get difficult to manage on a single page, consider breaking it up into multiple pages when it makes sense.

Animated Screen Transition Tutorial Overview

Navigating your app with

See Example

This zip file contains the RP file needed to complete this tutorial

Screen Transitions

Add an additional state the the panel by right-clicking the panel in the Dynamic Panel Manager and selecting Add State.

Label State1 "Now Playing" and State2 "Stations".

Step 3: Add "Stations" state

First, open AxureiPhoneApp.zip and open the iPhoneApp-StateChangeNavigationTutorial.rp file.

Add image map regions over the back arrow button and Now Playing button. We're doing this because those buttons are made of multiple widgets, and we want to add an interaction to the entire area.

Step 1: Add Image Map Regions

Next, we're going to put both of these screens into a single dynamic panel.  

Select the all of the widgets for the first screen with the grey background, right-click and convert it to a dynamic panel.  Label this panel InterfacePanel.

Step 2: Convert first display to dynamic panel

Now Playing

Step 4: Paste widgets into "Stations" state

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

© 2002-2013 Axure Software Solutions, Inc. All rights reserved.

Mockup Software

Wireframe Software

Flowchart Software

Prototyping Software

SRS Documents

Web Design Software

iPhone Mockup Tool

iPad Mockup App

Visio Alternative

Powerpoint Alternative

Use Axure RP as:

WYSIWYG Editor

The Round Up

Back to iPhone App Tutorials

Online Training Home

Navigate to the Now Playing state, select the Back Button image map region, and double-click OnClick to open the case editor.

Step 7: Open Now Playing state, add OnClick

Select the "Now Playing" image map region, and double-click the OnClick event to open the case editor.

Step 5: Add OnClick to Image Map Region

Add a Set Panel State action and check the checkbox for InterfacePanel.   The "Now Playing" state will be selected by default. Choose "slide left" for Animate In and Animate Out.

Click OK to close the case editor.

Step 6: Set Panel to State "Now Playing"

Select the Set Panel State action and check the InterfacePanel checkbox.  Choose the Stations state from the droplist, and select "slide right" for Animate In and Animate Out. Click OK.

Generate and test it out on your desktop or view it on your iPhone.

Step 8: Set Panel State to "Stations"

Select the station list screen widgets, and cut and paste them into the Stations state. Move the pasted widgets to location 0,0.

Now you have the power of dynamic panels for your iPhone app prototypes. Use it responsibly.