Authors

Video Tutorials

Storyline 3: 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

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.

Learn more about variables here.

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.

Published 8 years ago
Version 1.0
storyline 360
Tutorial
User Guide