Using Bitmaps in ActionScript

The new BitmapData ActionScript Class is used to represent a bitmap object in memory. When you create a new instance of the class, a blank image is stored in memory. You can then manipulate this bare bones bitmap with the various methods of the BitmapData class. Before you can use this class, however, you need to know your bitmaps inside out.

A bitmap is a digital image format that describes an image using a grid of color values. Each cell in the grid represents a pixel. Each pixel is drawn by a renderer with a specified color value to form an image. Bitmaps inside Flash Player are stored at 32-bit color depth. This means that the color of any given pixel is stored as a binary number that is 32 bits long. The color of a pixel in a 32-bit image can be one of roughly 16.7 million colors in a so-called true-color image. (It’s called true color because the number of colors the human eye can detect is approximately 16.7 million colors .) Each color is made up of four color channels, the familiar Red, Green, and Blue channels plus an alpha channel, which is used to add varying levels of transparency to the color.

Hexadecimal Color Values

Color values used in conjunction with the BitmapData class should be represented in ActionScript using a 32-bit hexadecimal number. A 32-bit hexadecimal number is a sequence of four pairs of hexadecimal digits. Each hexadecimal pair defines the intensity of each of the four color channels (Red, Green, Blue, and alpha). The intensity of a color channel is a hexadecimal representation of a decimal number in the range of 0–255; FF is full intensity (255), 00 is no color in the channel (0). As you can see, you need to pad a channel so it is two digits in length, for example, 01 instead of 1. This ensures that you always have eight digits in a hexadecimal number. You should also ensure that you specify the hexadecimal number prefix, 0x. For example, white (full intensity on all channels) is represented in hexadecimal notation as: 0xFFFFFFFF. Black, by contrast, is the opposite; it has no color in any of the Red, Green, and Blue channels: 0xFF000000. Note that the alpha channel (the first pair) is still full intensity (FF). Full intensity on the alpha channel means no alpha (FF) and no intensity (00) means full alpha. So a transparent pixel color value is 0x00FFFFFF.

Converting from ARGB to Hexadecimal Values

It is often easier for people to remember particular colors in terms of alpha, Red, Green, and Blue (ARGB) values instead of Hexadecimal values. If that is the case with you, you should know how to convert from an ARGB to a hexadecimal value. The following ActionScript function will do just that:

function argbtohex(a:Number, r:Number, g:Number, b:Number)
 {
     return (a<<24 | r<<16 | g<<8 | b)
 } 

You can use it like this:

hex=argbtohex(255,0,255,0) 
//outputs a 32-bit red hexadecimal value as a base-10 number 

Converting from Hexadecimal to ARGB Values

To convert hexadecimal color values back to four-decimal numbers (one for each channel, ARGB) in the range of 0–255, use the following ActionScript function:

function hextoargb(val:Number) 
{
     var col={}
     col.alpha = (val >> 24) & 0xFF
     col.red = (val >> 16) & 0xFF 
    col.green = (val >> 8) & 0xFF 
    col.blue = val & 0xFF 
    return col 
}  

You can use it like this:

argb=hextoargb(0xFFFFCC00);
 alpha=argb.alpha;
 red=argb.red;
 green=argb.green;
 blue=argb.blue; 

Creating a Bitmap with ActionScript

To create a bitmap at runtime using ActionScript, create an instance of the BitmapData class:

myBitmap=new flash.display.BitmapData(
           width,height,transparent,fillColor) 

The BitmapData class is located in the flash.display package. To save yourself from typing the fully qualified path to the class every time you want to create a new instance, import the package first:

import flash.display.BitmapData 

Then you can create an instance of the class:

myBitmap=new BitmapData(width,height,transparent,fillColor); 

The BitmapData class constructor accepts four arguments: width, height, transparent, and fillColor. The width and height arguments are used to specify the dimensions of the bitmap. If you think of the bitmap in terms of a grid, then the width is the number of pixels in a row and the height is the number of rows. The transparent argument is a boolean value (true/false) used to specify whether you intend for the bitmap to contain transparency. The fillColor argument is used to specify the default 32-bit color of each pixel in the bitmap. However, if you set the transparent parameter to false, then the first 8 bits of the specified color are ignored. In that case, it is not necessary to pass a 32-bit hexadecimal number. Instead you can pass a 24-bit hexadecimal number such as 0xFFFFFF for white pixels. The transparent and fillColor arguments are optional. If you omit them, then the bitmap will be stored in memory with no transparency and each pixel will default to white (0xFFFFFFFF).

For example, if you wanted to create a black, fully opaque (no transparency) image that is 100 pixels wide by 100 pixels high, you would use the following code:

import flash.display.BitmapData
 myBitmap = new BitmapData(100,100,false,0xFF000000)  

Note: The maximum dimensions of a bitmap in Flash Player is limited to 2880 pixels in either direction (width or height). If you attempt to create a BitmapData instance that is larger than this restriction, the Bitmap will not be created. This limit is in place to keep people from creating Flash movies that gobble up the client’s RAM. A bitmap that is 2880 x 2880 pixels, will use roughly 32MB of RAM.

After you have created an instance of the BitmapData class you have numerous methods available that you can use to manipulate the bitmap. For example, you can apply filter effects, fill particular areas of color, modify the color palette, make certain areas transparent, and so on. The possibilities are endless. However, in this article I will cover the basics that will start you off with a good foundation.

Cleaning Up After Yourself

An instance of the BitmapData object can eat up the viewer’s memory quickly. Every pixel in a bitmap is stored using 4 bytes of memory (1 byte per color channel ARGB). If you create a bitmap that is 500 x 500 pixels in size, it will take up close to 1MB of RAM. If you don’t need a BitmapData object anymore, then it is good practice to free the memory that the bitmap is using. The BitmapData class has a method that enables you to do just this, the dispose() method. You use it like this:

myBitmap.dispose() 

Remember to keep your Flash movies tidy by cleaning up after yourself. If you don’t need a bitmap anymore, then free the memory.