Revisiting Animated PNGs as a GIF Alternative

I've been experimenting with some local generative AI resources and was impressed how easy it was to create high quality animated transparent PNGs. I know many people rely on GIFs to do quick animations in Storyline, but they have so many issues and limitations that I've never rely pursued them. Animated PNGs however show much more promise.

They've been around for quite a while and there have been several posts over many years on ELH about their use in Storyline. Like GIFs, animated PNGs are generally supported in the current version of Storyline. A very recent update actually just fixed a playback issue that was blocking their animation. Animated PNGs have better resolution and color, and look better all-around while still maintaining transparency if desired. A major shortcoming however, much like GIFs, is that there is no built-in way to control the playback.

Since good quality animated PNGs are becoming so easy to produce, I assembled some resources to better control their playback in Storyline, which I thought I would share. It has limits, but should serve as a good starting point if anyone wants to apply this approach to their own slides.

Demo: https://360.articulate.com/review/content/5b8efd30-a3aa-4c56-88d1-f84e7bbf7c43/review

I’m using a slightly modified version of the apng-js JavaScript library to control the PNG animations. You can download the file from https://paedagogus.org/CDN/apngJs.min.js. It just changes the name of the library reference in the browser's window object. See https://www.npmjs.com/package/apng-js for usage details.

(Note: You will need to move the apng-js library file to your own server, or load it locally since this is currently on my server and it may not be available forever.)

The general idea is that:

• A small script runs either once at the start of a slide, or once on the master (however you want to set it up).
• This script loads the library and creates a PNG swapping function.
• You then insert and position your animated PNG(s) file into your Storyline slides as usual.
• For any PNG you want to control, you then run a small script that contains the Object ID for the PNG and a name for the player object.
• You will need a matching Storyline variable for this named player object.
• It then calls the saved swapping function and will swap your animated PNG image element for a canvas element that contains the same PNG data.
• The apng-js library then allows you to play, pause, reset, and adjust the speed of your PNG clip at will using the variable reference to the player object.

The scale, proportion, rotation, border and background of the PNG slide object will be largely maintained after the conversion. However, you cannot apply cropping or any visual filters (e.g., color/contrast/brightness changes) to the PNG. These seem to result in Storyline generating a new PNG file, which loses the animation data. You may need to experiment, as I only addressed and tested the basic functionality.

There is a slight delay as the PNG is processed and moved to the canvas. The larger the file, the longer the delay. The demo file is 50MB, so it is noticeable. Just plan accordingly.

You need these Storyline variables:

• runOnce, which flags if the setup script has already been run (i.e., run once)
• replaceImageWithCanvas, which holds the swapping function reference
• individual variables for each unique player you create, which holds the player reference

If successful, you can use GetPlayer().getVar("{your player’s name}") followed by .play(), .pause(), or .stop() to control the clip. There are other possible settings detailed on the website mentioned above. Look at the script on the slide to see how things are accessed.

You should be able to apply this to multiple animated PNGs across different slides, or on a single slide. You will just need to update the object IDs and player names for each script you use to swap the PNG data.