Here are a few simple tricks that may help the performance of your code/graphics intensive Flash movies. This is not an exhaustive list, by any means, rather some of the more effective performance tweaks to try out on your projects. There are the usual sensible coding tricks, like using local variables for oft-used references within functions, or planning your code loops carefully and breaking out of loops whenever feasible – but you should be doing these already. I’ll be adding to this post as and when I feel necessary, but will generally avoid the more granular tricks, such as bytecode optimisation. Some of those methods are too complex to explain in simple terms here and generally have a low effort-to-benefit ratio anyway:
Use scrollRect in conjunction with cacheAsBitmap. The cacheAsBitmap parameter of a movieclip can improve performance dramatically, but will cause problems if the render area of the movieclip gets too large (e.g. larger than 2880 in width or height), regardless of whether it is cropped by the viewable area of the Flash Player. The solution is to use scrollRect to constrain the rendering area to desired limits, in this example, the stage width/height:
import flash.geom.Rectangle;
scrollRect = new Rectangle(0, 0, Stage.width, Stage.height);
cacheAsBitmap = true;
Create bitmap snapshots of complex movieclips. Where you may have a movieclip full of layered graphical effects that isn’t animated, you can save a lot of rendering time by creating a snapshot of the movie. Similar to the cacheAsBitmap parameter, but will improve performance further if your movieclip comprises many lines or alphas. The following function shows a quick and dirty way of duplicating a movieclip as a snapshot of the original:
import flash.geom.*;
function createSnapshot (base:MovieClip, mc:MovieClip):MovieClip {
var bounds = mc.getBounds(base);
var bmpWidth = bounds.xMax-bounds.xMin;
var bmpHeight = bounds.yMax-bounds.yMin;
var bmp1 = new BitmapData(bmpWidth, bmpHeight, true, 0x00000000);
var snapshot = base.createEmptyMovieClip("snapshot"+base.getNextHighestDepth(), base.getNextHighestDepth());
snapshot._x = mc._x;
snapshot._y = mc._y;
var rect = new Rectangle(0, 0, bmpWidth, bmpHeight);
var pos = new Point(0, 0);
bmp1.draw(mc, new Matrix(mc._xscale/100, 0, 0, mc._yscale/100, mc._x-bounds.xMin, mc._y-bounds.yMin));
snapshot.attachBitmap(bmp1, 1, "auto", true);
snapshot._x = bounds.xMin;
snapshot._y = bounds.yMin;
mc.unloadMovie();
return snapshot;
}
Use the opaque window mode trick – sparingly! Setting the wmode=opaque HTML parameter of your Flash object can improve rendering performance, but at a potential cost. Not only does it make the rendering order of movieclips and frames more ‘lazy’, but will effect keyboard interaction adversely in some browsers (especially FireFox). Use with caution.
I’ll be updating and tracking back to this post occasionally, so stay tuned…
I love this banner. A passerby mentioned the vans perhaps look too similar to each other (exactly the same, actually, aside from the color) but the interaction is instant and fun as hell to play with. Well done!
Posted by:Pace on November 11, 2007 8:53 AM
Good simple ad and the interaction is great, one thing that would really tighten the ad up is the line, the copy at the start feels a bit jarred, and I don’t think you need the line; ‘Life is tough, so are we’.
It should say; ‘Which is the safest van around?’ you roll over and then the line; ‘All our vans have ESP for safer driving’. Merc logo would then appear(Yes I know the client would love that).
Still a very good ad.
Posted by:Kevin on November 12, 2007 2:16 PM
what a fab execution of such a simple idea! love it.
Posted by:dubbs on November 12, 2007 8:08 PM
yeah. great execution. the smoothness of the interaction is very premium like.
Posted by:Wolo on November 13, 2007 12:47 AM
very clever. nice and simple, as well, gets the message accross in the right way.
Posted by: on November 13, 2007 6:02 AM
I kinda like it – but theres just one thing thats bugging me. The Blue van skids off the road, and it slides down to the right and comes to a stop in the banner space while the other van keeps driving. Shouldn’t it skid off the road and disappear up the banner as it has now come to a stop and is no longer moving along with the other van?
Or maybe I’m thinking about this too much and need some work to do… Pass me that D&AD annual.
Posted by:DrJones on November 13, 2007 10:55 AM
Interactivity with a purpose. I like it.
Posted by:Rob on November 13, 2007 9:28 PM
indeed, a very simple idea, but superbly executed. congratz.
Posted by:sparehed on November 22, 2007 11:32 PM