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.
AS3

Fastest way to add multiple elements to an Array / Vector in AS3

Leave a comment

In a simple situation, where you wish to add many elements to an Array or Vector, you might just do:

var input:Array;
var output:Array;
while (input.length)
output.push(input.shift());

However, the sizes of both Arrays are manipulated for each loop, which will have an adverse impact on speed and memory usage. So, we could cache the length of the input Array and not manipulate it:

var input:Array;
var output:Array;
var inputLength:uint = input.length;
for (var i:int = 0; i < inputLength; i++)
output.push(input[i]);

But we’re still growing the size of the output Array incrementally, which is very bad. Since we know input.length in advance, we could grow the output Array to its new size just once, before the loop:

var input:Array;
var inputLength:uint = input.length;
var output:Array;
var outputLength:uint = output.length;
var newOutputLength:uint = outputLength + inputLength;
output.length = newOutputLength;
for (var i:int = 0; i < inputLength; i++)
output[i + outputLength] = input[i]);

This is OK, but still involves a loop. If only we could push multiple elements into the push method in one go. Well, we can – enter the apply method. Since Array.push accepts multiple arguments (something rarely used) and apply allows us to pass an Array of arguments to any Function, one line and we’re done:

var input:Array;
var output:Array;
output.push.apply(null, input);

This works out faster and more memory efficient than the other methods. It works nicely for Vectors, too. If anyone has a faster method of doing this, do let me know.

AS3, Flash

SWFIdle – simple flash idling utility

Leave a comment

If you’re still churning out Flash banners, please use this!

swfidleI created this simple utility, called SWFIdle, to enable the Flash Player to lower its CPU usage while the user is not interacting with it. Since it’s possible to have multiple Flash instances embedded in one page (for example, a game and a couple of banners), I recommend using this in your projects, so that Flash instances needn’t fight for CPU and give Flash a worse name than it has already 😉

I know there’s the hasPriority embed attribute now. But:

  • That assumes you have access to the HTML that embeds your SWF
  • If no other players are present, it has no effect
  • There’s still usually little reason to be running your SWF at a high framerate if the user isn’t interacting with it
  • Flash banners with wastefully unoptimised drawing routines are probably one of the key reasons that Flash got poo-pooed off of mobile platforms and disabled on everyone’s laptops – CPU usage = battery usage!

Code and motion