title: Actionscript 3 and dynamic masks
body: <p>I have a container MovieClip that serves as a content area that I need to mask off. When I create a mask inside this container using a Shape I can't seem to interact with the contents of other containers I create here, like buttons etc.</p>
  
  <p>This is what I'm doing in code (I've left out all the import's etc.):</p>
  
  <pre><code>class MyContainer extends MovieClip
  {
     protected var masker : Shape = null;
     protected var panel : MyPanel = null;
  
     public function MyContainer()
     {
        this.masker = new Shape();
        this.masker.graphics.clear();
        this.masker.graphics.beginFill( 0x00ff00 );
        this.masker.graphics.drawRect(0, 0, 1, 1);  // 1x1 pixel.
        this.masker.graphics.endFill();
        addChild( this.masker );
  
        this.panel = new MyPanel();  // has buttons and stuff.
        addChild( this.panel );
  
        this.mask = this.masker;
     }
  
     // called by it's parent when the stage is resized.
     public function resize( width : Number, height : Number ) : void
     {
        // set the mask to half the size of the stage.
        this.masker.width  = width  / 2;
        this.masker.height = height / 2;
  
        // set the panel to half the size of the stage.
        this.panel.resize( width / 2, height / 2);
     }
  }
  </code></pre>
  
  <p>When I add the mask (Shape) to the display hierarchy I can no longer interact with whatever buttons are defined in MyPanel. However, <strong>not</strong> adding the mask to the display hierarchy does let me interact with the contents on MyPanel but the mask is not sized/positioned correctly. I guess that when the mask is not added to the display hierarchy it sits in the top-left corner of the movie (I cannot prove this though).</p>
  
  <p>How do I go about making my mask size/position correctly and let the user interact with the buttons in MyPanel?</p>