Inverse masking disclosed

Tuesday, July 28th, 2009
Inverse masking disclosed

Recently I have used inverse mask in my project – a mask that hides everything beneath it, keeping everything outside visible. I knew there is no direct support for inverse masking in Flash, but such effect can be achieved by using blend modes.

To my surprise when you google the term “flash inverse mask” all top ten or so results claim that this is not possible in Flash(!). People either suggest to “invert the mask” or “duplicate the background layer and put it on the top of the layer stack, mask that”. Some more advanced coders even do some magic with BitmapData.treshold and ColorTransforms. This may work but the solution is way much easier.


Simply set the blend mode of masking object to BlendMode.ERASE place it above the object you want to mask and set the blend mode of their parent to BlendMode.LAYER (this is essential). And that’s it! You can get similar effect when your mask is transparent and you project it’s transparency to underlying object by setting BlendMode.ALPHA.

It is a pity that such valuable functionality remains almost unknown and unused and I think Adobe is the one to blame here. The documentation on blending modes is really poor, if not confusing. Especially the LAYER mode is confusing, stating “This is done automatically if …is display object container with at least one child object with a blendMode setting other than BlendMode.NORMAL.” while the ERASE mode reads “This requires the blendMode of the parent display object to be set to BlendMode.LAYER” (manually). I have also noticed that adding shadow to the parent object has the same effect here as setting the blend mode to LAYER. In addition, there are some nice pictures on how different blend modes work, but you won’t find them (nor a reference) in a Applying blending modes chapter, nor in BlendMode class documentation but only in DisplayObject class documentation. To shame Adobe even more, blend modes are available since “ActionScript 1.0; Flash Player 8″

If this article was of any help to you please lave me a comment :)

Download source FLA here.

tagged under: ........

ABOUT THIS AUTHOR

Get a Trackback link

5 Comments


  1. SKudirka
    Visit Site
    July 28th, 2009

    Great stuff man. Been wanting to do something like this for a long time and this is pretty easy to implement.


  2. vitaLee
    Visit Site
    July 28th, 2009

    wow Franto, you won the prize ‘Post of the week’ with this one.
    thanks for the enlightenment. :)


  3. Franto
    Visit Site
    July 29th, 2009

    great post, but it’s not mine. Author is my friend Daniel Sedlacek. All kudos to him :)


  4. Léo MacVal
    Visit Site
    August 21st, 2009

    I can’t open the file using Flash CS3. Is it CS4?

    Thanks in advance!


  5. Daniel
    Visit Site
    January 26th, 2010

    Perfect and hard-to-find solution.

    I think its important to mention that you shouldnt set the masking layer as a mask at all. Just put it on top and set its blending mode to “Erase”

Live Preview

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

CommentLuv Enabled

Images is enhanced with WordPress Lightbox JS by Zeo