UPDATE: Simplified Slider Mechanic

Jul 30, 2013

Rich Calcutt
By Rich Calcutt

EDIT: UPDATE - now with a video tutorial! 

Screen Link: https://player.vimeo.com/video/204928757  (embedded below)

File from the tutorial video: https://dl.dropboxusercontent.com/u/49073758/Simplified%20Slider.story

---------------------

So there I was lying in bed last night and a thought occurred to me: "There has to be a simpler way to make a slider interaction in Storyline." The I had an epiphany, and it this morning I jumped out of bed and made it. 

This is an update to an earlier post about building a 'slider' mechanic in Storyline. I've revamped the whole thing and reduced the number of triggers by about 80%. Linking feedback to the slider position is now MUCH easier too. 

So it works like this: 

1) Each stop on the slider is now a whole new image, i.e. the bar and the circle. 

2) Each image is a different state. 

3) There's an invisible large box over each stop on the slider, and a smaller box on top of those that the user can drag.

4) As the small box is dragged over any of the larger boxes, it changes the state of the slider image to show the associated position. 

The storyline file is attached, so it's probably easier just to check that!

To link feedback to slider positions:

1) Create the feedback you want to give (an image, text, etc)

2) Trigger it to appear 'when state of SLIDER PICTURE is STATE X'

3) Done!

To add more stops to the slider:

1) Create a new set of slider graphics, one for as many stops as you want with each graphic showing a the slider in a different position on the bar.

2) Add the first slider position graphic to the slide, and add each of the others as different states. 

3) Place invisible large boxes over each slider position (do not overlap them)

4) Place a smaller invisible box over the first slider position (over the top of the first of the previous invisible boxes)

5) Make a trigger that changes the state of the slider and bar image to position 1 when the smaller invisible box is dragged over the first large invisible box. Repeat for as many slide stops as you need. 

6) Copy the small invisible box with all the triggers attached over each of the other stops on the slide. 

Hope this is useful for people. It's a far neater way of accomplishing the same trick as before, and makes editing feedback a whole lot more straightforward. 

Best, 

Rich

20 Replies
Rich Calcutt
over 10 years ago11/26/13 at 2:17 pm (UTC)

Kelly Prince said:

Richard:

Thanks so much for this! I just used this technique to "slide" a brain graphic to show the progression of dementia.  I'm so excited and really relieve it was streamlined.


Hi Kelly - great to see that you put it to good use. Could you share an example of the course? I'd love to see what you've done with it. 

Michael Hinze
over 10 years ago12/02/13 at 1:08 pm (UTC)

Hi Richard, Here is another example of a slider interaction: http://dev.keypointlearn.com/xcl71_SL/Refresh/story.html. I had a quick peek at your screenr (wish I had seen this earlier, if only the search function in this forum would work properly), and it looks like I used a similar technique. I'm going to download your .story file and have a closer look later, I'm sure I'll learn a bunch from it. Thanks for sharing!

Sarah Pouezevara
over 9 years ago08/15/14 at 4:59 am (UTC)

I must be crazy (and I admit to being an Articulate newbie), but this does not work for me. Everything worked fine in development, but as soon as I remove the border from the drop targets it no longer works. I have tried many many times following to the letter the instructions in the video. Unfortunately my course is so big I can't upload it here, but maybe i can try to extract those slides at some point if anyone is willing to look. Just wondering if anyone else has experienced this. Also, assuming I can ever get this to work, what would be your suggestion for jumping to a new slide when the slider is 'dropped' on its target. I'm building an interactive timeline, so I have a whole century's worth of drop targets (decade by decade, approx). They have to be new slides rather than layers (I think...) so that they can then proceed to interact with the items within the decade. When I tried to jump to slide xx when the state (of the background photo) changed, but that didn't work--it just froze everything up. Suggestions welcome!

Sarah

Michael Hinze
over 9 years ago08/15/14 at 6:29 am (UTC)

Sarah Pouezevara said:

I must be crazy (and I admit to being an Articulate newbie), but this does not work for me. Everything worked fine in development, but as soon as I remove the border from the drop targets it no longer works. I have tried many many times following to the letter the instructions in the video. Unfortunately my course is so big I can't upload it here, but maybe i can try to extract those slides at some point if anyone is willing to look. Just wondering if anyone else has experienced this. Also, assuming I can ever get this to work, what would be your suggestion for jumping to a new slide when the slider is 'dropped' on its target. I'm building an interactive timeline, so I have a whole century's worth of drop targets (decade by decade, approx). They have to be new slides rather than layers (I think...) so that they can then proceed to interact with the items within the decade. When I tried to jump to slide xx when the state (of the background photo) changed, but that didn't work--it just froze everything up. Suggestions welcome!

Sarah

Katie Venit
over 9 years ago08/18/14 at 9:49 am (UTC)

In your example file, the drag boxes snap back to their original positions after you let go. I can't figure out how to make that happen on my file--the boxes just stay where they're dragged (even if that's way off the slider). I attached it here. Any suggestions? I'd love to make this work a little smoother.

Thanks!

Lisa Ferris
over 9 years ago12/12/14 at 5:12 pm (UTC)

Richard:  A Thousand Thanks!!!  I took your file, watched the tutorial,  added my own graphics and it works beautifully.  Attached is a screen capture.  When I finish building it, there will be narrated feedback with suggestions on how to use the 4 modules in the course.  Just wanted to say that you totally rock!  And you saved me tons of time and frustration.  Cheers!

Sign In to Reply