A Utility for Cropping Display Objects in AS3

Recently, a buddy of mine (Steve) and I were talking about different methods to effectively clip or crop off fully transparent areas on the outskirts of a Display Object. I think I understood the problem his original discussion presents, but if not Steve can always chime in. Under that assumption, a basic use-case for this is imagine that you do not have control over some or all of the graphical assets that you use in your application. They may contain data which although transparent, causes the size of the Display Object to be larger than the visible ( semi/fully opaque ) pixels. You would want to modify and interact with these Objects using the visible rectangle rather than the invisible dimensions. In other words, you want to work with pixels with an alpha that is above 0. This side-effect often happens with vector artwork that is imported as layers into the Flash IDE’s library from Fireworks or Illustrator.

So, here’s my stab at it… This approach works for any amount of nested display objects because the algorithm is based off checking Bitmap ARGB using the native getColorBoundsRect() method for the parent DisplayObject you choose to pass into it. Unfortunately this does not do any Vector based cropping, so maybe in the future this will be revisited. For now it will return a Rectangle which you can use to setup a mask on your DisplayObject. Finally, I haven’t really tested this process using anything other than ( default ) Cartesian coordinates, so I’ll look centered registrations at a later date. Enjoy!

Here it is in action:

[kml_flashembed movie="http://blog.johnpencola.com/wp-content/uploads/swf/cropDisplayObject/Demo.swf" height="330" width="500" /]

Save this link for the Project files example: cropDisplayObject.zip

The demo is here: Demo HTML

// Gfx.as

public static function get_opaqueRect( _do: DisplayObject ): Rectangle
{
	var bmd: BitmapData = new BitmapData( _do.width, _do.height, true, 0x00FFFFFF );
	bmd.draw( _do );
	return bmd.getColorBoundsRect( 0xFF000000, 0x00000000, false );
}

public static function get_opaqueBMD( _do: DisplayObject ): BitmapData
{
	var cropRect: Rectangle = get_opaqueRect( _do );
	var preBMD: BitmapData = new BitmapData( _do.width, _do.height, true, 0x00FFFFFF );
	var postBMD: BitmapData = new BitmapData( cropRect.width, cropRect.height, true, 0xFFFFFFFF );
	preBMD.draw( _do );
	postBMD.copyPixels( preBMD, cropRect, new Point( 0, 0 ) );
	preBMD.dispose();
	return postBMD;
}