masks

Tutorial: Applying and Manipulating a Mask in ActionScript 3

Flash has become the de-facto standard for all kinds of web animations. One of the main reasons, is that it offers an impressive array of bitmap manipulation functions. Out of the box it probably has one of the richest API’s to manipulate bitmaps, vectors and even animation. One of those possibilities is masking, which I will explain in this post.

downloaddownload the full source and FlashDevelop project right here

As you will learn in this small tutorial, applying a mask to any Flash object is incredibly easy. However, if you search for more information on Google, you’ll only find ActionScript 2 tutorials. This one is specific for ActionScript 3 and furthermore it is a pure ActionScript solution, so you don’t need to buy anything. FlashDevelop will do just fine. They have just released a new version.

Applying a mask is just as easy as it used to be in AS2:

1
background.mask = myMask;

The mask itself is a Sprite on which I drew a rectangle. You could make it pretty much any shape. I put the rectangle in the top left corner and moved the sprite. This will make it a lot easier to move and rescale the sprite later on.

1
2
3
4
5
6
myMask = new Sprite();
myMask.graphics.beginFill(0x00FF00);
myMask.graphics.drawRect(0, 0, myMaskSize, myMaskSize);
myMask.x = 350;
myMask.y = 250;
addChild(myMask);

This is all pretty straightforward, however I was a bit stumped when I wanted to let the user move the mask with his mouse. Apparently it’s not possible to attach an event listener to a Sprite once it is a mask. According to all the AS2 demos I found, this used to be possible. But no problem, I attached them to the stage. If you only want to register clicks on the displayed area, you might want to do a little processing of the mouse coordinates in the mouseDown method, but I didn’t bother.

Just for kicks I also added a mouse wheel listener, so that you can change the size of the masked area. This is the result:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

You might notice that Flash still forwards the scroll event to the browser, so the browser window also scrolls. Apparently there isn’t a good solution for this problem. So beware if you want to use the scroll event in a real application.

downloaddownload the full source and FlashDevelop project right here

Image credit

Be Sociable, Share!

5 thoughts on “Tutorial: Applying and Manipulating a Mask in ActionScript 3”

  1. That's an interesting question and this is certainly possible. You can use any shape to do the masking.
    I'm not sure if this would work, but it's worth a try: If you used a PNG as masking image you might even be able to have nice edges.
    I'll do some investigation later this week and get back to you, maybe even do a post about it.

  2. I did a little extra research and it's not as easy as I initially thought. You cannot use a bitmap as mask, so the first step is to convert it to a vector image. If you need more info, there are some posts about it on this blog. If you can't figure it out, let me know and I'll help you further along.

  3. I did a little extra research and it's not as easy as I initially thought. You cannot use a bitmap as mask, so the first step is to convert it to a vector image. If you need more info, there are some posts about it on this blog. If you can't figure it out, let me know and I'll help you further along.

Comments are closed.