Interactive Game Ads

SAINSBURY’S

Analog Folk

Summer 2015

Analog Folk needed a set of Rich Media banners with special specification for certain publishers. The whole ad needed to be under 100kb before any interactivity – when the common practice is to wait for the page to load – polite loading – then loading the ad – with a cap of 300kb.

Tasks:

  • Creative Tech
  • Design
  • Animation
  • Interactivity
  • Logic
  • Mobile

The game ads

The Double MPU

The assets were really heavy. Even though the characters and background were flat coloured, there was a lot of detail and so no matter which image format, it was too big for our 100kb limit.
The plan then was to have a static version as a poster, and when interacted, it would jump – seamlessly – into the interactive and higher quality version. I ended up using SVG images so it would scale nicely on retina screens, but the poster image was a very compressed jpeg.

For the change of assets to be really smooth, the initial load had already the libraries download – thus the file size challenge. Instead of waiting for the image swap and the extra load, there was a quick fade, and the assets would animate and be ready for swipe.

The user would then drag, tap or click the arrows and swipe to match the characters blocks and get to a related end frame – and exit URL.

Billboard

Even though the interactivity was very basic, it needed the same solution for loading. After selecting a character over a static image, there was a quick transition to the now loaded layered assets, Soon after that the character scaled up with a custom transition to the end frame.

Touch Enabled

Both ads needed to be extra tested in many browsers and devices to get a similar feel to the transitions and interactivity. Dealing with bugs on ipads was a great challenge, with a very sensitive interval checker of the position of the blocks.


RECENT CASE STUDIES