Captain America: Interactive Shield

Previous Project Next Project

Main project image

The Brief



"... it looks really good! [It] makes me want to go see the movie (which after working on 700 sites & games for the same film is a MAJOR accomplishment)."

Melanie Blair - Raben Media

Alongside Littleloud's arcade-style Flash game project tie-in for the Captain America - The First Avenger release, the agency were invited to pitch a more offbeat digital experience with which to promote the movie. The resulting tender was an interactive guide to the film's characters and set-pieces, told via the theme of scanning the 'battle scars' of Captain America's shield to unlock its memories.

Initially, the idea revolved around the online database of fictional organisation S.H.I.E.L.D., and its leader Nick Fury discovering the shield in modern day times and learning about its past. I drew up the initial pitch mock-ups with this in mind, essentially designing a computer desktop and slick OS to deliver the content. But with Nick Fury being revealed only at the very end of the movie, and with the digital project due to go live before the film's release date, the client made the decision to remove the Nick Fury/S.H.I.E.L.D. spin to the piece for fear of spoiling the experience for movie-goers.


The pitch visuals incorporated a number of components that would flesh out the world of Captain America and would provide some interesting UI challenges. Ballistic graphs and weapon schematics worked well to sell in the idea of what content could support the movie release. When the work was secured, the content was standardised to include a short video clip, a biography and downloadable wallpapers for each of the film's main characters, linked to a hotspot on Captain America's shield.

One of the pitch visuals selling the idea in to Paramount.

Red Skull's "battle scar" in another pitch image.

The final pitch mockup, showing Peggy Carter's character.

It was this shield, rendered in Lightwave and then composited into two FLVs (one scrubbable forwards, the other backwards) that necessitated some careful optimisation of my UI design over the top. Initially I used a very clean aesthetic of black bars and crisp white typography, but as the project unfolded, the client wanted us to bring our visuals a little closer to the official site for the film, which incorporated a lot of gritty textures.

A finished battle scare layout, with video clip, biography panel and downloadable wallpaper.

You can clearly see the grittier textures incorporated into the final build.

The hidden section, accessible only once the viewer has discovered all battle scars.

One thing that changed very little and which the client was happy with very early on was the glitchy animation style - achieved with some bespoke keyframe animation in Flash, and judicious use of blurring and skewing techniques to get across a computer system that was malfunctioning, or coming across classified content from this ancient shield artefact. With the animation style settled on early, we had enough time as a studio to populate the content and squish the bugs, of which there were many in such a complicated Flash build.