In my current project I need to create a weird drop shadow effect, which is exactly like a checker board with black and transparent squares. I could do this using the drawing API but that would require quite a lot of drawing and a complex algorithm to manage different square sizes.

So I looked into doing it using the BitmapData Class, new to Flash 8. What I need to do is:

• create a bitmapData array
• understand how to compose colors in the 0xAARRGGBB format (32 bit color value)
• fill it with my checker pattern
• attach it to a movieclip instance

Creating a BitmapData Array

The constructor takes 4 parameters : width, height, transparent and fillColor. The first two are mandatory, the last two aren't. In my case I would like my BitmapArray to be 150x150 pixels, be transparent and be filled with the transparency; giving me this call:

var myBmp:BitmapData = new BitmapData(50, 50, true, 0x00000000); // do not forget to import flash.display.BitmapData !!

You will notice the weird color code containing 8 digits instead of the usual 6. We are dealing with 32 bit color values here, where the first 8 bits represent the Alpha Channel. Hence instead of having the usual 0xRRGGBB value, we have the 0xAARRGGBB value. Each color value ranges from 00 to FF in hexadecimal, which translates to 0 to 255 in decimal.

Inserting Alpha Values in Existing Colors

Let's say you have the color 0xFF00FF (a strong purple color), and you would like to use it as your fill color but have it at say 30% opacity. First you need to calculate the decimal value of 30% opacity in the scale of 0 to 255 (8 bit integer value). This equation translates into: 30 / 100 * 255;

Now that we have a standard value for opacity, we want to combine it into our existing 0xFF00FF value. What we need is bit shifting ( << and >> ) and a bitwise operator, in this case the OR ( | ) operator.

Since the Alpha channel is the first channel (left most bits), we will need to shift the alpha value by 8bits * 3 channels (24 bits) all the way to the left of the new value, over the currently assigned RGB color values. Which translates into this call:

var transparentPurple:Number = 0xFF00FF | ((30/100*255) << 24);

Composing a ARGB color value from scratch

It is possible to compose a color values from individual Alpha, Red, Green, Blue values. Each value ranges from 00 to FF in hex, or 0 to 255 in decimal. If you take a color that has 50% opacity (127), full red (255), no green (0), and full blue (255) values, we can compose a 0xAARRGGBB value to be used with setPixel32() calls using this formula:

number = alpha << 24 | red << 16 | green << 8 | blue;

which translates to (in decimal values):

var transparentPurple:Number = 127 << 24 | 255 << 16 | 0 << 8 | 255;

or (in hex values):

var transparentPurple:Number = 0x88 << 24 | 0xFF << 16 | 0x00 << 8 | 0xFF;

Filling the BitmapData with color values

The BitmapData class offers four functions do deal directly with the data contained inside of it. Each take a X and Y coordinate. They are:

• setPixel32(x, y, color:Number) : Void
• setPixel(x, y, color:Number) : Void
• getPixel(x, y) : Number
• getPixel32(x, y) : Number

Both functions that deal with 32 bit values (setPixel32 and getPixel32) will return or require color values containing the Alpha channel information in 0xAARRGGBB format, which is what we've discussed earlier. The other functions take more 'traditional' color codes (in the actionscript world anyway).

So if I want the pixel at position 5,5 to be a 50% opaque purple what I need to do is this:

myBmp.setPixel32(5,5, 0x88FF00FF);

or you can compose your color first and store it into a variable and the pass it to setPixel32:

var transparentPurple:Number = 0x88 << 24 | 0xFF << 16 | 0x00 << 8 | 0xFF;
myBmp.setPixel32(5,5,transparentPurple);

Attaching the BitmapData to a MovieClip instance

It's a simple operation really:

_root.attachBitmap(myBmp, 20); // will attach my newly created bitmap on the _root movieclip at depth 20.

Here you go! For the code for the checkerboard, create a new Flash file and insert the following actionscript on the first frame:

-------------

------------------------------------

Filed under: actionscript, flash, work