Forum Discussion
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
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 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
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!
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!
