Blinking shapes? Not possible???

Hi guys,

I've been trying for way too long to add very basic simple "animations" to my course, but I can't get anything to work.

What I need is simply a shape fading in and out, in a loop. Is this not possible in Articulate Storyline?


Example. I've got 5 traffic lights in my scene. I need to flash the lights.  How?

Also, Articulate Storyline does not support SVG? Any other way to get vector graphics into Articulate?


Thanks a lot for any help regarding my issues! :)

19 Replies
Richard Hill

Hi Stian,   Make a layer for your red light call it " red".   Make sure that it is not set to pause base layer (press the cog in slide layers to check).  Draw a red circle in that layer.  Give it some empty space on the timeline by grabbing the right side of it on the timeline( you need empty space for it to be off).   On the red circle, place an entrance fade animation of .25 seconds and an exit fade animation of .25.    

Then(within "red"layer) make a trigger that hides the layer on timeline end. Make another trigger immediately after that says show "red" layer on timeline end. This makes your layer loop. Hope that helps.

Stian Larsen

Thanks for your comments, Phil and Richard :)

I've so far made my courses from scratch in Adobe Animate, using JavaScript. My problem is that my team is not familiar with JavaScript, so I was hoping to make it work with Storyline.

Thanks a lot for creating the test-file. I will play around with it, and I think I might be able to make it work. :) Thanks again for your help.

PS: Will there be an update to Articulate Storyline 2? Because the Flash first approach when publishing is not working for us at all. I need to manually rename and move files to make HTML5 version play first.


EDIT: I did some testing, and indeed the "Hide this layer.. Show this layer" with in/out animation works. I will have to add some global variables to control when I want it to stop though. Or I can pause the timeline and hide the layer. This will be triggered from one of the "parent" layers.

Stian Larsen

Thanks, I will wait and see if he might have a solution :)

Also, are there no way to edit a curve shape? When I try to make a curve, the line bends very differently when I'm done editing. And no way to adjust it.

And no way to jump in timeline? Say, On <trigger> jump to 3 sec in timeline.
I'm missing a lot of basic functionality. Sorry for asking so many questions ^^

Richard Hill

I have had success with knocking the background out of Adobe Animator html files, whereby the canvas objects moved about the screen and did there thing over SL.   I've only been able to get it to talk one way though ( Flash to SL).  Y'know if you're good at JS and Animator you don't really need to deal with all this stuff. You can get them to communicate and pass vars.   And you get "curve to path free". w/o 360.     

Richard Hill

There's not a lot of info on procedure out there though, and I've only dabbled with the communication part.  But to bring in your animation from Adobe Animate is the fairly easy part.  Just name your AA file" index.html" and place it in a folder with it's contents. Then target that folder as a WebObject.  Within Storyline you can put SL layers above this with content.  Edit that original index.html to make the background transparent before you import though.  



Stian Larsen

Thanks for your help Richard :) I really appreciate it.
I think I will have to look into how to communicate between SL and Adobe Animate HTML5. If so, I could put all my animated assets in one exported canvas, and switch between them using javascript commands from SL. Will look more into the possible solutions.