Masks allow you to show and hide elements within a Flash movie. You use a shape to determine which parts of the image to show and place it on a mask layer above the layer you want to cover. In this tutorial, I’ll show you how you can create a simple mask using the Flash interface. We’ll then add animation to the mask. I’ll show you how you can use ActionScript to set the mask and make it follow the movement of the mouse. We’ll also draw a shape in ActionScript with the Drawing API and use it to mask a photo. Finally, we’ll create a simple example where you can gradually reveal an image a mask and the mouse – kind of an instant lottery scratch effect.
I’ve used ActionScript 1.0 for the examples in the tutorial so you’ll need at least Flash MX to complete the exercises here. I’ve assumed that you’ve got some experience at working with ActionScript and that you know how to add code in the Actions panel.
You can download the resource files from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.
Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options... and clicking the Delete Cookies... button on the General tab.
We’ll start by creating simple masks using the Flash interface.
Open the resource file staticMask.fla. You should see a photograph on the Stage as shown below.
We’ll mask this image using the letters SF. You’ll only be able to see the portion of the image that is within the letters.
Lock the photo layer and add a new layer to the movie. Name it mask. Add the letters SF to the layer as shown in the image below.
Hello. I'm the Principal of Anything Is Possible, an Australian web development business specialising in web applications development and training. I'm interested in using Flash with dynamic content and I've presented at a number of International conferences on topics relating to applications development, XML and scripting components. I have recently released my second print book Beginning XML with DOM and Ajax to match the first one - Foundation XML for Flash. I have a business web site
and a personal web site.