Tutorial Part Six: Create New Spaces Using Your Product Knowledge

The buttons you just added in Part Five need to point somewhere. Let's create those scenes and then update each Asset Flow button with a navigation action.

  1. Create five featured movie pages.
    • Right-click the Featured Movies scene in the Scenes panel and select the Add a sequence option. The value of a sequence is to permit the designer to visually represent logically related scenes.

      Step_6-0.jpg
    • Right-Click the "Sequence" line in the Scene Panel and select Add a Scene
    • Change the name of this scene (should have been named auomatically "Scene 1") to "Alice in Wonderland".

      Step_6-1BEL_v622.png

  2. Prep the new Alice in Wonderland scene.
    • As you did on the previous step, copy/paste the Text asset from another scene and rename the title text to Alice in Wonderland, resizing the text box (if necessary) so the entire title is visible.
  3. Insert an image.
    • Add the image Poster-Alice-in-Wonderland-Released.jpg into the scene and move it to the right side of the scene. Note how we are reusing the same image content applied to an Image Button in the Asset Flow collection back on the Featured Movies scene. Content can be used multiple times in the same scene and across scenes.
    • Open the Properties panel and change the image Width to 460 and the Height to 678
    • In its Container behavior -> Display buttons category, select the Show maximize button.

      Step_6-2.jpg
  4. Insert text.
    • Insert a Text asset just below the title. Add the following text using the Font "Calibri" with a Font size of 26.
      • Nineteen-year-old Alice (Mia Wasikowska) is attending party at a lavish country estate when she sees a white rabbit with a pocket watch dart into the bushes. Curious, she follows the rabbit to an enormous tree, and tumbles down a hole that takes her to Underland, a strange world inhabited by anthropomorphic creatures in search of someone to save them from the dreaded Red Queen (Helena Bonham Carter), who has assumed control of the kingdom by decapitating anyone who dares disagree with her.

        Step_6-3.jpg
  5. Add a video.
    • Drag in the video Trailer-Alice-in-Wonderland.wmv. Place it on the left side of the screen below the movie summary text and resize Width to 617 and Height to 447.
    • Open the Properties panel
      • at the top, set Container to "Static".
      • In the Behavior category, select Autoplay and Play loop.
      • In the Appearance category
        • In the Poster subcategory, change the Time property to 0 minutes and 5 seconds
        • In the Controls subcategory, select Show timeline and Show sound control.

          Step_6-4.jpg

  6. Add new navigational button.
    • Add an Image Button to the scene, not the background experience layer, and name it Back Button.
    • In the Properties panel for this button
      • Clear the Text property
      • Change the Pressed image and Released image to Button-Back-Pressed.png and Button-Back-Released.png.
      • Resize to a Width of 177 and a Height of 128 then rotate to 70 degrees.
    • Drag this button into the top left of the scene and place it behind the "Home" button.

      Step_6-5BEL_v622.png

    • Add a trigger/action pair to this button so that the Released action causes a navigation to the Featured Movies scene

      Step_6-6_v622.png

  7. Add a navigation action to the appropriate button in the "Featured Movies" Asset Flow.
    • Return to the Featured Movies scene and, using the Scene Structure panel, select the button in the Asse Flow representing Alice in Wonderland.
    • Add a trigger/action pair to that button so that the Released trigger causes navigation to the scene within the sequence named Alice in Wonderland.

      Step_6-7BEL_v622.png

  8. Test your work.
    • Hit F5 on your keyboard or press the Play button in Composer. Slide the Asset Flow with your finger/mouse until you see the image for Alice in Wonderland and then select it. Verify that the action works as expected.
    • Hit the Escape button on your keyboard to return to Composer's Edit Mode.
  9. Finish the rest of the Director of the Week experience.
    • Copy the "Alice in Wonderland" scene and paste four copies into the sequence. Modify each of these four scenes to contain content specific for the other four Tim Burton movies provided with this tutorial.
    • Update the "Featured Movies" Asset Flow with navigation actions for the other four movies.
    • To download all graphic content found on every scene in the complete Director of the Week experience, click here. (It's about 137MB in size so be sure you have the time and bandwidth to download it.).


tender-previous.png


tender-next.png