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.

About these ads

1 Response to “Gradients and masks in actionscript”


  1. September 30, 2011 at 12:45 pm

    Hey there!
    Nice tutorial, there is one thing though that I’d like to point out!

    It should be:
    obj_to_be_masked.setMask(gmask)
    instead of:
    obj_to_be_masked.setMask(mask)
    :)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


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.

%d bloggers like this: