Custom Spin Animation to replace inadequate Storyline Spin Animation

I'm posting this to save some other unfortunate soul the trouble of figuring out how to rotate an object something other than 90, 180, or 360 degrees, seemingly the only options available for the Built-in Storyline Spin animation.

I created the animation in Adobe Animate CC and published as HTML5.

After publishing the Animate CC file:

  • Open the published P5KnobRotation_HTML5 Canvas.html file in your favorite html editor.
  • In the body tag, in two places, change the color to background-color:rgba(0, 0. 0, 0). You can see this in the P5KnobRotation_HTML5 Canvas.html file in the attached sample. That will make the animation background transparent in Storyline.

In the .story file, I added buttons with javascript triggers to control the animation. In a real world situation, I suggest that you use invisible rectangles with triggers on them to play the knob animation at a specific point on your timeline ... in other words, the trigger would be when "Object enters slide" and the invisible rectangle would be placed on your Storyline timeline wherever you desire the animation to play.

Thank you Storyline for making life easy. All that to rotate an object 135 degrees.

Be the first to reply