Flash in its essence began as a tool for creating vector animations on the web. The Flash Player was designed specifically as a lightweight animation viewer to display those moving vector objects which are in their simplest form, mathematical equations that describe complex shapes made up of points, lines, curves and fills. However, nowadays developers and designers are using Flash to do a lot more than just animation, today we see Flash being used for everything from interactive banner ads to games and large applications with complex user interfaces. We are now pushing Flash to its limits and our frame rates are starting to suffer as we continue to develop content that is more application centric.

The Flash Player has had obvious performance limitations for some time now:; the vector renderer inside the player generally coughs and splutters when it attempts to play Flash Movies that contain large amounts of objects on the stage. This is because the player is not optimized to deal with large amounts of static content, by design, each frame all the vector objects on the stage have to be updated and redrawn regardless of whether they have changed, which is an intensive and unnecessary process.

In this release of the Flash Player, Macromedia have addressed these visual performance issues by making various improvements and optimizations to the renderer and adding various new features which developers can use to take advantage of these significant changes.

This article will show you how to effectively utilize these new performance related features to increase the frame rates of your Flash Movies.

Bitmap Caching
One of the most significant additions to the player in this release has to be the new Bitmap Caching capabilities. This feature gives developers that are experiencing poor frame rates the power to greatly increase the speed at which large amounts of objects are updated and drawn onto the stage by the renderer.

The renderer is a very important part of the Flash Player; it is responsible for everything that you see when you view a Flash Movie. It draws all the vector and bitmap data onto the stage. Every frame, the renderer has to update the stage and the various objects it contains to reflect any changes since the last frame using ActionScript and/or animation. This process can become quite intensive when a large amount of updating has to be done on any given frame. Using this feature gives the developer some control over the amount of work that the renderer has to perform each frame. The less work you give the renderer, the faster and smoother your Flash Movie will run.

So How Does It Work?
When you turn on Bitmap Caching for any given movie clip, the player converts the contents of the movie clip into a bitmap which it generates and then stores in memory alongside the original vector data equivalent. The renderer then displays this bitmap in place of the vector data by copying the image from memory onto the stage. This process essentially makes the renderer's life easier, because it doesn't have to update the movie clip each frame, instead it only has to draw the bitmap it generated once and from then on it simply copies the bitmap from memory onto the stage, unless of course you change the movie clip or its contents, which will regenerate the bitmap. There will be little or no visual difference when a movie clip has bitmap caching turned on. You may notice a very slight difference because the vector data is snapped to the nearest whole pixel when the bitmap is generated. Bitmap Caching also works perfectly well with nested movie clips (movie clips inside movie clips). To put it in simple terms, by turning on Bitmap Caching for a movie clip, you are essentially telling the Flash Player: "Hey Renderer, I'll make your life a little easier. Freeze this movie clip and display it as a bitmap instead because this movie clip or its contents are not going to change very often, if at all. They are static."

Turning Bitmap Caching On and Off
Bitmap Caching comes in the form of an additional movie clip property that can be switched on or off at both Authortime using the Property Inspector and at runtime using ActionScript, on a per movie clip basis.

Using the Authoring Environment
You can turn Bitmap Caching on or off for any movie clip in the authoring environment using the Property Inspector. Bitmap Caching is disabled for all movie clips by default.

To turn Bitmap Caching on select the desired movie clip instance on the stage by clicking on it. Then open the Property Inspector from the Window menu. (Window > Properties > Properties) or use the Keyboard Shortcut CTRL + F3

In the bottom right hand corner of the Properties Inspector under the Blend field, you will see an option called Use Runtime Bitmap Caching. Click this checkbox to turn Bitmap Caching on for the selected movie clip. Bitmap Caching is turned off by default for all movie clips.

Using ActionScript
Bitmap Caching can also be turned on and off at runtime using actionscript. Every movie clip object now has a new actionscript property called cacheAsBitmap. To turn Bitmap Caching ON for a movie clip with actionscript you simply need to set the value of its cacheAsBitmap property to true like so: someMovieClip.cacheAsBitmap=true; //Turn Bitmap Caching ON Similarly, to turn Bitmap Caching OFF for a movie clip using actionscript you simple need to set the value of its cacheAsBitmap property to false as follows: someMovieClip.cacheAsBitmap=false; //Turn Bitmap Caching OFF You can also determine if a movie clip has Bitmap Caching turned on, by retrieving the value of the cacheAsBitmap property: isCached=someMovieClip.cacheAsBitmap;

When Should I Use Bitmap Caching?
If used correctly, Bitmap Caching can dramatically reduce the amount of updating instructions that the renderer has to process every frame and thus your movies should in practice run a lot quicker and smoother. However in certain circumstances Bitmap Caching could have a detrimental effect on the performance of your flash movie, therefore you should choose the movie clips that you cache wisely.

Bitmap Caching works best for movie clips whose visual appearance doesn't change often or at all. That is because when a cached movie clip or its contents change, the area or region of vector data that changed is regenerated and then updated into the bitmap that is held in memory and the renderer displays the new bitmap. Bitmap Caching also works well for movie clips that contain complex vector data (i.e. shapes with lots of curves or gradient fills) as it is quicker for the renderer to copy a bitmap from memory onto the stage than draw all those vectors to the stage.

Every time you rotate, scale or change the alpha of a cached movie clip, the whole bitmap has to be regenerated. So, turning on bitmap caching for a movie clip that is constantly rotating, changing in size or contains an animation doesn't make much sense because every frame the renderer has to update the bitmap to reflect the new appearance of the movie clip aswell as redraw it to the stage, which is added overhead.

The whole idea of this feature is to reduce the amount of updates that the renderer has to perform each frame, turning it on in such situations doesn't reduce the number of updates that the renderer has to perform. On the other hand it would be very beneficial for you to turn on Bitmap Caching for all movie clips that are either static or move around, but don't change visually. It is perfectly fine to move a cached movie clip around the stage, either with ActionScript or with timeline animation because moving it around won't change its visual appearance and therefore the cached bitmap doesn't have to be updated; the renderer will merely draw the bitmap at its new position.

Valid Usecase Scenario
Consider the following scenario: You have a large application that contains multiple Window components; each Window component contains numerous other Components. Each Window component is draggable. When the user drags one of the Windows around the application, he notices a slow down and the Window has to catch up to the mouse position, which causes jerky movement.

To fix this problem, the developer turns on Bitmap Caching for each Window component instance. Now the player only has to update the internal bitmap representation of each Window component when the visual appearance of one of the UI Components inside it changes. The rest of the time, including when the Window component is being dragged around, it simply needs to move the bitmaps around the stage, as opposed to constantly updating the stage from the vector data in each movie clip. The result is a much smoother dragging experience for the user.