‘Site of the Day’ winner at Adobe and Favourite Website Awards, also a runner-up at Creative Showcase.
I was asked by Tribal DDB to create this multi-award winning games site for a joint campaign between The David Beckham Academy and Volkswagen.
Play the game here
I used filmed action of Beckham himself and the video alpha channel support of Flash 8, which was rather new at the time. I was consulted on all aspects of filming and production. After we agreed game concepts, I met with the film crew at ‘Off The Radar'; I drew up the shot-list and we decided to shoot on HD at 50p, to get the cleanest possible key.
- Panasonic VariCam
- Green screen at the Flash Studio Norte, Madrid
- After Effects
- A football
I went to Madrid for the green screen shoot with Beckham as visual effects supervisor and was responsible for treating and editing the footage for game production and related media.
I stitched some of the sequences together with morphs to create almost seamless blends between shots and added filters to the keyed out footage to match lighting and improve the compositing.
I coded a 3-D projection system in Flash and perspective-matched each scene, so that objects move around the screen convincingly. I worked with the designers at DDB, who created the backgrounds and UI elements. I included ‘Express Install’ capability for those users without Flash Player 8, so 95% users can upgrade painlessly from Flash Player 6 or 7. All the games are mouse-controlled and were tested by kids for usability and game balancing.
I thought I’d give a quick insight into how the animation effects in one of my projects were acheived.
Scott Bedford, former Creative Director at Carlson Marketing, posted this video of a project we worked on a while back, for the Lurpak Breakfast campaign. I created all the animation prototypes for the various effects used throughout the site, some of which can be seen here. The site won two DMA awards, but I’m most proud of the crumbs animation and the code-generated interactive steam effect – similar to the one you’ll see on my homepage.
- Crumbs animation. 1000 Bitmaps random position themselves until around the edge of the bread mask shape, animated with simple mouse interactive physics – force, velocity, momentum and friction all tweakable
- Steam effect. Perlin noise moving through another perlin noise BitmapDisplacementFilter, to which user generated displacement can be applied, then all blurred
- Egg Timer animation. Particle system with basic physics and just a draggable mask
- Do Not Disturb tag. Maths-based animation for the swing only, the rest is old-school timeline animated
- Fry-up triple banner. Three banners synchronise object positions/velocities using LocalConnection to send packets with a TTL applied to avoid a feedback loop
- Spinning letters. TextMetrics used to break a populated TextField into separate letters, each one animated into a simple 3-D engine I knocked up, with simple physics used to achieve the swirl motion
- Hang-over breakfast. Just a blurred mask, though I prefer my version from my original – alpha a blurred copy of an image over the original for a proper hazy effect
- Other animation. Uses a combination TweenMax, maths and frame-by-frame, e.g. pancakes, bedroom door
- Not mine: Wise-crack banner, breakfast tray messenger banner, down tools drawer, coffee bean counter, flapjacks, emails
I just finished a new project, called ‘A History of the World in 100 Objects‘, it’s a joint venture between BBC Radio 4 and the British Museum to chart human history in a new way. I developed the concept for the 3-D object explorer with the guys at GT/VML and built it using Flash 10’s native 3-D capabilities. Users are able to explorer objects from throughout human history in a potentially inifitely expanding 3-D time tunnel and even make history by uploading their own objects.
Here’s some footage of the 3-D explorer:
The main challenge facing the development of the 3-D explorer was to build something capable of handling up to 10,000 objects, loading in their images and displaying it all in glorious 3-D… all without crashing the user’s browser. Every object or filter set accessible within the explorer can be bookmarked, shared, or navigated with the browser back/forward buttons. For added accessibility, the explorer’s 3-D view itself can be navigated with the keyboard, mouse wheel or the on-screen controls.
I built the application strictly to optimise performance and memory management, while ensuring maximum stability. Coding techniques such as object pooling, typed arrays, load queueing, render deferral and the flyweight design pattern were used to maximise performance and minimise memory usage.
I don’t usually make banners, but made an exception in this case because it involved doing some challenging code-driven animation. The result is quite nice and won some awards appparently, including NMA Capmaign of the Month.
The line dynamics itself is just Hooke’s law stuff – basic physics. Took some experimentation to get a smooth curve drawn through a series of points (basicaly, the control points of your previous and next points need to be in line).
The cars follow one of the line’s points with differing elasticity and damping, but the real pain in the backside was drawing the dashed line.
Luckily there were some tutorials about this and I found by moving the first drawing point up-screen it creates the animated effect – job done! Check it out on Bannerblog.