Ever wondered why, when you create a Flash game or animation that requires a lot of movement, Flash’s performances aren’t so great? Ever wondered how come other people can make theirs behave correctly? The answer is simple: double buffering. If you are not familiar with the term, here’s a simple explanation:

The principle of double buffering is to create two separate buffers to render your graphics. The first buffer, called the “Frame Buffer” is used to build out your frame. The second buffer, called the “Render Buffer”, is used for display only. Let’s say, for example, that you have 10,000 objects on your stage, that are animating. Normally, Flash would freak out, even with a resolution of 550×400, giving you a very poor performance. Have you ever tried NOT displaying anything on the stage, but keep the simulation running? Yep! Flash runs at 30fps, like it was set to. Flash’s weak point is the rendering. Let’s set that heavy lifting aside and tell Flash to render differently. In a lot of scenarios, perfomance will be more important than graphics sharpness or scalability. Already, taking away the vector graphics and replacing it with bitmap graphics enhances Flash’s performance greatly. But, we’re not out of the woods yet. Flash still can’t animate 10,000 objects simulatneously and keep a good framerate. For Flash to render properly, you will need a “camera”. The camera is simply your field of view, the boundaries of the visible stage. Your main movie clip animating might be 40,000×40,000 pixels large, but your stage is 550×400, or 1024×768, or whatever size you decide to give it. Just not 40,000×40,000. By moving the “camera”, you simply move the X and Y coordinates of the animating movie clip in the opposite direction, so it looks like the user is actually moving the camera over a 2D plane.

The concept is to replace Flash’s timeline timer completely and make it do what you want. Even if you have animated movie clips on your stage, they will all need to be stopped. All the frames of all objects will need to be rendered once, at the beginning and stored somewhere, as bitmap data. So, the first thing we’ll do is loop through them all, loop through all their frames, and take a bitmap snapshot of each frame and store them into a mutli-dimensional array, like so:

private var renderedAssets:Array = new Array();
private var assets:Array = new Array();
// Cycling through the base assets and create the original objects, which will be used to populate the
// other arrays.
for (var i:int = 0; i &lt; base_assets.length; i++) {
// Creates a reference to the class reference contained in the array.
var baseClass:Class = base_assets[i] as Class;
// This creates the actual dynamic object.
var baseObj:MovieClip = new baseClass();
// Cycling through all the dynamic objects, extracting their frames.
// Skipping the first frame, as it is the empty tile.
for (var j:int = 0; j &lt; (baseObj.totalFrames - 1); j++) {
// Initializing the renderedAssets array.
renderedAssets[assets.length] = new Array();
// Moving to the correct frame before taking a bitmap snapshot
baseObj.gotoAndStop(j+2);
// Check if the child object in this frame is a movie clip. If it's not, we know there is no need
// to cycle through its frames to extract the bitmap information. There's only 1 frame.
if (baseObj.getChildAt(0) is MovieClip) {
// Checking to see if there is more than one frame. If not, we know there is only one and can extract
// that single frame without a loop.
if ((baseObj.getChildAt(0) as MovieClip).totalFrames &gt; 1) {
// Looping through all the frames within the base object's child
for (var k:int = 0; k &lt; ((baseObj.getChildAt(0) as MovieClip).totalFrames - 1); k++) {
// Postioning the timeline to the right frame
(baseObj.getChildAt(0) as MovieClip).gotoAndStop(k+2);
renderedAssets[assets.length][k] = getAssetBitmap(baseObj.getChildAt(0) as MovieClip);
}
}
// Only 1 frame
else {
// Adding the rendered snapshot to the rendered assets array.
renderedAssets[assets.length].push(getAssetBitmap(baseObj.getChildAt(0)));
}
}
// Not a MovieClip, only 1 frame
else {
// Adding the rendered snapshot to the rendered assets array.
renderedAssets[assets.length].push(getAssetBitmap(baseObj.getChildAt(0)));
}
// Add the object to the assets repository array.
assets.push(baseObj);
}
// Clear the baseObj object (free memory)
baseObj = null;
}
// Populating the grid with 10000 objects.
for (i = 0; i &lt; 10000; i++) {
// If this is a new row, create a new array and put it in.
if (grid[(i % 100)] == null) {
grid[(i % 100)] = new Array(100);
}
var randNum:int = (Math.floor(Math.random() * assets.length));
// Add a random number, associated with the index of the assets repository array.
grid[(i % 100)][Math.floor(i / 100)] = randNum;
}
private function getAssetBitmap(baseObj:DisplayObject, secondObj:MovieClip = null):BitmapData
{
// Creating an empty BitmapData, the size of the asset.
var tmpBMData:BitmapData = new BitmapData(baseObj.width, baseObj.height);
// Taking the bitmap snapshot of the current frame.
tmpBMData.draw(baseObj);
if (secondObj != null) {
tmpBMData.draw(secondObj, new Matrix(1, 0, 0, 1, (baseObj.width / 2 - secondObj.width / 2), (baseObj.height / 2 - secondObj.height / 2)));
}
// Returning the rendered snapshot.
return tmpBMData;
}

Setup the stage to listen to the ENTER_FRAME event. The callback will become your application’s main loop.

addEventListener(Event.ENTER_FRAME, renderFrame);

In your main loop, you will determine which frame you are on by increasing a counter.

private function renderFrame(evt:Event):void
{
frameCounter++;
}

Knowing where all our objects are supposed to be positioned, we can begin building our frame buffer. Looping through each individual objects that is supposed to be animating, or be present on the stage, determine if they should be visible, according to their X and Y coordinates, as well as their width and height. If you have determined that the object should NOT be visible at that time, skip it completely. One down! 9,999 to go!

Once we reach an object that needs to be shown (even 1 pixel of it!), we need render it. To do that, we’ll need a Bitmap data from that particular object, of its current state. We will then position the movie clip’s frame to (totalFrameCounter % mcNumFrames). That is, the total number of frames we went through in the application main loop and divide it by the number of total frames in the animating movie clip. Move to the rest of the division. Here is the function I wrote to determine that:

Modulo (the % sign) is a mathematical operator that will perform an integer division and return the rest. For example, 7 % 3 will return 1. 7 divided by 3 will obviously return a fraction so, we’ll take the “floor” value of that fraction, and multiply it by the divider (which is 3). The floor of 7 / 3 is 2. 2 multiplied by 3 is 6. 7 minus 6 = 1. It is a pretty complicated mathematical operation, but ActionScript takes care of all that for you.

Once all your visible assets are determined and rendered to the frame buffer, it’s time to take a big screenshot of that framebuffer and push that to the render buffer. Let’s add more code to our rendreFrame function:

Now, every time the application enters a frame, all those operations will be performed. Tada! We now have a double buffering application. As long as Flash can compute the coordinates of all the objects we need to animate, we should get a decent framerate.

I don’t know if you ever ran into that kind of problem before, where you need to initialize a jagged array with Objective-C, but I did. I was disappointed to find out that Objective-C doesn’t have any easy way of recursively call a variadic method. I read several posts talking about using NSInvocation to achieve this, but as Apple stated, it’s not capable of doing so. Setting an argument on the NSInvocation object that is beyond the static arguments returned by the method signature will result in an out of bounds exception.

I found a way, it’s not super pretty, but it works just fine. Here’s a few examples of how simple this task is using other languages:

Here’s what I came up with for Objective-C. As you can tell, it’s quite convoluted. I’m sure there’s a better way of executing this, but at least, if you need something right away, that might answer *some* questions:

As you can see, this can get pretty convoluted. I had to create a method that reacts differently for all the children parameters, since the recursive call of a variadic method isn’t supported with Objective-C. You could simply call the createJaggedArrayFromArray method using an array of lengths instead of using the nil-terminated list of arguments, but sometimes, it makes it easier for porting code from one language to another, to make sure it works the same way.

I recently did a little bit of testing around some concepts with BlazeDS and Flex for a game I’m writing with a friend. The game needs to be multi-player and online. Since the game will have some synchronous (real-time) and asynchronous operations going on in the same session, I needed to have an efficient way of passing data from the messaging system to the remoting system. I decided to use a bean. Creating a singleton controller, I can put whatever data I want in my bean and keep it in memory, passing it back and forth between my controllers. Here’s a small example of how to use the classes:

I was mandated at work to work on the company’s website. Since the site needs to incorporate a blog for several employees, the option of writing the whole site in Flash was out of the question, as people would embed whatever videos from YouTube, images from various places, etc. The support for HTML rendering with Flash Player is fairly limited.

Not anymore! Today, I decided to simply Google Flash HTML renderer and I come across this little marvel: http://code.google.com/p/htmlwrapper/. It’s a fairly advanced HTML renderer. It supports most of the features that one would need on a blog. I have yet to try this library, but I sure will as soon as I can. This puts the idea of writing the whole site with Flash and GAIA Framework back in the run!