Client: Nissan          Agency: TBWA

Having been weaned on digital advertising campaigns we've been waiting for a brief to come in that lets us stretch the legs of HTML5 and see how it holds up in comparison to the halcyon days of flash. 

The "Have it all" campaign created by TBWA london gave us exactly that. 

We were tasked with creating a set of bespoke syncing ad concepts based on the Sizmek ad platform. The greatest challenge was bringing together the component parts and discovering how to enhance them to create the most impactful visual experience and push the formats as far as was possible.

So how did we go about making these ads? 

With no flash we found ourselves leaning on a much wider number of applications in order to achieve a dramatic impact, whilst working within the practicalities of creating an HTML5 ad.

After doing a great deal of research and project planning with our friends at carnival of wolves and after evaluating a number of specific HTML5 animation tools we decided to use, Sketch for layout and composition, C4D for 3D generation, After effects for the animation sequences and VFX and finally into Adobe Edge for compiling. 

process_pt1process_pt1

A few of the ads required some fairly involved animation techniques for which we decided to use Cinema 4D to generate real world environments and elements. Taking these elements into After effects we were able to construct a structure which mirrored the publisher sites, enabling us to make sure that any animation appeared to flow across 3 separate ad units. 

These animations were then cropped and exported individually to each of the Adobe Edge master files.

The final piece of the puzzle was to use a gulp.js to automate our workflow and overcome a few of the inevitable limitations of using Edge as a compiler. 

 

process_pt2process_pt2