Problems in Flash #02: Component Masking/Alpha Troubles

POSTED IN Actionscript, Design, Flash Platform | TAGS : Actionscript, alpha, components, Flash Platform, mask, masking July 6, 2008

This is probably going to become a recurring theme throughout these little post; the Flash V2 components. I don’t know which codemonkey designed these, but my lord, he seriously needs to be beaten with a proper software design book. There are alternatives out there, like ActionStep which is Open Source or a commercial product like FlashLoaded’s Bit Component Set. However, they both lack advanced functionality or being totally complete for use with advanced user interfaces.

The simple fact that they were created without being rendered (or have the same behavior) as a normal MovieClip causes major problems in terms of behavior and functionality. One of them is when it comes to Masking/Alpha.

When you try to use the Tween class to diminish the alpha of a component, say a TextField, you will notice that the behavior isn’t right. The animation doesn’t seem to be smooth; some artifacts show up and some things (like say the text) doesn’t actually fade out, but wait until the alpha is 0 to be completely invisible. This problem is fixed using the Bit Component Set since they are all MovieClip based, however their functionality and the ability to customize is limited.

The ‘fix’ for this, and I place it in quotes because I find the solution to be a dirty way of doing it, is to create a mask and then change the alpha of the mask layer. But it cannot be a mask from the timeline; the mask needs to be set using actionscript. To do this, you also need to bitmap cache the mask layer and the layer to be masked, like so:

this.maskee.cacheAsBitmap = true;
this.mask.cacheAsBitmap = true;
this.maskee.setMask(this.mask);

The ‘maskee’ would be a MovieClip that contains all the components (and other content) and the mask is just another MovieClip (like a square) that covers all of the content. And now you can fully control the alpha appearance of the components.