Image Magnification using Storyline Sliders

image magnification using storyline sliders
Click on the image to view the interactive demo

Sliders are one of the elements in Storyline 360 that you can work with to incorporate interactivity into your e-Learning course.

The standard slider look and feel is predictable and if over-used, not terribly engaging (in my opinion). However, with just a bit of imagination you can customise the standard slider so it still functions as a slider, but isn’t recognisable as a slider.

the inspiration

More often than not my designs start with something I’ve come across that inspires me.

My inspiration for this demo was initially a design Tom Kuhlmann wrote about in this post. After reading Tom’s post and watching his YouTube video, I randomly came across this image and then I knew I had to try and develop this design out combining these two inspirations. Thanks Tom!

Of course, the additional inspiration provided by the Articulate e-Learning Heroes weekly challenge #226 was there as well – which was to “share a solution to allow learners to zoom in or magnify parts of an image, graphic, document, or video”.

the process

After I’d chosen and inserted my three characters, I added a slider to the slide. Next, I selected the slider, then chose Slider Tools tab – Format – Thumb fill – Picture, then navigated to and selected the magnifying glass picture I wanted to use.

I needed to work with the size of the thumb and the slider track to fit this to the screen and align it with my three characters. I also changed the Track fill to no fill and the Track border to no border, oh – and that pesky thumb border to ‘no border’ as well!

From there, it was simply a matter of working with the usual Slider tools settings to get the desired result. Because my slider was set up to work from right to left, this meant setting the Start at 3 instead of the usual 1 under the Slider tools – Design tab.

The image magnification part of this demo was a little more involved.

Because I wanted the magnified images to appear exactly as if they were being magnified, I took screenshots of each of the characters with the slide background. I then changed the picture shapes to round and resized them so they would fit within the magnifying glass frame. A little bit of adjustment on the placement of the characters and the round images to align with the slider positions was also needed.

I originally set up this design with a ‘click to reveal’ element once the slider had been dragged to a character, but abandoned this for the final version as I didn’t feel it added anything to the design, but actually complicated it a bit because then I would have needed to add instructions to ‘click’.

The rest of the process involved setting initial ‘hidden’ states for the magnified images and adding lots of triggers to change the states ‘when the slider moves’. Because I needed the magnifying glass to be in front of the images, all of this was done on the base layer of the slide. The speech bubbles were added to the Normal state of each magnified image which made the setup easier than using layers as no extra triggers were needed.

fine-tuning

When I’m working with sliders, I always set that trigger that addresses the situation where the slider can be dragged back to the starting position. In this case, this was simply a case of setting up a trigger to change the state of each of the magnified images to hidden ‘when the slider moves’ and is equal to 0. Without this, in this demo, the speech bubble and image of Claudia were still visible.

I also didn’t want the information icon with the instructions to be clickable when any of the images were magnified as this interfered with the speech bubble placement on the screen – plus I figured that if the learner has already read the instructions, or realised that the interaction was to drag the magnifying glass and had already started doing this, they wouldn’t need to click on the information icon…so I added two triggers, one to change the state and hid the text if the slider moved off the starting point, and one to change the state to disabled (so it can’t be clicked on) if the slider wasn’t at the starting position.

the result

As with most projects I get inspired to work on, the time spent on this demo was in the learning. There’s always at least a couple of ways to achieve the same result using Storyline 360 and knowing how best to set things up varies for every project.

Overall, this demo may look simple enough, but that’s always what I hope to achieve – an interface that is uncluttered, but functional.

Obviously this development could be taken a step further for practical use – for example, the addition of click to reveal elements could be added to the speech bubbles to reveal more information about each character.

How would you see this type of interaction being of value in an e-Learning training context?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s