Cool Overlay Effects in Articulate Storyline with Basic After Effects & JavaScript

You can use a combo of PNG sequences created in After Effects, added to states in Storyline, with a little sprinkle of JavaScript to create amazing effects. With a little skill in AE/JS/SL, you can pull off this cool effect.

On the surface, it may seem hard, but you can do it!

Pretty Snazzy…huh?

Here are the source files.

Follow me @nick_shelton on Twitter for updates and future tutorials.

Find me on the Articulate Community here, or on LinkedIn here.


    2 thoughts on “Cool Overlay Effects in Articulate Storyline with Basic After Effects & JavaScript

    September 12, 2017

    Hi Nick!!

    New subscriber here! That effect is fantastic, I love it. I have been playing around with AE for about a week now and there are so many cool things you can do. I just had a question for you, how do you manage to keep the quality but to also keep the size down? I did a couple of cool things with AE and my course jumped from 200mb all the way up to 800mb. I had to chop them out because of size restrictions.


      Profile photo of Nick Shelton
      September 13, 2017

      Hey Bailey,

      That’s a huge jump, I’d be interested in hearing about the effects you tried to implement. The effect in the tutorial, if I recall correctly, calls for say 30-ish .png images, with transparency. PNG’s (PNG-24, lossless) can get pretty large, especially the more detail they have, just because of how .pngs work. In my effect, the .pngs are relatively small, because there really only are a few simple colors. I could do crazy transition effects, but then it could get a little larger.

      Also, if you’re not exporting pngs, but rather .mp4 videos, compression is going to be very important, because storyline is going to embed your videos within your Storyline package…so if you create a 300mb video, well, expect at a minimum a 300mb jump in the size of your .story project. I totally think you should post this topic to eLearning heros, shoot me a link, and we can iterate there with more help from the community.

      Thanks for reaching out!

      – Nick

Post a comment

Your email address will not be published. Required fields are marked *