Use interactive dials in Storyline 360 to manipulate data, explore cause-and-effect relationships, and control other objects. Turn your e-learning courses up to 11 with dials!

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

Practice Activities:

  1. Add and Format a Dial
  2. Set the Dial’s Properties
  3. Use the Dial to Control the States of a Character
  4. Preview Your Interaction

Practice Activity: Add and Format a Dial

First, we’ll add a dial to a Storyline project and format it.

  1. Open the Storyline folder in your practice files, then open the 03I_Dials_360.story file and go to slide 2.

    There are duplicate slides in the sample project. We’ll work with the first two slides in this tutorial. The first slide already has an interactive dial so you can preview the finished example. We'll recreate the interaction on the second slide. (And you can use the last two slides in the practice file to create a moon phase dial interaction. See below for details.)
  2. Go to the Insert tab on the ribbon, click Dial, and choose the first dial type.
  3. Then click the slide where you want the dial to appear. As we move through this tutorial, you can resize the dial or move it to a new location as necessary to fit your interaction.
  4. Use the Format tab on the ribbon to style the dial as you like, including pointer style, face style, colors, and effects.

Practice Activity: Set the Dial’s Properties

Now we need to set the dial’s properties to control how it behaves.

  1. Select your dial and go to the Dial Tools—Design tab on the ribbon.

  2. First, notice the name of the variable that Storyline created for your dial on the left side of the ribbon. (It’s probably called Dial1.) You can change the name of the variable at any time by clicking the Manage project variables icon in the Triggers panel.
  3. For this tutorial, we’ll leave the Rotation value set at 180° (a half circle).
  4. Set the Start value to 1.
  5. Set the End value to 3.
  6. Set the Initial value to 2 so the dial initially points to the middle of three values.
  7. Leave the Step value at 1. (The step value controls how big the jump is between each stop along the dial track.)

Practice Activity: Use the Dial to Control the States of a Character

Now let’s use the dial to control the states (or expressions) of the character. We’ve added a character with three states for you.

  1. Let’s start by adding three text labels to our dial, one for each stop along the dial’s arc.
  2. Go to the Insert tab on the ribbon, click Text Box, and draw a small text box beside the first stop on the dial’s arc. Type 1 in the text box.
  3. Add two more text boxes for the other two stops along the dial’s arc, and enter 2 and 3 respectively.

We’ll create three triggers to control the state (or expression) of the character, one for each stop along the dial’s arc.

  1. Click the Create a new trigger button in the Triggers panel, then use the trigger wizard to assign these values to your trigger and click OK.
    • Action: Change state of
    • On Object: Character 1
    • To State: Surprised
    • When: Dial turns
    • Dial: Dial 1
    • Condition: == Equal to 1
  2. Click the Create a new trigger button in the Triggers panel again, then use the trigger wizard to assign these values and click OK.
    • Action: Change state of
    • On Object: Character 1
    • To State: Confused
    • When: Dial turns
    • Dial: Dial 1
    • Condition: == Equal to 2
  3. Click the Create a new trigger button in the Triggers panel again, then use the trigger wizard to assign these values and click OK.
    • Action: Change state of
    • On Object: Character 1
    • To State: Alarmed
    • When: Dial turns
    • Dial: Dial 1
    • Condition: == Equal to 3

Practice Activity: Preview Your Interaction

Click the Preview drop-down arrow on the ribbon and choose This Slide to test your dial interaction. And congratulate yourself for learning how to use dials!

Want to try another one? Watch this video demonstration. Use slide 3 in the 03I_Dials360.story practice file to follow along with the demo, then use slide 4 to recreate the moon phase dial interaction. (The Moon-Flag.png file for the custom dial is also in your practice files.)

Summary

In this tutorial, you learned how to create an engaging dial interaction. To learn more about dials, see this user guide.

In the next tutorial, we’ll create an assessment with form-based quiz questions.