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

Rich Calcutt
Author

almost 11 years ago05/14/13 at 3:07 am (UTC)

@Mark - Good spot - i just tried to replicate the issue. I tied a number variable to the states of the ovals, and they do seem to stick at the highest counted value.

The way I overcame this was by linking the variable adjust trigger to the state of the the 'grade' text box, rather than that the slider itself. I've attached this in .story so you can see. Not sure why the link to the slider doesn't work properly though. Could be a bug, could be a build problem. Either way, here's a fix for you!

Best, Rich

slider+tutorial+_variable+mod_.story

Mark Woolwine

almost 11 years ago05/14/13 at 8:14 am (UTC)

Rich... Thanks for the help! It worked perfect!

Leonard Puglia

almost 11 years ago05/20/13 at 5:06 pm (UTC)

Rich,

Thanks so much for sharing!

There are so many uses for this mechanic - it's brilliant and so visually appealing for the learner.

I can already see how I will use this in free form quiz questions (much better than the standard mutiple choice) and I love the idea of branching to different sections of a course based on the learner's previous knowledge of a subject.

Really cool way of maximising limited screen real estate too!

Thank you again

Morten Skoglund

almost 11 years ago05/21/13 at 2:52 am (UTC)

That one was pretty nice Thanks for sharing

Jeff Clay

almost 10 years ago06/05/14 at 8:35 am (UTC)

Thanks so much for your work and for sharing. Very nice, smooth and easy to do (once you know how, of course!)

Jane Maloney

almost 10 years ago06/05/14 at 8:50 am (UTC)

This is a really good tutorial, thanks for sharing!

9 years ago01/29/15 at 1:27 pm (UTC)

Hi Jonathan

Yes, I had problem with link from this page too. The file/page seems to be corrupted. I just get a page full of code. However, the link http://goo.gl/iakFH from the screenR tutorial works OK, except on the download panel I had to deselect and reselect the save option to activate the file button.