Create a chronological timeline for Marvel’s Cinematic Universe* (movies, TV shows, short films, and streaming shows). Besides arranging the installments in a sequential order, I also wanted to add an element of interactivity to further engage the user experience. Short descriptions for each must be used as well as using iconography for each major character or team of characters.
I first began by ordering the MCU contributions in as best of a chronological order as I could. There is some overlap with a few of them and as with the One-Shot and TV series of Agent Carter, the two just don’t make sense together.
Next, I gathered stills from the episodes and movies to use for each one. I decided on a circular icon for each because it seemed to be the most aesthetically pleasing shape to use in this case. I then both converted existing icons and created custom ones using Adobe Illustrator and Photoshop. To show both the icon and image together I came up with the idea of the image fading in behind the icon as it nears the middle of the screen then fade back out as it exits the screen. Because I would need to create a separate image for each change in opacity (I chose a 3% step-change), I taught myself through research and asking questions in forums how to create a custom Photoshop script that would adjust a layer’s opacity, then save that file with a specific name to a specific folder. This script saved me an immense amount of time.
The change in position and opacity of the icons and images would then be controlled by the user through the use of a slider. For this reason, I decided to develop this using Articulate Storyline 2 because of the simplicity and ease of the slider widget. The slider seemed to work fine at first, but it quickly became known that there was a lot of work involved. Because there were so many opacity changes (individual images), hundreds of object states and triggers were necessary to make this work and for the slider transitions to appear fluid. I looked at different options and chose to stop using Storyline for this project and use Adobe Edge Animate instead. Edge Animate would still allow me to publish to the web in HTML5.
After making the switch to Edge Animate, production went so much more quicker and gave me a far better product than what Storyline was providing. I was able to find a tutorial on the web that explained how to create a slider and control the timeline with it. The opacity changes worked so much better too because you can use keyframes to change properties instead of having to load separate images.
The final stage of the process was to write up the summaries. I gathered most of the summaries from imdb.com and tweaked them. I decided to connect them as well to the timeline slider and make them scroll in the opposite direction from the icons. And then finally, to inform the user where they were at in the timeline, I added smaller versions of the icons on both sides of the slider and then animated their opacity, highlighting the icon that was being shown on screen. I then created a custom preloader using rotating icons, first creating an mp4 video in Adobe After Effects, then converting it to an animated gif in Photoshop.
The final product is best viewed on a device with a minimum screen resolution of 720 x 1280. I intend to look into making this both responsive and adaptive in layout, possibly using media queries to detect device screen resolutions.
*At the time this was made, only Phases 1 and 2 of the MCU were released