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.


Add an additional state to 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 hot spots 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 Hot Spots

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

Add hot spots to you iPhone app buttons.

Convert the first iPhone app display into a dynamic panel.

Add an additional state to your iPhone interface.

Put both views into the interface dynamic panel.

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

u36_start u36_end u36_line

Navigate to the Now Playing state, select the Back Button hot spot, and double-click OnClick to open the case editor.

Step 7: Open Now

Playing state, add OnClick

Select the "Now Playing" hot spot, and double-click the OnClick event to open the case editor.

Step 5: Add OnClick

to Hot Spot

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"

Add OnClick to the hot spot.

Open Now Playing state, add OnClick.

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.


u72_start u72_end u72_line
u74_start u74_end u74_line
u76_start u76_end u76_line
u78_start u78_end u78_line
u80_start u80_end u80_line
u82_start u82_end u82_line
u84_start u84_end u84_line

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



Animated Screen Transition Tutorial

u103_start u103_end u103_line


u127_start u127_end u127_line
u128_start u128_end u128_line
Set the state to "Now Playing".

Set the state to "Now Playing".

This zip contains the iPhone App Template and files to complete the iPhone app tutorials

This is an archived Axure 7 training resource. You can update to Axure 8 for free at www.axure.com/update.