Inverse masking disclosed
Utorok, Júl 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.
23 Comments
SKudirka
• Visit Site
Júl 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
Júl 28th, 2009
wow Franto, you won the prize ‘Post of the week’ with this one.
thanks for the enlightenment.
Franto
• Visit Site
Júl 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
Január 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
Máj 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
Máj 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
Jún 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
Jún 12th, 2010
thank you
Daniel Sedlacek
• Visit Site
Jún 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
Jún 25th, 2010
Bravo
Colin Kirk
• Visit Site
Jún 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
Júl 4th, 2010
You are a legend!!!!
Nir
• Visit Site
Júl 6th, 2010
I’ts just Greaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat!!!
great great great!!!
shame for ADOBE not telling this!
Haggis
• Visit Site
Júl 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)
John Dusbabek
• Visit Site
Júl 23rd, 2010
Colin- try setting mouseChildren=false, and mouseEnabled=false.
Matthew
• Visit Site
Júl 24th, 2010
You’re climbing in the google search… thanks for saving me a lot of effort.
GOVERNMENT
• Visit Site
August 10th, 2010
A million thanks and a billion kudos! You’ve saved me a whole day’s bug testing and you’ve also made my project possible. Thank you!
Jose Fidalgo H.
• Visit Site
November 16th, 2010
Awesome! save my day!!!!!
bruno
• Visit Site
Marec 1st, 2011
Wow, You saved my day! simple and efficient… I really didn’t want to mess with bitmapData and matrix…
thanks for posting!
underworlddv
• Visit Site
Marec 5th, 2011
Perfecto, si que ah sido un bune post…
ojala todos fueran asi.
Jorge
• Visit Site
Marec 25th, 2011
AWESOME!!!!
WORKS LIKE A CHARM!!! =)
THANKS A LOT!!!=)
PS: Why Adobe doesn’t document this??!?!?!
bugz
• Visit Site
Jún 3rd, 2011
thank you very much !
Sorry, comments for this entry are closed at this time.