Longer animation with states?

Feb 20, 2022

Peter Krass
By Peter Krass

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
Judy Nollet
2 years ago02/21/22 at 2:32 pm (UTC)

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.

  • It uses a dial, which is covered by a semi-transparent shape to prevent the user from moving it. (You could use a shape set to 100% transparency.)
  • The triggers to adjust the value of the dial's variable are on 2 blank layers. 
    • Each layer adds 1 to the variable, which automatically moves the dial that much. 
      • This trigger has a condition so it won't run when the variable reaches the upper limit.
    • Almost right away, another trigger then jumps to the other layer, which does the same thing. 
    • Both layers "Reset to initial state" when revisiting, so the triggers keep running as the program moves back and forth between the layers. 
Peter Krass
2 years ago02/23/22 at 4:11 pm (UTC)

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!

Judy Nollet
2 years ago02/23/22 at 5:36 pm (UTC)

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. 

  • Slides work the same way, except the move along a linear path. 

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 

Sign In to Reply