Audi A1 Big Idea Condensed
To see this fully working… and not just a static image – check out this page again on a desktop PC
Audi & BBH needed the campaign for the New Audi A1 to work in the digital world. This ended up in the creation of an iPad Wired app interactive advert and a set of rich media banners.
The main banners were a mix of expansions, pushdowns and superbanners in great placements across a range of high profile portals including Top Gear, the Guardian, the Telegraph, MSN, WhatCar? and Autoexpress – They all required bespoke compositions and animations.
View a selection of the executions
The Guardian Homepage Pushdown
My Involvement
Design, Animation, Interaction Direction, Actionscripting, Video Editing, Rich Media Banner Build/Development, iPad design.
And then I had the opportunity to work with Wired and make the Audi work I was doing work on the iPad in the newly launched Wired magazine app. The app is made using a new beta plugin for Adobe inDesign. I had to provide the animations and layouts in both landscape and portrait formats.
The system used is still in its youth and consequently quite buggy and limited so sadly we couldn’t get everything out of it that we wanted. But a very interesting experience to design for the iPad none the less.
Since then…
Following the success of this campaign; we were invited to create the digital executions of the next phase.
I proposed this mood reel to get across how we could bring the new creative to life while still remain consistent with previous visual and animation styles.
Which ended up being used in this
Dec 03, 2010 @ 11:02:25
Very nice man’ed. Is the inter-relationship between the animated bits in the expanded banner achieved by tweens or AS3?
Dec 04, 2010 @ 11:44:06
Thanks. The whole thing is actually AS2 due to site restrictions. All of the banners had to be built for flash player 8.
The inter-relationship of the objects is sorted with dynamic tweens. In this instance There are 15 different areas… so 15 different layouts. And as you roll from one area to the other all the objects tween from their last layout positions to the new ones based on the mouse position getting closer to a focus point of that area. Then the mini animations of objects are keyframed sequences triggered with hit test in certain areas. I would recommend playing with this tween library. http://www.greensock.com/tweenlite/. There is a AS2 and AS3 version. And it’s very widely used.
I think if it had been AS3 i might have used a mix of tweenlite and box2d – would be similar to this verson but would get a more reactive effect of the objects against each other. But that is another story.