• Choose a category
• All
• Classic-Fiction

By Root 2503 0

and notice the difference in performance. Note that this example is intended to illustrate a point regarding the use of many display objects. If an element always looks the same, as in the example, the best approach would be to create it once and copy it:

import flash.display.MovieClip;

import flash.display.Shape;

import flash.events.Event;

import flash.events.MouseEvent;

var container:Vector.;

const MAX:int = 100;

var boundsX:int;

var boundsY:int;

var cacheIndicator:Shape;

var toggleCache:Boolean = true;

container = new Vector.;

boundsX = stage.stageWidth;

boundsY = stage.stageHeight;

// to keep track of when cacheAsBitmap is on

cacheIndicator = new Shape();

cacheIndicator.graphics.beginFill(0x999999, 1);

cacheIndicator.graphics.drawRect(5, 5, 50, 50);

cacheIndicator.graphics.endFill();

addChild(cacheIndicator);

Create the circles and store them:

for (var i:int = 0; i < MAX; i++) {

var temp:Shape = createCircle();

container[i] = temp;

addChild(temp);

}

// to toggle between cacheAsBitmap true or false

stage.addEventListener(MouseEvent.CLICK, toggle);

// animate all circles on EnterFrame

stage.addEventListener(Event.ENTER_FRAME, move);

Create individual circles with cacheAsBitmap set to true. Also give them an alpha to make the renderer work harder for testing purposes:

function createCircle():Shape {

var shape:Shape = new Shape();

shape.graphics.beginFill(Math.random()*0xFFFFFF, Math.random()*1);

shape.graphics.drawCircle(0, 0, 50);

shape.graphics.endFill(); shape.x = Math.floor(Math.random()*boundsX);

shape.y = Math.floor(Math.random()*boundsY);

shape.cacheAsBitmap = toggleCache;

return shape;

}

// purposely didn't optimize code to make it work harder

function move(event:Event):void {

for (var i:int = 0; i < MAX; i++) {

var mc:Shape = container[i];

mc.x += (Math.random()-Math.random())*25;

mc.y += (Math.random()-Math.random())*25;

if (mc.x < 0 || mc.x > boundsX) {

mc.x = boundsX/2;

}

if (mc.y < 0 || mc.y > boundsY) {

mc.y = boundsY/2;

}

}

}

Turn cacheAsBitmap on and off to test performance on the device:

function toggle(event:MouseEvent):void {

toggleCache = !toggleCache;

cacheIndicator.visible = toggleCache;

for (var i:int = 0; i < MAX; i++) {

var mc:Shape = container[i];

mc.cacheAsBitmap = toggleCache;

}

}

Toggling the cacheAsBitmap property in a live application is not recommended, but it is a good development and debugging technique.

If the display object is scaled, skewed, or rotated, its bitmap copy needs to be updated over and over. You would therefore lose all the benefits of caching.

The cacheAsBitmapMatrix Property

The cacheAsBitmapMatrix property is a new DisplayObject property. It must always be set, along with cacheAsBitmap, equal to true. There is no option to set it manually in the Flash IDE.

You need to create a Matrix and apply it to the object’s cacheAsBitmapMatrix property:

import flash.geom.Matrix;

myVector.cacheAsBitmap = true;

myVector.cacheAsBitmapMatrix = new Matrix();

The added benefit of using cacheAsBitmapMatrix is that you can also change its alpha, scale it, skew it, and rotate it. And it will stay cached, so you can keep the cached element and make more use of it. You do lose some visual quality, but on devices with very high PPI, the quality loss is typically not noticeable.

Another important new feature is the ability to apply the matrix while the display object is not visible so that you have more control over monitoring the initial caching and its performance hit. Furthermore, once your object is cached, you can change its visibility property and it will stay cached. Be careful not to forget invisible objects on the stage:

myVector.cacheAsBitmap = true;

myVector.cacheAsBitmapMatrix = new Matrix();

myVector.visible = false;

// object is still cached

Let’s try another example, but this time, with cacheAsBitmapMatrix, the shapes can rotate and scale without losing the performance benefit of caching. Again, try it on your device:

import flash.geom.Matrix;

var container:Vector.;