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.