Storyline 2: Creating a Tabs Interaction

Article Last Updated

This article applies to:

Now that you've learned how to add interactivity with state changes and triggered layers, you're ready to build a tabs interaction.

First, we'll create a slide with the tab elements and triggered state changes. Then, we'll add the slide layers that'll be triggered by clicking the corresponding tab.

Practice Activity: Part 1

If you haven't already downloaded the practice files, you can get them here. Watch the video first, then follow the steps below to practice.

We'll start this exercise by adding five rectangles to a blank slide and labeling them to build a screen like the one you see below.

  1. Insert a new blank slide.
  2. Insert City-43.png from the Assets folder as the background image.
  3. Align the image to the right side of the slide.
  4. Insert the Tabs-sample.png image to use as a guide for creating the tabs. Position it off the slide area to the left.
  5. Right-click the slide and choose Format Background. Then match the fill color with the background color of the guide image using the Eyedropper tool.
  6. Insert a rectangle shape. Turn off the shape outline and pick the shape fill color to match the tab colors in our guide image.
  7. Size and place the rectangle so it fits between the background image and the left edge of the slide.
  8. Duplicate the rectangle until you have five of them. Use the alignment tools to distribute the rectangles vertically.
  9. Use a text box to add a slide title: Sales Training. Format the text however you'd like.
  10. Add text to the rectangle shapes: Customer Service, Sales Technique, Self Promotion, Market Research, Communications.
  11. Go to the timeline and rename your slide objects with meaningful names.

Now that you've created the slide elements, you'll add interactivity to the tabs by creating a hover state and a visited state for each.

  1. Select the first tab shape. Go to the States panel and click Edit States.
  2. Create a new hover state and use the Eyedropper tool to match the fill color to the green shown in our guide image.
  3. Create a new visited state that matches our guide image. You should have three sates that look something like this.
  4. Go to the Home tab on the ribbon and use the Format Painter to apply those same states to the other four tab shapes.
  5. Preview the slide to see how it works.

The next thing you'll do is build out the slide layers and then add the triggers to display them.

Practice Activity: Part 2

Watch the video first, then follow the steps below to practice.

Here's how to build out the slide layers and create triggers to display them:

  1. Insert a new slide layer and rename it Customer Service.
  2. To mute the background image, we'll layer it with a semi-transparent rectangle. Insert a rectangle and set the fill color to white with 20% transparency.
  3. Size and position the rectangle to cover the background image.
  4. Add a title to the Customer Service layer and format the text however you'd like.
  5. Add another text box with some placeholder text. Tip: You can let Storyline create this for you by typing =lorem() and pressing the Enter key.
  6. Your Customer Service layer should look something like the screen below.
  7. Duplicate the Customer Service layer four times so you have a slide layer that corresponds to each tab on the slide. Rename these new slide layers: Sales Technique, Self Promotion, Market Research, Communications.
  8. Go to each layer and update the text so the title corresponds with the layer name.

Now that you have the slide layers in place, you'll add triggers to each tab to display the corresponding slide layer. For example, when we click the Customer Service tab, we want to show the content on the Customer Service slide layer.

  1. Go to the base layer and create a new trigger that shows the Customer Service slide layer when the user clicks the Customer object.
  2. Create a trigger for the other four tabs that shows the appropriate corresponding slide layer for each when clicked, so the Communications tab displays the Communications layer when clicked and so on. Tip: Since these triggers are all very similar, you can save time by using the copy and paste technique shown in the video.
  3. Preview the slide to see how it works.
  4. Now that you've created this tabs interaction using Storyline's states, layers, and triggers features, you can start building nearly anything you can imagine with these features. Have fun playing around!

In the next tutorial, you'll learn how to easily add interactive markers to an image.