Automatic dial rotating motion / animation

Hey all,

Perhaps by now some of you have figured out how to do this, though I've searched and wasn't able to find anything related to this, so just thought to share:

In Storyline 2, I needed to find a way to have a dial turn automatically -- without interacting with it and turning it with your cursor, though instead having it animate automatically similar to what would happen if on a motion path.

At that time, I ended up making states of each dial turn using 6 different images or so, since there were no "rotate" motion paths (There is an "circular" shaped motion path but noting that lets an image rotate around the direct center point like a dial needs).


There still isn't in Storyline 3 as far as I can see.. So I came up with a solution that lets the dial turn based on cue points (or it can be time on the timeline too).

Basically you'd just make how many steps you need the dial to animate, then since each dial has it's own built-in variable, you just make triggers that count up 1 during each cue point (it also could at a specific time: e.g. 1 sec. etc.). It's not smooth like a motion path would be, but it works fairly well.

Attached is a quick sample file for anyone that wants to take a look.

Seems straightforward once you think about it, but just passing along in case anyone else needed to find a way to do an automatic turn with the new dial feature in SL3!

37 Replies
Jay Yearley

Glad you enjoyed it, Allison! Thanks for doing that as well!

 Just so you know it looked like the link that opens when you click it doesn't go to the right page  (the link has a "/preview" added on the end).  Just thought I'd mention.

Thanks for making the page for it and sharing it in that section!

Michael Hinze
Jay Yearley

Hello Michael,  out of curiosity, which motion path did you use to keep the needle anchored to a center point?  And how did you create it to do so?

The needle is a dial. I used an offstage looped motionpath animation to change the value of the dial variable, which in turn moves the needle.

Bob Davis

I would like to use the dial feature on a smartphone device. The dial works using a mouse to click and rotate the dial but it will not work using a finger and touchscreen. I haven't found a dial example that works on a touchscreen without a mouse. Is this correct? Will I have to go back to using a slider?

Bob Davis

Thanks for the quick reply Michael. I published my lesson after seeing yours working and discovered my dial was indeed working on my mobile Android device. It's my Asus laptop touchscreen that's being uncooperative and not allowing yours and my dial to function. Not sure what that is all about.

Jay Yearley

I'm glad you both found the dial feature works on mobile devices. Thanks for sharing!

Just to clarify/add something about this topic's "automatic" dial turn animation example, it's not really meant to be turned by the user. It's meant to just show the "turn" movement.

In restrospective, I'd change the initial state of the dial to "disabled" in order to keep the user from clicking and turning it, since that may affect the animation that you wanted to show them.

Jay Yearley

Just tested both the original file I uploaded, and the file Allison (from Articulate) uploaded in the downloads section.  I did a  "preview" in Storyline, and by publishing it, though wasn't able to replicate the movement you mentioned.

Could you give more detail?  Perhaps it's a bug of some sort with the software.

ISPE Training Tampa


Yes, I downloaded the auto dial turning storyline file from the website. I added it my project but I have 10 objects that I would like it to rotate past with the user having to do anything. Is there a way to "add more" turns to the dial? The file only had 5 preset.

Also, on the when it turns I would like it to change the state of the object that it passes, it that possible?

Jeff Odachowski
ISPE Instructional Designer

View the 2018 Training Calendar

600 N. Westshore Blvd., Suite 900
Tampa, FL 33609 USA
T 1 813-960-2105 Ext. 246 F 1 813-264-2816