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 interactionWhy 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 @elearningUsing 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!
