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
- notusingCommunity Member
@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.
- MarkWoolwineCommunity Member
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!
- RebeccaFleischCCommunity Member
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.
- RichardCalcuttCommunity Member
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
- NancyWoinoskiSuper Hero
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.
- KellyPrince1Community Member
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.
- RichardCalcuttCommunity Member
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. - MichaelHinzeCommunity Member
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!
- GladeSouthamCommunity Member
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).
- MartinTalbotCommunity Member
Richard
Really useful post - thanks very much for sharing your idea!
Best wishes
Martin