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.Storyline 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.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.Neon & Dark Mode Soft Skills Training: Getting Creative with Block Content Backgrounds!
Oftentimes, the visual 'design' portions of learning content can be basic and monotonous- So I challenge y'all to find a unique visual concept and run with it to strengthen those design muscles! Personally, I went for a Dark Mode Neon color theme, reminiscent of Miami Vice color themes. Let me know what y'all think!The Agency Algorithm
Hi all! With an academic background in both Ethics and Instructional Design, I’ve always believed learning can immerse us in thought experiments that challenge assumptions and sharpen critical thinking. The Agency Algorithm explores how AI systems leveraged in contexts like medical triage, surveillance, and beyond can reshape (and even diminish) human agency. By placing learners in these complex scenarios, my project aims to highlight the ethical stakes of algorithmic decision-making and the risks of prioritizing efficiency over empathy. I wanted to push the boundaries of eLearning aesthetics to create a modern, engaging course that asks big questions about our agency in a time of rapidly advancing technology. This project won Best Soft Skills at DevLearn last month, and I am excited to continue building sleek, mind-bending courses to get learners thinking critically! You can check it out here. I'd love to get some feedback so I can continue building on my skills as a designer and developer!Updated "Reveal" codes
I’ve been experimenting with the original HTML code blocks included in Articulate 360’s built-in examples and wanted to share how far you can extend that base structure using GenAI to iterate and refine interactions. Starting with the default image-reveal index provided by Articulate, I used GenAI to progressively develop three new versions. I supplied my own images, created meaningful alternative text for screen readers, and introduced additional UX and accessibility improvements. Every version is fully tailorable if you want to adapt the formatting, colours, spacing or behaviour. The three examples are: Enhanced Image Reveal Grid Uses the original Articulate structure. Adds a hover zoom, a click-to-zoom state, and high-contrast purple letter tiles for accessibility. Fanned “Deck of Cards” Flip Interaction A dynamic fanned layout, more like a real card hand. Cards lift and reveal their letter on hover, flip on click, and reset if clicked again. Includes chevron navigation for easier cycling. Plain Flip Grid with Navigation A clean, accessible flip-card grid with navigation chevrons. Mirrors the deck behaviour but with a simplified layout. All three examples are linked below, along with the downloadable files. If you have suggestions, improvements or alternative approaches, I’d really love the feedback. And if you’d like to use or remix any part of this, feel free — I’d love to see what you create with it. Review360 Zip files GDrive location: HEREInteractive Dynamic Shadows Script
This JavaScript code automatically generates a realistic drop shadow that reacts to mouse movements, simulating a moving light source. How it works: Paste the code into an "Execute JavaScript" trigger. Add the Accessibility Text (Alt Text) Mybtnshad to any object or button. The shadow applies instantly and moves opposite to the cursor to simulate depth. Key Features: Fully customizable settings (intensity, blur, opacity) located right at the top of the script.Cooking Game (Jeopardy style + Gamifiation)
Hello Articulate Heroes! I'm excited to share my second personal project with you — a cooking-themed, Jeopardy-style game! Cooking Frienzy This project was inspired by two fantastic webinar series shared here: How to Create A Jeopardy! Style Game Gamification series I started with the "Jeopardy!" template and added the following custom features: Cooking-themed questions and answers — 5 questions across 5 categories Custom visuals — including characters, backgrounds, UI, and tokens The ability to choose one of three characters at the start of the game (and replay with a different chef assistant!) Personalized feedback and questions — with character-specific images and voiceovers A 20-second Pomodoro-style timer with a “wiped” animation Tokens awarded when the user completes a certain number of questions The characters were created using AI. Thank you for taking the time to check out the game! I’d love to hear your thoughts — feel free to share any comments or suggestions! You can check-out the game by this link: Cooking Frienzy
