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 background and navigation elements that will be common across all (or at least a portion of all) scenes. We're going to use a very powerful design element named an "Experience Layer" to achieve this cross-scene design objective. (See our article about layers for a detailed discussion.)

1. Add a background Experience Layer
   
   • We are going to create an "experience layer" that will contain content universal to all scenes in your experience
   • Right-click on the Experience node in the Scene Structure Panel and select Add background experience layer
     
     
     
   • A pop-up dialog will appear. Select "Yes", confirming your desire to turn the current scene (Biography) background transparent so you will be able to see the one used in the background experience layer.
   • Hide and lock the one and only layer in the Biography scene so you can edit the background experience layer without having to worry about making changes to the scene itself. To do that, left-click on the lock and the eye icons (the text color of the layer and its child nodes will turn grey once you disable visibility)
     
     
     
   • In the background experience layer, add an image, set it to cover the whole scene by resizing with your mouse or editing its properties (X:960, Y:540, W:1920, H:1080)
   • In properties for this image, set the Image property to Background.png.
     
     
     
   • You can now show and unlock the scene layer to get a complete view of your scene.

You now have a layer that will be present in every new scene you add. Regardless of the scene you visit while in Composer's Edit Mode, modifications to content in the experience layer will be visible across all scenes. See our article about layers for more information.

1. Insert a new scene.

   • Click the Add Scene button in the Scenes panel.
     
     
   • 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.
     
     
   • As you can see, the experience layer is visible in this new Home scene.

2. Insert a navigational button to be used on every scene.

   • We're going to continue work on the background experience layer. Remember, work on experience layers can occur on any scene that displays it.
   • Using File 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.)
     
     
     
   • Select the background experience layer in the Scene Structure panel.
   • In the background experience layer, insert a button by left-clicking the Button icon located in the Asset panel on the left side of Composer.
     
     
   • Open the 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 an Orientation of 15 degrees, then position it in the top left of the scene.
   • Be careful to have your button above your background image
     
     
     

3. Add a trigger and action to the button.

   • Now we will add a trigger/action pair to this button so that, when pressed and released, 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 - select the right-most button in the blue ribbon at the top of Composer (the one with a lightning bolt if the panel is not visible)- and 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 be recognized.
     
     
   • 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.
     
     

4. Add a second button.

   • Making sure the Home button remains selected in the scene, and you are in your background experience layer, use your keyboard to duplicate it by typing Ctrl-d on your keyboard.
   • 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
     
     

5. Add a trigger and action to this new button.

   • Open the Triggers and Actions panel for this button. Because we copied this button, the scene-to-scene navigation action was copied as well. We need to change this action. Select the Experience in the first column, then the Overall Experience category in the second column and the Flip screen action in the third column.
     
     

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.
     
     
   • If you switch from the current "Home" scene back to your "Biography" scene, the two buttons will remain visible thanks to your use of an experience layer.
     
     
     

Proceed to Part Five of this tutorial.