I hope this post will help other people easily use PNG files, with transparency, as masks in Flex.
I was working on a project where I needed to draw a colored rectangle using the drawing API, then mask it into a non-rectangle using a user-selectable PNG file. The transparency in the PNG would determine what parts of the colored rectangle shows through, and at what alpha.
Easy enough…
After an hour or two of screwing around with it, I finally figured out that you need to set the CacheAsBitmap setting for BOTH the mask image as well as the masked object for the transparency to be used in the masking.
So do this:
myRectangleComponent.cacheAsBitmap = true;
myMaskImage.cacheAsBitmap = true;
myRectangleComponent.mask = myMaskImage;
Here’s an example flex application (with source) showing all combinations of cacheAsBitmap for the rectangle (Canvas) and the mask image. Notice on all but the last one, the Canvas is masked by the extents of the PNG image and not the transparency.
So the takehome message is to set both the mask-er and the mask-ee to cache as a bitmap. I’m not sure exactly why this is necessary, framework-wise, but it mentally makes sense - when the player internally represents it as a bitmap, it can examine the transparency of each pixel and use that information in the mask. I’m less warm and fuzzy about why the masked object needs to be cached as well — I guess it’s for the same reason so the player can evaluate the pixel being shown through the mask, but hey, it works and that’s 99% of what I care about…
Oh - for my friends and family — this is what I do at work. Sorry to be geeky in front of you, but expect more coming soon.
Entries (RSS)
November 15th, 2007 at 7:36 pm
Hi Todd
Just a quick note to say thanks for putting this tricky little piece of knowledge online - you saved me much head scratching! Cheers!
January 12th, 2008 at 11:14 am
Todd,
I thought this information might lead me in the right direction, but I can’t seem to get it to work for me. I’m trying to mask an image so that only part of it will be displayed. If I use a transparent canvas as a mask, I can’t see anything at all.
Any help would be appreciated. Thank you in advance,
Margaret
January 12th, 2008 at 11:58 am
Sorry for the silly question, I just figured out I can use a canvas around the image.
January 12th, 2008 at 12:00 pm
Margaret - from what you wrote… here’s what I think is going wrong. The player decides what to let show thorugh the mask based on what would be visible in the mask, were it visible - clear as mud, huh?
If your mask is just a normal canvas (not-transparent) with a background color set, the canvas is 100% opaque (0% transparent) — thus every pixel of the canvas will let 100% of the image show through because 100% of the canvas is showing in that pixel. By making the canvas trasparent, 0% of the canvas is showing through, so 0% of the image is shown for that pixel when the canvas is used as a mask.
In graphics programs, masks are often shown as values between black and white - but Flex/ Flash uses the transparency/”alpha”. So in the example I posted here, the opaque parts of the mask image (the border and most of the reflection on the monitor) let the pink canvas show through. The completely transparent portions (the non-reflective parts of the monitor) let none of the pink show through, and the transitional parts of the reflection let the pink show through however opaque the mask is at that pixel: 99% at the top of the reflection to 0% at the bottom.
So if you wanted to show, say, only the right half of your image, put the image with the canvas on top of it (covering the right half or the image). Make the canvas have a background color (since canvas is usually transparent by default) and set the image’s mask property to the canvas. The specific background color of the canvas doesn’t matter since the masking just goes off the opacity, but I usually use something like bright magenta, which will pop out at me visually if something goes wrong or I forget to make it mask something (happens every time…). The alpha/background alpha of the canvas will determine how transparent the portion of the image that shows is. So if you set the canvas, with the background color, to have an alpha of 50%, you’ll see only the right half of the image (since that’s what the mask covers) and will see 50% of whatever is behind the image showing through it.
Let me know if this made any sense or not…
August 12th, 2008 at 12:30 pm
Thanks man!! really useful. I had been pulling my hair for a while before finding your post. Works like a charm.
October 20th, 2008 at 7:25 pm
thanks a lot! saved me some time.