Flash Bitmap API Basics pt I
I’ve been delving into the new (at least it is for me) Flash bitmap API. First off, lets take a quick look at this API in general terms. Basically it allows you to convert movieclips to bitmaps, wrap bitmaps in movieclips, and operate on these bitmaps at the pixel level. At the pixel level means, that you can retrieve and set pixel values, apply bitmap filters and do a whole lot more.
For example to create a bitmap, you’d do:
var bitmapData1:BitmapData =
new BitmapData(200, 200, false, 0x000000);
bitmapData1.draw(myMC,new Matrix());
Line 1 creates a bitmap 200×200 pixels, tells it to be opaque, and the last parameter specificies the color of the opaqueness. In effect a black square.
Using line 2 you could draw another clip or bitmap into the newly created bitmap.
To show the bitmap you could do:
_root.attachBitmap(bitmapData1, _root.getNextHighestDepth());
So in effect, with just two lines:
var bitmapData1:BitmapData =
new BitmapData(200, 200, false, 0x000000);
_root.attachBitmap(bitmapData1, _root.getNextHighestDepth());
you have created a black bitmap and shown it on the stage. Boooring, but hey, we all need to start somewhere, and why not simply show a black void instead of ‘Hello World’ now and then^^.
This opens up a world of possibilities, and allows you to use movieclip and bitmap tricks vice versa. For example for a radial mask you can draw a very short very thick line with round caps, or you can create a radial gradient, or you could create a circle pixel by pixel by determining whether a certain pixel falls within a certain radius. Whether you are working with bitmap data or not depends on your choice. To conclude this post, I’ll just show these 3 options:
Creating a circle through a very thick line:
_root.lineStyle(500, 0x000000, 100);
_root.moveTo (130,130);
_root.lineTo(130.5,130.5);
The trick is making the line very thick and very short.
Creating a circle through a gradient through drawing api (copied from flash help):
var myMatrix:Matrix = new Matrix();
myMatrix.createGradientBox(200, 200, 0, 0, 0);
trace(myMatrix.toString());
// (a=0.1220703125, b=0, c=0, d=0.1220703125, tx=150, ty=150)
var depth:Number = _root.getNextHighestDepth();
var mc:MovieClip = _root.createEmptyMovieClip("mc_" + depth, depth);
var colors:Array = [0xFF0000, 0x0000FF];
var alphas:Array = [100, 100];
var ratios:Array = [0, 0xFF];
mc.beginGradientFill("radial", colors, alphas, ratios, myMatrix);
mc.lineTo(0, 300);
mc.lineTo(300, 300);
mc.lineTo(300, 0);
mc.lineTo(0, 0);
Creating a circle through bitmap api:
var d:Number = 100;
var bitmapCircle:BitmapData =
new BitmapData(d*2,d*2,false, 0xffffff);
for (var x:Number = 0;x < bitmapCircle.width;x++) {
for (var y:Number = 0;y < bitmapCircle.height;y++) {
var value:Number = 0x000000;
if (Math.sqrt(Math.pow(d-x,2)+Math.pow(d-y,2)) > d) {
value = 0xffffff;
}
bitmapCircle.setPixel(x, y, value);
}
}
_root.attachBitmap(bitmapCircle, 1);
The trick here is determining whether the pixel should be black or white based on its distance from the centre. The Math.sqrt etc is nothing more than a simple Pythagoras calculation. Note that in that last example, if you had used new BitmapData(d*2,d*2,true, 0xffffff); you would have had to use setPixel32 instead of setPixel. I like the last example, because it shows how to create images through mathematical calculations.
Ok that concludes some of the more boring basics for this post!