A Global Illumination and Gravity Effect Experiment for Articulate Storyline!

The special effects showcased in this demo were not built with Storyline’s own inbuilt features but are instead all JavaScript-based. I think it’s great to see more and more developers taking advantage of the Execute JavaScript trigger in Storyline these days to accomplish new and inventive ways for users to engage with their content!

The lighting effect is accomplished via a script that determines the proximity of the lantern object to any of the letters shown on screen, increasing the brightness as it moves closer to the centre of each letter. Each letter is actually written as its own text box in Storyline! This setup makes the global illumination effect possible, as each letter has its own calculated brightness value at any time.

You might also notice a flicker effect when the lantern is left idle! We can achieve this by scripting a maximum brightness value that changes randomly every 4 seconds, ramping up or down to that value over a short interval, which makes the lantern effect appear more realistic.

Finally, there’s the gravity effect on the lantern itself as it’s clicked and dragged. This is achieved through GSAP, a JavaScript-based animation library that I feel is greatly underutilised and underreported in Articulate Storyline, despite all the wonderful things it’s capable of within a Storyline project.

One of the coolest things about building animation sequences in GSAP is that we can incorporate the full range of event listener protocols available in JavaScript. So, as specific events occur (e.g., mouse down, mouse movement, and mouse up), we can set in motion various actions to create specific animations within the scene.

Whenever the mouse is in motion, and the click is held down, our script tracks the changes and calculates a counter-rotation value for the lantern, creating the fluid gravity effect you’ll see as you move the lantern across the scene.

I’ll note, however, that something odd happens on iOS: the effect works as expected but only after the lantern has been tapped or moved at least once. I’m not sure why this occurs, and I hope it’s a bug that might be ironed out at some point down the road.

For more sinister scares, be sure to check out my entry to last year’s Halloween-themed eLearning challenge, which I still claim is the scariest eLearning activity ever created! Let me know if you agree!

Happy Halloween everyone! 🎃