The E-Learning Heroes website is an invaluable tool for a developer; problems can be solved and new ideas shared with a large global community. This is why I often participate in activities on the site.
One feature of the site is the E-Learning Heroes challenges. Each week it hosts a new challenge for members to participate in. The challenges are based around development solutions and new ideas. This week’s challenge was to show a ‘before and after’ transformation between two images, via the use of sliders, toggle buttons or switches etc. As a developer you are actively encouraged to be as creative and imaginative as possible, there is no wrong or right way to do it.
I have seen comparison photos between one place in its past and present state many times. The images I was looking for had to be in identical positions for the transition to be most effective. They also had to be taken a number of years apart.
I decided on these two images for the challenge:
These two photos show the difference between a present day and 1940s Morton-in-Marsh and, as you can see, they are taken in identical positions.
As the user will be effectively fading between 2 images, I wanted to play on the fact that the user is travelling back in time. There are a number of ways I could achieve this from automatically fading the image, to using a button as a switch or using a slider to merge the images together. I chose the latter.
To help the illusion of travelling back in time with the slider, I decided to customise it to look like something out of an old fashioned time machine from the movies, so I sourced an image of a brass plate and a leather handle for the new look slider.
By default, the slider in Storyline is horizontal, so I rotated it to make it vertical. Making a custom slider is easy, it’s simply the case of importing an image for the Thumb and Track fills. For my example it was the handle image for the Thumb and the brass plate image for the Track.
Once the slider was ready I imported the Past and Present images into Storyline. To make the transition between the Past and Present image as smooth as possible I used States.
I created 100 different states of the Past image in total. For each state I set the transparency for the image from 100% to 0% depending on the state. This was a very time consuming task but worthwhile and a much more efficient way than importing 100 different images.
Once I had set up the states I proceeded to create the triggers for the slider to control the states. In total I had to create 100 triggers to align with the 100 images states I had previously setup.
With all the triggers setup, it was time to test it all worked.
It worked perfectly and the time spent setting up the triggers and states was worth the effort, creating the smooth transition I was looking for. However, I wanted to add another dimension to it with sound. I wanted to show just how different the noise levels were in modern day life compared to how they were 70 years ago. I managed to source 2 sound clips, one which had the ambient sounds of traffic and the other which the ambient sounds of birds singing, church bells ringing etc. just the typical sound of how a quiet village 70 years ago might have sounded.
The next step was to create triggers to play the relevant audio file depending on the position of the slider.
Adding the Title
Now that I was happy with the audio, there was one more final thing to add. Although it’s obvious to the user which image was in the past and present I felt I needed to further reinforce that with a title. I designed the present day title to have a modern font, whilst the past title’s font was more in fitting with the wartime era.
I enjoyed my first E-Learning Heroes Challenge because it forced me to think outside the box and tackle a task I probably wouldn’t do in my day to day job. However the techniques and principles learnt are something that I would be able to apply to future projects, so that in itself made it worth the while. Plus, it’s always interesting to see how other people approach the challenge with their own unique ideas!
You can see my final version here.
Phil Eagles, Senior eLearning Developer, Bray Leino Learning
In my series of blogs I’ll talk about the components of eLearning design and development.
Copyright © 2017 Bray Leino Learning