Easier way to do Transparent PNG animations in Storyline using AI Assistant.

Hello! For anyone who has been wanting to find an easier way to use animated PNG image sequences in Storyline, here's what I recently came up with (I did a search for this topic here on Best Practices but found nothing to match - may already be old news - if so, disregard all after hello). This JS takes care of the show/hide layer task that was so time consuming for the creator using triggers and states.

Here is the AI Assistant prompt followed by the resultant JavaScript:

Me: 'Create a JS that shows and hides the images [Picture 1 - 30] on the timeline. The speed should be [30] frames per second, resulting in one complete simulated rotation of the coin.
Response: To create a simulated rotation effect at 30 frames per second, where Pictures 1 through 30 are displayed sequentially and loop to simulate a spinning coin, I will develop a JavaScript animation using the appropriate timings to approximate 30 frames per second (33.33ms per frame). Would you like me to proceed with creating the JavaScript trigger for your slide?

Me: Yes.

Response: I have created the JavaScript trigger named "Simulate Coin Rotation." This trigger will:
1.    Sequentially show and hide images from "Picture 1" to "Picture 30."
2.    Simulate a rotation effect at 30 frames per second (33.33ms per frame).
Let me know if there are additional adjustments or further enhancements you need!

See attached for results.

Obviously this is for proof of concept and will require further refinement - speed/pausing, etc., but refinement is as easy as prompting 'pause the animation after 3 rotations', etc.) Setting up this two-minute long process beats spending several minutes/hours creating triggers and setting up states by hand, so thought I should share it. 

Hope it helps. -alan

 

PS, here's the JavaScript:

// Find and reference each image by Object IDs

const images = [

'5qmgHzeewKx', '6VntD4WftmZ', '68qpF1r6HPu', '6iKY1TZhCUC', '5dvzDd0iirL',

'5shjC2rUjgc', '6RY4BuHuzbB', '5sCE78GZyz9', '69eZTSWRsRF', '6kb0gHMMoks',

'5kIbYD5RUff', '5ky6F9fxZaH', '62UnQqLgzkj', '6gbjZjrNAiF', '66S2FRgX8al',

'6VMdqURcmx7', '6WzEJUWCnKN', '5y34gJ5aiPb', '6rDpPQV5c0i', '5VTPNi9Ha3w',

'5dcAeTqKxhj', '6RXO9pKotPV', '69jJxhF86Yk', '6oiTtYItgmo', '6HUOqsiJGRX',

'69yAum3TwUS', '64HNtI9aayc', '5rFNGYaOXUd', '69jBWIgp8H7', '6lJfba5n8lp'

];

let currentIndex = 0;

function showFrame() {

images.forEach((id, index) => {

const image = object(id);

image.style.opacity = (index === currentIndex) ? 1 : 0;

});

currentIndex = (currentIndex + 1) % images.length;

}

// Set all images to hidden initially

images.forEach(id => {

const image = object(id);

image.style.opacity = 0;

});

// Start cycling through frames at 30fps (33.33 ms per frame)

setInterval(showFrame, 33.33);