Creating bitmaps with the BitmapData class

The BitmapData class lets you create arbitrarily sized transparent or opaque bitmap images, then manipulate them in various ways at runtime. When you manipulate a BitmapData instance directly by using ActionScript, you can create very complex images without incurring the overhead of constantly redrawing the content from vector data in Flash Player. The methods of the BitmapData class support a variety of effects that are not available through the Filters tab in the Flash workspace.

A BitmapData object contains an array of pixel data. This data either can represent a fully opaque bitmap or a transparent bitmap that contains alpha channel data. Either type of BitmapData object is stored as a buffer of 32-bit integers. Each 32-bit integer determines the properties of a single pixel in the bitmap. Each 32-bit integer is a combination of four 8-bit channel values (from 0 to 255) that describe the alpha transparency and the red, green, and blue (ARGB) values of the pixel.

For information on working with packages, see Working with filter packages.

For a sample source file that uses the BitmapData class to manipulate an image, BitmapData.fla, see the Flash Samples page at www.adobe.com/go/learn_fl_samples. Download the Samples zip file and navigate to the ActionScript2.0/BitmapData folder to access this sample.

The following procedure dynamically loads a JPEG image onto the Stage, and uses the BitmapData class to create a noise effect, similar to static on a television. The noise effect is redrawn with a random pattern every 100 milliseconds (1/10 of a second). Moving the mouse pointer along the x-axis and y-axis affects how much static is drawn at every interval.

To create a noise effect with the BitmapData class:

Create a new Flash document and save it as noise.fla.

Add the following ActionScript to Frame 1 of the Timeline:

import flash.display.BitmapData;
this.createTextField("status_txt", 90, 0, 0, 100, 20);
status_txt.selectable = false;
status_txt.background = 0xFFFFFF;
status_txt.autoSize = "left";
function onMouseMove() {
    status_txt._x = _xmouse;
    status_txt._y = _ymouse-20;
    updateAfterEvent();
}
this.createEmptyMovieClip("img_mc", 10);
img_mc.loadMovie("http://www.helpexamples.com/flash/images/image1.jpg");
var noiseBmp:BitmapData = new BitmapData(Stage.width, Stage.height, true);
this.attachBitmap(noiseBmp, 20);
setInterval(updateNoise, 100);
var grayScale:Boolean = true;
function updateNoise():Void {
    var low:Number = 30 * _xmouse / Stage.width;
    var high:Number = 200 * _ymouse / Stage.height;
    status_txt.text = "low:" + Math.round(low) + ", high:" + Math.round(high);
    noiseBmp.noise(Math.round(Math.random() * 100000), low, high, 8, true);
}

This code creates a text field with the instance name status_txt, which follows the mouse pointer and displays the current values for the high and low parameters for the noise() method. The setInterval() function changes the noise effect, which is updated every 100 milliseconds (1/10 of a second), by continuously calling the updateNoise() function. The high and low parameters for the noise() method are determined by calculating the pointer's current position on the Stage.

Select Control > Test Movie to test the document.

Moving the mouse pointer along the x-axis affects the low parameter; moving the mouse pointer along the y-axis affects the high parameter.

The BitmapData class also lets you distort a dynamically loaded image by using a combination of a perlinNoise() method effect and a displacement map filter. The following procedure shows this.

To apply a displacement map filter to an image:

Create a new Flash document and save it as displacement.fla.

Add the following ActionScript to Frame 1 of the Timeline:

// Import classes.
import flash.filters.DisplacementMapFilter;
import flash.display.BitmapData;
import flash.geom.Point;
// Create a clip and a nested clip.
var shapeClip:MovieClip = this.createEmptyMovieClip("shapeClip", 1);
shapeClip.createEmptyMovieClip("holderClip", 1);
// Load JPEG.
var imageLoader:MovieClipLoader = new MovieClipLoader();
imageLoader.loadClip("http://www.helpexamples.com/flash/images/image4.jpg", shapeClip.holderClip);
// Create BitmapData instance.
var perlinBmp:BitmapData = new BitmapData(Stage.width, Stage.height);
perlinBmp.perlinNoise(Stage.width, Stage.height, 10, Math.round(Math.random() * 100000), false, true, 1, false);
// Create and apply the displacement map filter.
var displacementMap:DisplacementMapFilter = new DisplacementMapFilter(perlinBmp, new Point(0, 0), 1, 1, 100, 100, "color", 1);
shapeClip.filters = [displacementMap];
// Create and apply a listener.
var mouseListener:Object = new Object();
mouseListener.onMouseMove = function():Void {
  perlinBmp.perlinNoise(Stage.width, Stage.height, 10, Math.round(Math.random() * 100000), false, true, 1, false);
  shapeClip.filters = [displacementMap];
}
Mouse.addListener(mouseListener);

This code example consists of five logical sections. The first section imports the necessary classes for the example. The second block of code creates a nested movie clip and loads a JPEG image from a remote server. The third block of code creates a new BitmapData instance named perlinBmp, which is the same size as the dimensions of the Stage. The perlinBmp instance contains the results of a Perlin noise effect, and is used later as a parameter for the displacement map filter. The fourth block of code creates and applies the displacement map filter effect to the dynamically loaded image created earlier. The fifth, and final, block of code creates a listener for the mouse that regenerates the Perlin noise that the displacement map filter uses whenever the user moves the mouse pointer.

Select Control > Test Movie to test the Flash document.

Flash CS3