Tutorial: Building a 'Slider' Mechanic in Storyline

May 07, 2013

Hi Everyone,

Some time ago I developed a technique in Storyline that I've used to make interactive 'sliders' - and now seemed like a good time to share this with anyone who might be interested. There two videos (with attached Storyline files)  are here: 

Video 1:

https://player.vimeo.com/video/204928742

Video 2:

https://player.vimeo.com/video/204928749

Due to the Screenr 5 minute rule I had to be very brief about the actual mechanic used to make this interaction, but for anyone that's interested, here's an explanation:

The effect relies on the illusion that the user is dragging the oval up and down the slide, but actually what is happening is the user is dragging an invisible shape that sits on top of the oval. This invisible shape gets dragged over a series of invisible background objects. 

The slider effect works by having a number of possible points on the slide where the oval button can stop, and for each one of these, there is an oval set to state:hidden. When the invisible dragging object is dragged over each of the stop points, the slide triggers two events:

1) The state of that position's oval is set to 'normal'

2) The state of all the other ovals is set to 'hidden'.

This works because there is an invisible drag object over the top of each oval, and each is set to snap back once the user lets go of it after dragging. Because the slider mechanic is so familiar to people, the brain fills in the gaps a bit and gives the user the impression that the shape has been dragged along the slider. In reality, all that's happening is a number of ovals are being hidden or un-hidden depending on a series of 'dragged over' triggers. 

Anyway, I hope that the community can use this mechanic. It's a tool with a broad scope of applications, and it's not something I've seen in a lot of other courses so please feel free to innovate and use it however you can. 

Questions are welcome and I'll do my best to reply. 

Download the full storyline file here: http://goo.gl/ugeVX

All the best, Rich

33 Replies
El Burgaluva

Dude, this is FREAKIN' SPECTACULAR!

I love it.

Thank you very much for sharing. I don't have a use for it in anything I'm currently working on, but it's really inspiring to see the kinds of things clever folks can do with this tool (and I'm sure I'll find an appropriate application for it sooner or later).

All the best,

Leslie 

Jilo Esmail

Richard

Excellent screenr's and thanks for sharing the .story.  I am certainly going to using this on my project.

Just curious, when you go forward from slide 1 to slide 2 (using next button) and then, if you go back from slide 2 to 1, there are two buttons showing on the first bar.  Not sure, if I have to use "reset to original" or something like that?

Best regards

Jilo

Rich Calcutt

@Jilo - Yes, I think just setting the slide to resume from initial state should solve the issues. 

@Steve - I like the joystick idea. Not sure what I'd use it for, but I like it. 

@Jonathan - Source file seems OK to me. If the file attached to the original post is no good, you can download it from the screenr link. 

@Bruce - Thanks for the comments. Not sure what will be next. Might try to saw a woman in half, pull rabbit out of hat etc

@Phil - On the first slide i managed to use a button set to dictate the hiding and un-hiding of states which SIGNIFICANTLY  cut down the number of triggers. Unfortunately I couldn't replicate the build and the button set performed erratically thereafter. Sad times. Will keep trying though. 

Mark Woolwine

How hard would it be to have the slider set a variable based on the location the user places the slider? For instance, I want to have students rate themselves on how well they think they do on tests. I want them to use the slider to either select A, B, C, D, or F. Based on the rating I would then like to branch to other slides based on the response of the user.

Rich Calcutt

@Mark - It would be easy. Create a trigger that adjusts the 'SelfRating' number  variable to equal 1, 2, 3, 4, or 5 (for example), then have the trigger activate when the state of each oval is 'normal'.

e.g. Adjust Variable 'SelfRating' EQUAL TO 1 when state of Oval 1 is Normal

@Kristin - I would have liked to show the whole process of making them, but alas I'm limited to 5 minutes on Screenr. I hope the file is easy to follow though. Let me know if/how you end up using this mechanic. 

This discussion is closed. You can start a new discussion or contact Articulate Support.