Inverted Mask in Flex
Today I took on the challenge of changing a component I built last year to fit into a new style our creative department just finished for a new website. The previous component had a drawn background and some text laid over it which was a different color. The new style called for the same thing with a different background color and the text cut out of the shape. The different background color was easy, I simply added a few styles (one for rollover too) and had it changing color. The harder part was cutting the text out of the background. I knew that this was possible in graphics programs by inverting the mask used or subtracting the shape from another shape and using that as the mask. I couldn’t find any options in Flex for inverting a mask and a google search provided nothing on inverting a mask. I did, however run into a graphics tricks article on InsideRIA. This reminded me of the blend modes that I’d played with in the San Francisco Papervision3D course.
Curious, I went looking and sure enough there was a BlendMode.INVERT. This didn’t, however, do what I wanted of course. This inverted the color values, not the mask. Looking further I found BlendMode.ERASE. This sounded promising but several iterations had it doing nothing, then showing as normal text, then “erasing” everything underneath it. I didn’t want my text to erase everything, just the shape behind it. After some more playing I found the key. cacheAsBitmap. Of course, cacheAsBitmap on one of the pieces didn’t work. Normal masking, for that matter, required cacheAsBitmap on both the mask and the maskee. The trick to make an inverse mask is to set cacheAsBitmap to true for the container of the things that are being masked.
I’m not sure what the performance implications of this are but the effect sure is nice. :-)
Example (click to invert, view source enabled):
The red horizontal lines are on the bottom level. The text and the green vertical lines are within containingCanvas on top of the red lines. The green lines are beneath the text and masked by the text by default. Click to have it mask the green lines in inverse.