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.Sélectionner–Associer / Select & Associate – Storyline Template (Drag & Drop Alternative)
Here’s a Storyline template that offers an accessible alternative to drag-and-drop interactions, using modal pop-ups and keyboard navigation. Aperçu / Démo (Français) : https://formabilite.fr/medias/storyline_selectionner-associer/ The module is in French, but the structure and logic are easy to adapt to any language. ✅ No drag-and-drop – the user selects a label and chooses an answer via a modal ✅ Fully keyboard-operable (tested with NVDA) ✅ Custom states and variables to manage feedback and score ✅ Less cognitive load than traditional drag-and-drop This interaction is ideal for: – Motor impairments (no need to drag) – Screen reader users (clear announcement of elements) – Learners needing structured, guided steps You'll find three demo versions with 3, 4, and 5 items, along with a quick usage guide (in French). Présentation en français Ce modèle propose une interaction de type “sélectionner–associer”, pensée comme une alternative accessible au glisser-déposer. L’utilisateur sélectionne une étiquette, puis une fenêtre modale s’ouvre pour choisir une option (une seule possible). Les associations, l’affichage et le score sont gérés via des variables. Trois démonstrations (3, 4 et 5 éléments) ainsi qu’un mode d’emploi rapide sont inclus dans le fichier. Source Stroyline : https://formabilite.fr/medias/selectionner-deposer_sl.zip Feel free to reuse, adapt, or ask questions — I’d be happy to help! Thanks ! Élodie MigeonStoryline Magic Cursor
Hey community! 🎄 Want to add some magic to your Storyline greeting cards? I'm sharing 2 small scripts to animate your cursor: ⭐ Star trail — colorful stars follow the mouse. 🎅 Christmas emojis — a chain of emojis with a spring effect. It's simple, easy to customize, and it gets the job done! Colors, sizes, speeds... everything can be tweaked in the config at the top of the script. No hassle. Use them, tweak them, and if you create new effects, share them! Have fun and happy holidays! 🎁 review: Storyline Magic Cursor | Review 360Holiday 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.Interactive Team Introduction Training Module
What I Built I designed an interactive onboarding experience in Articulate Storyline 360 for new employees joining the training department. Instead of a static team flow chart, the final product is a set of interactive team introduction slides. Each team member is represented with: 📸 A photo 🏷️ Their name and title displayed at the bottom 📝 A detailed introduction revealed directly on their photo Navigation is intuitive, with Next and Previous buttons (enhanced with tooltips), and an Information button at the end to credit the Storyline 360 photo library. Behind-the-Scenes Process I started with a simple flow chart to show team structure. Realized it felt too static, so I reimagined it as an interactive experience. Built individual slides for each team member, layering text over images for clarity. Added navigation controls to make the module feel smooth and user-friendly. Incorporated credits to acknowledge the resources used. Purposeful Design The goal was to help new employees quickly connect with their team. Instead of just seeing names on a chart, they now get a personalized introduction to each colleague. This design solves the need for: Better engagement during onboarding A more human, approachable way to meet the team A reusable template that can be updated as the team grows Explore & Review You can explore the interactive module yourself here: 👉 Review Link – Interactive Team Intro Example For those who want to learn from or adapt this build, here’s the source file attached. Cheers! JANISanta's Naughty or Nice List
Happy Holidays, everyone! I recently built a sorting exercise for a client which used Javascript to split the learner's text entry answer into individual sentences and display these as draggable Post-It notes. The learner was then asked to sort the Post-It notes into 'good' and 'bad' ideas. Which got me thinking... could Santa use a similar method to decide who's been naughty or nice? In this Christmas-themed version, I've simplified the Javascript to recognise only individual words (by space or line break) and generate up to 10 Post-It notes for the sorting exercise. // Get the learner's response from the Storyline text variable var player = GetPlayer(); var learnerResponse = player.GetVar("Christmas_List"); // Split the text into individual words // This handles multiple spaces, line breaks, and other whitespace var words = learnerResponse.split(/\s+/); // Remove any empty strings from the array words = words.filter(function(word) { return word.trim().length > 0; }); // Assign each word to numbered variables (Person_1, Person_2, etc.) // Limited to 20 slots var maxSlots = 20; for (var i = 0; i < words.length && i < maxSlots; i++) { var varName = "Person_" + (i + 1); var trimmedWord = words[i].trim(); player.SetVar(varName, trimmedWord); } // Optional: Store the total number of words processed player.SetVar("TotalWords", Math.min(words.length, maxSlots)); Each of the 10 Post-It notes only becomes visible if a name has been assigned to it. Depending on the split between 'naughty' and 'nice', you'll see a different video message from Santa. I created the Santa videos with Powtoon's AI Text to Video tool. Warning: it's Drag and Drop As fun as this is, Drag and Drop isn't fully accessible, and I'm still tinkering with the master file to see if I can add keyboard fallback controls and preserve the counting system. Watch this space! Play here!
Storyline Instant ToolTip
Hi everyone! I'm sharing a script to add tooltips in Storyline. Just one reference object, a quick copy-paste, and it's ready. You could use a native rollover state, but this gives you full control over the animation. Position, colors, shadow: all configurable in 10 seconds. No JavaScript skills needed, the script is designed to be easy to use and maintain.Color Blindness Accessibility Template
Don't leave your learners behind if they can't recognize certain colors like their peers! This Storyline template will automatically change the colors of your placed objects based on the Color Mode setting you pick in the top menu: select from Protanopia (Red/Green), Deuteranopia (Red/Green) or Tritanopia (Blue/Yellow). As a bonus, you can also select Dark Mode without needing to configure your computer's or smartphone's operating system! Download the Storyline 360 template and try it for yourself - see the attachment: Video of the tamplate in action: https://youtu.be/cUOeZKWqRkE?si=uYLd0vYu7xgkJuhz Special Thanks: Ashley Chiasson for the Menu Functionality https://youtu.be/iUW_Md1YXWA?si=beSTbdyj5II_I0yM
