Forum Discussion

RichardCalcutt's avatar
RichardCalcutt
Community Member
12 years ago

UPDATE: Simplified Slider Mechanic

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