Any thoughts on how to create a true 'punch-out' area in a Sprite?

Question

I've been working on this for awhile, now. You might also call it a 'reverse mask', or an 'inverse mask'.

Basically, I'm creating a view window within a display object. I need to allow objects on the stage that are under the window to be able to interact with the mouse.

This is similar to a WPF question: http://stackoverflow.com/questions/740994/use-wpf-object-to-punch-hole-in-another, which has a much shorter write-up.

I've got a Class called PunchOutShield, which creates a Sprite that covers the stage (or over some desired area). The Sprite's Graphics object is filled using the color and transparency of Flex's modal screen. The result is a screen that looks like the screen which appears behind a modal PopUp.

PunchOutShield has a method called punch, which takes two arguments - the first is a Shape object, which defines the shape of the punch-through area; the second is a Point object, which indicates where to position the punch-through area.

It took some experimenting, but I found that I can successfully create a punch-out area (i.e. - the modal screen does not display within the bounds of the given Shape). To do this, I set cacheAsBitmap to true on the Sprite that is used to create the modal screen, and also on the Shape object, which is added to the modal screen Sprite's displayList.

If I set the blend mode of the Shape to ERASE, a completely transparent area is created in the modal screen. So far, great.

The problem is that Shape does not subclass InteractiveObject, so there is no way to set mouseEnabled = false on it. And so, it prevents interaction between the mouse and any objects that are visible through the punch-out area.

On top of that, InteractiveObject isn't available to look at, so I can't see if there is a way to borrow what it's doing to provide the mouseEnabled functionality and apply it to a subclass of Shape.

I've tried using another Sprite object, rather than a Shape object, but the blending doesn't work out correctly. I'm not sure why there is a difference, but the Shape object seems to somehow combine with the parenting Sprite, allowing the ERASE blendMode to effect the desired punch-out visual appearance.

It wouldn't be the end of the world if I had to draw up the screen with a series of rectangles so that the punch-out area was just simply not drawn, but that approach won't work if the punch-out area is complex. Or round.

Any thoughts on this approach, or on an alternative approach?

Answer 1

Is there a reason why you can't use the mask property of DisplayObject? That should allow you to put a hole in any display object.

Answer 2

It seems that drawing multiple shapes between beginFill() and endFill() and using the result as a mask could produce the desired effect. See also: http://www.galaxygoo.org/blogs/2007/09/shapes_unexpectedly_cancelling_1.html