Gradient masks do not work in 16 bit or 256 colours

By scott

Now that I think about this, it only makes sense. But it was a bit of a piss off when I first discovered this. Actually a co-worker of mine noticed it.

With Flash 8 you can finally use gradient masks. The only way to pull it off however is to use code. Here is an example:

myClip_mc.cacheAsBitmap = true;
myMask_mc.cacheAsBitmap = true;
myClip_mc.setMask(myMask_mc);

Pretty straight forward. In the example, myMask_mc would be a gradient shape drawn inside a movieclip.
In 32 bit this works great. Anything less you will see no masking, just your drawn mask shape or some other oddities like the mask flickering on and off.

Not 100% confirmed, but I’ve heard it from a few sources. This is only an issue on a PC. Gradient masks work fine on macs at all colour depths.

In order to get around this issue we are going to grab the colour depth with JavaScript (screen.colorDepth) and pass the value into the flash movie. Unfortunatly you can’t detect the colour depth with ActionScript, it is not a property of System.Capabilities. Any who, if the colour depth is lower than 32 bit I will draw/attach a hard edged mask. If the users system is running at 32 bit colour I will draw/attach a soft edged gradient masks.

At the time of writing this I haven’t implement this fix. But if you stay tuned to http://codex.ashesandsnow.org you will see it in action. For now change your colour depth settings and check out how *great* the site looks at 16 bit. Blah.

Added June 9, 2006

After thinking about this a bit more, the same effect could be accomplished by using blend modes and the bitmapData class. You could load an image into a movieclip, clone (draw method of the bitmap data class) the clip or attachBitmap if your image is in your library. Use the layer blendmode on the bitmap data, attach a gradient mask in the same movieclip that is holding the image (obviously on a higher depth) directly over the image and use the alpha blendmode on the attached gradient mask. This will accomplish the same effect and will work on systems lower than 32 bit colour.

import flash.display.BitmapData;

bmp = BitmapData.loadBitmap("imageFile");
this.createEmptyMovieClip('holder_mc', this.getNextHighestDepth());
holder_mc.blendMode = 'layer';
holder_mc.attachBitmap(bmp, holder_mc.getNextHighestDepth());
var mask = holder_mc.attachMovie('maskClip', 'mask_mc', holder_mc.getNextHighestDepth());
mask.blendMode = 'alpha';

This implementation would work on the site I mentioned above, however blend modes are very processor intensive and the gradient masks we are using are very large, therefore we are still going to use the solution I described above.

Happy masking!!