Using Bitmaps in ActionScript
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.
Comments