Using the CacheAsBitmap and CacheAsBitmapMatrix Properties

By Blue_Chi | Flash CS5 | ActionScript 3.0 | Beginner

Using Flash on mobile devices requires special considerations for optimizing content in a way that does not exhausted the limited resources of mobile devices. Such optimization could involve the use of properties such as cacheAsBitmap and cacheAsBitmapMatrix ActionScript properties to help reduce the processing load necessary to display vector graphics.

This tutorial will teach you the benefits and risks associated with these two properties that alter the way vectors are treated at runtime.

You should note that while the cacheAsBitmap property is generally available in the Flash Player since Flash Player 8, but currently the cacheAsBitmapMatrix property is only available for the AIR mobile runtime and projects made using the iPhone Packager.

Why Do We Need to Optimize Vectors?

Vectors provide a great advantage over bitmap images because they do not consume a lot of memory space and can be scaled up or down without altering their look, this is possible due to the fact that vectors are drawn by the player at runtime using mathematical equations that generate the lines and curves of the shape. However, this clarity and small size come at the cost of requiring a lot of processing power to be able to display these objects, while most modern computers will not have trouble displaying complex vectors in a Flash movie, the same cannot be said about mobile phone processors which are still quite limited in comparison to their desktop counterparts. If you create a movie full of vector objects which are moving, rotating, and changing transparency, the processor would have to calculate the shape and redraw it every single time it moves in place or changes any attribute - this would consequently make your movie run at snail speed making it practically unusable.

CacheAsBitmap to the Rescue?

In order to avoid redrawing the object every single time the object is moved, you can use the cacheAsBitmap property. This property makes the player generate a 2D bitmap of the vector so that it does not have to redraw the object again. Using the cacheAsBitmap property is very easy, it can be applied to any display object by setting its value to true:

my_sprite.cacheAsBitmap = true;

Once you do that the player will attempt to generate the 2D bitmap version of the sprite and use that instead of the vector shape.

You should note that the cacheAsBitmap property is very restricted and will only use the bitmap cached when the object is static, or moved vertically or horizontally across the stage. If you attempt to rotate the object, change its scale, change its alpha property or attempt to do anything else with it other than changing its shape, the player would have to recalculate the shape of the vector and then draw the bitmap version again for each single step in the transformation. If you apply cacheAsBitmap to an object that is continuously rotating or is being animated in anyway other than changes its x or y property, the process would consume more processing power than the original vector graphic because not only the vector would have to be calculated for each step in the animation, but the bitmap would also have to be drawn for every single step in the animation making the system do double the job!

You should use cacheAsBitmap only in situation where your vector graphic will remain the same or will have its x or y properties updated.

You should note that both the cacheAsBitmap and the cacheAsBitmapMatrix properties can help save processing resources at the cost of using of RAM resources to save bitmap graphics in the memory.

In hope of solving the big restrictions of the cacheAsBitmap property, Adobe introduced the cacheAsBitmapMatrix property which can help optimize processor user further.

Using CacheAsBitmapMatrix on Mobile Devices

In response to the limitations of the cacheAsBitmap property, the iPhone Packager and the AIR mobile runtime have access to the cacheAsBitmapMatrix property which creates a transformation matrix and which is not redrawn when any 2D transformation is applied to the object. This means that if you rotate the object, scale it up or down, or change its alpha property the performance should not be hindered by the recalculation of the original vector graphics and the generation of a new matrix as that only happens once when you cache the matrix.

In order to use the cacheAsBitmapMatrix you would have to set the property as the current matrix transformation by using the concatenatedMatrix property of the object and then you will have to also activate the regular cacheAsBitmap property as shown in the example below:

my_sprite.cacheAsBitmapMatrix = my_sprite.transform.concatenatedMatrix;
my_sprite.cacheAsBitmap = true;

By setting the properties the way shown above the player will treat any vectors inside the my_sprite object as bitmaps and will no redraw them or recalculate their shape if the object is moved, rotated, or has its alpha property changed.

You should note that there is no bitmap caching property available for caching multi-frame animation in which the shape of the object is changed or in which new objections are shown, in both of these circumstances using bitmap caching can have an adverse effect on the performance of the movie - instead of doing this you would have to manually change your vectors into a bitmap and then use the bitmap version instead if you would like to save processing power.

This concludes our tutorial, I hope that you learnt something new from it. If you have any questions feel free to post them at the Republic of Code Forum.

- End of Tutorial