Inverted Mask – Like a mask, but the other way around

Version – 2.5, updated 2010/11/24
Compatibility - AS3 (Flash Player 9 and later)

What is this? Why is this?

A while back I needed to create masks at runtime. Piece of cake you might say. The thing is, my masks had to be inverted, something that is missing in action script today. That is when I started to work on this class. Over time it has grown into a small pet project that has evolved into what it is today.

Demos

Click inside the swf to toggle between the inverted and normal mask.

Sources: Webcam and image
Sources: Images
Sources: Image and animated movieclip

Sample code

package {
 import flash.events.MouseEvent;
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;

 public class InvertedMaskImages extends Sprite {
 private var maskObject : Sprite = new Sprite();
 private var invMask : InvertedMask;

 // Embeding the images "the flex way"
 [Embed(source="bg.jpg")]
 public var imgCls : Class;
 [Embed(source="bg2.jpg")]
 public var imgCls2 : Class;

 public function InvertedMaskImages() {
 if (stage){
 init();
 }else{
 addEventListener(Event.ADDED_TO_STAGE, init);
 }
 }

 private function init(e : Event = null) : void {
 stage.align = StageAlign.TOP_LEFT;
 stage.scaleMode = StageScaleMode.NO_SCALE;
 removeEventListener(Event.ADDED_TO_STAGE, init);

 // The backgroundimage.
 addChild(new imgCls());

 // The image that we want to mask. Used as source when setting up the mask on row 44.
 var top : Sprite = new Sprite();
 top.addChild(new imgCls2());
 addChild(top);

 // The mask object, loaded from the file Assets.swc. Used on row 45.
 maskObject.addChild(new starMask());
 addChild(maskObject);

 invMask = new InvertedMask();
 invMask.source = top;
 invMask.maskSource = maskObject;
 addChild(invMask);

 stage.addEventListener(Event.ENTER_FRAME, updateMask);
 stage.addEventListener(MouseEvent.CLICK, swapMask);
 }

 private function updateMask(e : Event) : void {
 invMask.move(mouseX, mouseY);
 }

 private function swapMask(e : MouseEvent) : void {
 invMask.swapType();
 }
 }
}

Source code

Download InvertedMask 2.5 here (zip)

Documentation

Public methods

• source(val:DisplayObject) – The displayobject you want to mask.
• maskSource(val:DisplayObject) – The mask.
• framerate(val:Number) – If you want to mask a video, webcam or animated movieclip you need to set the framerate so the mask will update. Defaults to -1.
• move(x:Number,y:Number):Number – Update the maskposition at runtime.
• type(val:String) – Set the init-state of the mask to either inverted or normal. Defaults to inverted.
• swapType(val:String) – Swap the mask between normal and inverted at runtime. Pass either ”normal”, ”inverted” or ”auto” as parameter. Defaults to ”auto”.