Axure and iPhone application prototype creation (3)

In the previous two articles, the author introduced how to useIPhone applicationsThe page template is inAxure, a prototype design toolAnd how to view the iPhone app prototype on the iPhone. Next, I will explain how to use axure to set upShow and hide sliding menus.

Step 1: Add image ing area

First open axureiphoneapp.zip and open the iPhoneApp-SlidingMenuTutorial.rp file.

Because the navigation at the bottom is now just a single image, add an Option Button between the thumb up and down buttons mapped to the image area. In addition, add an image ing area on the "add bookmarks" button, because it is created by two components, we want to click the entire area.

Step 2: Convert the menu to the dynamic panel

To create a slide animation, we will use the settings panel status event. First, move the entire sliding menu to a dynamic panel. The specific operation is: select a component, right-click, convert> load to dynamic panel. Label slideupmenu for the panel "".

Step 3: add the status "menu" and "empty" under "slideupmenu"

Now, add the second State to the Panel and leave it blank. With this step, we will see a slide-down animation.

Mark the first status as "menu" and the second status as "blank ".

Step 4: Hide the Panel

Now, the dynamic panel is hidden by default. Even if the status is blank, you cannot click or click through the visible dynamic panel.

Step 5: Add onclick to image ing area

Add Interaction: adding an instance to The onclick event of the Option Button is the image ing area we added in step 1. Double-click onclick to add an instance.

Step 6: Set the Panel to "menu" and move up

Add a panel status event to the status, and select the slidingmenu panel check box. The menu status is selected. Select "slide up" from the animation drop-down list.

Click OK to close the instance editor.

Note: When you set the Panel status, the Panel will be automatically displayed, so you do not need to add another display panel event.

Step 1: Open menu and add onclick to button

On the Dynamic panel management page, double-click menu to open the event. In the "add bookmarks" ing area, add an instance to The onclick event.

Step 2: Set the Panel to "NONE" and "slide down"

To hide the panel, we will use the set panel status event so that we can use the "slide down" animation. Use "Hide panel yourself" to hide the panel, but not hide the animation.

Add a set panel event, select the panel, and set the status to empty. Add a downward slide animation for the fly-out.

Step 3: add events-wait 500 milliseconds and hide panel events

Add a wait event and set the wait time to 500 milliseconds. Add a hidden panel event after the wait event. Add wait events here to ensure that the animation is completed before the panel is hidden. Like above, the panel needs to be hidden so that the components under the Panel can be clicked.

Step 4: Move slideupmenu in place

Finally, move slideupmenu in place. You can hold down the Shift key and drag it along the same axis.

Generate and test your prototype. Upload it to the axshare website or view it on your own device.

If the hidden menu is not running properly, check whether the sequence of all events is correct.

Download this axure iPhone app Template

Download the prototype design tool axure RP