Tutorial: Resample Bitmaps in Flash AS3

6 Replies

Often I find working with Bitmaps and BitmapData in Flash can be cumbersome. Simple things such as resizing images can require a lot of code. For this tutorial i have created a “BitmapResampler” class to help makes things easier. This class can be useful for things such as creating dynamic thumbnails, taking Bitmap snapshots of Movie Clips or TextFields, or resampling game graphics at run-time.

Here comes the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

package  
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.DisplayObject;
	import flash.display.IBitmapDrawable;
	import flash.geom.Matrix;
	import flash.geom.Rectangle;
 
	public class BitmapResampler
	{
 
		public function BitmapResampler( ) { }
 
		//returns a BitmapData Instance of the image of the source DisplayObject / BitmapData
		public static function getResampledBitmapData( source : IBitmapDrawable , width : Number , height : Number ) : BitmapData {
 
		var sourceBitmapData : BitmapData;
 
		if ( source is DisplayObject ) { // if source is a DisplayObject instance
				sourceBitmapData  = getBitmapDataFromDisplayObject( DisplayObject( source )  );
		}else if ( source is BitmapData) { // if source is a BitmapData instance
				sourceBitmapData = source as BitmapData;
		}else { // break on unhandled source
				return null; 
		}
 
		//set the scale for the draw operation, for the new width / height
		var matrix : Matrix =  new Matrix();
		matrix.scale( width / sourceBitmapData.width  , height / sourceBitmapData.height );
 
		//create the resized bitmap data
		var ouputBitmapData : BitmapData = new BitmapData( width, height , true , 0x00000000 );
 
		//draw the source to the bitmapData instance
		ouputBitmapData.draw( sourceBitmapData , matrix , null , null , null , true );
 
		//dispose of temporary bitmap data
		if ( source is DisplayObject ) sourceBitmapData.dispose();
 
		return ouputBitmapData;
 
	}
 
		//returns a Bitmap of the image of the source DisplayObject / BitmapData
		public static function getResampledBitmap( source : IBitmapDrawable , width : Number , height : Number ) : Bitmap {
			var bmp : Bitmap = new Bitmap( getResampledBitmapData( source , width, height ) );
			bmp.smoothing = true;
			return bmp;
		}
 
		// this function will create a BitmapData instance which contains the image of the source DisplayObject
		// note : transformations will be reset
		protected static function getBitmapDataFromDisplayObject( source : DisplayObject ) : BitmapData {
 
			//get the rectangle of the image data in the DisplayObject
			var sourceRect : Rectangle = DisplayObject( source ).getBounds( DisplayObject( source ) );
 
			//create a BitmapData instance to draw the DisplayObject to
			var bitmapData : BitmapData = new BitmapData( sourceRect.width , sourceRect.height , true , 0x000000000 );
 
			//draw the portion of the clip that contains image data
			var matrix : Matrix = new Matrix();
			matrix.translate( -sourceRect.x , -sourceRect.y );
			bitmapData.draw( source , matrix , null , null , null , true );
 
			return bitmapData;
		}
 
	}
 
}

Using this class is pretty simple. Just call BitmapResampler.getResampledBitmap or BitmapResampler.getResampledBitmapData with your image source and the width / height:

//takes a snapshot of the displayObject, and returns a Bitmap 200 x 200
var bmpFromDisplayObj : Bitmap = BitmapResampler.getResampledBitmap( new TestDisplayObject() , 200 , 200);
bmpFromDisplayObj.x = 10;
bmpFromDisplayObj.y = 10;
addChild( bmpFromDisplayObj );
 
//resamples the BitmapData instance and returns a BitmapData 150 x 300
var bmpFromBitmapData : Bitmap =  BitmapResampler.getResampledBitmap( new TestBitmapData( 0, 0 ) , 150 , 300 );
bmpFromBitmapData.x = 310;
bmpFromBitmapData.y = 10;
addChild( bmpFromBitmapData );

Files for this tutorial can be found here.

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

6 thoughts on “Tutorial: Resample Bitmaps in Flash AS3”

  1. Porter

    Neat stuff. I love how OOP can simplify nearly every task you can think of. With enough time, you can have a class for basically everything, and increase productivity tremendously. Simplifying bitmap work is definitely worth doing, thanks for sharing.

    Reply ↓
    1. Ryan Henson Creighton

      A good point, roadman730. Remember that everything in Flash, Actionscript, and other language and tools is limited, simply because the hardware is limited. There’s a limit to the size of number you can store as an int, for example.

      Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *