It’s the 100th Articulate eLearning Heroes Challenge. I can’t believe how quickly the time has passed since the challenges began. I’ve lost count of how many challenges I’ve entered, but I’m guessing that I’m close to a 50% participation mark. The task this week was to create an interaction to visually compare two images.
Last week, I went to the first meeting of the Toronto Storyline User’s Group, one of the presenters was Michael Hinze. He showed us an amazing slider interaction that he built using images of a sports car. When the slider is moved, the doors of the car open upwards. I began to ponder what other applications I could use for this interaction. I thought that a time-lapse image would lend itself well to this treatment because the subject matter wouldn’t move very much. I found a time lapse video online of flowers blooming. I knew that this would be perfect for this challenge.
I downloaded the video and trimmed it in Premiere Pro so that I was left with a short film clip of just one flower. I imported the video clip into Photoshop using the command File>import>video frames to layers. I chose to limit the images to only every third frame, this gave me a total of 34 slides. I inserted the first image into Storyline and then saved the other images as states of that initial image. I made triggers that changed the state of the image every time the slider was moved a step.
I used a time-lapse video for this project, but I could also get a good effect utilizing any video, as long as I used Photoshop to split it into frames. I think I’ll try this interaction with some other videos and see what I come up with. The one thing that I would probably change about this project is that I would lower the image resolution so that the file is not as big and slow loading as it currently is. You can see the finished product here.