Forum Discussion
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);
6 Replies
That's a good question! Would be nice to have a list of items in that toolkit showing what Storyline's AI Assistant can and can't control.
I'm sure it will be possible within Storyline should the company follow that path, considering that Codex can already do these things (albeit inefficiently). Just tried using Codex to do the state additions and animation to a (randomly selected AI prompted) image with 30 frames. It was very slow and deliberate, but it eventually completed the task with a few steering prompts. I could see it getting a bit faster as it figured things out. Took about 30-40 minutes to add the images to my open .story file, adjust and animate. Not excited about giving partial control of my system to an external entity, but everything is well documented and approval walls are in place. So not production ready yet, but it has added the reusable skill to its repertoire for later use. Interesting times we live in.
I think we're on the same page now. I'm currently attempting to prompt AI Assistant to set up the new states of the first image with the others (2-30), but no success yet. I'll keep you updated. I doubt it will be able to do that, but worth a try.
UPDATED AI response: It seems I went off track. Let me correct my approach and proceed to add Pictures 2–29 as individual custom states for Picture 1 with appropriate state names (02, 03, 04, etc.).
It seems there has been confusion in my responses, but I cannot directly modify layer properties or move shapes into states through these tools. Adding additional states for Picture 1 where each state corresponds to Pictures 2–29, manually named as 02, 03, 04, etc., requires the Edit States functionality, which falls outside my current scope of operations.
Would you like me to summarize steps for how you might do this manually in Storyline's editor?---------
(lol, yes, it is not possible apparently). Next step would be to attempt with Codex, but previous attempts have proven very slow and unfruitful. Anyone have any other ideas?
Interesting that it qualifies the "Edit States" functionality. I wonder if it has access to a toolkit of methods that let it perform specific actions on and with Storyline's objects. That suggests an expansion of those abilities might be in its future.
I like this method. I've used the array of object IDs for a few different things now too--very helpful. Can I ask, was there a reason image states weren't used?
I've been working on a 2D, tile-based movement engine in Storyline and started creating a few animated image sequences by putting them all into the states of one image object, one state per PNG.
// An image object with four non-default states const background = object('#id'); let i = 1; setInterval(() => { background.state = String(i); i++; if (i>4) i= 1; }, 500);Since the image states are named with simple numbers, the index of the loop is used to qualify the name of the state that should be shown. When i == 2, state "2" is shown.
I like this method over the array of object IDs (which I still use for other thing) since the Storyline image object becomes a convenient container for all of the images in the sequence, keeping my timeline much leaner.
Thanks for the reply! That's a great idea. So, do you still set up the states by hand with your method? That's the part I was trying to get past with JS. With a lot of short animations, that can get time-consuming and monotonous. (I'm getting less patient with long-form setup solutions.) If the AI Assistant can set up the states for you, that would definitely be better!
I haven't tried using AI Assistant to set up all the states for one image. I bet that it would since it is getting more Codex-like with aligning text to audio on the timeline, etc. Just takes the right sequence of prompts. Maybe not though. A possible feature request?
My solution has worked with the images in a group so that cleans up the timeline somewhat. If someone's network/LMS restrictions disallow JS, then yes, an alternative method would be needed. Thanks for sharing your solution!That's a really good point I accidentally glossed over, I didn't use the AI assistant. That it can collect the object IDs from the timeline is a huge boon. I've had mixed results with the AI assistant coming up with code in general, but its ability to interact with the timeline and the objects on it is very significant. I'll put a pin in trying that out.
Since I've been deliberately going for simpler four-frame animations, setting up the states was pretty quick for me. Duplicate the normal state, name the new state, right-click the image in the new state and replace it with the next one in the sequence from my local drive. Rinse, repeat.
As the number of images increases though, the AI method would no doubt become progressively more useful, and the 30 your script uses would probably be significantly slower using the method I described, good call. 30 is much bigger than four.
