SPACE 66 LONDON
CONCEPT • DESIGN • MOTION • CODE
Once the final assets came, the deadline was very tight, but the concepts were confirmed and most of the heavy background work done, it was time for animation.
Creating 150kb exciting animations with super high quality images and multiple layers turned out to be more difficult than predicted.
Taking in mind the nature of the campaign – promote an event – and the content, the idea of making interviews for extra content seemed natural – specially when tied up with the whole film. The concept was quickly adopted, and the video production agency was briefed to create special edits for the banners
Using video as intro seemed to be a great way to intro the ad, and then we created custom video edits in After Effects for the banner. It would then fade to a static end image, and then be added with more layers, creating a parallax effect – to fit better on the Design.
After the concepts were approved, some time was spent on UX thinking, which enabled us to get to a working template very quickly in build. The design had a lot of revisions, but the main interactive design was used throughout the campaign.
Animating all the layers and assets was a mission, but interesting was that by using CSS, some of the assets would animated automatically when the ad would expand smoothly.
When the ad expanded, it showcased a youtube player and the user could select which video to watch. This template was used in other three similar ads.
This is a relatively new format in DoubleClick. It is an ad that would fill the screen of the user device. The idea was to show the main TVC on the ad and the messaging as well. For this the ad needed more or less 4 different designs – tablet and phones, landscape and portrait.
All needed to respond to rotation and different OS etc. Of course it was a bit too crammed for the iphone, so in this case, the video would go full screen, and on the end, the message would play.
A lot of configuration, and again, many layers, but it did look good.
150kb with intro animation and very customised animation. Not a very easy challenge.
Tweenlite was soon discarded – but happily replaced by nanotween. With the easy access to Blur filters and translates, it would be the best option anyway.
Animation for Standard Ads
The intro animation had so many layers and had a parallax effect. The copy animation needed a lot of impact, so not such an easy task to try in code. The whole master mpu was first approved as an animation made in After Effects.
The problem was to recreate that in HTML5 – minding file-size and file-count optimisation.
A lot of spritesheets, super scaled assets as clouds, and many old Flash tricks. The result is really good taking in consideration the image compression.
Devil May CryFull Digital Campaign
Project Cars 3Display Ads Campaign
Pokemon Trading CardsSocial Media Ads
Poker StarsHTML5 Campaign
Pokemon GoSocial Media Ads
FidelityAnimated Infographic Videos
FSI InvestmentHTML5 Ads
JP MorganHTML5 Ads
Tesco MobileHTML5 Ads
Old El PasoDigital Campaign
Magic FMDigital Campaign
Tesco and SamsungSocial Media Videos
Baywatch FilmSocial Media Videos
ALL RIGHTS RESERVED