How To Do Feathered Masks in Adobe Flash
Monday, November 19th, 2007Categories: Adobe Flash
RSS Comment Feed
Trackback
If you’re looking to do feathered (or smooth, anti-aliased, depending on your terminology) masks in Adobe Flash, and you are familiar with the program, you’ll notice that it’s not easy to do a mask without sharp edges. Using this technique, you can use images with transparencies (PNGs) or draw vectors in Flash to use as masks. I’ll be going over the latter in this example.
In this example, we have three items: our object, our mask (in this case, it was drawn in Flash) and our black background. (I put them side by side in the image)
1 – Convert your mask and your object to Movie Clips. In this example, I used mask_mc and object_mc. Your library might look something like this:
2 - Place mask_mc and object_mc on your canvas and assign Instance Names identical to their Movie Clip Names. Get into the habit of naming your layers the same as your Movie Clip names. Your canvas should look like this:
Note: If you’re a little newer to Flash, you can set your Instance Name by clicking on the Movie Clip on your canvas and filling in this section:
3 – Fill in the ActionScript. Create a layer called actions and type in the following ActionScript.
this.mask_mc.cacheAsBitmap=true;
this.object_mc.cacheAsBitmap=true;
object_mc.setMask(mask_mc);
4 – Play. If all worked out well, your result should look like this (notice the top and bottom are transparent, so you see the black background):
and your layers should look like this:
Notes
A few things to note:
- These masks can be animated.
- Image files (PNGs) can be used as the mask.
- Feathered masks are relatively CPU heavy and really tend to bog down machines if they’re animated and/or transparent and/or large. Use this technique sparingly.
- If you have any questions, post in the comments section
Hope that helps. 
t-shirt bedrucken Online kaufen
Related Posts
- 10 Flash Design and Development Tips Part 1
- 6 Reasons Not To Use Flash On Your Website
- 5 Reasons To Use Flash On Your Website
November 12th, 2008 at 4:49 pm
You are the man! this is awesome. So simple, who knew! not me of course =D
Thank you for this, it was really helpful!
April 1st, 2009 at 12:29 pm
Wow, very cool technique pat. I had no idea you could do that. Thank you!
April 1st, 2009 at 2:14 pm
Just playing around with this some more, and spent about a half an hour trying to troubleshoot why it wasn’t working to discover it does not seem to work in Flash 10, only Flash 8. Not sure why this is, or if there’s a method to get this to work in 10…or if I’m just doing something wrong?
April 1st, 2009 at 5:03 pm
Hey! Not sure, but yeah, it only works in 8, which kinda sucks, it’s an old guide. I’ll keep my eyes peeled.
October 25th, 2009 at 3:24 pm
Huh? It works in Flash 10 for me
April 18th, 2011 at 5:09 pm
That’s from 3 year ago, but help me now, so here goes my thanks…
I’ve found a solution with blending layers but, your way is much more simple and easy.
Worked just great with AS3 and FlashPlayer 10.2
Thank you again!
April 29th, 2011 at 11:43 am
For AS3 code:
this.mask_shape.cacheAsBitmap=true;
this.spiral_shape.cacheAsBitmap=true;
spiral_shape.mask=(mask_shape);
Works like a charm!
*Don’t use mask/masked layers. Just layer the images normally and the code will do the rest.
June 27th, 2011 at 12:37 am
thankz!!!
still using AS2 in CS5 and its working charmly
July 20th, 2011 at 5:27 am
Thank you, thank you, thank you! I used to be very much into actionscript and flash generally but I haven’t touched it for years. Now I’ve been called on to do an animation for a presentation that involves a fuzzy shape growing over time filling up a fuzzy area. Yup, lots of fuzz! I’ve been tearing my hair out not realising that there’s a perfectly good actionscript solution. Well done!
P.S. Even though this kind of thing is fairly CPU heavy, it’s been a few years since you wrote this article and even beige boxes have come along in leaps and bounds since then. So it’s running like a charm on the machines we’ll be presenting on. Thanks again!