Longer animation with states?
Feb 20, 2022
I'm trying to animate a pressure gauge. It's a very simple animation, the pointer needs to move from 0 to some value when the trigger event happens. What I'm trying to do is use a series of images as states, similar to a Flash movie clip that has its internal timeline (if someone here is still familiar with the concept of Flash, which is not today's technology). If Storyline had such a capability it'd save us all a lot of trouble.
The point is that this method is extremely clumsy and cumbersome, currently the states are tied to the timeline with 0.2s intervals. But if I have to rearrange my main timeline the states animation won't follow. Using cue points wouldn't make much of a difference.
The alternative would be to put all images on the main timeline and it's not much nicer, in fact it would make the timeline extremely difficult to manage.
So I'm wondering if there is a more elegant and simple method to handle this and similar animations that require a series of frames to play. Built-in animations are useless here.
Any help would be much appreciated.
4 Replies
Hi, Peter,
If it's a circular gauge, you could use a dial, and then adjust its variable to animate it. Or a slider would work for a linear look.
The attached file has a demo.
Judy, thank you so much. This is amazingly elegant and simple indeed. The logic is clear, the only thing I don't understand is how the actual animation is done. How and where is the actual value of the variable converted to a degree of rotation? I don't see any animation assigned. Thanks again for your help!
The movement of the pointer on a dial is done automatically based on the value of the variable.
In a typical case, the user would drag the dial to turn it, and that automatically changes its variable. In the sample I gave you, the user is prevented from dragging the dial. Instead, the triggers change the variable, which moves the dial -- without the need for any animation triggers. It's part of the built-in functionality of dials.
The value of a dial or slider variable is handy to use in triggers. For example, a trigger might change the state of an object with a condition based on the value of the dial. That would look something like this:
By the way, while I didn't do it in the sample, I do highly recommend renaming objects and variables so they're more memorable. For example, you might change the variable "Dial1" to "dial_Pressure" or just "Pressure."
You can get more basic info about dials, sliders, variables, and trigger conditions in the User Guide: https://community.articulate.com/series/articulate-storyline-360
Thanks again, this is immensely helpful. I didn't know that dial is a thing in Storyline. Apparently I have a lot of reading to do before asking for help :)
It's great that any picture can be converted to dial and even the center can be moved.