Strange Dynamic Mask with Tween Problem

programming flash
1

Can anyone tell me what I am doing wrong or don’t know enough about masking to accomplish?

Basically, I have a Sprite that serves as a mask. That sprite is populated with several small squares with tweens on them (using TweenLite).

If I use “mc.addChild(boxContainer);”, I get this result, which works *perfectly *(Click on stage to activate tween):
http://iqandreas.isbetterthanyou.org/public/kirupa.com/mask-problem-2011-07-17/mask-problem-addchild.swf

But, if I use “mc.mask = boxContainer;”, I get some really strange results:
http://iqandreas.isbetterthanyou.org/public/kirupa.com/mask-problem-2011-07-17/mask-problem-setmask.swf

As you can see, it captures a small bit of the tween action when it makes it a mask, but it seems as the mask is cached, and will not refresh the mask each frame. I tried solving this problem by refreshing the mask each frame… Very bizarre results:
http://iqandreas.isbetterthanyou.org/public/kirupa.com/mask-problem-2011-07-17/mask-problem-onenterframe.swf

Here is the code I am using:

import gs.TweenLite;

//Draw background
this.graphics.beginFill(0xFF0000);
this.graphics.drawRect(0, 0, this.stage.stageWidth, this.stage.stageHeight);
this.graphics.endFill();

//Create main Sprite/MovieClip
var mc1:MovieClip = new MovieClip();
mc1.x = 20;
mc1.y = 30;

mc1.graphics.beginFill(0x0000FF);
mc1.graphics.drawRect(0, 0, 500, 300);
mc1.graphics.endFill();

this.addChild(mc1);

this.stage.addEventListener(MouseEvent.CLICK, maskIt);
function maskIt(ev:Event):void
{ maskItem(mc1);}

function maskItem(mc:MovieClip):void
{

    var boxesX:int = 8;
    var boxesY:int = 5;

    var boxContainer:Sprite = new Sprite();

    //Alternate between these three to see the difference
    // #1 - mc.addChild(boxContainer);
    // #2 - mc.mask = boxContainer;
    
    // #3 - Refresh mask each frame
    //this.addEventListener(Event.ENTER_FRAME, loop);
    //function loop(ev:Event):void
    //    { mc.mask = boxContainer; }

    var boxWidth:Number = mc1.width / boxesX;
    var boxHeight:Number = mc1.height / boxesY;


    for (var i:int = 0; i < boxesY; i++)
    {
        for (var j:int = 0; j < boxesX; j++)
        {
            var box:Sprite = new Sprite();
            box.graphics.beginFill(0x000000);
            box.graphics.drawRect(0, 0, boxWidth, boxHeight);
            box.graphics.endFill();
            
            box.x = j * boxWidth;
            box.y = i * boxHeight;

            TweenLite.from(box, 0.3, {x:box.x + (boxWidth / 2), y:box.y +(boxHeight / 2), width:0, height:0, delay:((i * boxesX) + j) * 0.1});
            
            boxContainer.addChild(box);
        }
    }
}

Does anyone know why this is happening?

This is my guess. Since each individual box is technically not on the display list, it is never rendered. Perhaps only once when you call the “container.addChild(box);” but other than that, it only displays it’s old cache of the last render.