Using Dials in Storyline

 

Interactive dials let learners manipulate data, explore cause-and-effect relationships, and more. In this webinar, learn how to add and customize interactive dials in Storyline 360. Plus, see how other pros use these interactions in their courses.

User Guide

• Storyline 360: Working with Dials
• Storyline 360: Adding Variable References

E-Learning Challenges

• Using Interactive Dials for Navigation #355: Challenge | Recap
• Using Interactive Dials in E-Learning #210: Challenge | Recap
• Using Sliders with E-Learning Characters #311: Challenge | Recap
• Using Dials for Interactive Infographics #261: Challenge | Recap

Examples

• Dials vs. Sliders (demo)
• Goniometer Dial Interaction: Example
• Dials Infographic: Example | Download
• Money to Burn: Example | Download
• Meet the Team: Example
• 12 Days of Christmas: Example | Download
• Nose-O-Meter: Example
• Dials Starter Kit
• Space-Themed Dial Interaction: Example | Download
• Dial Menu with Icons: Example | Download
• Multiple Dials: Example | Learn more

Next Steps

Now that you know how dials work in Storyline 360, it’s time to put those skills into practice. Here are some suggested activities to help you get started working with dials using the Dials_PRACTICE.story file from the downloads:

• Practice 01: Insert a new dial on slide 1.1. Change the rotation to 360, set the End Value to 36 and the Initial Value to 9. Change the color of the pointer and face fill. Finally, rename the dial’s variable name to “FirstDial” in either the variable field under the Design tab or the Project Variables window.
• Practice 02: Insert a new dial and rename the dial’s variable name to “CharacterDial”. Next, change the Start Value to 1 and the End Value to 3. Set the Initial Value to 2. Change the color of the Pointer and Face. Add three triggers to change the Character to correspond to each of the three states on the slide: Happy, Normal, and Surprised. Add three more triggers to show each of the slide layers that correspond with the text labels.
• Practice 03: From the Meter Graphics folder in the practice files, insert the meter.png image on slide 3.1. Rename the image to Meter in the timeline. Edit the meter image and insert the remaining six images. Insert a new dial and add adjust the number of steps and initial value based on the meter graphic states. Add triggers to show each of the image states when the dial is turned.
• Practice 04: Insert the “custom-dial.png” image from your practice files. Convert the image to a custom dial and rename the dial variable to “CustomDial”.