Tag Archives: Flash


Lurpak Breakfast – how it was done

I thought I’d give a quick insight into how the animation effects in one of my projects were acheived.

Scott Bedford, former Creative Director at Carlson Marketing, posted this video of a project we worked on a while back, for the Lurpak Breakfast campaign. I created all the animation prototypes for the various effects used throughout the site, some of which can be seen here. The site won two DMA awards, but I’m most proud of the crumbs animation and the code-generated interactive steam effect – similar to the one you’ll see on my homepage.

Techie Breakdown

  • Crumbs animation. 1000 Bitmaps random position themselves until around the edge of the bread mask shape, animated with simple mouse interactive physics – force, velocity, momentum and friction all tweakable
  • Steam effect. Perlin noise moving through another perlin noise BitmapDisplacementFilter, to which user generated displacement can be applied, then all blurred
  • Egg Timer animation. Particle system with basic physics and just a draggable mask
  • Do Not Disturb tag. Maths-based animation for the swing only, the rest is old-school timeline animated
  • Fry-up triple banner. Three banners synchronise object positions/velocities using LocalConnection to send packets with a TTL applied to avoid a feedback loop
  • Spinning letters. TextMetrics used to break a populated TextField into separate letters, each one animated into a simple 3-D engine I knocked up, with simple physics used to achieve the swirl motion
  • Hang-over breakfast. Just a blurred mask, though I prefer my version from my original – alpha a blurred copy of an image over the original for a proper hazy effect
  • Other animation. Uses a combination TweenMax, maths and frame-by-frame, e.g. pancakes, bedroom door
  • Not mine: Wise-crack banner, breakfast tray messenger banner, down tools drawer, coffee bean counter, flapjacks, emails
Blue lego block of ambiguity

Blue lego block of ambiguity

At the risk of getting sucked into the Apple vs Adobe shitstorm, my own response to Apple chosing to block Flash content from their mobile devices is to at least tell users why – because Apple left it at the rather obscure blue lego block, with no explanation (great experiential design guys). Simply include this code in your page/s to redirect mobile safari users to a page of your chosing …I direct them here.

FlashSize – simple browser resizing

How to allow SWFs to display at 100% width/height in your browser – but enforce a minimum width and height, in case of a smaller browser window size than you’ve designed for.

Until recently, I’d used other Flash/browser resize managers when I needed to ensure a SWF is embedded in HTML at 100% width and height, but with support for a minimum width and height setting. But I recently needed a solution the didn’t depend on external JavaScript, due to not having control of the page the SWF is embedded in.

With my simple FlashSize script, all you need do is call:
import com.spikything.utils.FlashSize;
FlashSize.setup(minWidth, minHeight);

Local playback security in FlashDevelop and Flash CS3 / CS4

I’ve seen a few people get into a pickle over this one. When you’re developing and testing locally, you need to set the ‘Local Playback Security’ setting (sometimes referred to as the ‘use network services’ option) depending on whether you wish to access local external files (e.g. XML files, or images) or some other server (e.g. your dev backend server). You can’t access both from a locally running SWF anymore, since it’s a security risk. So here’s how to set that option in Flash CS3 / CS4 or from within FlashDevelop.

How to use ExternalInterface to integrate AS3 with JavaScript

Here’s a quick snippet of code for integrating your SWFs with JavaScript, using ExternalInterface:

import flash.external.ExternalInterface;

// Calling a JavaScript function from AS3 (with optional parameters)
if (ExternalInterface.available) ExternalInterface.call(“javascriptFunction”, param1, param2);

// Implementing a JavaScript callback in AS3 (flashFunction is called when JavaScript calls javascriptFunction)
if (ExternalInterface.available) ExternalInterface.addCallback(“javascriptFunction”, flashFunction);