Authors
Video Tutorials
Storyline 360: Working with Dials
Use interactive dials to let learners manipulate data, explore cause-and-effect relationships, and control other objects in the course. Dials are similar to sliders, but where sliders move along a straight path, dials move in an arc or a circular path.
You can choose from a gallery of ready-made dials or create your own custom dials—no coding required. If you can imagine it, you can build it.
- Adding a Ready-Made Dial
- Creating a Custom Dial
- Sizing a Dial and Moving Its Rotation Point
- Changing the Orientation of a Dial’s Arc
- Setting a Dial’s Rotation Properties
- Renaming a Dial
- Formatting a Dial
- Triggering Actions
- Displaying a Dial’s Value in Text Elements
- Deleting a Dial
Adding a Ready-Made Dial
Go to the Insert tab on the ribbon, click Dial, choose a dial type, and click the slide where you want the dial to appear.
Dials default to a half-circle (180°) rotation arc, but you can change that. For example, you might want a dial to turn in a full-circle (360°). See Setting a Dial’s Rotation Properties below.
Dials also default to a horizontal orientation, meaning they travel in a half-circle from one horizon to the other, but you can change this behavior, too. For example, you might want a dial that turns in a half-circle but travels from top to bottom. Just turn it sideways. See Changing a Dial’s Orientation for details.
Creating a Custom Dial
You can turn pictures, shapes, captions, characters, and text boxes into your own custom dials. It’s easy. Just select the object (or group of objects), go to the Insert tab on the ribbon, click Dial, and choose Convert to Dial.
Dials default to a half-circle (180°) rotation arc, but you can change that. For example, you might want a dial to turn in a full-circle (360°). See Setting a Dial’s Rotation Properties below.
Dials also default to a horizontal orientation, meaning they travel in a half-circle from one horizon to the other, but you can change this behavior, too. For example, you might want a dial that turns in a half-circle but travels from top to bottom. Just turn it sideways. See Changing a Dial’s Orientation for details.
Sizing a Dial and Moving Its Rotation Point
You can resize a dial face just by dragging its sizing handles.
When you’re working with a custom dial, you can also resize its rotation arc by dragging its rotation point outside the dial face. The rotation point is represented by black crosshairs.
Note that moving a dial’s rotation point also changes how the dial travels along its arc. By default, a dial’s rotation point is located in the center of the dial so it simply spins in a circle. When you move the rotation point off-center, the dial travels along a circular path.
Changing the Orientation of a Dial’s Arc
Dials default to a horizontal orientation, meaning they travel in a half-circle from one horizon to the other, but you can change this behavior. For example, you might want a dial that turns in a half-circle but which travels from top to bottom.
Ready-Made Dial |
To change the orientation of a ready-made dial, drag either its rotation handle or the green starting flag on its rotation arc.
You can also right-click the dial face, select Size and Position, then adjust the Rotation value. For ready-made dials, when you change the rotation (orientation) of the dial face, it also rotates the arc. Custom dials are different (see below)—the dial face and arc rotate independently of one another. |
Custom Dial |
To change the orientation of a custom dial, drag the green starting flag on its rotation arc.
For custom dials, dragging the rotation handle or adjusting the rotation value only affects the dial face; it doesn’t rotate the arc.
On the other hand, for ready-made dials (see above), changing the rotation of the dial face also rotates the arc and vice versa. |
Setting a Dial’s Rotation Properties
To control the behavior of a dial, select the dial, go to the Dial Tools—Design tab on the ribbon, and adjust the following properties.
Variable |
This is the variable associated with your dial. Storyline automatically creates a number variable for each dial in your course. If you want to change the variable that's controlled by a dial, use this drop-down to select another number variable in your course. |
Update |
This controls when the variable gets updated. You can update the variable as the learner is dragging the dial (which is the default setting) or only after the learner releases it. |
Rotation |
This is the size of the rotation arc. It defaults to 180° or half a circle. To turn one full circle, set it to 360°.
The rotation arc can be as small as 0.01° and as large as 9999°. It can have up to two decimal places. Anything over 360° will turn the dial more than one full circle. For example, 720° will turn two full circles. (See this tutorial to learn more about rotating dials more than once.) |
Show Arc |
This determines whether the dial’s arc (pathway) is always visible in the Storyline editor or only when you select the dial object. This property only affects a dial while you’re developing a project. The dial’s arc will always be invisible when you preview or publish. |
Start Value |
This is the starting value for the dial’s arc. It’s represented by the green flag on the arc. The starting value defaults to zero. It can be as low as -9999 and as high as 9999. It can have up to two decimal places. |
End Value |
This is the ending value for the dial’s arc. It’s represented by the red flag on the arc. The ending value defaults to 12. It can be as low as -9999 and as high as 9999. It can have up to two decimal places. You can change the ending value either by typing it in the End Value field or by dragging the red flag on the arc. |
Initial Value |
This is the starting position for the dial face on its arc. It defaults to six (halfway between the default starting and ending values). It can have up to two decimal places. You can change the initial value either by typing it in the Initial Value field or by dragging the yellow diamond along the arc.
|
Step Value |
This is the incremental value for the dial face as it moves along its rotation arc. It defaults to one. The step value can be as small as 0.01° and as large as the End Value (see above). It can have up to two decimal places. The smaller the step value, the more steps (tick marks) there will be along the arc. |
Renaming a Dial
Storyline gives each dial a default name: Dial 1, Dial 2, etc. We recommend giving them recognizable names, so they're easier to identify when adding triggers and creating freeform interactions.
One way to rename a dial is to right-click it, select Rename, enter a new name, and click OK.
Another way is to double-click the dial name in the timeline to open it for editing, enter a new name, and press Enter on your keyboard.
Formatting a Dial
Ready-Made Dial |
To change the styles, colors, and effects for a ready-made dial, select the dial, go to the Dial Tools—Format tab on the ribbon, and use the formatting options. |
Custom Dial |
To change the styles, colors, and effects for a custom dial, select the dial, go to the Format tab on the ribbon, and use the formatting options. |
The colors available for the formatting options come from your theme colors.
Triggering Actions
Generally, you'll want to perform one or more actions based on a learner's interaction with a dial. To do that, you'll need to add triggers that execute when the dial moves or the variable changes.
For example, you might change the state of an object when the learner drags the dial.
To learn more about triggers, see this user guide.
Displaying a Dial’s Value in Text Elements
There may be times when you want to display the value of a dial in a text box or shape. It’s easy to do. Just add a variable reference to any text element in your course.
When the learner drags the dial, the value that's displayed in the text element automatically updates to show the value they selected.
Deleting a Dial
To delete a dial, select it on the slide or in the timeline, then click Delete on your keyboard.