Automatic dial rotating motion / animation
Apr 26, 2017
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
This is super cool, Jay! Thanks so much for sharing with the community. :)
PS I liked it so much I decided to post it in the downloads section to make sure people can find it easily. Here's the link: https://community.articulate.com/download/storyline-auto-rotating-dial/
Thanks again!
LOL - I was working on something similar: a "30 minute" timer with 30 second intervals. (Sample graphic below). I've zipped all the image files created in PowerPoint and attached below should anyone want to use them.
This is what you can do in Storyline 3. This is a simple Dial Widget and a bunch of sliders I was messing around with on Tuesday (by co-incidence).
http://demo.unicorntraining.com/ClientArea/Testing/SL3/story.html
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!
Just posted: JavaScript based timer using a SL3 Dial. Check it out here.
If you want a smoother rotation, you can also use a looped motion path animation that, when completed, changes the dial's variable. See the autorotating dial needle in the fourth example (the drone) here.
Here is a similar example that was done (in SL2) for a past weekly eLearning challenge. Move the slider in the lower right corner.
Worked on a similar thing with a slider and another slider to adjust the speed -> https://community.articulate.com/discussions/articulate-storyline/adjust-car-s-speed-on-the-fly-can-you-guess-how-this-was-done
Cool! Thanks for sharing, Owen :)
That's super cool, George! Love it
Thanks for mentioning that, Jay! I deleted the "preview" at the end in the text but I guess the link still kept it. It should be fixed now. :)
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.
Very interesting, thanks a lot for sharing this Jay !
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?
This dial example here works for me on my mobile (Android) device. You can rotate the calendar "ring" with your finger.
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.
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, I used your storyline dial but it moves like all over my screen when it's turning. Know of any way to fix that?
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.
that would be great, the code or some tips.
What exactly are you looking for? Do you have a specific dial-related question?
Michael,
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
IDTemp1@ispe.org
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
Ispe.org
That sounds doable. Can you share your .story file (or the one slide) here? That makes it easier to help.
This discussion is closed. You can start a new discussion or contact Articulate Support.