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

I created this microsite for the Lurpak ‘Breakfast’ campaign with the guys at Carlson/Amia. I created all the animation prototypes for the various effects used throughout, some of which can be seen here.

I’m most proud of the crumbs animation and the code-generated interactive steam effect, which you can actually ‘blow on’ to cool down your porridge. Read on to find out how I did that and freaked out the client!

Techie Breakdown

• Interactive crumbs. 1000 Bitmap objects randomly re-position themselves until they sit around the edge of the bread mask shape. Then animated with simple mouse interactive physics: force, velocity, momentum and friction all tweakable.
• Interactive steam. Generated Perlin Noise moving through another perlin noise BitmapDisplacementFilter, to which user generated displacement can be applied by painting into the displacement map by tracking mouse movement or microphone activity. This is then all blurred and given slight cut-off with a threshold filter. Worked very well on a laptop, or if a mic/webcam is placed just under the monitor without a user knowing; then, when asked to blow on the porridge, they are delighted with what seems like magic and have no idea how it works – the client loved this.
• Egg-timer interactive banner. Simple particle system with some physics and a draggable mask.
• Do Not Disturb tag. Physics-based animation for the swing, for maximum realism. The rest is old-school timeline animated.
• Fry-up triple banner. The three banners synchronise their object positions/velocities using LocalConnection to find and send updates to each other. I add a Time-To-Live to the data packets to avoid a feedback loop or other problems in case more/fewer versions of the banner are loaded elsewhere in the page.
• Whisked letters. TextMetrics used to break a TextField into separate letters with code. Then, each letter is animated in a simple 3-D engine I created (basic single point perspective). Hooke’s law physics with momentum used to achieve the swirl motion and the letters are swapped out for a new sentence during the motion.
• Hang-over breakfast. Just a blurred mask, though I prefer my original version – merging a blurred copy of an image over the original for a more ‘hazy’ look.
• Other animation. Uses a combination TweenMax, maths and frame-by-frame, e.g. pancakes, bedroom door.