Winning two DMA awards back in 2009, I thought I’d give a quick insight into how the animation effects in this piece were achieved.

I worked with Scott Bedford on this site for Carlson Marketing, 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. I’m most proud of the crumbs animation and the code-generated interactive steam effect – as you’ll see in the video below.

And here’s the campaign’s TV ad, with which the site ran alongside:

Techie Breakdown

• Crumbs animation. 1000 Bitmaps randomly position themselves until they sit 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 and given slight cut-off with a threshold filter
• 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 around with a Time-To-Live 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 Hooke’s law physics with momentum 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 look
• 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