Friday, November 5, 2010

Create gradient masks using AS3

Today we will learn how to create gradient masks.

It is often needed to create gradient masks, for example, for image reflection effect on a mirror. This can be done with a few lines of AS3.

First here's an example:


Create 2 objects on stage, call one object myPicture, and the second myMask. Apply the mask like this:

myPicture.mask = myMask;

You can add this to make the mask follow your cursor:

stage.addEventListener(Event.ENTER_FRAME, follower);

function follower(Event):void
{
myMask.x = mouseX;
myMask.y = mouseY;
}

However, gradients still don't work as we'd like them to. In order for them to work properly, you have to make all the objects that take part in the masking cache as bitmap. This can be done using cacheAsBitmap property of the instances.

myPicture.cacheAsBitmap = true;
myMask.cacheAsBitmap = true;

And there you have it!

Hope this was helpful. Thanks for reading!

No comments:

Post a Comment