Improving Performance with BitmapData
Way back in Performance Tips Part I, I mentioned the idea of using BitmapData to capture a dynamic “screen shot” of the movieclip when transitioning between different sections of your site/application/whatever. The idea is to render a flat bitmap — a JPG, basically — instead of all of those PNGs and videos and vector graphics you have floating around here.
I issued a challenge to Cathy, one of our finest designers here, to come up with something so fantastically slow that there was no way even BitmapData could save it. She did not disappoint. She’s got our test beachball from the Visualizer, some rare interview footage from our elite Foosball Team, alpha PNG clouds, and on and on.
Check out the results here, or download the demo for yourself.
Click from Josh to Caleb and back, clicking the “Capture Screenshot” button to toggle whether or not you want to generate bitmapdata of the section before transitioning or just play it out as is. When on, you should notice the transition is significantly less “chunky” in playback.
Cathy then explains the OUT transition between each section:
“The mask animation is based off a couple of simple animated circles, which are nested inside one another and duplicated horizontally and vertically. Then, all of these nested clips are put into one mask clip, which is set to “erase” blend mode, and put on top of the movieclip containing the content to be masked. Erase simply inverts the effect this mask would normally have. The mask clip and the content clip are then further nested inside a clip which has a “layer” blend mode. The layer mode is very important, the masking trick won’t work without it.”
So there you have it. Blend modes, vectors, PNGs, videos…all of the components you need to create one horribly slow web site, right? To give her an even better chance of breaking this down, I wrote everything with the Flash 8 player in mind, as its pretty clear that FP9 can handle itself.
The ScreenShot technique is very simple. One needn’t know a single thing about BitmapData to use it. This is more or less the entire thing:
_bmp = new BitmapData($draw_mc.getBounds().xMax, $draw_mc.getBounds().yMax, true, 0);
_bmp.draw($draw_mc);
$destination_mc.createEmptyMovieClip(_SCREENSHOT_NAME, $destination_mc.getNextHighestDepth()).attachBitmap(_bmp, 2);
}
All we do is pass in a clip we want to draw and where we want to attach the finished bitmap to. Then we set the actual section (”Josh” or Caleb’s interview, in this case) to go to a keyframe where nothing exists — clearing all of the complex drawing out so the player can focus it’s attention strictly on the mask transition.
I really recommend you try it out on a slower machine to see the vast difference in performance.
March 6th, 2007 by Stephen / 11 Comments
