Maby not so fun fact. The picture, depicting the Brighton pier, was shot during Flash on the beach´10.

Update: I´ve rewritten the inverted mask-class from scratch and moved it here. It now support animated movieclips, video, webcam-feed and pretty much everything eles. I think.

About ten months ago I wrote a little as3-class that took care of something I think Adobe should have implemented in the FlashPlayer a long time ago, the inverted mask. As time went by I’ve added some features I found useful while working on projects at work. In this version you can swap between inverted and normal masks, hide/show the mask and remove it from memory.

Finally I just want to say: Adobe, I love Flash but I still think this is way to complicated. A simple DisplayObject.invertedMask = theMask; would be just fine. I know it’s easy to say ”just do it” but this is a feature a lot of developers would find useful.

Demo

The InvertedMask.as-class

package com.mattiasnorell.bitmap
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.display.DisplayObject;
import flash.display.Sprite;

/**
* Inverted Mask
* Version 2.0
*
* ...
* Original author:    Rachel Diesel
*                     http://dieselation.com/2009/04/11/inverting-a-mask-in-actionscript-3/
*
* Pure AS3 code    Mattias Norell
*                     http://blog.mattiasnorell.com/2010/08/21/pure-actionscript-3-inverted-mask-2/
*
*/

public class InvertedMask extends Sprite{

private var inverted:Sprite;
private var dup:BitmapData;
private var newAlpha:Bitmap;
private var isInverted:Boolean;

public function InvertedMask($parent:DisplayObject,$mask:DisplayObject,$maskPos:Object):void {
inverted = new Sprite();
inverted.x = $parent.x;
inverted.y = $parent.y;

dup = new BitmapData($mask.width, $mask.height, true, 0xffffff);
dup.draw($mask);

newAlpha = new Bitmap(dup, "auto", false);
newAlpha.x = $maskPos.x;
newAlpha.y = $maskPos.y;
newAlpha.blendMode = BlendMode.ERASE;

$mask.parent.removeChild($mask);

$parent.x=$parent.y = 0;

inverted.addChild($parent);
inverted.addChild(newAlpha);

inverted.blendMode = BlendMode.LAYER;

addChild(inverted);

isInverted = true;
}

public function moveMask($target:Object,$maskPos:Object):void {
$target.getChildAt(0).getChildAt(1).x  = $maskPos.x;
$target.getChildAt(0).getChildAt(1).y  = $maskPos.y;
}

public function Show():void{
inverted.blendMode = BlendMode.LAYER;
}

public function Hide():void{
inverted.blendMode = BlendMode.NORMAL;
}

public function autoShowHide():void{
(inverted.blendMode == BlendMode.LAYER) ? Hide() : Show();
}

public function swapMaskType($type:String = "auto"):void{
if($type == 'auto'){
$type = (isInverted == true) ? 'normal' : 'inverted';
}

if($type == 'inverted'){
Show();
inverted.mask = null;
isInverted = true;
}else if($type == 'normal'){
Hide();
inverted.mask = newAlpha;
isInverted = false;
}else{
trace("You must use either 'inverted','normal' or 'auto'.");
}
}

public function remove():void{
inverted.mask = null;
inverted.blendMode = BlendMode.NORMAL;

newAlpha.bitmapData.dispose();
newAlpha = null;
dup.dispose();
dup = null;
}
}
}

Source for the demo swf

When I code I use Flash Develop, hence the [Embed]-code below. If you use the Flash IDE just remove those two rows and import the image from the library.

package{
	import flash.display.Sprite;
	import flash.events.MouseEvent;

	public class Main extends Sprite{

		[Embed(source="image.jpg")]
		public var imgCls:Class;

		public function Main():void{
			var img:Sprite = new Sprite();
			img.addChild(new imgCls());
			addChild(img);

			var mask:Sprite = new Sprite();
			mask.graphics.beginFill(0xFF0000,1);
			mask.graphics.drawRect(0,0,30,30);
			mask.graphics.endFill();
			addChild(mask);

			var newMask:InvertedMask = new InvertedMask(img, mask, { x:0, y:0 } );
			addChild(newMask);

			newMask.addEventListener(MouseEvent.MOUSE_MOVE, moveMask);
			newMask.addEventListener(MouseEvent.CLICK, swap);
		}

		private function swap(e:MouseEvent):void {
			e.currentTarget.swapMaskType();
		}

		private function moveMask(e:MouseEvent):void {
			e.currentTarget.moveMask(e.currentTarget, { x:mouseX-10, y:mouseY-10 } );
		}
	}
}

Update: I’ve updated the InvertedMask-class with a few new features. You can find the new and updated version here.

I love masks. I really do. I use them alot and I’m proud of it. But a lot of times I need to make something I think Adobe should put into Flash as a native alternative to the regular mask. And that is the inverted mask.

I know more people than me miss this feature and I for one would love to see something like DisplayObject.invertedMask = MaskObject; but its no where to be found unless you want to make your own AS3-solution, which I think is more or less a workaround for something that should have been there from the start.

I’ve seen some people using blendmodes to achive the same effect like the one from Rachel Diesel (http://dieselation.com/2009/04/11/inverting-a-mask-in-actionscript-3/) but most of the time they are not pure as3 so I modified her solution into a more reusable piece of code. And I also added the function moveMask() which allowes you to move the inverted mask after it has been added to the stage with out any hazzle.

It’s not perfect and I bet that a lot of improvements can be done but you can try out the demo here. And yes, that is a pink elephant in a fake Guccibag.

package com.mattiasnorell.bitmap
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.BlendMode;
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.geom.ColorTransform;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	/**
	 * ...
	 * Original author:	Rachel Diesel
	 * 					http://dieselation.com/2009/04/11/inverting-a-mask-in-actionscript-3/
	 *
	 * Pure AS3 code	Mattias Norell
	 * 					http://blog.mattiasnorell.com/2009/10/21/pure-actionscript-3-inverted-mask/
	 *
	 */

	public class InvertedMask extends Sprite{

		public function InvertedMask($parent:DisplayObject,$mask:DisplayObject,$maskPos:Object):void {
			var inverted:Sprite = new Sprite();
			inverted.x = $parent.x;
			inverted.y = $parent.y;

			var dup:BitmapData = new BitmapData($mask.width, $mask.height, true, 0xffffff);
			dup.draw($mask);

			var newAlpha:Bitmap = new Bitmap(dup, "auto", true);
			newAlpha.x = $maskPos.x;
			newAlpha.y = $maskPos.y;
			newAlpha.blendMode = BlendMode.ERASE;

			$mask.parent.removeChild($mask);

			inverted.addChild($parent);
			$parent.x=$parent.y = 0;
			inverted.addChild(newAlpha);
			inverted.blendMode = BlendMode.LAYER;

			addChild(inverted);
		}

		public function moveMask($target:Object,$maskPos:Object):void {
			$target.getChildAt(0).getChildAt(1).x  = $maskPos.x;
			$target.getChildAt(0).getChildAt(1).y  = $maskPos.y;
		}
	}
}

To activate it you just copy/paste this into your project.
The first parameter is the object you want to mask, the second is the mask itself and in the third parameter you tell the mask where along the x and y-axis it should go.

var newMask:InvertedMask = new InvertedMask(OBJECT_TO_BE_MASKED, THE_MASK, { x:0, y:0 } );
addChild(newMask);

What about moving the mask?
If you add an eventListener to the InvertedMask-object and call the function below it will move your mask in anyway you want.

newMask.addEventListener(MouseEvent.MOUSE_MOVE, moveMask);

private function moveMask(e:MouseEvent):void {
    e.currentTarget.moveMask(e.currentTarget, { x:mouseX-10, y:mouseY-10 } );
}

So, all credits for the solution goes to Rachel, I’ve just tweaked it a little to suit my needs and as I said, it’s not perfect but it’s a start.