AS3- Alpha Gradient Masks

You would think these days that you could easily hop on the timeline to create a mask with an alpha property. Well, it’s not that easy and i suggest using code. Especially the more advanced you want your masks to be.

First lay out your “masker” and “maskee” on the stage like you normally would to make a mask. (STOP! DO NOT go to the layers and right click and click “Mask”.)

Now hop to the actions panel to write some code:

– First, make sure everything has an instance name on the stage and they’re all movie clips.

– Whatever objects you are using to create the mask….you must cache them all as bitmaps:
instanceName1.cacheAsBitmap = true;
instanceName2.cacheAsBitmap = true;
instanceName3.cacheAsBitmap = true;
etc…

– Now you must apply the mask to your graphic:
instanceName1.mask = instanceName2;

THAT’S IT!!! To get special graphic effects while using a mask, you MUST apply the mask using code rather then in the layers on the timeline.

Now hop on the timeline and animate your masks or you can code your animations like you normally would!

Remember: You can only do a mask with advanced graphics(gradients, filters, blurs, alpha) by using the above code IT WILL NOT WORK GOOD ON THE TIMELINE. There may be a round about way out there, but this is the best and simplest way!

Advertisements

21 thoughts on “AS3- Alpha Gradient Masks

  1. andergmartins says:

    Thanks!!! I was trying do this a long time, and just your method worked 😎 Very Simple and functional!
    Congratulations!

  2. Phonish says:

    I have been trying to figure this out for hours, everybody else seems to be saying to use this function
    instanceName1.setMask(“instanceName2”);
    but it does not work for me. Thanks for your solution!

  3. this is amazing. i couldn’t figure out how to do this, but now, not only does this work, it is about 2 lines of code! Much easier than doing even the standard layer mask.. if you are a fast typer πŸ™‚

  4. Thank you, I’ve been searching for this for ages. It seems like such a simple task to do. Why does flash have to be so user unfriendly at times lol?

  5. thanks man!,

    i used that code then applied a blurFilter to the mask. and although the blur works wonderful, everything inside the mask that should be 100% visible, is half-transparent…

    any ideas why?

    thanks

    • PJ says:

      In a case like this, you would have to change one of the gradient color’s alpha value. Something like 40% to see the results: i.e. white: 100% / black 40%

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s