Bitmap Control

For me, the BitmapData object is one of the most exciting improvements in Flash 8. Although Flash has always had varying abilities to import, load, and use bitmap images, it has never offered this level of ActionScripted control over them. With the new BitmapData object, you now have pixel-level control of bitmap images and the ability to create bitmaps at runtime, so you can do some very complex image manipulation.

As with filters, I could fill an entire book telling you everything about BitmapData . That would be fun, but its not the purpose of this book. So Im going to run through some of the basics with a couple of examples.

First, you need to create a new BitmapData object. You do this by calling new BitmapData () with the following parameters:

 new BitmapData (width:Number,                 height:Number,                 transparent:Boolean,                 fillColor:Number) 

As you might have guessed by now, BitmapData is also in its own package, called flash.display.BitmapData . So, you need to either import that package or use the full package name when creating a BitmapData object. As for the parameters, width and height are pretty obvious. Transparent means that the image you create can contain an alpha channel for transparency, so choose true or false for this. fillColor is the initial color with which the image will be created. This brings us to the subject of 32-bit colors.

At the start of the chapter, I talked about colors and said you could create colors as 24-bit hexadecimal numbers in the format 0xRRGGBB. Since BitmapData objects support an alpha channel as well as three color channels, colors are expressed as 32-bit hexadecimal numbers in the format 0xAARRGGBB, where AA stands for alpha or transparency. Thus, 0xFFFFFFFF creates an opaque white color, 0x00FFFFFF creates a completely transparent white color, and 0x80FFFFFF creates an approximately 50% transparent white color.

When you create a BitmapData object, you probably want some way to make it visible. By now, you are familiar with the movie clip method, attachMovie , and perhaps even attachSound . Well, Flash 8 adds a new method to movie clips: attachBitmap . Heres how it looks:

 mc.attachBitmap(bitmapData, depth, pixelSnapping, smoothing) 

The first parameter, bitmapData , is the BitmapData object you just created. That and depth , which is obvious, are the only two required parameters. You can also specify a string for pixelSnapping , which determines whether or not the bitmap will snap to whole pixel values. Valid pixelSnapping values are "auto" (default), "always" , or "none" . The smoothing parameter determines if smoothing will be applied when the image is scaled or otherwise transformed. Its either true (default) or false .

So, lets try out a BitmapData object. Type this code into frame 1 of a new Flash 8 movie:

 import flash.display.BitmapData; var bitmap:BitmapData = new BitmapData(100, 100, false, 0xffff0000); _root.attachBitmap(bitmap, 0); 

Test it, and you should see a red square. At first glance, this doesnt seem any more interesting than if you had just done the same thing with the drawing API. But realize that this is not a vector drawing of a square with a red fill. This is a bitmap image, in which each pixel is separately defined and alterable.

In fact, the value of each and every pixel can be read or changed with getPixel , getPixel32 , setPixel , and setPixel32 . The difference between the two versions is that getPixel and setPixel use 24-bit numbers and ignore the alpha channel, and the 32 versions use 32-bit numbers to include transparency information. Lets play with that a bit and make a rudimentary spray paint tool like one youd find in any bitmap paint program.

Create a new Flash 8 document and put the following code right on the first frame:

 import flash.display.BitmapData; var density:Number = 100; var radius:Number = 50; var bitmap:BitmapData = new BitmapData(Stage.width,                                        Stage.height,                                        false,                                        0xffffffff); _root.attachBitmap(bitmap,0); function onMouseDown():Void {       sprayColor = Math.random() * 0xffffff;       onEnterFrame = spray; } function onMouseUp():Void {       delete onEnterFrame; } function spray():Void {       for (var i:Number = 0; i<density; i++) {             var angle:Number = Math.random() * Math.PI * 2;             var randRadius:Number = Math.random() * radius;             var randX:Number = Math.cos(angle) * randRadius;             var randY:Number = Math.sin(angle) * randRadius;             bitmap.setPixel32(_xmouse + randX,                               _ymouse + randY,                               sprayColor);       } } 

This is probably the most complex code Ive given you so far, but other than the BitmapData stuff, its all stuff that Ive already covered. Im just using more of it all at once. Lets step through it though.

First, some variables are defined to hold references to the various objects and values that are used throughout the program. The BitmapData object is created and attached right to _root .

The mouse event handlers just add and remove a handler for the enterFrame event, which is the spray function. That handler is where all the action takes place. Here, we get back into a bit of trigonometry. First, you calculate a random angle from to 2 * Math.PI , which youll remember is in radians and is equal to 360 degrees. Next, you calculate a random radius based on the radius property set earlier, and use a bit of trig to convert the radius and angle into x, y values. Then use setPixel32 to set the pixel at the mouse location plus the random x, y value to the spray color, which is randomly determined each time you start to draw.

Actually, youll see theres a for loop there, so this happens a whole bunch of times on each frame. How many times is determined by the density value.

Go ahead and test it, and play with the density and radius values to see the different effects they create. Youre probably already thinking how you could throw in some controls to let the user change these parameters.

At first glance, you might think, Big deal. I could do the same thing with the drawing API or by attaching small movie clips and coloring them. True, you could do just that, but if youve tried drawing hundreds and hundreds of individual shapes with the drawing API, youll notice that the more you draw, the slower it goes. After several hundred shapes are drawn, the lag becomes very noticeable and the program becomes unusable. The same goes for attaching movie clips. A bitmap is quite different, though. You could spray new layers of paint on with this program all day, with no change in its speed or efficiency.

If you want to begin to see some even cooler effects, throw the following line into the file, somewhere up at the top:

 _root.filters = [new flash.filters.BlurFilter(2, 2, 3)]; 

This adds a blur to the content and really makes it obvious that you are dealing with bitmaps, not vectors.

Of course, setting pixels is one of the simplest operations you can do to a BitmapData object. In addition to getting and setting pixels, you can apply about another two dozen methods to a BitmapData object. Using these, you can copy pixels, set thresholds, dissolve, merge, scroll, and more. One of my personal favorites is the Perlin noise function, which allows you to create random, organic patterns. These are useful for anything from smoke and clouds to landscapes and water ripples. Experiment with the methods that interest you.