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
This zip file contains the RP file needed to complete this tutorial
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
Step 4: Paste widgets into "Stations" state
© 2002-2013 Axure Software Solutions, Inc. All rights reserved.
Use Axure RP as:
Back to Overview
The Round Up
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.