the idea.
A Prius drives onto the screen. It pauses for a moment, but you can tell something’s inside, waiting to show itself. Suddenly, the top of the car cracks open. Like a flower, the car’s sides fall to the ground, and something emerges from the opening. Dirt, grass, spores — an entire world was contained within the Prius, and it’s now coming to life before our eyes. In the distance, mountains form, a cityscape forms, a road builds itself like a snake. And then, the hero emerges — a Prius drives along the road and comes to a stop. Welcome to the 2010 Toyota Prius features demonstration.
The site contains five environments for five key areas: Exterior (rolling hills), Interior (beach), MPG Innovation (test lab in a field), Technology (street), and Safety (mountain pass). Each environment contains two features, and each feature contains an overlay allowing the user to interact with the feature, as well as callouts placed around the car — rolling over these callouts reveals product information. There are also demo videos available for each feature, momentarily taking the user out of the magical world and providing detailed real-life info.
the build.
The way I see it, there were two ways this site could have been built. We could have created a big ass video with various cuepoints (or something similarly non-optimized and bandwidth-hogging), or we could split the site up into individual, sharable components. We chose to be smart about it from day one.
A key directive from the client was loading time — the site must load as quickly as possible, with as little section-to-section pauses as possible. To accomplish this, we used BulkLoader and some homegrown code to implement a smart loading strategy:
- When a user first comes to the site, only assets that are immediately necessary — the preloader, interstitial loader, fonts, and first video intro — are downloaded.
- The video intro plays, and the site starts to download all other assets. The site contains ten features, but instead of downloading feature by feature, the site downloads assets across all features, since each one has an equal chance of being clicked on by the user.
- If the user spends awhile (10 seconds or so) on the homepage, the entire site can be downloaded, given sufficient bandwidth.
- If the user immediately chooses a feature, or at any point chooses one before the overall download is complete, the download list changes — items necessary for the chosen feature jumps to the front of the queue. An interstitial loader loops until that download is complete.
- Furthermore, each feature’s asset list is optimized. Assets that are absolutely necessary (i.e., the environment unfold, the car driving into scene) are downloaded first, and the site begins to play those assets as soon as possible. During play, additive elements (a tree, a flower, etc) are downloaded, as well as the infographic overlay allowing users to interact with the feature.
This methodology eased the production process. When a new asset was received from our 3D vendor, we could render it out, convert to FLV, and integrate into the site relatively quickly — without needing to constantly recompile Flash or make significant code changes.
The site’s architecture utilizes PureMVC. While sites not built with the MVC pattern make my eyes bleed, we’ve never used PureMVC specifically here at EVB. I am very glad we did. It allowed us to:
- Split code responsibilities across two programmers in a very simple way.
- Concentrate on writing small methods, knowing that communication between methods was already taken care of.
- Take advantage of a well-tested, well-known framework — reducing QA time.
The only timeline-based Flash in this site is the interactive overlay in each feature — and even that is controlled by code.
Two external XML files contain all data necessary for the site, including:
- Video assets
- Download queue prioritzation
- URLs and IDs used internally
- Positioning
- x,y for all assets
- x,y for callouts
- Copy
- Callout copy, interactive overlay copy, button names, legal disclaimers, footer text and links
- Tags
- Unique Omniture tags for each interaction, as well as trigger strings that match internal notification strings
the collaboration.
This project was not a traditional production gig. From day one, we worked hand in hand with the spectacular creative team at Saatchi LA to flesh out the concept and ensure that the final product worked with the other parts of the integrated campaign. We spent time working with SSLA in their offices, and they returned the favor.
We worked with Laika to develop the 3D world based on our creative.
key technologies.
PureMVC-based AS3, with BulkLoader, IMap and HashMap, Flint particle system, TweenMax, SWFAddress. Maya and AfterEffects for all car assets and environments. JavaScript and XML for usage tracking. SWFFit.
team.
- Stephen Goldblatt, Executive Creative Director (EVB)
- Scott Huebscher, Interactive Creative Director (Saatchi)
- Steven Knodel, Senior Designer (EVB)
- Nick Luckett, Art Director (Saatchi)
- Eric Burnett, Copywriter (Saatchi)
- Enrique Camacho, Designer (EVB)
- Brad Griffin, Technical Lead (EVB)
- Tim Kautz, Flash Programmer (EVB)
- Husani Oakley, Director of Technology (EVB)
- Matthew Newell, Senior Producer (EVB)
- Tina Gongsakdi, Senior Interactive Producer (Saatchi)
- Mike Merit, Account Director (EVB)
- Andrew Walter, VP Content Delivery (EVB)
- Kirk Kelley, Director (Laika)
- Zilpha Yost, Producer (Laika)
The site looks and works great. It’s cool to get a look at the behind the scenes strategy and concepting to make this come to life.
Hey-
Your browser sniffer thought I was using IE6 but was using IE8 on XP. Just fyi.
Your work is fantastic.
Dave