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);Worried about AI taking your job?
The tools have changed. Your judgement hasn't. In this Rise course learn the best practices of how to work alongside AI to move faster, create sharper content, and stay the most valuable thing in the room. The L&D professionals pulling ahead right now aren't the ones who know the most about AI. They're the ones who know how to work with it. AI is already in your workflow, whether you've invited it or not. This course shows you how to use it deliberately, critically, and well. The AI ShiftAI Tools for Video Editing
I'm familiar with the old standards for video editing but I am not current on how AI is being integrated into existing or new tools. Is there a tool out there where I can tell the AI to find and remove certain sounds (for example, the Teams chime when someone enters a meeting) without having to do it manually?Prompting My Way to Better Visuals
For a project we're currently developing, I wanted to create a project management "planning style" personality quiz as an engagement activity at the beginning of a module. One of the things I've enjoyed most about using AI for visuals is how quickly I can iterate on an idea by refining the prompts rather than starting from scratch each time. The Final Result Rather than using any one generated image exactly as produced, I treated each version as a design exploration. I combined elements from several iterations to create the final introductory slide for the activity. To get to the final result. I used a series of prompts: Step 1. Starting with a General Concept I usually begin with a broad prompt and then refine it based on the results. For this project, I started with: "Create a 16:9 illustration with a construction theme to introduce a project planner personality quiz." This prompt relied on an earlier prompt that generated the quiz concept itself: "Create a project planner personality quiz with different personas. The quiz should involve 5 to 10 questions and make scoring simple, such as based on score ranges or whichever answer letter appears most often." The first image captured the overall concept well, but it wasn't quite right. Step 2. Revising and Refining The initial illustration felt a little too youthful for my audience. It reminded me more of an animated children's style than something designed for adult learners entering the telecom workforce. So my next prompt was: "Make this more photorealistic. Ensure all people are wearing appropriate eye protection." While I liked the direction, I realized the rest of the module used illustrated graphics rather than realistic artwork. Instead of starting over, I continued refining the same image with another prompt: "Modify the characters so they are styled like a graphic novel for an adult audience." The style now fit the audience much better, but the colors were darker than the rest of the course branding. My final refinement was: "Modify to a brighter pop art style. Ensure all workers are wearing proper PPE, with no jewelry and hair properly restrained."From Blurry to Beautiful: Using Articulate Storyline AI to Improve Image Quality
As we all know, the Articulate Storyline AI feature can generate fantastic images. Today, I also discovered that it can transform a blurry, regular image into a clear, vector-like image. I had some pictures that were not in very good condition, especially when they were enlarged and placed in Storyline. I thought the AI Assistant might be able to improve their quality or convert them into a more vector-like style, so I gave it a try. Surprisingly, the results were very impressive. Since the generated images have a solid background. I asked the AI to remove the background and make it transparent, but it responded that it cannot create transparent images or remove backgrounds to make them transparent. However, this is not a major issue—I simply used Photoshop to remove the background afterward.Watercolor style / vintage illustrations
Hi, ELH community! I'd like to share a preview of my newest Storyline project, currently still a work in progress. The Secret Life of Food is an interactive learning experience that explores how everyday foods such as chocolate, potatoes, tea, coffee, and spices have influenced trade, exploration, culture, and world history. For this project, I wanted to move away from a traditional corporate look and experiment with a more immersive visual approach. I chose an old explorer's atlas aesthetic, combining watercolor botanical illustrations, vintage maps, and historically inspired characters to create the feeling of traveling through a living journal of discoveries. Learners are guided by Catarina de Silva, a fictional naturalist and explorer, as they uncover the surprising journeys behind some of the world's most familiar foods. The project is still under development, but I'd love to hear your thoughts on the visual style and overall direction. Thanks for taking a look! PROMPTS: (used for creating images in Chat GPT, Storyline AI) General style: "Vintage explorer journal aesthetic, watercolor and gouache illustration, warm parchment textures, hand-painted botanical details, historical cartography elements, museum exhibit quality, Age of Exploration atmosphere, elegant educational artwork, rich earthy palette, antique paper, subtle ink sketches, highly detailed, soft painterly rendering, casual realistic character design, storybook realism, professional educational illustration, Articulate Storyline course artwork, clean composition, high quality digital painting, National Geographic educational style, transparent background when applicable" Characters: "Full-body character illustration, casual realistic style, hand-painted digital artwork, realistic proportions, expressive face, educational museum-quality illustration, inspired by historical exploration journals, detailed clothing and accessories, subtle watercolor textures, soft brushwork, warm natural lighting, elegant pose, believable anatomy, high level of detail, not cartoon, not anime, not photorealistic, transparent background PNG." Backgrounds: "Vintage illustrated background, explorer journal aesthetic, watercolor map textures, antique parchment, botanical details, warm earthy colors, educational exhibit design, historical atmosphere, hand-painted digital artwork, highly detailed environment, immersive storytelling scene, suitable for eLearning course background, subtle depth, readable composition."How to Add a Custom Interaction Using the Code Block in Rise
This tip comes from RonPrice, Chief Learning Officer at our certified training partner, Yukon Learning. Do you need some custom content in your Rise course but you're not sure how to start? Use the code block! All you need is an idea. It's that simple. Creating a custom block has never been easier using the Rise Code Block. In this video, we will show you: How to use AI to quickly generate some code for an interaction How to insert the AI-generated code into your Rise course Resources: Yukon Learning YouTube Channel Code Block Group. Join the code block group in ELH to ask questions, post examples, and learn from other e-learning designers.The Construct
Hello! It's surprising - and a little bit troubling - how AI seems to 'get' certain pop culture references in your prompts. Hopefully, this homage is pretty obvious! The imagery was created using Google Flow and Rise's AI Avatar tool, with the interaction controlled in Storyline. If you view this demo on a desktop, you will need to press the Y and N keys. But if you view it on a mobile device, you will need to swipe left or swipe right. TRY IT OUT HERE: https://bit.ly/elhc557
