SLIDING PANEL UP
SLIDING PANEL UP
First, open AxureiPhoneApp.zip and open the iPhoneApp-SlidingMenuTutorial.rp file.
Because the bottom nav is a single image, add a hot spot to the options button between the thumbs up/down. Also, add a hot spot over the Add Bookmark button since it was created using two widgets and we want the entire area to be clickable.
Step 1: Add Hot Spots
To create the sliding animation we're going to use the Set Panel State action. First, convert the entire sliding menu into a dynamic panel by selecting the widgets, right clicking, and choosing [Convert to Dynamic Panel]. Label the panel "SlideUpMenu".
Step 2: Convert
menu to dynamic panel
Now set the dynamic panel to be hidden by default. We need the panel to be hidden because you cannot click/tap through visible dynamic panels even if the state is empty.
Step 3: Set
Panel to Hidden
Let's start adding interactions by adding a case to the OnClick event of the OptionsButton, the hot spot we added in the first step. Double-click OnClick to add the case.
Step 4: Add OnClick
to the Hot Spot
Add the action Show and select the SlidingMenu panel checkbox. Select the "slide up" animation from the animate in droplist.
Click OK to close the case editor.
Note that setting panel states automatically show the panel so we don't need to add a Show Panel action.
Step 5: Show Panel, Slide Up
Open the Menu state by double-clicking State1 in the Widget Manager and add a case to the OnClick event of the "Add Bookmark" hot spot we added earlier.
Step 1: Open Menu State, add OnClick to Button
To hide the panel we'll use the Hide action with the "slide down" animation.
Step 2: Hide panel, Slide Down
SLIDING PANEL DOWN
© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure Ⓡ is a registered trademark of Axure Software Solutions Inc.
Finally move the SlideUpMenu into place, you can hold Shift while dragging it move along one axis.
Generate your prototype and test it out. Upload to AxShare and view it on your device.
If hiding the menu isn't working right, make sure the actions are in the right order.
Step 3: Move SlideUpMenu into place
This tutorial shows how to create a sliding animation that is commonly used to hide and show a menu. When prototyping iPhone apps, you can use this technique to hide and show an upload menu, settings options, or any display that shows and hides by sliding up and down.
SLIDING MENU TUTORIAL OVERVIEW
Now you've learned a great technique to create menus and content that slide in and out. Use it wisely.
IPHONE APP TUTORIAL & TRAINING ARTICLES
Sliding Menu Tutorial
MORE IPHONE APP TUTORIALS & TRAINING ARTICLES ::
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.