graphics
40 TopicsDesigning Immersive Phone Conversations in Storyline
Ever have two characters talk in a training module, but it still feels flat; even with speech bubbles, audio, and triggers? This (FREE) Storyline phone conversation template changes that. Whether you're designing for sales, compliance, healthcare, or support, it creates real, layered convos that feel like you're eavesdropping on a call. Animated phone effects Realistic voiceover dialogue Transparent APNG waveforms (way better than GIFs!) Custom triggers for pick-up/end call Clean, modern layout with animated text Watch how it works: https://www.youtube.com/watch?v=kMpUcYJRNnE Preview the demo: https://www.redesignedminds.com/Discuss/story.html Download it free: https://drive.google.com/file/d/19AvmE7q3PAUbXoNKIViQtPNqCwUoFDQW/view?usp=sharing If your training includes a conversation, this is how you bring it to life.1.4KViews10likes14CommentsID Toolbox
Practical tools for e-learning developers… Over the past several months I've built a set of browser tools for the bits of Storyline and Rise that used to cost me hours. Eleven of them, all completely free, no signup, no accounts, nothing to install. They run entirely in your browser. Nothing is uploaded anywhere, which for me was the whole point, I wasn't keen on posting client content to a website just to check something… ID Toolbox138Views8likes3CommentsGraphic Design Resources
I've been in ID for years now but was never formally trained - just figured it out as I went. Other companies I worked for didn't have the budget for certification and neither did I. I'm confident in my ability to create clear, engaging content. What I'm less confident in is my ability to "make it pretty." I rely heavily on the available formats and templates, which isn't a bad thing, but I want to grow beyond that. How does someone decide on a splash of color here, a swoop there, creative transitions or animations? I'd appreciate any tips, tricks, resources for improving my graphic design skills in course creation, because I feel a bit stuck at the moment.912Views4likes10CommentsAnimating Engaging Quiz Questions in Storyline
A cool way to turn your standard Storyline quizzes into interactive, engaging, and immersive learning experiences. Watch "how to" tutorial here: https://www.youtube.com/watch?v=4wB1_HWTZeU Preview slide here: https://craftuxd.tech/Submit/story.html Preview animations here: https://craftuxd.tech/Submit.gif157Views3likes0CommentsFun Animated Timer for Gamification Projects
Hi Articulate heroes, I wanted to highlight one very fast but fun-looking way to create timers for interactive projects. I've learned about this way from "Gamification Series; 05: Creating Tension with Timers." You can check out these amazing webinars Gamification series, and there was a few different ways to add timers to projects. I used it in my recent project "Cooking Frienzy" - Jeopardy-style cooking-game. (btw you can check out the full game: Cooking Frienzy So, here are the steps: 1) Create / find a "timer" picture - it could be any image with transparent background what works for your theme (in my case it is "Pomodoro" timer, made with AI help, saved as .png ) 2) Add this image as a picture (insert an image). 3) Go to Animation tab 4) Choose Exit Animation - "Wipe", go to "Effect Options" - "From Right". Set the animation timer for whatever time you need (10 sec., 30 sec., 1 min etc.) 5) Set triggers to what will happen after the timer is done (animation completed): i.e. jump to the next slide, show "result-fail" etc. 6) Preview and adjust if needed 🤞408Views3likes5CommentsCharacter Expression/Pose Series Using Photo Characters?
I have a common problem in many of my e-learning projects. I want to have a photographic character, say a man at a desk on the phone, looking happy. I then want a version of him with an angry expression. I then want a version of him with an exhausted expression. I want to choose the age, race, etc. In addition, I want to be able to easily change the background, etc. Trying to find this kind of a character series has been difficult. I have resorted to finding stock video and then grabbing frames out of the video that represent the expressions. But I cannot adjust the backgrounds very easily. Does anyone know of an AI tool where you can create a photographic character, and then show the character in multiple poses/expressions/etc. Thanks for any advice!370Views3likes8CommentsA Way to Organize Color Swatches
I'm a big fan of organization and efficiency when it comes to production eLearning development. One of the biggest challenges is keeping track of hexadecimal colors that I use on a daily basis. I used to use Adobe Kuler, which was a fantastic way to explore color combinations and a swatch panel that I used to organize all the colors I used for various projects. Well, they've recently changed to Adobe Color and have basically ruined what wasn't broken and now its requires Adobe Express in order to edit and save color palettes, so I started researching other options. Frustratingly, nearly all the options I found required a subscription. What I ended up doing is create an html document that I keep on my desktop and it's been absolutely wonderful and I wanted to share with this community as I have received so much help and assistance from this amazing, creative community of professionals. Open and edit the html document with Text Edit, or Notepad and you'll see the section where you can add your own color swatches, or update what's there. You can name them whatever you want and add in the hexadecimal color code. When you open the document in a web browser, you simply click on the color you want to use and it copies the hexadecimal code to your clipboard. My next push will be to create another one that is all pastel color combinations. This has ended up being one of my favorite new resources and best of all it's free and super easy to customize. Enjoy and continued success!Solved94Views2likes5CommentsPowerPoint Meets AI: Testing 5 Motion Models
When it comes to adding AI motion, many designers bounce from one model to the next, often frustrated by strange results. Some eLearning apps don’t give the motion we want natively, and others take too long to configure, making it hard to know where to start. So, I tested 5 AI models on the same slide with the same prompt to see how each performed. The results were surprising: one nailed the physics, another went off into odd morphs, and a few missed the mark entirely. The lesson? Every model has strengths, but the right fit depends on your design goals and willingness to experiment. Watch the full tutorial: https://youtu.be/Udtg1X81mow Download the AI Models for Motion – Comparisons chart: [AI Models for Motion - Comparisons.pdf - Google Drive]143Views2likes2CommentsReimagining Navigation Intros with 3D Motion
There’s more than one way to begin an eLearning course; and sometimes, sometimes the best way isn’t with text content, but with atmosphere. I’ve always been inspired by how airline safety videos set the tone before a flight begins. They take a routine moment and turn it into something memorable through motion, storytelling, and design. In this short navigation intro, I demo how to bring that same prelaunch energy into your course. With 3D motion and audio cues, you can instantly draw your learners in, before a single concept is even introduced. Navigation Intro: https://craftuxd.tech/Audio/story.html I designed this to spark engagement, proof that learning experience design gets fun when you experiment with 3D, soundscapes, animation, and visual storytelling. Here’s a quick tutorial: https://www.youtube.com/watch?v=62MRlM1iz0M175Views2likes2CommentsEasier 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);133Views1like8Comments