Tutorial Part Four: Add Navigational Elements
Now you have some idea about how to add, organize and configure content for an individual scene. Next you need to think about navigation. Where can a user go from this particular scene? Very often, navigation options are universally consistent from one scene to the next so this aspect of your interactive experience is something you should consider from the very beginning, In fact, your first step in a new project may be to create a scene containing nothing but the background and navigation elements that will be common across scenes. The idea is that you would copy and then paste this scene over and over again, using it as a template.
- Insert a new scene.
- We are going to create a placeholder for the Home scene, the scene that will act as a table of contents for visitors to the kiosk. The insertion of content for this scene is out of scope for this tutorial, left for you to continue your practice. (The graphic elements are, in fact, available in the zip file you downloaded at the beginning of the tutorial.)
- Click the Add Scene button in the
- Double-click on this new scene to change its name to Home.
- Left-click and drag the Home scene to a
position above the Biography scene.
- Insert a navigational button to be used on every
- Reselect the Biography scene so that it is active.
- Using Windows Explorer, browse to the folder 0-All
Spaces and drag the six remaining images located in this
folder into the Content Library. (You already imported
Background.png in an earlier step.)
- Insert a button into the scene by left-clicking the
Button icon located in the Asset panel on the left
side of Composer. Alternatively, right click in the scene and
select the menu item Insert -> Asset ->
- Open the All Properties panel for this button.
- In the Content & Container category, change the Style value to Image button.
- In the Button category, in the
Images subcategory, use the drop-down boxes to
select Button-Home-Released.png as the Released
image and to select Button-Home-Pressed.png as
the Pressed image.
- In the Text subcategory, delete the word
Button in the Text field.
- Resize the button to a Width of 177, a Height of 128 and a rotational angle of 15 degrees, then position it in the top left of the scene.
- Add a trigger and action to the button.
- Now we will add a trigger/action pair to this button so that, when pressed, it will send the user to the Home scene. Make sure this button is still the selected element in the scene.
- In the Triggers and Actions panel found on the
lower-right side of Composer, click anywhere on the row containing
the words Add a Trigger. This opens the Triggers and
Actions Details panel.
- Note how the Is released trigger has been
automatically selected. This means the action(s) you will be
selecting in the lower panel will occur when the finger touch
/mouse click on the button is lifted. This is better than using the
Pressed trigger as users typically assume they can drag
their finger off of a button in order to "cancel" the touch. By
using the Pressed trigger, this cancel gesture would not
- In the top right, click the words "Click here to select an action". All available actions are now listed in the bottom of this Details panel.
- In the bottom section, select Scene-to-Scene Navigation in the left column and Go to Scene in the center column
- In the right column, select Home in the drop-down Target list and (optionally) change the Transition parameter to Slide.
- Click the Ok button to save your changes.
- Add a second button.
- Making sure the Home button remains selected in the scene, use your keyboard to duplicate it by typing Ctrl-C and then Ctrl-V - that is, copy and paste.
- Move this button to the bottom-right side of the scene and, using your mouse, rotate the button to 33° by left-click-and-dragging the rounded handle of this button.
- Change the Pressed and Released images for this button to
- Add a trigger and action to this new
- Open the Triggers and Actions panel for this
button. We're going to change the action from scene-to-scene
navigation (note how the trigger/action pair was copied along with
the button itself). Select the Overall Experience
category in the first column and the Flip screen
action in the middle column.
- Open the Triggers and Actions panel for this button. We're going to change the action from scene-to-scene navigation (note how the trigger/action pair was copied along with the button itself). Select the Overall Experience category in the first column and the Flip screen action in the middle column.
- Rename the Home and Flip buttons
- Select each button in the Scene Structure panel and rename them
to Home Button and Flip Button
- Select each button in the Scene Structure panel and rename them to Home Button and Flip Button respectively.
Proceed to Part Five of this tutorial.
- Tip of the Month: Getting Answers To Your IntuiFace Questions
- Tip of the Month: Little Known Features of IntuiFace
- Tip of the Month: Experience Design Choices to Optimize Performance
- Tip of the Month: Using Out-of-the-Box Interface Assets to Incorporate Real-time Information
- Tip of the Month: Use Design Accelerators to Improve Appearance and Functionality
- View all (6 more)