Tutorial Part Five: Use a Collection for Navigation

You have already seen how to create a collection when you added a Slide Show collection to the Biography scene. We are now going to use collections as a navigational tool plus show off some of their customization options.

  1. Add and prepare a new scene.
    • In the Scenes panel, click the Add a scene at the bottom of the list. A new scene has been created, named Scene 1.
    • Double-click Scene 1 in the Scenes panel and rename it Featured Movies.

      Step_5-0.jpg
    • Go to your Biography Scene, select the text asset (with title "Biography"), copy it by selecting it and either with a Ctrl+c or right-click > Copy
    • Go back to your Featured Movies and paste it in the Layer1 (not the experience Layer) either with a Ctrl+V or right-click > Paste
    • Change the title text to Featured Movies, resizing the Text asset as necessary.
  2. Import content for this scene.
    • Browse to the 3-Featured Movies folder on your file system and add all 16 items into the Content Library.
  3. Insert a collection
    • Using the Collections panel on the left side of Composer, insert an Asset Flow into the scene. Alternatively, you can right click the scene and select the menu item Insert -> Collection -> Asset Flow.

      Step_5-1_v622.png

    • Move the Asset Flow into the middle of the scene.
    • Resize the Asset Flow to a Width of 1740 and a Height of 745..
  4. Add buttons into the collection
    • We are going to create a navigational tool comprised of five buttons inside the Asset Flow collection we just created. Each button will drive the user to a different scene.
    • Select the Asset Flow collection in the scene.
    • Left-click the Button icon in the Assets panel - the same button you used in the previous chapter of this tutorial. Notice how the button was placed inside the Asset Flow collection.

      Step_5-2BEL_v622.png

    • Using the Scene Structure panel, select this button inside the Asset Flow. Use the Properties panel at the right of Composer to clear the Text field.
    • Back in the Scene Structure panel, left-click this modified button. Use Ctrl+c on your keyboard to copy it. Press Ctrl+v on your keyboard to paste four copies. You now have five buttons inside the collection.

      Step_5-3BEL_v622.png

  5. Assign images to the buttons
    • Using the Scene Structure panel, select each button inside the Asset Flow, one at a time. Use the Properties panel to change the button style from Simple Button to Image Button and then assign both a Pressed image and a Released image. The images are represented by all of the image files preceded with the word "Poster" in the Content Library.

      Step_5-4BEL_v622.png

    • For clarity sake, you may want to rename each button in the Asset Flow collection to reflect the movie they represent.
    • When you're done you should see something like the following. Of course, you may have ordered your posters differently.

      Step_5-5BEL_v622.png

  6. Customize the collection
    • With the Asset Flow collection selected, open the Properties panel.
    • In the Appearance category, in the Controls subcategory:
      • Deselect Show controls
    • Continuing in the Appearance category, copy everything in the following graphic - or play around and make your own selections.

      Step_5-6.jpg
    • This is how your scene should look. Again, the order of posters may be different.

      Step_5-7.jpg

You have now created an Asset Flow containing five buttons. As you've seen in the previous step of this Tutorial, each button can be assigned its own set of actions, including navigation actions. However, much more customization is possible. Continue on to Part Six of this tutorial.


tender-previous.png


tender-next.png