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

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.

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:
    instead of:


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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s


Reasons to be Creative 2012

FITC Amsterdam 2012

Flash on the Beach 2011

Flash on the Beach 2010

Swingpants at Flash on the Beach

Flash on the Beach 2009

Swingpants at FOTB2009

Twitter Updates

  • RT @crab_feet: 《バーコーダー》バーコードリーダーのスキャン信号をレジではなく、スピーカーに直接接続することで音を鳴らす。 いま渋谷で巨大レシート版、演奏できます┃┃┃┃_ρ゙ #electronicosfantasticos https://t.co/tc5TT… 8 hours ago
  • RT @noUpside: So a few days ago a pediatrician made a TikTok video about how vaccines don’t cause autism. It was cute and fun, and it went… 3 days ago
  • Recommendation: Parasite - Bong Joon Ho A wickedly funny ride that is thriller, farce and horror - inhabited by ex… twitter.com/i/web/status/1… 1 week ago
  • Quibi "Turnstyle" format: Ahead of their short-form platform launch, Quibi have announced a 'patent-pending' video… twitter.com/i/web/status/1… 2 weeks ago

%d bloggers like this: