• Choose a category
• All
• Classic-Fiction

By Root 2529 0

channel. As noted in Chapter 14 in Rendering, or How Things Are Drawn to the Screen, alpha information needs to be computed along with other elements on the fly.

To monitor the rendering process, make the redraw regions visible. They are the dirty regions that are processed and rendered. In AIR, you do not have access to the context menu, but you can show the regions in code and choose the color:

flash.profiler.showRedrawRegions(true, 0xFF0000);

Bitmap Size and Mip Mapping

The dimension of your bitmap does matter for downscaling bitmaps. Downscaling is the process of creating smaller and larger dimensions of a bitmap in place of the original art to improve scaling images. This process is done directly from the original to the desired size. It was precomputed in previous versions of Flash Player.

Both width and height values must be an even number. A perfect bitmap is one with dimensions that are a power of two, but it is enough if the dimensions are divisible by eight. The following numbers demonstrate downscaling a bitmap for the resolution of a Nexus One and a Samsung Galaxy Tab. The mip levels, scaling values reduced in half, work out perfectly:

800x480 > 400x240 > 200x120 > 100x60

1024x600 > 512x300 > 256x150 > 128x75

A bitmap at 1,000 by 200 would reduce to three mip levels, but a bitmap at 998 by 200 only reduces to one level.

The point to take away from this is that you should create assets that fit within these dimensions.

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, draw them into a bitmap. Here, if the device is a tablet (as determined by the diagonal size), we scale the art and apply a drop shadow filter. We then draw the vector art into a bitmap.

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.filters.DropShadowFilter;

if (diagonal >= 6) {

myVector.scaleX = myVector.scaleY = 1.30;

}

var shadow:DropShadowFilter = new DropShadowFilter();

shadow.distance = 5;

shadow.angle = 35;

myVector.filters = [shadow];

var bitmapData:BitmapData = new BitmapData(myVector.width, myVector.height);

bitmapData.draw(vector);

var bitmap:Bitmap = new Bitmap(bitmapData);

Compositing Vector Graphics

A common use case for vector graphics is the creation of a customized avatar in a virtual world. Discrete parts, such as hair, shirt, and shoes, are separate assets. They can be changed and saved at runtime. The avatar, however, animates best as a whole, so once the avatar information is collected and all the discrete parts are loaded, they can be composited as one