Vector Graphics at Runtime

Vector graphics scale well, and are therefore reusable and reduce production time, but they render slowly.

Scaling

Create your vector art at medium size and resize it on the fly as needed. This is a great technique for multiple-screen deployment. Let’s assume your original art was created for an 800×480 device and the application is detecting a tablet at 1,024×600, resulting in a scale difference of about 30%. Let’s scale up the art:

var dpi:int = Capabilities.screenDPI;
var screenX:int = Capabilities.screenResolutionX;
var screenY:int = Capabilities.screenResolutionY;
var diagonal:Number = Math.sqrt((screenX*screenX)+(screenY*screenY))/dpi;

// if diagonal is higher than 6, we will assume it is a tablet
if (diagonal >= 6) {
    myVector.scaleX = myVector.scaleY = 1.30;
}

cacheAsBitmap

If the object’s only transformation is along the axes, use cacheAsBitmap:

myVector.cacheAsBitmap = true;

this.addEventListener(Event.ENTER_FRAME, moveArt);
function moveArt(event:Event):void {
    myVector.x += 1;
}

cacheAsBitmapMatrix

To rotate, scale, or alpha the object, use cacheAsBitmapMatrix along with cacheAsBitmap: Both are required for the caching to work.

import flash.geom.Matrix;

myVector.cacheAsBitmap();
myVector.cacheAsBitmapMatrix = new Matrix();
this.addEventListener(Event.ENTER_FRAME, onMoveArt);

function onMoveArt(event:Event):void {
    myVector.x += 1;
    myVector.rotation += 1;
}

Vector to Bitmap

If the object is animated with filters or if multiple vector assets need to be composited, ...

Get Developing Android Applications with Adobe AIR now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.