Storyline: Slide-to-Reveal Interaction Template
Click-and-reveals are a great way to chunk information so it’s less overwhelming for your learners. But have you ever considered using a slider instead of buttons? This novel approach is sure to surprise your learners and keep them engaged. And since it’s all built in Storyline 360, it’s easy to customize to fit your needs. In just a few minutes, you can change up the color scheme, swap out the photos, and pop in your content. Explore this example. This template will work for folx using Storyline 360, the continuously updated version of Storyline included in Articulate 360. Want to try it out? Get a free trial of Articulate 360 right here.Paper Computer Screens
Description In this demo I used AI Assistant to create some paper computer screens. I then created a top and bottom version of those images and cut the screen out of the top version. I also created some paper cutout people and used them as a simple slider interaction. Attached is the source file with the paper cutout images. Use them as you wish. Example View the example here. Resources Learn to use sliders How to create that interaction About Me I love helping people learn to use the Articulate software to meet their needs at work. I especially like to help those new instructional designers who are trying their best to get a handle on things. I regularly contribute to the training team's blog where we assemble all sorts of tips and tricks. Follow it to stay up to date. I post every Wednesday to Articulate's company blogwhere I share more general instructional design tips. I used to write the Rapid E-learning Blog. Still lots of good tips & tricks in there. Connect with me on LinkedIn and follow my YouTube for more tips & tricks.Using picture as slider, not only thumb (slider itself invisible)
Hello everyone, I'm not very advanced in using Storyline yet, but I hope that my question is not too obvious. I have tried searching but have not found an answer under my keywords. I would like to animate a fly swatter as a slider. It should scare away a fly on a window and I would like to use a slider for the movement (but the typical slider should be invisible). I thought this would work because I found a very similar example on YouTube (a hand with a computer mouse moving back and forth on a desk - picture attached. It is a tutorial, but I don't get, how he has done the slider itself). I can certainly solve this differently (e.g. via motion path), but the whole exercise was really just to see how I can create really individual sliders that no longer look like sliders at all. So it's not just about filling the thumb of the slider with an image. Does anyone have the crucial hint for me? Many thanks in advance!The best weigh to make an espresso
Hello! I like to mimic real-life machinery, dials, switches, and buttons in eLearning where it's appropriate. Sometimes learning by doing can be very literal. But these features can also impact #accessibility. In this week's coffee-themed demo, I have ensured the drag and drop, slider and dial interactions are also accessible from the keyboard. All of the vectors in this week's demo were 'handmade' in PowerPoint and Storyline using the 'merge shapes' feature. Most of my time was spent making sure the interactions perform as intended when the keyboard is used instead of a mouse. But I'm pretty pleased with the overall effect. What do you think? PLAY HERE
Why Wellness Matters: Interactive Slider Comparison
View the example Description Here’s my demo for this week’s challenge. It’s an interactive graphic from a fictional employee health and wellness course. For the comparison, I focused on why wellness matters, using three bar charts and a slider to show the relationship between employee health and key business outcomes. 🎨 Design Concept I went with a darker look for this one—something a little more polished and modern. I used a background graphic and a simple, clean layout to keep the focus on the data and interaction. ⚙️ How It Works As you drag the slider, the bar charts update to show how employee health affects three areas: absenteeism, performance, and employer cost. Lower employee health = higher absenteeism and cost, lower performance Higher employee health = better performance, reduced absenteeism and cost The absenteeism and cost charts use the same graphic, just with mirrored values to create an inverse relationship. Once I set up the first trigger to change a graphic’s state based on the slider value, I was able to duplicate it and adjust the value for each step. That made it easy to build and maintain without having to start from scratch each time. 💡 Production Tips This type of interaction requires a lot of object states to get the animations working smoothly. The inverse relationship between performance and absenteeism/cost tripped me up a bit. Once I figured out a formula for the states, it was much easier to keep things consistent—and even easier to rebuild when I needed to tweak things later on. 💬Feedback? I’d love to hear what you think! Any comments, questions, or ideas for improvement are always welcome. About Me David Anderson LinkedIn Profile Personal Website @elearning
