Chevrolet maps out a panoramic rich media execution for the tablet homepage to plug (in) its Volt.
Chevy is promoting its 2012 Volt hybrid (“Electric When You Want It, Gas When You Need It”) with a hybrid custom ad for Yahoo’s tablet homepage.
Built entirely in HTML5 by Yahoo!’s Homepage/Login Ad Tech team, the ad starts out as a humble 768 x 40 sliver dividing the top story from the rest of the page content. The moving car is a combination of imagery and code. The two wheels are a pair of animated gifs that were added to the car image, all of which traverse the sliver in seamless tandem thanks to HTML5. The sliver’s background image of the road is actually three images married together and animated in sync to simulate driving.
From here it becomes a fully immersive interactive experience with you in the driver’s seat. Upon pressing the power button to start the silent engine, you zoom off on a road trip that takes you across myriad landscapes, from desert to the wintry mountain variety before finally arriving at the beach just in time for sunset.
The ad also accommodates both the portrait and landscape views. This required double the amount of style attributes in the CSS3 that compliments the HTML5 so that the relative positioning of the ad’s components remain consistent.
The little map along the bottom, also HTML5, is much more intricate than it appears at first blush. What looks to the lay driver as a simple two-dimensional map tracing a linear one-way route is in fact several layers of imagery married together. The background, the animated battery and fuel gauge gifs, the line on the map, the little disclaimer text, the dark gray filling the map in time with the video: Each represents a separate standalone part on the assembly line.
The whole point of the simple yet complicated map is to convey how far the Volt can take you on its combined energy sources of battery and gas.
Carousel and Wallpaper
The end of the road trip sees the ad turn into a carousel to show off the Volt from no less than eight different angles, each with a handful of buttons on certain parts of the vehicle. The user can tap each button to get information about that part of the vehicle before using the arrows on either side to rotate to another view.
This part of the ad was built with eight separate PNG images of the Volt provided by the agency. In the beforetimes, when a rich media execution like this would’ve been built in Flash, adding those buttons would’ve been cake. Flash has button states, and a button is a very common Flash object. With HTML5, however, the Homepage/Login team had to build the buttons manually in the code, complete with the correct size, sheen, opacity, and positioning.
Clicking “Download Wallpapers” brings you to the wallpaper gallery, the final interactive portion of the ad. Here the user can browse and shuffle the images while deciding which to download. Tapping any of the three images along the bottom pushes it to the larger top pane. Tapping that enlarges the image even further with download instructions that the team added manually. The HTML5 allows for the shuffling animation and keeping track of which image is where as you tap along.
Photoshop Assembly Done in a “Flash”
Before HTML5 even entered the equation, quite a bit of digital factory work had to be done. To convey what they were envisioning as the final product, the agency provided a 1600-pixel video of a user interacting with a Flash version of the ad. The video was shot with a fisheye lens to simulate the panning.
The agency also provided the creative assets with which to build the ad in the form of two Photoshop (PSD) files. When comparing the assets to the video, the Homepage/Login team discovered that the assets were only about 75% complete. When using PSDs to build Flash events, it’s a common habit to make changes on the fly in the Flash without reflecting those changes in the original PSDs.
Among the changes were the buttons for replay and download. Quite a bit of the copy, such as the legal disclaimers, had been changed. The wallpapers had to be recut to three different sizes: Icon, medium, and the large downloadable image.
Among the biggest hurdles was creating a portrait version of the ad, as the original Flash file only showed landscape. Two faux tablet screens, landscape and portrait, were created in Photoshop. The Homepage/Login team kept the original video handy to ensure accurate image placement and layering.
The map alone required two separate files: The road on the light gray background with the filler portion cut out, which allowed the dark gray filler to be coded in HTML5 as a mask timed to move off the image at a pace equal to the video’s progression.
The map’s pop-ups are comprised of another four images: The battery and gas meters, both animated gifs, each parked in their own respective containers, all timed with the video with very specific instruction on timing. Due to legal reasons, the battery icon was only to remain for 1/10 of the route before flipping to the gas icon. Hence, the Homepage/Login team had to keep the brakes gently pressed at the start of the map animation to give user time to read the battery’s associated copy.
Each of the buttons used in the eight-sided carousel was a separate PNG file. Photoshop was used to resize and set the correct opacity and transparency. For the most part, 80% opacity was used (20% transparency).
During this Photoshop construction, the x and y coordinates had to be documented, as that’s vital for the HTML5 code that came afterward.
With the assets in place and perfectly layered, the manual HTML5 work could begin. It was a long and arduous road trip to be sure, but the result was worth it. The Chevy Volt tablet ad takes its place on the showroom floor as a superlative example of mobile display advertising. It opens the driver’s side door so the user can get in and take a spin in a fun, visually rich, interactive vehicle of digital craftsmanship.
Special thank-you to Jonathan Zing and Patty Spyrakos from Homepage/Login Ad Tech for providing the details about the ad. They built the ad in cooperation with Lloyd Rivera, Campaign Manager for Homepage/Login Ad Tech.
Click here to jump in and drive.
---Thomas T. Lady