Masks in AIR with Actionscript 3

Question

I'm trying to do a mask on a circle shape in ActionScript 3 (I'm using the Flex AIR framework). It has to do with the ecological footprint, each circle representing one earth. This ecological footprint picture is inside a container. The problem is that the mask seems to be fixed, though the picture floats. When I scroll the container down, the picture will scroll just fine, but the mask won't, clipping out the top of the picture. I've put this and other UIMovieClip in a VBox container. That VBox container is inside yet another VBox container. If I put the fomer VBox container on the bottom of the latter, the mask will not go with it, so the circle won't be masked.

mask = new UIMovieClip();
mask.graphics.beginFill(0xFFFFFF);
mask.graphics.drawRect(radius,radius+radius*2*(1-(ecoWeight-Math.floor(ecoWeight))),1000,1000);
mask.graphics.endFill();    
earth = new UIMovieClip();    
earth.graphics.beginFill(0xFFFFFF);
earth.graphics.drawCircle(radius,radius,radius);
earth.mask=mask;
earth.graphics.endFill();

Answer 1

Masks suck and frequently don't do what is expected of them. I've had much more luck with BlendMode.ALPHA used in conjunction with BlendMode.LAYER.

Answer 2

I don't know Flex, I use Flash CS3, but try adding an Event Listener to reposition the mask. Also, try making sure that you are doing things in the proper order. Apply the mask and THEN put everything in the second VBox. In other words, my (limited) experience with Actionscript has taught me that chronology matters.

Also, make sure that all of your variables are targeted properly. In Flash CS3 (again, I could be spewing gibberish) if you click on a MovieClip with a child element inside of it and you don't specifically turn off the mouse for the child element, the parent won't register the event.

Good luck!

Answer 3

Either add the mask to the VBox container:

myVBox.addChild(mask);

or put both the mask and the shape into a container then move the container:

var bundle:Sprite = new Sprite();

mask = new UIMovieClip();
...

earth = new UIMovieClip();    
...

bundle.addChild(mask);
bundle.addChild(earth);

myVBox.addChild(bundle);

bundle.x = 100;
bundle.y = 100;

This fixes the earth and mask together. I'm not familiar with UIMovieClip, but you can replace the Sprite with UIMovieClip I imagine. This is a better solution to the first one, because you're unlikely to remember to remove the mask if you remove the earth if you don't bundle them together.

Hope this helps.