Posts Tagged ‘Masks

30
Apr
09

Gradients and masks in actionscript

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.




Categories

Reasons to be Creative 2012

FITC Amsterdam 2012

Flash on the Beach 2011

Flash on the Beach 2010

Flash on the Beach 2009

Swingpants at FOTB2009

Twitter Updates

Error: Twitter did not respond. Please wait a few minutes and refresh this page.


Follow

Get every new post delivered to your Inbox.