To build interactive content in Articulate Storyline, you'll use triggers, states, and slide layers. In this tutorial we'll show you how to use triggers and states to let learners interact with objects on the screen.
Watch this video first, then follow the steps below to practice.
In this exercise, we'll create three types of interactions to change the state of an object: click, mouseover, and drag interactions. We'll try out a couple of Storyline's built-in object states and see how they work. When we're finished, we'll have a slide that looks similar to the one shown below.
- Insert a new slide and select the blank slide layout from the Basic Layouts tab.
- Add the following text labels: Click, Mouseover, Drag, Visited, and Hover as shown in the image above.
Create a Click Trigger:
Shapes initially only have a normal state, so we'll need to create a new state for each shape—we'll name this one "Orange."
- Insert a rectangle shape above the Click text box.
- Select the rectangle and rename it on the timeline to click.
- Go to the States panel.
- With the rectangle selected, click the Edit States button and add a new state named "Orange."
- Select the Orange state and use the Format tab on the ribbon to change the fill color of the rectangle to orange.
- Click Done Editing States.
- Create a new trigger that changes the state of the click object to Orange when the user clicks it.
- Preview the slide and notice how the state of the rectangle changes when you click it.
Create a Mouseover Trigger:
Next, we'll use a mouseover trigger to change the state of the triangle to Orange when you hover your mouse over it.
- Insert a triangle shape above the Mouseover label and rename it to mouseover.
- Go to the Home tab on the ribbon and use the Format Painter to copy the Orange state from the rectangle to the triangle.
- Select the triangle, then go to the Triggers panel and create a new trigger.
- Use the Trigger Wizard to build a trigger that changes the state of the triangle (mouseover) to Orange when the mouse is hovered over it.
- Preview the interaction and notice that the state changes when the mouse hovers over the triangle and changes back when the mouse moves away.
Tip: If you want the state change to remain after moving the mouse, you'll need to edit the trigger. Just double-click the trigger and uncheck the box to Restore on mouse leave.
Create a Drag Trigger:
Drag triggers are a bit different than click and hover triggers. Usually, when you create a drag interaction, an object is dragged from one spot to another. This second spot is called a target. A drag-and-drop interaction has at least one drag item and one drop target.
Now we'll see how to build an interaction where dragging a circle over a target shape will change the state to Orange.
- Insert an oval shape above the Drag label to serve as the draggable item and use the Format Painter to copy the Orange state from the rectangle to this oval.
- On the timeline, rename Oval 1 to drag.
- Insert a rectangle below your oval shape and set the fill color to gray. Rename it as target.
- Build a trigger that changes the state of the oval (drag) to Orange when it is dropped on the target shape (target).
- Remember to read through the trigger. It is easy to reverse the drag item with the drop target and mix them up.
- Preview the slide to see how the drag-and-drop interaction works.
Use Built-in States:
Storyline comes with a set of built-in states that don't require any triggers to work. Let's take a look at how they work.
- Insert a smiley face shape above the Hover label.
- Create a new state for the smiley face shape and name it Hover.
- Set the fill color of the shape in the Hover state to green.
- Preview the slide and notice how the hover state works automatically without adding any additional triggers.
- Insert three small buttons above the Visited label and notice that buttons come with a set of pre-built states.
- Select the first button, then edit the Visited state and set the fill color to orange.
- Use the Format Painter to apply this new formatting to the other two buttons.
- Preview the slide. Notice how the buttons change states when clicked without requiring any additional triggers.
You can find more details on these and other built-in states here.
We've just built three common interactions using triggers. To learn more about all the triggers you can create, try clicking on the Actions drop-down to get a list of all the things you can trigger. Click the When drop-down to see all the ways you can trigger those actions. And don't forget to try some of the built-in object states as well.
After you've played around a bit with triggers and object states, you'll be ready to create simple interactions with triggered layers.