How can masking not work in ActionScript 3?

Question

I wanted to mask some nodes of my DisplayObject tree. I couldn't make masking work in my big project. So I build a simple example for me and I saw it works actually pretty good. But I can't figure out why it doesn't work in my big project. All my visible objects are Sprites or from classes that extend Sprite.

• masking in big project doesn't work
  • I can see the normal state of my nodeToBeMasked
  • when I add the mask to this node I can see the mask
  • but when I set the mask to be the mask, I continue to see everything (pure nodeToBeMasked is masked but not the children - which would be much more important)
• masking in simple example works fine

How can masking stop working ?

---

Code: (that doesn't work, big project)

// custom class extends Sprite
override protected function onAddToStage(event:Event):void 
{
    trace(stage); // stage exists

    var maskSprite:Sprite = new Sprite();
    maskSprite.graphics.beginFill(0xffff00, 1);
    maskSprite.graphics.drawCircle(0, 0, 64);
    maskSprite.graphics.endFill();
    maskSprite.x = 64;
    maskSprite.y = 64;

    if (true)
    {
        this.addChild(maskSprite); // doesn't help
        this.mask = maskSprite; // I can see EVERYTHING here, inside and outside the cirle
    }
    else
        addChild(maskSprite); // I can see the mask here
}

Code: (that works)

[SWF(frameRate="60",backgroundColor="0xffffff",width="128",height="128")]
public class MaskTest extends Sprite
{
    public function MaskTest()
    {
        addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
    }

    private function onAddedToStage(event: Event): void
    {
        trace(stage);

        // this
        graphics.beginFill(0x00ff00, 1);
        graphics.drawRect(8, 8, 112, 112);
        graphics.endFill();
        // extra childs <- ^^
        for (var i: int = 0; i < 100; i++)
        {
            var child: Sprite = new Sprite();
            child.graphics.beginFill(uint(Math.random() * 0x1000000), 1);
            child.graphics.drawRect(Math.random() * 64, Math.random() * 64, 64, 64);
            child.graphics.endFill();
            addChild(child);
        }

        // mask
        var maskSprite: Sprite = new Sprite();
        maskSprite.graphics.beginFill(0xffff00, 1);
        maskSprite.graphics.drawCircle(0, 0, 64);
        maskSprite.graphics.endFill();
        maskSprite.x = 64;
        maskSprite.y = 64;

        // switch to check the mask
        if (true)
            this.mask = maskSprite;
        else
            addChild(maskSprite);
    }
}

Update:

I found out that my custom class (that is the root and is only responsible for Event.ENTER_FRAME updates) was causing the problem. I don't know why but by disabling the z update in all my project solved the children of my maskedNode not being masked.

Answer 1

//this wasthe problem in my big project
maskSprite.z = 0; // avoid this with masks

Just a wild guess from me:
if you use the properties z, rotationX, rotationY, rotationZ (maybe some more) the sprite is shifted to the 3D space and the masking is only working in 2D.

I have experimented with Flash 3D a bit. The transition from 2D to 3D seemed very smooth. You can't see when they "turn".

Answer 2

The mask MUST be added to the parent to work, not only used as

obj.mask = myMask; //This will not work alone

To make it work, it must be added to the parent object display list

obj.addChild(myMask);
obj.mask = myMask;