What is this BitmapData I hear you asking, and what can it do for me?

BitmapData or flash.display.BitmapData as its known in Latin, provides us with pixel-level control of bitmaps within flash. There are many things that bitmapdata can be used for, but for this tute we will be discussing how it can be used to smooth images that dynamically imported at run-time.

Importing the Image

Before we can actually use the BitmapData class on an image, we need to import it. There are many methods in flash to do this, but the best method to use i think is MovieClipLoader as it allows more flexibility in the future when adding in new functions and pre-loaders.

Firstly create an instance of the MovieClipLoader class and add a listener to launch into attack when a image is loaded, like so:

var tempImageMCL:MovieClipLoader = new MovieClipLoader();
var tempImageListener:Object = new Object();
tempImageMCL.addListener(tempImageListener);

Now we use loadClip to import our image:

tempImageMCL.loadClip(imageURL, tempMc)

Using the onLoadInit, we can now get to the BitmapData Loving once the image has loaded in.

tempImageListener.onLoadInit = function(mc:MovieClip) {
 
   // Step 1: Create a new BitmapData instance and make it the size of the movie clip
   // BitmapData(width:Number, height:Number, [transparent:Boolean], [fillColor:Number])
   var linkImage:BitmapData = new flash.display.BitmapData(mc._width, mc._height,true,0x00FFFFFF);
 
   // Step 2: Draw the contents of the movie clip into the linkImage bitmap
   linkImage.draw(mc);
 
   // Step 3: Attach the bitmap into the target movie clip.
   // attachBitmap(bmp:BitmapData, depth:Number, [pixelSnapping:String], [smoothing:Boolean]) : Void
   _imageContainer.attachBitmap(linkImage, 2, "auto", true)
   _imageContainer.cacheAsBitmap = true;
 
}

Here's the breakdown of each step:

Step 1

We firstly have to create a BitmapData object, passing through some parameters in the process.

var linkImage:BitmapData = new flash.display.BitmapData(width:Number, height:Number, [transparent:Boolean], [fillColor:Number])

width:Number - The width of the bitmap image in pixels. Use the width of the movieClip that the tempimage loaded into. i.e. tempMc._width. This save's us from having to add static values in the code incase we are using different sized images.

height:Number - The height of the bitmap image in pixels. As with the width, use the height of the movieClip that the tempimage loaded into. i.e. tempMc._height.

transparent:Boolean [optional] - Specifies whether the bitmap image supports per-pixel transparency. The default value is true (transparent). To create a fully transparent bitmap set the value of the transparent parameter to true and the value of the fillColor parameter to 0x00000000 (or to 0).

fillColor:Number [optional] - A 32-bit ARGB colour value that you use to fill the bitmap image area. The default value is 0xFFFFFFFF (solid white).

Step 2

We now can draw the image from our temporary movieClip into our newly created BitmapData object

linkImage.draw(mc);

Step 3

Time to attach the BitmapData into our target movieClip (_imageContainer) and marvel in all its smoothed out glory. (You will probably notice the effect more if the target clip has been resized or altered in some way.)

imageContainer.attachBitmap(bmp:BitmapData, depth:Number, [pixelSnapping:String], [smoothing:Boolean]) : Void

bmp:flash.display.BitmapData - A transparent or opaque bitmap image. This is the BitmapData object you just created.

depth:Number - An integer that specifies the depth level within the movie clip where the bitmap image should be placed.

pixelSnapping:String [optional] - The pixel snapping modes are auto, always, and never. The default mode is auto.

smoothing:Boolean [optional] - The smoothing mode is either true for enabled or false for disabled. The default mode is disabled. Be sure to set this option to true, as all our efforts here will be for nothing and the BitmapData gods will be displeased.

That's basically it.

For multiple images, its best to separate out the movieclipLoader and BitmapData into functions and load each image into a unique movieclip so you don't have to keep reloading the images.

You can keep track of all the temp image movieClips by pushing them into an array as i have done in my full screen gallery flash class.

Here's the all the code from above added into a function so we can call it anytime we please:

function _loadTempImage(imageURL:String, tempMc:MovieClip, _imageContainer:Movieclip){
 
   //create new MovieClipLoader
   var tempImageMCL:MovieClipLoader = new MovieClipLoader();
 
   //create a new listener object for the MovieClipLoader
   var tempImageListener:Object = new Object();
 
   //add water, i mean listener to the MovieClipLoader
   tempImageMCL.addListener(tempImageListener);
 
   //Now we use loadClip to import our image:
   tempImageMCL.loadClip(imageURL, tempMc)
 
   tempImageListener.onLoadInit = function(mc:MovieClip) {
 
      // Step 1: Create a new BitmapData instance and make it the size of the movie clip
      // BitmapData(width:Number, height:Number, [transparent:Boolean], [fillColor:Number])
      var linkImage:BitmapData = new flash.display.BitmapData(mc._width, mc._height,true,0x00FFFFFF);
 
      // Step 2: Draw the contents of the movie clip into the linkImage bitmap
     linkImage.draw(mc);
 
      // Step 3: Attach the bitmap into the target movie clip.
      // attachBitmap(bmp:BitmapData, depth:Number, [pixelSnapping:String], [smoothing:Boolean]) : Void
      _imageContainer.attachBitmap(linkImage, 2, "auto", true)
      _imageContainer.cacheAsBitmap = true;
 
   }
 
}

Hope it was as good for you as it was for me. If you have any question's or just want to say how great this tute was, please leave a comment below.

Update: Here's the demo file of bitmapdata in use. You will have to edit the url of image you want import and add a path to the crossdomain.xml if your importing an image from another domain. bitmapdata demo

Happy Bitmapping...