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.

  1. 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 Scenes panel.

      Step_4-1.jpg
    • 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.

      Step_4_Home.jpg
  2. Insert a navigational button to be used on every scene.
    • 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.)

      Step_4-2.jpg
    • 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 -> Button.

      Step_4-3.jpg
    • 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.

      Step_4-4.jpg
    • In the Text subcategory, delete the word Button in the Text field.

      Step_4-5.jpg
    • 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.
  3. 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.

      Step_4-6.jpg
    • 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 be recognized.

      Step_4-7.jpg
    • 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.

      Step_4-8.jpg
  4. 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 Button-Flip180-Pressed.png and Button-Flip180-Released.png

      Step_4-9.jpg
  5. Add a trigger and action to this new button.
    • 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.

      step_4-11.jpg
  6. Rename the Home and Flip buttons
    • Select each button in the Scene Structure panel and rename them to Home Button and Flip Button respectively.

      Step_4-10.jpg

Proceed to Part Five of this tutorial.


tender-previous.png


tender-next.png