This was originally briefed as part of a homepage takeover with multiple videos but as we’d done that quite a lot before, I recommended that we take sections of the video and turn them into a top-down driving game.
The car includes steering behaviour to move towards the mouse in a realistic way and each section includes an activity which can be interacted with: the ramp will allow the car to jump, the balls can be bounced around, the speedway will temporarily take over your driving and the paint splats will allow you to make your own Jackson Pollock.
This was an After Effects project where the butterflies were animated in 3D in After Effects and then animated onstage using swarming techniques to provide a more natural, wind-blown feel and a 3D camera to provide depth of field effects.
The syncing banners were then build for DoubleClick using AS3 with a custom set of classes to make managing the DoubleClick components and the syncing a little more efficient.
This was originally scoped as a Flash build where a group of characters would be constantly moving around in a house, interacting with each other and their environment. At any time a user could come and watch them and see how their favourite character was doing. Over time, the users would vote for their favourite character and the one with the least votes would then be removed from the house – it kinda sounds like a show that sounds a bit like schmig schmother, doesn’t it?
The scope was eventually broadened to include tablets and mobile phones so the choice was made to scrap the flash and move to a canvas prototype. Unfortunately, the project ended up getting scrapped due to a change of management at the clients but as a proof of concept, this was worth holding on to.
This was a front-end build using JQuery, LESS, FullPage.js, Masonry, font-awesome and Fancybox.
It was created with a view that it would be translated and rolled out across multiple sites in multiple languages by teams of multiple levels of seniority so it had to be created fairly simply and easily to understand.
On this Homepage Takeover, the MPU (300×250) polled the DoubleClick API for the Lat/Long coordinates and fed that to a custom-built weather API (that used the Met Office API) to return the weather in the area that the user was in.
This was then used to change the weather in the banner and the messaging to match. There were various animation techniques used for the weather effects – the storm / rain effects were particularly interesting as they used a combination of noise filters with vertical blurring to create the feeling of rain.
This was a fairly simple expanding banner with a neat skew/rotate trick to make the wheels looks like they were turning, however the client liked it so much that they decided that they would want to see it on their tablets as well so the scope was increased to include an HTML5 version.
The DoubleClick support for HTML5 was still in its infancy and this represented the first HTML5 expanding banner that Publicis London had done so it was all new ground. The results were very close to the Flash (there is a toggle between Flash and HTML5 just above the banner in the link).
This was an AS3 Flash build using PureMVC and Flash Player 10 3D transforms for rendering.
The chain of comments are fed by a server-side RESTful XML API written in Java (not mine) which is in turn fed by several syndicated Premier League feeds. This is polled every couple of seconds by the Flash application before updates are pulled through. Old games can be viewed using the same widget / service making a fun trip down memory lane for the truly hardcore footy fan.
The overall effect was to provide an almost teletext-style of feed for the user, but bringing it up to the modern day with interesting visuals and filters for the timeline
The Colgate Fashion Faux Pas has been archived here.
Note – the Facebook functionality has been removed for easy viewing.
Fashion Faux Pas was a Flash Facebook game where the user would disrobe an overdressed model in a video until she was left with a normal amount of clothing. The game was to do so in a good time and then share that with your friends on Facebook.
The app would pull the user’s data and choose different messaging based on the gender of the user (a date for the boys and a girls night out for the girls) and would also change the language based on the user’s Facebook language.