sfmultimedia.net

sfmultimedia :: actionscript salons :: bitmapdata

/

Image Revolution: Flash 8 and the BitmapData Object

This material was presented to the Sonoma County Web Developers on July 11, 2006.

Flash 8 rolled off the assembly lines last September with a raft of new features aimed at (as the ad copy quoth) "improving expressiveness". This was a build aimed at artists and kudos to Macro-Dobe for remembering the important role artists play in the Flash community.

But some of these expressiveness features are targeted not at artists per se, so much as at developers who work with artists. Such a feature is Actionscript's new BitmapData Object. This highly-powerful but poorly-documented feature fairly well blows the lid off of Flash image handling as we've known it. Imagine being able to implement highly complex Photoshop-like filters on-the-fly. Imagine being able to capture webcam photos back to your server (with nothing but basic tools like PHP and MySQL). Imagine image-warping, Doom-type 3D engines, picture analysis, FlashVR, motion detection and more. All thanks to the death-defying acrobatics of this amazing little object.

We'll spend the evening walking through some of the more useful aspects of the BitmapData Object, look at exciting modifications some enthusiastic developers have made to it, and show you a few of the ways we've employed this tool – including several of the techniques mentioned above.

Materials described as "under development" during the presentation are not included here. These items are property of my employer and were demonstrated with their kind permission.

Update 08/10/06: The FF56 Demo is no longer available from their website, so it isn't available to be seen. Sorry. You can still go to the site and purchase the game.

Relevance/availability: BitmapData is a Flash 8 feature. The examples are AS2. Note that in AS3, BitmapData works a little differently: the BitmapData class specifically refers to the data underlying an image. The Bitmap class is the representation (DisplayObject) of that data onscreen. I should probably do a Salon explaining that!

Presentation slides (swf)

The Basics (3). These three files are nothing special to look at, but show the basics of instantiating a BitmapData instance using new BitmapData, BitmapData.loadBitmap(), and BitmapData.draw().

Download the .fla files (Zip 107k)

Basic Matrix Transformations (1). Here we demonstrate the basic transformations of a Matrix: translate, scale, skew and rotate.

Skew, Rotate Resize

Download the .fla file (Zip 4.9 MB)

Photoshop-style filters (4). Images mathematically altered after the fashion of Photoshop filters. I only showed a couple of these during the presentation. Here are four (Mosaic, Spherize, RandomVertical and Kaleidoscope.

Mosaic

Spherize

RandomVertical

Kaleidoscope

Download the .fla files (Zip 3.4 MB)

fillRect and floodFill (2). How perform these operations (and an explanation of floodFill's limitations.

fillRect

floodFill

Download the .fla files (Zip 1.6 MB)

BMD Painting (1). A pen-and-ink drawing tool using the BMD.

BMD Painting

Download the .fla file (Zip 9k)

threshold, copyChannel and paletteMap (4). Some of the "advanced" features of the BMD, which rapidly perform complex transformations of your images.

threshold

copyChannel

paletteMap 1

paletteMap 2

Download the .fla files (Zip 2 MB)

hitTest Maze (1). Fly a spaceship through a maze in this simple game which demonstrates the BMD's hitTest method.

hitTest Maze

Download the .fla file (Zip 1 MB)

displacementMapFilter (1). One of the great features of the BMD is the ability to use one image to warp another.

displacementMapFilter

Download the .fla file (Zip 2 MB)

distortImage (1). distortImage is a class developed through the combined effort of Andre Michelle, Thomas Pfeiffer, et al. Here's a swf that applies the class, plus the .as file which makes it possible.

distortImage

Download the .fla and .as files (Zip 1 MB)

dispose (1). This wasn't shown at the presentation. I decided to add it, since I had talked about the importance of cleaning up after your BMDs...but never actually showed you how to do it!!

dispose

Download the .fla file (Zip 8k)

Download everything (flas with slides and swfs - 23.6 MB)