Category Archives: Software Engineering

AS3, Software Engineering, Tutorials

Loan Shark – fast object pooling utility

Leave a comment

LoanShark AS3 Object Pooling UtilityA couple of years ago, I created an object pooling utility for a games project I was building in AS3. Since then, I’ve used it quite a few times, in order to speed up apps and improve resource management, easing the load on the garbage collector by reusing objects instead of recreating them. Continue reading Loan Shark – fast object pooling utility →

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.