How to cut a "hole" inside a rectangular Sprite to see the Sprite underneath? (ActionScript 3)

Question

Everytime I google this question I see confusing information about masks and blends, none of which seems to directly apply to what I think should be an easy thing...

There are three Sprites involved here...the lowest layer sprite is pretty much a background. I want to overlay a translucent Sprite on top of the background and then I want the third, top-most Sprite to act as a hole, so that the area inside the third Sprite is completely transparent, so that the background sprite is completely visible.

How would I go about doing this dynamically (i.e. dynamically drawing the masking sprite and hole using the Actionscript graphics calls)?

Answer 1

I know it's been a long time ago, but just for people who might look for the same problem. It's actually quite easy (as long as draw your Sprite with the graphics class).

1) Inflexible hole cutting:

this.graphics.beginFill(0x666666);
this.graphics.drawRect(0,0,256, 256);
this.graphics.drawCircle(128,128,32);
this.graphics.endFill();

this will create a rectangle of 256 by 256 with a 64px hole in it.

2) Flexible hole cutting:

Obviously this will not work when you're not using the graphics class. In That case I would go with BlendMode.ERASE.

var spr:Sprite = new Sprite();
var msk:Sprite = new Sprite();

addChild(spr);
spr.addChild(msk)

spr.graphics.beginFill(0x666666);
spr.graphics.drawRect(0,0,256, 256);
spr.graphics.endFill();

msk.graphics.beginFill(0x000000);
msk.graphics.drawEllipse(0,0,64,64);
msk.graphics.endFill();
msk.x = 128;
msk.y = 128;

spr.blendMode = BlendMode.LAYER;
msk.blendMode = BlendMode.ERASE;

When using BlendMode.ERASE you must ALWAYS set the parentcontainer's blendmode to BlendMode.LAYER, otherwise it won't work.

I hope this might help someone