Catching Fireflies
Hello everyone! I'm excited to share my very first sample with you all! I've been experimenting with hotspots on StoryLine and created a fun game to provide a nice break from our usual learning. You can check it out through this sample link: https://360.articulate.com/review/content/07673a40-b615-4fe3-b65d-4f75ef3691ad/review I'd love to hear your thoughts on it! Also, if anyone can assist me in adding a sound effect for each click, I would greatly appreciate it.Video Game Top-Down with Arrow Key controls
Introduction and features If you have ever wanted to create a world that your users can explore, but haven't known how to do it, then this project can help you get out there and get after it. View introduction in video format here: Video on LinkedIn A full course using multiple characters, multiple boards, side-scrolling animations when moving from board to board, are already being enjoyed by thousands in a professional setting in one of the biggest companies in the world. With this type of course, you have have the user walk around and size of world, gather items, solve tasks and anything you can think of. Review the project here: Review360 You control the Avatar with the Arrow Keys on the keyboard and she can only walk on the paths set by you. That means, she can't walk through walls! You can warp to Task slides or to another Board slide using the Intersect trigger. Download the Project at the bottom of this post. How the character moves The character is a PNG picture that is exactly 200x200 in size. The trick to movement is to also have the Motion Paths be 200px in length and have them set to Relative Start Point. I have chosen an animation time of 0.25 seconds. There are 5 states, the Normal state is the character in the Idle Position. The other 4 states are self-explanatory. Lastly, two triggers are created (NUM 2 appears when you hit Arrow Down on your keyboard). Your character now moves around the Canvas. How the character was created The character was created using AI using the following prompt: I'm creating a game and need a picture of a character. The game has an isometric view and I need the following 4 poses in the same picture with transparent background: 1 Front view where she has an idle pose and standing still. 2 Front view where she is walking towards the camera. 3 Back view where she is walking away from the camera. 4 Left view where she is walking with arms swinging very little. Comically small body. Very large head. Female. 3D style. High resolution. Office clothes. Short hair. Glasses. Transparent background. Disney style. That gave me this character in the poses I asked for. I use this large character for all slides except for the board. On the board, I took the picture into Photoshop and shrunk the body into something even smaller. How the board was made The board was made using PowerPoint and AI. I drew the outline of the board in PowerPoint using square shapes. I guess you could do this in Storyline as well! Then I found random pictures of inventory on google and copy-pasted them into various positions. Then I uploaded the picture into the Copilot AI - any image generation AI will work and used the following prompt: Can you create an exact replica of this image, but make it beautiful 3d top-down style. Make the colors pleasant and give it a disney vibe so that the scene feels warm and welcoming. Keep the layout the same. How to prevent the character from walking through walls This is the part that requires you to click the most with your mouse. First you create a grid of 200x200px square shapes. They only need to cover the areas the character will be walking on. They need to be touching each other and Shape Outline must be turned off - or it won't work. You then type in a unique identifier in each square shape. I just used the numbers from 1-27. I also renamed all the shapes "Square 1" "Square 2" "Square 3" etc. Next you create a new Number variable. The default value should be the square your character will be starting on. In my case, 1. You then create a bunch of triggers that changes the location variable upon intersecting with the character. You can now track exactly where on the board your character is located. This is key to controlling where it can not move. Lastly, you create the following trigger for all four arrow keys. The numbers will be different for you. But basically you look at Square 1 and visualize if the character should be able to move downwards from this location. If it shouldn't be able to, then you don't add the number to the list. If it should be able to, then you add the number. Download the project file Explore all the other various tricks employed to create the soft shadows, the smooth transitions and more by downloading the file right here. :) This project was created by http://www.mindsparkelearning.com - but feel free to modify it and then make it your own! :) I hope someone out there can find this project useful.Feedback Game
This project was developed to train leaders in giving feedback while maintaining employee engagement. We used a simulation-based approach for feedback meetings. Check the demonstration below. Instead of prioritizing content, we focused on storytelling supported by game mechanics with branched scenarios. To enhance realism, we simulated extreme situations like disagreements and interruptions, requiring students to be flexible and detail-oriented. At the end, rather than completing a linear course, students will have tested their decisions and learned from successes and mistakes in a safe digital environment, where they can repeat the experience and make different choices while comparing the consequences of each action.Holiday Traditions Game: Save Christmas with Juniper--again!
Inspired with the Holiday Traditions quiz a few years back, I created my own game. Each year I upleveled my "game" and created a new one to explore different countries holiday traditions. Last year I introduced a character called Juniper who went on a mission for Santa to collect missing artifacts from 6 countries. Once collected the holiday Cheerometer would be "full on cheer" and Santa ready to fly. This year Juniper goes on another mission to save Christmas and is joined by the sidekick--the Christmas Bat Hollywings! Travel to 4 countries to solve puzzles and collect the missing artifacts. What I upleveled: Added voice to the characters using Storyline AI VO. Loved the voices it has but concerned with Eleven Labs retiring voices if I'll be able to use the same ones next year. So far, I have found Murf AI to be more consistent with keeping voices. Important when you need to update projects. Animated GIFs--to animate Juniper, Hollywings, and the Yeti. Sourced gaming elements on Freepik for these characters. Used PowerPoint to generate the GIFs. Thanks for ideas from Alexander Salas and Jeff Batt's video on his channel. Added motion paths and the timeline to get the movement effects I wanted. Imagery and Story: Used AI assistant to generate some of my graphics as well as Freepik. I often would find an image I like on Freepik and use its AI to generate the image in a vector style to match my style. I found that faster than generating my own prompt. Leveraged Copilot to come up with stories and riddles for the game. Play it: Play the 2025 short game here! Wishing you a delightful holiday season full of your own happy traditions! And if you want to see the 2024 version, check it out here.5-Minute Makeovers for E-Learning #532
We updated our menu slides. Originally the buttons just ticked off to show that each section was completed (we used variables at the end of each section that ticked the buttons off on the menu slide). We updated the menu slides to have badges instead that changed from black to coloured badges (using variables at the end of each section that ticked the buttons off on the menu slide). This was to link in with the gamification aspect for staff to collect the badges throughout the course for each section.Storyline ANIMTEXT
Hey community! 👋 Creating cool animated titles in Storyline is often tedious... and rarely impressive. So I've put together 17 ready-to-use JavaScript scripts to animate your SVG texts: ✅ Slide replay handling (automatic reset) ✅ Storyline pause support (Varpause variable) ✅ One script per effect, easy to integrate Note: the Voronoi effect loads a small external library (d3-delaunay) automatically - completely transparent to the user! Have fun, test them out, and let me know which effect is your favorite! Review : https://360.articulate.com/review/content/c1587dba-5193-4d45-a4eb-2b985309b7ce/reviewPowerful Positioning with AI
Built as a high energy portfolio concept, this project is an interactive Storyline experience that helps learners practice “Power Positioning” through short scenarios, branching choices, and coaching style feedback inside the module. Behind the scenes, I approached it like a real client build: clarified the performance need and audience, mapped the learner flow, drafted a lightweight storyboard, prototyped quickly, then iterated based on usability checks to keep the experience fast, clear, and visually consistent. What makes it stand out is the AI integration. The experience uses a ChatGPT API to analyze the learner’s typed response, generate custom strengths and next steps, and provide a 1 to 10 score, giving learners targeted coaching they can immediately apply on the job. A Sample Responses Key is available here.Card Reader - Fun new drag and drop interaction
Working with a new client I was tired of the same ol click and reveal content interactions. I used the drag and drop feature to come up with something different. Learners drag cards to a virtual reader that scans, beeps, and reveals colorful insights—turning simple content into an engaging experience. It’s a fun way to explore information. Review link: https://360.articulate.com/review/content/3582f784-ef45-416a-a8a0-73c9f0380ae7/review?version=1Shoot and Destroy blocks Minigame
Interactive Minigame shooting Cannon Balls. The Cannon aims towards the cursor. The Cannon shoots when you click on a block. The Blocks disappear as they are shot. Download the project at the bottom of this post. How to shoot the Cannon Balls This works using JavaScript and Motion Paths. Let's explore how it's done! I created 7 blocks and 7 corrosponding Motion Paths on a picture of a Cannon Ball. You can change the starting point of the animation independently of where the Cannon Ball is located! The actual picture of the Cannon Ball is located off-screen. It also has a "reset" motion path. This is only needed if you add more complex interactivity that we are not going to explore in this demo. Create this trigger to make the Cannon Ball disappear and reset after hitting a block: Create these types of triggers to make the blocks disappear when they are hit: Lastly, create this trigger to shoot the Cannon Ball: Make the Cannon follow the Cursor This is done using simple JavaScript. Create this trigger: and add this code: const rect1 = object('5i3YzB8KKND'); update(() => { const dx = rect1.x + rect1.width / 2 - pointerX(); const dy = rect1.y + rect1.height / 2 - pointerY(); const angle = Math.atan2(dy, dx); rect1.rotation = angle / Math.PI * 180; }); This code can also be found in Articulates own write-up of the built-in JavaScript support in Articulate Storyline. :) You need to paste in the ID of your specific object in the top of the code. You can find it by right clicking on your object on the Canvas of Storyline. That's it, you're done! Now you can add layers, triggers that make things happen, sounds, visual effects etc, text, more blocks(!) etc. :) Download the project file Explore the project by downloading the project file right here. It's created by www.mindsparkelearning.com and you can freely use it as is. :) All assets have been created using simple AI prompts. :)
