An ‘Infinitely’ Zooming Image Effect Created In Articulate Storyline 360!

For this week’s E-Learning Heroes Challenge, I wanted to bring to life an idea I’ve had for a while. This challenge seemed like the perfect opportunity to explore and showcase an infinite zooming effect in Articulate Storyline.

How the Effect Was Created

At first glance, it might appear that the interaction uses one extremely large image that the user zooms in and out of. However, this approach would be impractical both in Storyline and for browser performance. Instead, the zoom effect is achieved using 16 unique images, each layered on top of the other. These images reveal themselves sequentially based on the scrollbar’s value, which updates dynamically as the user scrolls on the slide between 0 and 100.

Each image is 1280 x 720 pixels, just large enough to fill the player window at maximum size. As the user interacts with the scrollbar, the images scale down to 0 over approximately sixteen frames, creating the illusion of the user infinitely moving backwards (and forwards) through each scene.

Integrating Generative AI for Image Creation

Initially, I aimed to highlight the generative AI capabilities of the StabilityAI Stable Image Ultra model. This high-fidelity image generator, accessible via its API, is one of the best tools available for producing stunning visual content. Through my previous work on the eLearning Magic Toolkit plugin for Storyline and WordPress, I had already established the capability of using Articulate Storyline with the StabilityAI API.

The plan was to use the Stability platform’s Outpainting feature to extend images sequentially through a variety of different scenes in Mocha Mousse colour tones. However, I soon discovered that the Outpainting feature slightly blends the original image with the newly generated outer edges, thus losing some of the detail from the original image in the process. While this blending works well for many creative purposes, it meant I had to rethink my approach for my project as the images no longer aligned seamlessly when stacked.

Switching From Stable Diffusion To Adobe Firefly

To overcome this challenge, I turned to the Generative Fill feature in the latest version of Adobe Photoshop. This method involved first expanding the canvas outward and then using the lasso tool to precisely select areas for the AI to refill. Although the resulting images weren’t as photorealistic as what could have been achieved with the StabilityAI platform (especially using the Stable Diffusion 3.5 model), the more stylised, computer-generated graphic effect produced by Adobe Firefly Image v2 I felt fit well within the context of the user experience.

One significant advantage of this approach was Adobe Firefly’s ability to maintain a consistent mocha brown colour tone throughout all the images, aligning perfectly with my theme of the ELH Challenge.

Final Thoughts

The end result is an interaction that creatively leverages multiple technologies to achieve a unique zoom effect, and thankfully there didn’t seem to be much issue try to make the interaction work seamlessly across different devices. While it required some trial and error, the process has opened up exciting possibilities for future eLearning projects, and is another unqiue example in the ‘Nextless’ eLearning experience category.

If this demo inspires you or you think it could make for a useful tutorial, feel free to reach out! I’m always happy to connect on both LinkedIn and Bluesky. I hope you enjoy exploring this interaction as much as I enjoyed making it!