Inverse masking disclosed
Tuesday, July 28th, 2009
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
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.
ABOUT THIS AUTHOR
16 Comments
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.
vitaLee
• Visit Site
July 28th, 2009
wow Franto, you won the prize ‘Post of the week’ with this one.
thanks for the enlightenment.
Franto
• Visit Site
July 29th, 2009
great post, but it’s not mine. Author is my friend Daniel Sedlacek. All kudos to him
Léo MacVal
• Visit Site
August 21st, 2009
I can’t open the file using Flash CS3. Is it CS4?
Thanks in advance!
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”
Adam
• Visit Site
May 18th, 2010
Awesome! This is really incredibly easy and usefull!
As U said, I can’t understand why Adobe doesn’t properly document this!!
thanks a lot, u saved me a lot of time!
Nikolay Nikiforov
• Visit Site
May 28th, 2010
Incredibly useful! Awesome post!
Something more to mention: Here the alpha gradient of the mask works correct.
The “normal” masking does not takes into account the gradient alpha while here everything is as should be!
Thank You ! Thank You! Thank You!
Trevor
• Visit Site
June 12th, 2010
Is it possilbe to do this process, and use text as the mask. I have a white rectangle, and I want to basically cut out “&” from the white block. Any ideas?
Bilgi yar??mas?
• Visit Site
June 12th, 2010
thank you
Daniel Sedlacek
• Visit Site
June 14th, 2010
@Trevor: I’ve tried it and it works, also with dynamic and input text, with or without embedded font. Just don’t forget to set the parent’s blend mode to Layer.
Colin Kirk
• Visit Site
June 25th, 2010
Bravo
Colin Kirk
• Visit Site
June 25th, 2010
Hmmmm… found something interesting maybe. If I place a button underneath the new layer it is blanketed by it. I tried setting mouseChildren to false but not getting anything…. ideas?
Mikael
• Visit Site
July 4th, 2010
You are a legend!!!!
Nir
• Visit Site
July 6th, 2010
I’ts just Greaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat!!!
great great great!!!
shame for ADOBE not telling this!
Haggis
• Visit Site
July 17th, 2010
You’ve just saved me a lot of frustration.
1 internet to you, sir.
(Also, added this to stumbleUpon, can’t believe it wasn’t there already)
Matthew
• Visit Site
July 24th, 2010
You’re climbing in the google search… thanks for saving me a lot of effort.
Live Preview
Leave a comment