States let you change the appearance of objects as learners interact with them. Let’s add states to some objects in Storyline and trigger those states when learners click, hover over, and drag the objects.

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

Practice Activities:

  1. Add States to Objects
  2. Trigger a State Change When Learners Click an Object
  3. Trigger a State Change When Learners Hover Over an Object
  4. Trigger a State Change When Learners Drag and Drop an Object

Practice Activity: Add States to Objects

Most objects in Storyline have only one state by default, called the Normal state. (Buttons have several built-in states by default.) In this activity, we’ll add new states to some objects, then we’ll trigger those states to appear in the practice activities that follow.

  1. If you're using Storyline 360, open the Storyline folder in your practice files, then open the 03A_Triggers_States_360.story file and go to the first slide in scene 2.

    If you're using Storyline 3, open the 03A_Triggers_States_Storyline_3.story file and go to the first slide in scene 2. Storyline 3 doesn't have access to modern illustrated characters, so we've substituted a classic illustrated character in the Storyline 3 practice file. (If you want access to our expanding library of more than 100,000 combinations of characters, expressions, and poses, check out Articulate 360. It includes our ever-expanding Content Library and the latest version of Storyline.)

    There are two duplicate scenes in the sample project. The first scene already has triggered state changes so you can preview the finished example. We'll add states and triggers to the second scene in this tutorial.
  2. Select the document object (i.e., the paper on the clipboard), then go to the States panel and click Edit States. You'll see a normal state.
  3. Let’s add a new custom state. Click the New State icon (looks like a blank piece of paper), type A in the field provided, and click Add. We just added a new state called A. Now we need to customize how it looks.
  4. Select the document object on the slide and type A. If necessary, increase the font size and change the font color to a medium gray.
  5. Add two more custom states in the same way called B and C.
  6. Click Done Editing States.

The document object should now have four states: a normal state that’s blank and three custom states (A, B, and C).

To learn more about working with states, see this user guide.

Practice Activity: Trigger a State Change When Learners Click an Object

Changing the state of an object when learners click it is a common way to add interactivity to a course. Now that we’ve added states to the document object, let’s create on-click triggers for the A, B, and C buttons.

  1. Select the A button on slide 2.1, then click the Create a new trigger icon in the Triggers panel.
  2. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Lily
    • To State: Alarmed
    • When: User clicks
    • Object: A
  3. Select the A button and click the Create a new trigger icon again to create a second trigger for the same button.
  4. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Document
    • To State: A
    • When: User clicks
    • Object: A
  5. Now select the B button on the slide and click the Create a new trigger icon in the Triggers panel.
  6. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Lily
    • To State: Happy
    • When: User clicks
    • Object: B
  7. Select the B button and click the Create a new trigger icon again.
  8. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Document
    • To State: B
    • When: User clicks
    • Object: B
  9. Now select the C button on the slide and click the Create a new trigger icon in the Triggers panel.
  10. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Lily
    • To State: Worried
    • When: User clicks
    • Object: C
  11. Select the C button and click the Create a new trigger icon again.
  12. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Document
    • To State: C
    • When: User clicks
    • Object: C
  13. Click the Preview drop-down arrow on the ribbon and choose This slide to test your interaction.

Practice Activity: Trigger a State Change When Learners Hover Over an Object

Changing the state of an object when learners hover over it is a great way to add interactivity. Let’s create hover triggers for the A, B, and C buttons.

  1. Go to slide 2.2 in your practice file, select the A button, and click the Create a new trigger icon in the Triggers panel.
  2. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Document
    • To State: A
    • When: Mouse hovers over
    • Object: A
    • Mark the box to Restore on mouse leave.
  3. Select the A button and click the Create a new trigger icon again.
  4. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Lily
    • To State: Alarmed
    • When: Mouse hovers over
    • Object: A
    • Mark the box to Restore on mouse leave.
  5. Now select the B button and click the Create a new trigger icon in the Triggers panel.
  6. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Document
    • To State: B
    • When: Mouse hovers over
    • Object: B
    • Mark the box to Restore on mouse leave.
  7. Select the B button and click the Create a new trigger icon again.
  8. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Lily
    • To State: Happy
    • When: Mouse hovers over
    • Object: B
    • Mark the box to Restore on mouse leave.
  9. Now select the C button and click the Create a new trigger icon in the Triggers panel.
  10. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Document
    • To State: C
    • When: Mouse hovers over
    • Object: C
    • Mark the box to Restore on mouse leave.
  11. Select the C button and click the Create a new trigger icon again.
  12. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Lily
    • To State: Worried
    • When: Mouse hovers over
    • Object: C
    • Mark the box to Restore on mouse leave.
  13. Click the Preview drop-down arrow on the ribbon and choose This slide to test your interaction.

Practice Activity: Trigger a State Change When Learners Drag and Drop an Object

Changing the state of an object when learners drag and drop it is a great way to provide immediate feedback. Let’s create drop triggers for the A, B, and C buttons. We’re going to create nine triggers in this activity. Ready? Here we go!

  1. Go to slide 2.3 in your practice file, select the A button, and click the Create a new trigger icon in the Triggers panel.
  2. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Document
    • To State: A
    • When: Object dropped on
    • Object: A
    • Dropped On: target
  3. Select the A button and click the Create a new trigger icon again to create a second trigger for the same object.
  4. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Lily
    • To State: Alarmed
    • When: Object dropped on
    • Object: A
    • Dropped On: target
  5. Select the A button and click the Create a new trigger icon again to create a third button for the same object.
  6. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: A
    • To State: Hidden
    • When: Object dropped on
    • Object: A
    • Dropped On: target
  7. Now select the B button and click the Create a new trigger icon in the Triggers panel.
  8. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Document
    • To State: B
    • When: Object dropped on
    • Object: B
    • Dropped On: target
  9. Select the B button and click the Create a new trigger icon again.
  10. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Lily
    • To State: Happy
    • When: Object dropped on
    • Object: B
    • Dropped On: target
  11. Select the B button and click the Create a new trigger icon again.
  12. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: B
    • To State: Hidden
    • When: Object dropped on
    • Object: B
    • Dropped On: target
  13. Now select the C button and click the Create a new trigger icon in the Triggers panel.
  14. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Document
    • To State: C
    • When: Object dropped on
    • Object: C
    • Dropped On: target
  15. Select the C button and click the Create a new trigger icon again.
  16. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: Lily
    • To State: Worried
    • When: Object dropped on
    • Object: C
    • Dropped On: target
  17. Select the C button and click the Create a new trigger icon again.
  18. When the trigger wizard appears, assign these attributes, then click OK to save your new trigger.
    • Action: Change state of
    • On Object: C
    • To State: Hidden
    • When: Object dropped on
    • Object: C
    • Dropped On: target
  19. Click the Preview drop-down arrow on the ribbon and choose This slide to test your interaction.

Summary

You've learned how to add states to objects in Storyline and how to trigger those states to appear when learners perform certain actions.

In this tutorial, we created on-click triggers, hover triggers, and drop triggers; but there are many other ways to trigger state changes. For example, you can trigger a state change when a variable changes or when the state of another object changes. To learn more about triggers, see the Storyline 360 and Storyline 3 user guides.

In the next tutorial, we’ll add interactivity by triggering layers to appear and disappear.