Tutorial: Building a 'Slider' Mechanic in Storyline
May 07, 2013
Hi Everyone,
Some time ago I developed a technique in Storyline that I've used to make interactive 'sliders' - and now seemed like a good time to share this with anyone who might be interested. There two videos (with attached Storyline files) are here:
Video 1:
https://player.vimeo.com/video/204928742
Video 2:
https://player.vimeo.com/video/204928749
Due to the Screenr 5 minute rule I had to be very brief about the actual mechanic used to make this interaction, but for anyone that's interested, here's an explanation:
The effect relies on the illusion that the user is dragging the oval up and down the slide, but actually what is happening is the user is dragging an invisible shape that sits on top of the oval. This invisible shape gets dragged over a series of invisible background objects.
The slider effect works by having a number of possible points on the slide where the oval button can stop, and for each one of these, there is an oval set to state:hidden. When the invisible dragging object is dragged over each of the stop points, the slide triggers two events:
1) The state of that position's oval is set to 'normal'
2) The state of all the other ovals is set to 'hidden'.
This works because there is an invisible drag object over the top of each oval, and each is set to snap back once the user lets go of it after dragging. Because the slider mechanic is so familiar to people, the brain fills in the gaps a bit and gives the user the impression that the shape has been dragged along the slider. In reality, all that's happening is a number of ovals are being hidden or un-hidden depending on a series of 'dragged over' triggers.
Anyway, I hope that the community can use this mechanic. It's a tool with a broad scope of applications, and it's not something I've seen in a lot of other courses so please feel free to innovate and use it however you can.
Questions are welcome and I'll do my best to reply.
Download the full storyline file here: http://goo.gl/ugeVX
All the best, Rich
33 Replies
This is exactly what I needed! Thanks for sharing Rich you saved me a few hours of experimenting.
You're welcome. Please let me know how you end up using them!
Thanks for sharing Rich, as you know I loved this when you showed it me. I also used it in a project very soon after you giving me a copy.
Phil
Thanks!! I have a course that I can use this in now
That is fantastic. I've done courses in the past that used sliders, but I always had to have them built in Flash. Love that you came up with a way to do it Storyline!
The combo of creativity and technical skills I see on this forum never ceases to amaze me.
Dude, this is FREAKIN' SPECTACULAR!
I love it.
Thank you very much for sharing. I don't have a use for it in anything I'm currently working on, but it's really inspiring to see the kinds of things clever folks can do with this tool (and I'm sure I'll find an appropriate application for it sooner or later).
All the best,
Leslie
My friend, you are a clever guy! I've wanted a slider interaction for ages and have some uses right now.
Thanks so much for sharing.
John.a.
What an ingeneous trick! I put the link on my twitter account for all the world to see.
Richard,
Thank you so much for taking the time to share these ideas! My mind is overflowing with ways I can use the mechanics. And thank you for taking the time to explain the ideas behind it in two Screenrs-- both were very well done. You are truly an educator. This was all very generous of you.
Many thanks to everyone that has commented in this threat so far. Your positive feedback has been great to read.
I hope everyone can use this mechanic to add value to their work. I'd love to see some examples!
Richard
Excellent screenr's and thanks for sharing the .story. I am certainly going to using this on my project.
Just curious, when you go forward from slide 1 to slide 2 (using next button) and then, if you go back from slide 2 to 1, there are two buttons showing on the first bar. Not sure, if I have to use "reset to original" or something like that?
Best regards
Jilo
GREAT piece of work Rich, lovely thinking here
I know I have seen it before, but did not really appreciate the build, very clever.
So young Jedi - what's next?
Once again - nice one.
Bruce
Maybe it's just me, but I can't access the source file. Anyone else having an issue?
Great work, Rich...this will be very useful!
This mechanic works really well for radial stuff as well (rotation, joysticks):
http://community.articulate.com/forums/p/25528/140274.aspx#140274
Thanks for sharing this Rich. It is really great work.
Rich just looked at your file this is different to the one I stole off you. You got the Selected state to function well done
@Jilo - Yes, I think just setting the slide to resume from initial state should solve the issues.
@Steve - I like the joystick idea. Not sure what I'd use it for, but I like it.
@Jonathan - Source file seems OK to me. If the file attached to the original post is no good, you can download it from the screenr link.
@Bruce - Thanks for the comments. Not sure what will be next. Might try to saw a woman in half, pull rabbit out of hat etc
@Phil - On the first slide i managed to use a button set to dictate the hiding and un-hiding of states which SIGNIFICANTLY cut down the number of triggers. Unfortunately I couldn't replicate the build and the button set performed erratically thereafter. Sad times. Will keep trying though.
What about using this concept for 5 or 6 "gear changes" for a menu.
You move to the next "gear" on a graphic, and it launches the next course section?
Bruce
The radial change mechanic could be used for rotating dials, multi-position switches, and potentiometers, etc.. in the case of a practice activity for equipment
@Steve - that sounds great - like the idea of using it to simulate turning dials on machinery, instruments etc
I had a play with Bruce's idea of the menu selector. Came up with this. I'll probably never use it, but it was fun for half an hour!
How hard would it be to have the slider set a variable based on the location the user places the slider? For instance, I want to have students rate themselves on how well they think they do on tests. I want them to use the slider to either select A, B, C, D, or F. Based on the rating I would then like to branch to other slides based on the response of the user.
This is great - thank you for sharing! I especially appreciate the lesson on how you did it, rather than just the file (though I appreciate that too!) because then it gets my mind going about the thought process and how I might customize it to our needs.
@Mark - It would be easy. Create a trigger that adjusts the 'SelfRating' number variable to equal 1, 2, 3, 4, or 5 (for example), then have the trigger activate when the state of each oval is 'normal'.
e.g. Adjust Variable 'SelfRating' EQUAL TO 1 when state of Oval 1 is Normal
@Kristin - I would have liked to show the whole process of making them, but alas I'm limited to 5 minutes on Screenr. I hope the file is easy to follow though. Let me know if/how you end up using this mechanic.
Rich... quick question about the variables. I was able to get it to assign a letter grade based on state of the ovals. However, one slight problem I see is that if a student slides over to F and then slides back to B it assigns the selfrating as 5 instead of 2. Thoughts on how to overcome this? Thanks!
Wow. This was fantastic - thank you so much for doing all the prep work and then providing the Screenr and files. I greatly appreciate your generosity!
Diana
This discussion is closed. You can start a new discussion or contact Articulate Support.