Storyline 360: Working with Layers

Use slide layers to create interactions and branched scenarios in your Storyline Looking to boost learner engagement and interest in your Storyline 360 courses? Try using slide layers to create interactions and branched scenarios. Layers display additional content on a slide at certain points on the timeline or in response to learners' actions. Triggers allow you to define when layers should appear and disappear. Read on to learn more.

• Adding Layers
• Duplicating and Copying Layers
• Renaming Layers
• Changing Layer Properties
• Hiding Individual Base Layer Objects
• Making Layers Accessible
• Rearranging Layers
• Showing, Hiding, and Dimming Layers in the Editor
• Deleting Layers

Adding Layers

You can add as many layers to each slide as you like. To add a layer to a slide, do either of the following:

• Click the New Layer icon (looks like a blank piece of paper) in the Slide Layers panel.
• Go to the Insert tab on the ribbon and click Slide Layer.

You add content to layers just like slides, including animations and transitions. You also manage the timing and duration of layer objects in the same manner as slide objects—via the timeline.

Duplicating and Copying Layers

You can duplicate layers on the same slide or even copy them from one slide to another. To duplicate existing layers on the same slide, just select one or more layers in the Slide Layers panel and click the Duplicate Selected Layer icon (looks like two pieces of paper with a green arrow).

To copy layers from one slide to another:

1. Select one or more layers in the Slide Layers panel, then press Ctrl+C on your keyboard or right-click and choose Copy.
2. Go to the slide where you want the same layers to appear, then press Ctrl+V on your keyboard or right-click and choose Paste.

Renaming Layers

Give layers recognizable names so they're easy to identify when you're creating triggers. To rename a layer:

1. Double-click the layer's name in the Slide Layers panel to open it for editing.
2. Type the new name.
3. Press Enter on your keyboard.

Changing Layer Properties

You can customize the properties for each layer on a slide. Just select the layers you want to edit, then click the gear icon.

When the Slide Layer Properties window appears, make your choices (defined below) and click Close.

Visibility:

Hide other slide layers	This hides all other layers (except the base layer) when the current layer is visible to the learner.
Hide objects on base layer	This hides everything on the slide's base layer when the current layer is visible to the learner. (If you only want to hide some base layer objects, visit the next section on Hiding Individual Base Layer Objects.)
Hide slide layer when timeline finishes	This hides the current layer when it has finished playing.
Allow seeking	If the base layer has a seekbar, use this option to control how the seekbar affects the current slide layer. Select Yes to synchronize content on the layer with the seekbar. For example, if the layer has a video, learners can use the seekbar to rewind and fast forward the video. Select No to ignore the seekbar. It'll still be visible; it just won't affect the content on the layer. Select Automatically decide to let Storyline decide whether or not the seekbar is synchronized with content on the layer. Here's the logic: The seekbar controls the content on the layer if you mark Hide objects on base layer, Prevent the user from clicking on the base layer, or Pause timeline of base layer. Tip: If the seekbar in your player properties is read-only or allows dragging only after completion, learners won’t be able to drag the seekbar. However, if you choose Yes or Automatically decide above, the content on the layer will still be synced with the seekbar. So learners can use the play/pause button to control playback.

Behavior:

As of the May 2022 update, you can choose from two layer formats—layer or dialog.

Layer	While a standard layer is open, learners can interact with anything outside it.
Dialog	When a dialog layer is open, the focus stays on the dialog and its content. Dialog layers dim everything else in the browser window, and learners can't interact with anything else in the course while it's open. Learn more.

Enhance the screen reader experience for dialog layers by defining accessibility attributes for an alternative title and description. (The Label and Description options are grayed-out for standard layers.)

Label	This provides text for the aria-labelledby accessibility attribute. Use this option to tell screen readers what to announce as the modal dialog title. Select one of the text elements on the slide that appear in the drop-down list. If you don't need an alt title, select None in the drop-down list.
Description	This provides text for the aria-describedby accessibility attribute. Use this option to tell screen readers what to announce for the purpose of the modal dialog. Select one of the text elements on the slide that appear in the drop-down list. If you don't need an alt description, select None in the drop-down list.

Select one of the following options to manage learners' interaction with the base layer.

Prevent the user from clicking on the other layers	This prevents the learner from interacting with objects on other layers, like buttons or drag items, while the current layer is visible. (This option is automatically enabled and grayed-out for dialog layers.)
Pause timeline of base layer	This pauses the base layer, including animations and audio, while the current layer is visible. The base layer's timeline will resume where it left off when the current layer is closed.

Revisits:

Choose one of the following options to control how objects behave when learners revisit the layer.

Automatically decide	This is the default option. Storyline 360 will decide whether to resume the layer or reset it based on the objects it contains. Here's the logic: If the layer has only simple objects and/or audio but no interactivity, Storyline 360 resets the layer to the beginning of its timeline. If the layer contains interactive elements, such as buttons or other objects that have a visited/selected state, Storyline 360 resumes the layer where it left off previously.
Reset to initial state	Use this option if you want the layer to always reset to its initial state. It'll restart from the beginning of its timeline, and interactive objects will return to their initial states.
Resume saved state	Use this option if you want the layer to always remember its previous state. In other words, this option lets learners pick up where they left off if they return to the same layer later.

Hiding Individual Base Layer Objects

The layer properties described above provide an option to Hide objects on base layer, but it hides everything on the base layer. If you want to hide only some base layer objects, you can do that, too, since each layer has its own timeline. Here's how.

1. Expand Base Layer Objects in the timeline.
2. Click the eye icon for each object you want to hide.

Tip: Hidden base layer objects will reappear when the layer is closed.

Making Layers Accessible

All objects from slide layers and base layers appear in the Focus Order window, and you can customize the order of those objects.

For the best navigation experience, use dialog layers. Designed to be accessible from the start, dialog layers hide other slide layers by default. That keeps the focus on the dialog and its content.

If learners need to access the base layer in an interaction, use standard layers. Follow these tips to make standard layers more accessible:

• Open the Slide Layer Properties window and mark the Hide other slide layers box. This option hides all other layers (except the base layer) when the current layer is visible to the learner.
• In the Focus Order window, arrange the objects from each individual layer to appear after the object on the base layer that activates the layer.

Rearranging Layers

To change the order of your layers, just drag and drop them where you want them in the Slide Layers panel.

Layers display on top of the base layer (not behind it), and they'll open in the order in which they're triggered, regardless of their stacking order in the Slide Layers panel.

Tip: To show more than one layer at the same time in your published output, click the gear icon for each layer to open its properties, then uncheck the box to Hide other slide layers.

Showing, Hiding, and Dimming Layers in the Editor

When you have multiple layers on a slide, you may find it useful to show or hide some of them while you're editing the slide.

To display a layer even when it's not the active layer, click the eye icon to the right of its title in the Slide Layers panel to lock its visibility.

To hide a layer, click the eye icon again to unlock its visibility.

For example, if you don't want to see the base layer while you're building a supplemental layer, click the eye icon for the base layer to unlock its visibility—i.e., to hide it.

Tips for working with layer visibility:

• The base layer visibility is locked by default. All other layers are unlocked by default. In other words, the base layer is always visible unless you hide it, and other layers are always hidden unless you make them visible.
• By default, only the layer that's currently selected (active) is full-color. All other layers are dimmed. If you'd prefer to see them all in full color, uncheck the Dim box at the bottom of the panel.

Deleting Layers

To delete a layer, select it in the Slide Layers panel and click the trash can icon (or just press the Delete key on your keyboard).