Dynamic AS3 mask using BitmapData

A while ago I got a question about how you mask displayobjects using a dynamic mask that ”record” movement. As always, you can do this in about a million different ways but this is the one I use most frequently. I’ve added some comments in the code if you are unsure of what some things do but it’s all basic AS3-stuff I use apart from the tweening library TweenLite, a library I use almost every day so if you havn’t tried it, do it. The delayedCall-function alone is a sweet sweet piece of nerdlove.

And I use FlashDevelop and the FlexSDK, so if you use the Flash IDE you need to remove the embedcode on row 24-25 and import the image from the library.

Demo

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import com.greensock.TweenLite;

	/**
	 * ...
	 * @author Mano
	 */
	public class Main extends Sprite
	{

		// Setup a few variables
		private var background:Sprite = new Sprite();
		private var ballHolder:Sprite = new Sprite();
		private var ball:Sprite = new Sprite();
		private var maskBPD:BitmapData;
		private var maskBMP:Bitmap = new Bitmap();

		// Embed the image "the Flex SDK"-way
		[Embed(source="key.jpg")]
		public var imgCls:Class;

		public function Main():void
		{
			// Makesure the stage is ready
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			// Remove the eventlistener. ALWAYS remove unnecessary listeners.
			removeEventListener(Event.ADDED_TO_STAGE, init);

			// Create the BitmapData. Use tranceparancy or it will mask everything.
			maskBPD = new BitmapData(stage.stageWidth, stage.stageHeight, true,0xffffff);

			// And a ball to play with
			ball.graphics.beginFill(0xFF00FF, 1);
			ball.graphics.drawCircle(0, 0, 30);
			ball.graphics.endFill();

			// Add the background image to the stage
			background.addChild(new imgCls());
			addChild(background);

			// ...somthing to hold our ball
			addChild(ballHolder);
			ballHolder.addChild(ball);

			// ...and the mask
			addChild(maskBMP);

			// ...and set the the bitmap as a mask for "background".
			background.mask = maskBMP;

			// Add a listener that will call the function updateBallPosition everytime the event EnterFrame is fired.
			stage.addEventListener(Event.ENTER_FRAME, updateBallPosition);
		}

		private function updateBallPosition(e:Event):void {
			// To make stuff a little easier we use the excellent TweenLite
			// First we kill all of our balltweens
			TweenLite.killTweensOf(ball, false);
			// ...and tell our ball to move to the same position as the mousepointer.
			TweenLite.to(ball, 1, { x:mouseX, y:mouseY } );

			// Draw the clip "ballHolder" to the bitmapdata
			maskBPD.draw(ballHolder);
			// And update the Bitmapimage
			maskBMP.bitmapData = maskBPD;

			// This is really important, we need to cache both the background and the mask as bitmaps otherwise the mask won't work.
			background.cacheAsBitmap = true;
			maskBMP.cacheAsBitmap = true;
		}
	}
}

We could add a lot of balls or what ever object we want to play around with and change the way the move but you get the idea. So, run along now kids and play with you own balls, or what ever object you want.