Layers are a powerful way to add interactivity and branched scenarios to Storyline 360 and Storyline 3 courses. And they’re easy to use.

Let’s create a layer that displays a video to supplement the content of a slide, then we’ll trigger that layer to appear when learners click a button.

Watch this video demonstration, then follow the activities below to practice.

Practice Activities:

  1. Create a Layer with a Video
  2. Add a Button to the Slide That Triggers the Layer to Appear
  3. Add a Button to the Layer That Triggers the Layer to Close
  4. Preview Your Interaction

Practice Activity: Create a Layer with a Video

First, we’ll add a layer to a slide, insert a video, and hide the other objects on the slide while the video layer is visible.

  1. Open the Storyline folder in your practice files, then open the 03B_Triggers_Layers_360.story file and go to the second slide in the project.

    There are two duplicate slides in the sample project. The first slide is already set up with a triggered layer so you can preview the finished example. We'll recreate the interaction on the second slide in this tutorial.
  2. Click the New Layer button (looks like a blank piece of paper) in the Slide Layers panel. A new layer will appear in the panel.
  3. It’s a good idea to give your layers meaningful names so they’re easier to identify when you add triggers. Rename the layer you just added by double-clicking its title, typing a new name, and pressing Enter on your keyboard. Let’s call this layer Video.
  4. Make sure the video layer is selected, then go to the Insert tab on the ribbon and click Video. Insert the CSR Fundamentals Class.flv video from your practice files.
  5. Resize the video and center it on the layer.
  6. Now let’s hide some base layer objects while the video layer is visible. With the video layer still selected, go to the timeline panel and click the triangle beside Base Layer Objects to reveal the objects from the base layer. Click the eye icon beside each base layer object that you want to hide. (If you change your mind about hiding an object, just click the eye icon again to restore it.)

Practice Activity: Add a Button to the Slide That Triggers the Layer to Appear

The key to creating an interaction with layers is to use triggers to show and hide the layers as learners interact with the slide. Let’s add a trigger to the "Learn More" button on the base layer of our slide that shows the video layer when learners click it.

  1. Return to the base layer of the slide by clicking the base layer at the bottom of the Slide Layers panel.
  2. Select the Learn More button and click the Create a new trigger button (looks like a blank piece of paper) in the Triggers panel.
  3. Use the trigger wizard to assign these values to your new trigger, then click OK.
    • Action: Show layer
    • Layer: Video
    • When: User clicks
    • Object: btn_LearnMore

Practice Activity: Add a Button to the Layer That Triggers the Layer to Close

In the previous activity, we added a button to the base layer of the slide that shows the video layer. Now let’s add a button to the video layer that closes the layer when learners click it.

  1. Select the video layer in the Slide Layers panel.
  2. Go to the Insert tab on the ribbon, click Shape, choose the multiply shape, then draw an X near the upper right corner of your video.
  3. Give your multiply shape a recognizable name. Double-click the name of the shape in the timeline panel to open it for editing, type btn_Close, and press Enter on your keyboard.
  4. Select the multiply shape and click the Create a new trigger button in the triggers panel.
  5. Use the trigger wizard to assign these values to your new trigger, then click OK.
    • Action: Hide layer
    • Layer: This layer
    • When: User clicks
    • Object: btn_Close

Practice Activity: Preview Your Interaction

Click the Preview drop-down arrow on the ribbon and choose This slide to test your interaction.

Notice how the slide content temporarily hides while you’re viewing the video and how it reappears when you close the layer.

Summary

In this tutorial, you learned how easy it is to create an interaction with layers and triggers. To learn more about layers and triggers, see these user guides:

In the next tutorial, we’ll add interactivity by triggering motion path animations.