UPDATE: Simplified Slider Mechanic
Jul 30, 2013
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
Thanks for the update Rich! I found your previous example to work great. Cant wait to see how this new and improved version will work. Thanks for your continued support and posts of the amazing things that can be done with Storyline!
Hi, Rich. I'd finally "worked out" all the triggers and logic for your old version and now you improved it. It IS much easier...especially after having done the original. You're amazing, coming up with these. Thanks so much.
EDIT: Here's the Screenr video tutorial to show you the process
File from tutorial is here: https://dl.dropboxusercontent.com/u/49073758/Simplified%20Slider.story
Also, thanks for the kind words, Rebecca
Hi Richard, thanks for the update. I used your original one (with a few modifications) so am really looking forward to see how you changed it.
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.
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!
I haven't had time to try this, but I am wondering if it would be feasible for a slider with 100 - 200 points in a fairly short distance (3-4 inches).
Richard
Really useful post - thanks very much for sharing your idea!
Best wishes
Martin
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
Sarah I'd say layers make the most sense for your side content. Regarding your problem with the borders on shapes, do you have them set to 'no fill' or 100% transparency?
Like Michael said: if you share the file we can take a look.
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!
@Katie, right click on the drag boxes and select "Drag and Drop > Drag Return" and the boxes will return to their origin on mouse release.
This post was removed by the author
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!
Of course with the introduction of sliders in Storyline 2, this process has been greatly simplified!
Hey Rich, very cool, hidden objects with triggers could make a very cool learning game.
Sliders are easier with SL2 as Michael pointed out however still dig your design logic here.
Thanks Rich - I'm working with a client who's using Storyline 1, so this is just what I need. Great explanation.
Here are some additional examples of sliders built in Storyline 1.
This is so smart!