Videos

3D, Animation, AS3, Flash, Videos, Work

Lurpak ‘Saturday is Breakfast Day’

Video Leave a comment

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.
Apps, AS3, Videos

Wii Paint

Video 2 Comments

After getting my Wii remote hooked up with the WiiFlash Server, I knocked up this quick Flash demo which draws the blobs of infrared light the Wii remote detects (it can track up to 4 blobs at once), just like the Wii console’s sensitivity setting dialog does. I just gave each blob a different colour and clear the graphics on pressing the ‘A’ button.

Here’s the code to get it working – requires WiiFlash Server:

import org.wiiflash.Wiimote;
import org.wiiflash.IR;
import org.wiiflash.events.ButtonEvent;
import org.wiiflash.events.WiimoteEvent;
import flash.events.*;

var myWiimote:Wiimote = new Wiimote();
myWiimote.connect();myWiimote.addEventListener(WiimoteEvent.UPDATE, onUpdated);
myWiimote.addEventListener(ButtonEvent.A_PRESS, onAPressed);

function onUpdated (pEvt:WiimoteEvent):void {
var ir:IR = pEvt.target.ir;
var irWidth:Number = 400;
var irHeight:Number = 400;
var irSize:Number = 4;
if (ir.p1) drawCircle(ir.x1*irWidth, ir.y1*irHeight, ir.size1*irSize, 0xff0000);
if (ir.p2) drawCircle(ir.x2*irWidth, ir.y2*irHeight, ir.size2*irSize, 0x00ff00);
if (ir.p3) drawCircle(ir.x3*irWidth, ir.y3*irHeight, ir.size3*irSize, 0x0000ff);
if (ir.p4) drawCircle(ir.x4*irWidth, ir.y4*irHeight, ir.size4*irSize, 0xffff00);
}

function onAPressed (pEvt:ButtonEvent):void {
graphics.clear();
pEvt.target.rumbleTimeout = 50;
}

function drawCircle (x:Number, y:Number, size:Number, colour:Number=0xffffff):void {
graphics.beginFill(colour, .2);
graphics.drawCircle(x,y,size);
}