Call of Duty: Modern Warfare 4

Llama is a creative agency in London. They brought me in to make the animated display banners and social cuts for Call of Duty: Modern Warfare 4. I shaped the creative routes from the key art they supplied, animated them, built them and delivered everything ready for the ad servers.

Everything below is live. The banners are the actual HTML5 builds, not recordings. Hit refresh on any of them to watch it again.

The brief

Promote Modern Warfare 4, with the hardware callout secondary but clearly visible. Premium, cinematic, atmospheric. The game stays the hero and the hardware supports it rather than competing with it.

Two formats to start, the 300x600 half page and the 970x250 billboard. Two creative routes. First banners ready by the end of the week, because the client was seeing them on Monday.

Then the mandatories, which aren’t optional: PEGI 18, the legal lines, the game logo and the call to action. All of them legible at final size.

Route one: Tactical Scan

It opens almost black. A bright line cuts across the frame and the artwork is revealed behind it, like a scan passing over the scene.

The line and the reveal are driven by the same single value. That sounds like a small thing. It isn’t. If you time two separate animations to match, they drift apart by a frame here and there and the edge looks cheap. Tied together, the line sits exactly on the boundary on every frame.

The logo and the button arrive as the line clears them. I worked that timing out from the easing curve rather than nudging numbers until it looked right, so it stays correct if the scan speed changes. After the sweep a flash settles out of the art, the background pushes in slowly, and the soldier in the middle pulls back while the two either side come forward. Then the hardware panel opens from its own centre and three platform packshots drop in, one after another.

Route two: Night Vision

The second route started out as Digital Smoke. A layer of smoke and interface graphics covering the scene breaks apart into strips from the centre. Every strip used the same image, just shifted, so it cost nothing extra in file size. I built it in a few variations before Night Vision took its place.

Night Vision opens as if you’re looking through the optic. Green interface graphics flicker up and the reticle snaps onto each soldier in turn, then holds on the lead while his loadout reads out. Snapped, not glided. It’s a targeting system.

At 1.6 seconds the optic cuts out with a flashbang and the scene lands in full colour. The white peaks just short of solid, so the soldiers read as shapes standing in the glare and the frame never goes blank.

Getting it all under 150KB

The ad networks cap each banner’s zip at 150KB. That’s everything: artwork, code, the lot. The background plate alone came in as a 1MB PNG.

Every layer was exported at the full banner size at double resolution. They line up without any positioning in CSS and stay sharp on high resolution screens. Each one goes out as WebP with its own quality setting, the code is minified, and every banner is zipped and checked against the limit. The dust drifting through the scenes is drawn in code rather than shipped as an image.

The final zips came in between 128KB and 144KB.

Ready for the ad server

Each banner goes out as a zip with the click tag wired in, and the animation settles inside 30 seconds. There’s also a static backup image of the end frame, which the ad server shows when the HTML5 can’t run. CM360 and DV360 take it as a separate upload and the usual cap is 40,000 bytes, so every banner has an end-frame backup under that.

Social cuts from the same scenes

Each route also has a 10 second 9:16 cut at 1080x1920, made from the same scenes as its banners. A change to a banner reaches its social too, so the two never drift apart.

The music was the client’s choice: a track called DMZ Danger Zone, picked over a tension riser. I cut it so the opening scan keeps its hit, then it drops into the track on a beat and the track’s own ending lands inside the 10 seconds. Then I matched its loudness to the sting it replaced.

What went out

Only the first route went out. The client picked Tactical Scan over Night Vision, with the button reading Available Now, and it went out in both sizes with its 9:16 social. A steelbook cut followed, where the middle packshot turns into the steelbook edition, plus a pre-order version of the same cut. I rendered safe zone versions of the socials too, with the mandatories lifted clear of the area the social platforms cover with their own buttons.

If you’re an agency producer with a campaign that needs banners built properly, under the limit and ready to traffic, send me the brief. There’s more on how I work on my HTML5 banners page.