Create an interaction to showcase the visual differences between two images using any technique you like to compare the images was the challenge for the Articulate E-Learning Heroes weekly challenge #100.   Here are the designs I came up with for this challenge.


Click on the image to view the demo

Using Articulate Storyline 2, one slide and one layer, a simple button click toggles between two photographic images – no explanation needed!  There was a bit of work on the animation which was a simple fade – I ended up setting the fade to 3.50 seconds in length to get the effect I was after.  I also worked with the images beforehand in PowerPoint to blur the edges.


Click on the image to view the demo

What came first – the chicken or the egg?  According to this interactive demo, it was the egg…


Click on the image to view the interactive demo

I created this interaction in Articulate Storyline 2 – firstly working on the images in PowerPoint.  The interaction showcases three different effects applied to the one photograph using one slide, with layers and triggers to display the different image effects.

This interactive demo was also created in Articulate Storyline 2.  The images I’ve used were edited in PowerPoint and Pixlr.  Each image is on a layer, with triggers added to the slider to display the edited image.

Click on the image to view the demo


Click on the image to view the demo

This then and now interaction was inspired by Matthew Lee’s heads-up on how to create a slider effect to look like you are pulling one image across the screen to reveal another image underneath.  The effect is achieved by using states for the top image.  I used 20 states and set each slider to end at 20, matching a state to each stage in the slider.  Each state was incrementally cropped until it disappeared completely at state 20, then I added the triggers to show each state as the slider was dragged.  To get a smoother effect I guess you could set more steps on the slider and add more states.

The inclusion of factual content adds context to the images and I can see how this type of effect would be useful in a number of areas of e-Learning.

Here’s a time lapsed video screencast on how I set up the 20 states.


Leave a Reply

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

You are commenting using your 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