Quick post to describe how to apply a gradient mask to a display object in AS3 (& AS2).
#1 Put your gradient mask on the stage – lets call it gmask
#2 Put the object to be masked on the stage.
#3 Set both the mask and the ‘object to be masked’ to cacheAsBitmap
#4 Apply the mask to the object
In #AS3
gmask.cacheAsBitmap = true
obj_to_be_masked.cacheAsBitmap = true
obj_to_be_masked.mask =gmask
In #AS2
gmask.cacheAsBitmap = true
obj_to_be_masked.cacheAsBitmap = true
obj_to_be_masked.setMask(mask)
It really is as simple as this.
Note to designers: Gradient masks can’t obviously be done directly from the IDE (see below), but these three lines can be placed on the timeline if so desired.
To put a gradient mask on dynamic text you will need to place the text within a container (movieclip/sprite) and mask that.
The object to be masked can also contain animation, text or video though this will require a bit more processor as the bitmap will need to redraw on each frame. Often this is well worth it as the effect can be great.
There is a way of achieving this same effect with no code at all and here it is:
#1 Put your gradient mask on the stage – lets call it gmask
#2 Put the object to be masked on the stage.
#3 Put both of these items into a movieclip/sprite (the container) making sure the mask is on a layer above the object
#4 Give the mask a blend mode of ‘Alpha’
#5 Give the ‘container’ a blend mode of ‘Layer’
And there you have it. Gradient masking achieved with blendModes and absolutely no code.
Benchmarking the two gradient mask methods:
I used each method to mask an embedded video – then placed an instance on the display list and ran at varying frame rates.
Initially there was negligible difference between the code and blend mask methods. I ramped up the FPS to 120 and put four instances of the video on screen. With this set up the code method (cacheAsBitmap) was up to 4% faster than the blendMode Mask method.
Conclusion: The code method is faster but very marginally. If you are desperate for a bit of extra juice go with code.
Swingpant's Game Lab 