Recipe 8.5. Manipulating Pixels

Problem

You want to set or read the value of individual pixels in a bitmap.

Solution

Use the getPixel( ), setPixel( ), getPixel32( ), and setPixel32( ) methods of the BitmapData class.

Discussion

Setting and reading pixel values of a bitmap is relatively straightforward in ActionScript 3.0. To read the value of a pixel, just pass in the x, y coordinates of the pixel you want to read to one of the getPixel methods. To set a pixel's color, pass in the coordinates and the color value to one of the setPixel methods.

The getPixel( ) and setPixel( ) methods are designed for use on opaque BitmapData instances, while getPixel32( ) and setPixel32( ) are used on images that support transparency. Opaque images are 24-bit, with 8 bits for each of its red, green, and blue channels. Transparent images add another 8-bit alpha channel for a total of 32 bits. You specify whether the BitmapData supports transparency or not in its constructor. See Recipe 8.1.

The following code creates a white, 32-bit BitmapData, and then sets 1,000 random pixels to a semi-transparent red color:

var bitmap:BitmapData = new BitmapData(100, 100, true, 0xffffffff);
var image:Bitmap = new Bitmap(bitmap);
addChild(image);

for(var i:int = 0; i < 1000; i++) {
    bitmap.setPixel32(Math.round(Math.random(  ) * 100), 
                   Math.round(Math.random(  ) * 100),
                   0x88ff0000);
}

If you use setPixel( ) on a transparent BitmapData, the alpha channel is set to 100 percent opaque for that pixel, even if you specify something else. Similarly, if you use setPixel32( ) on an opaque image, the alpha channel data is ignored, as such an image does not have an alpha channel. In general, it is best to use the correct pair of methods for the type of bitmap you are working with.

To read the value of a pixel, pass in the x, y coordinates of the specific pixel to one of the getPixel methods, depending on what type of bitmap you are using. The method returns either a 24- or 32-bit number. The following class sets up a rudimentary color picker. It first uses BitmapData's noise( ) method to generate some random colors and adds a text field to the stage. Then it listens for the enterFrame event. On each frame, it gets the value of the pixel under the mouse and converts that into a hexadecimal string.

package {
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.text.TextField;
    import flash.events.Event;

    public class ColorChooser extends Sprite {
        private var _bitmap:BitmapData;
        private var _textfield:TextField;

        public function ColorChooser(  ) {
            _bitmap = new BitmapData(100, 100, false, 0xffffffff);
            var image:Bitmap = new Bitmap(_bitmap);
            addChild(image);
            _bitmap.noise(1000, 0, 255, 1|2|4, false);
    
            _textfield = new TextField(  );
            addChild(_textfield);
            _textfield.y = 100;
    
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
        }
    
        public function onEnterFrame(event:Event):void {
            var colorVal:Number = _bitmap.getPixel(mouseX, mouseY)
            _textfield.text = "#" + colorVal.toString(16).toUpperCase(  );
        }
    }
}