This is my last blog post about Storyline sliders…ever…I promise! Since sliders were introduced in Storyline 2, I have used them to slide/move all sorts of things, from 3D models, large images, to videos. I feel like I covered this topic end-to-end, and then some.
Someone had sent me a link to an article this morning with ‘before & after images’ of the Berlin Wall. He asked if these types of sliders could be done with Storyline and, if yes, how difficult it would be to implement. “Of course this can be done”, I replied. Then I made myself a coffee and set out to recreate one of the sliders shown in the article. It couldn’t have been simpler. One of the images is simply the thumb of a slider that sits on top of the other image. Finito, done, stick a fork in it.
No triggers, no layers, no variable gymnastics… nothing. Just a single slide with an image and a slider with a transparent track and an image as the thumb. The hardest part was to extract the images from the article’s URL and to create the transparent drag handle for the slider.
I purposely switched the order of my images, just to prove that I’m not cheating by simply showing the original slider in a web object. My slider doesn’t exactly mimic the online version in that it moves the top image rather than revealing/hiding it as the slider is moved. But I proved my point and stuck to the ‘one-coffee’ time limit! I even had time to do a second, slightly different version.
Besides the fun factor and nice visual effect, this type of slider could be useful in training as well. Imagine a course about a digital camera with all kinds of filter settings. A slider could be used to show a picture with and without specific filters applied.
Edit 09/24/2015: For weekly eLearning Challenge #100, I stuck with the ‘Berlin Wall’ theme and just put a slightly different spin on it. I had seen a nice interactive map in an online newspaper and thought it would be easy enough to recreate. Nothing fancy here, just an image object with two states that is part of a group. The group is moved up/down/left/right with simple motion path animations and a bit of math.
Edit 09/29/2015: I went back and redid my original Before&After slider. I never really liked how my first two attempts had turned out, so here is a third version with an effect that (I think) is much closer to a Javascript/CSS-based slider. Instead of MOVING the Before image, it now REVEALS it, based on the slider position. Here is the .story file for download.
Edit 10/01/2015: And finally, here is a German version of the same slider. Here is the .story file for download.
How exactly did you accomplish this? I’ve been trying to figure out a simple way to do this, and you seem to have hit the nail on the head!
In the second version, which I think is easier to implement, the entire image (before pic, after pic and the vertical line of what looks like the slider) is the thumb of the slider. You can change the fill of a slider thumb to ‘Fill with Picture’.
I really like this example. I was able to recreate the first concept that you explained. But like you, I like the second, more refined version better. Are you able to provide the Storyline file that I may be able to take a look at how you accomplished it? Please let me know. Thanks!!
Hi Michael, just like Hollie, I am unable to get the effect you have created on the second version (wipe rather than move). Sincere hope you can help me on this. thanks
Daniel
In version 2 of the slider, I simply created ONE wide bitmap that contains the before pic, the after pic and the vertical slider indicator. Then, I added this bitmap as a custom thumb to a slider.
Hi Michael,
Thanks for your reply. Yes, did exactly that. Can only get the MOVE effect but not the WIPE effect. when i slide the thumb, say to the left, the AFTER photo comes in showing the left edge of it. In your example, it actually shows the edge where the slider indicator is…(the wipe effect).
Many thanks.
Daniel
could it be that they are in states, just like the car door slider?
Can I ask how you made the 9/29/2015 version?? 🙂
In this version, the Before pic has states that represent slices of the images. Based on the slider position, the appropriate state of the image object is displayed.
Thanks Michael! I actually spent some time last night and was able to figure it out! But I’m pleased to know I had deduced it correctly! 😀 Thanks again!
Hi Michael,
I know you are saying what you’ve done, but I can’t visualize or duplicate the wipe effect. Do you know if there’s a step by step, or recorded tutorial for something similar that I can reference? I haven’t found one yet. Thanks!
Hi John, I haven’t seen a tutorial for that type of effect. You might want to check the eLearning Heroes community (https://community.articulate.com/discuss/recent-activity) for slider-related info and/or post your question there as well.
Will do, just wanted to check here first. Thanks!
Hi Michael,
I’ve recently been doing a number of complex slider interactions and the problem I keep coming across is no matter how high the resolution image I use I end up with a pixelated low resolution version when it is applied as the thumb of the slider. Is there a simple trick that I’m missing here?
I wonder if that’s a question of dimension, rather than resolution. I always make sure that the dimensions of the thumb match the image dimensions.
Thanks for the quick response. Unless there is another way to do it, within the slider tool format panel I select the Thumb Fill drop menu and select “Picture…” and when it first places the image it is tiny, even though I save the image file out huge in photoshop. I might just be missing something.
(so when I resize the thumb image to make it as large as the slide it becomes pixellated and fuzzy)
Pingback: Before and After (#100) | Larch Learning Solutions