Now you’re ready to learn how to combine states, layers, and triggers to create an engaging tabs interaction in Storyline.
First, we’ll create tabs (or buttons) with hover and visited states. Then we’ll add a layer for each tab to display additional content when clicked.
Watch this overview, then follow the activities below to practice.
- Create Tabs with Hover and Visited States
- Add a Layer for Each Tab
- Trigger Each Layer to Appear
- Preview Your Interaction
- Open the Storyline folder in your practice files, then open the 03D_Tabs_Interaction_360.story file and go to the second slide in the project.
There are duplicate slides in the sample project. The first slide is a demo so you can preview the finished example. We’ll use the second slide to recreate the tabs interaction in this tutorial.
The background of the slide is already set up for you, and we’ve added five rectangles to the slide that’ll function as interactive tabs. Let’s add states to those tabs.
- Select the first rectangle—i.e., the Customer Service tab—then go to the states panel below the slide and click Edit States.
- Click the New State button (looks like a blank piece of paper) in the states panel, select the Hover state from the drop-down, and click Add.
- When you add a new state, it initially looks just like the normal state, but you can customize it in any way you’d like. Uncheck the box to Dim background objects. This makes it easier to select colors from the sample tabs image to the left of the slide. Use the eyedropper tool to fill the hover state with the green color from the sample tabs image.
- Click the New State button again, select the Visited state from the drop-down, and click Add.
- Use the eyedropper tool to fill the visited state with the dark gray color from the sample tabs image, then add a small blue rectangle to the visited state to match the sample image.
- Click Done Editing States.
- With the first rectangle still selected, go to the Home tab on the ribbon and double-click Format Painter to turn it on.
- Click each of the other rectangles to transfer the same states and formatting from the original rectangle.
- Click the Format Painter once more to turn it off.
Tip: Most built-in states, such as hover and visited, don’t require triggers. They’ll automatically work when learners hover and click them, no extra work required. To learn more about each built-in state, see this article.
Now that we have tabs set up for our interaction, we just need to create a layer with additional content for each tab.
- Click the New Layer button (looks like a blank piece of paper) in the slide layers panel in the lower right corner of the screen, then double-click the title of the new layer and call it Customer Service to match the first tab on the slide.
- Go to the Insert tab on the ribbon and insert a semi-transparent white rectangle that dims the background image from the base layer of the slide.
- Go to the Insert tab on the ribbon again, add a text box for the title of the layer, and call it Customer Service. Format the text the way you want it to appear.
- Add another text box to hold the content for the layer. Tip: A quick way to add placeholder text is to type =lorem() in the text box and press Enter on your keyboard. Storyline will automatically add three paragraphs of placeholder text for you.
- Duplicate the layer you just created four times.
- Rename each layer to match its corresponding tab from the base layer of the slide and change the title text box for each layer to match.
Finally, we need to add a trigger that shows each layer when its corresponding tab is clicked.
- Click the base layer in the slide layers panel to return to the base layer of your slide.
- Select the rectangle that represents the first tab for your interaction, then click the Create a new trigger button in the triggers panel.
- When the trigger wizard appears, assign these values to your new trigger and click OK.
- Action: Show layer
- Layer: Customer Service
- When: User clicks
- Object: btn-CustomerService
- Select the trigger you just created and click the Copy button in the triggers panel.
- Select the other four rectangles (tabs) on the slide, then click the Paste button in the triggers panel.
- Adjust the duplicated triggers so they open the correct layers.
Click the Preview drop-down arrow on the ribbon and choose This Slide to test your interaction. And congratulate yourself! You created a beautiful and engaging interaction in Storyline in a matter of minutes.
In this tutorial, you learned how to combine states, layers, and triggers to create a tabs interaction in Storyline. To learn more about these interactive elements, see these user guides:
In the next tutorial, we’ll add interactive markers to an image.