Flash Explained

Learn Flash easily.

How to easily make a draggable mask with ActionScript

October 15th, 2008 | Author: Luka | Category: ActionScript


In this really easy tutorial, I will show you how to set up a mask via ActionScript and make it draggable.

Click on the rectangle in the Flash example below and drag it around to see what you’ll learn to create.

Importing an image and converting it to a movie clip

1 Open a new Flash document.

2 Now, find an image you'd like to be covered with the mask you'll make. Choose any image you like, but just don't select a progressive JPG. Flash player 8 supports progressive JPEGs, but previous versions do not.

How to know if your JPG image is or isn't a progressive one? Simple. When exporting your image (to reduce its size) from Photoshop or Fireworks, just leave the "Progressive" option unchecked.

The progressive option in the Save for Web window in Photoshop.

If you don't have an image at hand, download the image I made for this tutorial. Place it in a folder where you'll easily find it.

3 Select File > Import > Import to Stage, find the image, select it and click Open. The image will appear on the stage of your document.

4 Select the image by clicking once on it with the Selection tool (V). You should see "Bitmap" appear in the top left corner of the Properties panel once you selected it.

The bitmap icon in the Properties panel.

5 Select Modify > Convert to Symbol (or press F8). In the window that appears, select Movie clip as type, and give it a name, like masked picture or anything you like.

The Convert to Symbol dialog window.

6 You will now have to give an Instance name to the newly created movie clip on stage to be able to mask it later via ActionScript. Go to the Properties panel and call it, for example, myImage. Hit Enter to confirm that.

Assigning an Instance name to a movie clip.

7 Call the current layer picture and lock it.

8 Create a new layer and call it mask.

Making a second layer for the masking movie clip.

Top of page

Creating the mask movie clip

9 Select the Rectangle tool (R). Block out the outline color by clicking on the little pencil icon in the Colors portion of the Tools panel (1 in the image below), and then on the no color icon (2).

Blocking out the outline color.

Now why did you have to do this? Because only the fill color is acting as a mask. If you draw any lines with the outline color, you may get messed up results once you set up your mask.

If you want to create some more complex and cool-looking shapes like in the example at the beginning of this tutorial, do this by working on your fill color shape. You can cut it out by selecting portions of it with the Selection tool (V) and then pressing delete.

10 Draw a rectangle on stage in the newly created mask layer. Make it about 170 pixels wide and 130 pixels high.

A rectangle shape that will be made into a mask.

11 Choose the Selection tool (V) and click once on the rectangle to select it.

12 Press F8 to convert this rectangle to a symbol. Again, select Movie clip as type. Call it masking rectangle and click OK.

13 Go to the Properties panel and give it an Instance name: call it myMask.

The Instance name of the mask movie clip.

14 You will now place this movie clip on round coordinates. Below the Instance name field, there are two fields, X and Y. Check if the last number is set to zero.

In the image below, the X coordinate is set to a round number, but the Y is not. Correct that by entering zero manually and pressing Enter, in both fields if needed.

Checking if the placement coordinates for the movie clip are set to round numbers.

You should also set the dimensions of your movie clip to round numbers.

Why all of this? Because if you want to have a nice, crisp masking effect, you should do that. In Flash, any precise and fine drawings, effects, etc, will look blurry and messy if you don't put them to round coordinates and/or dimensions. I do this for almost any object placed on stage, to have a cleaner and better-looking design.

15 Lock the mask layer.

Top of page

Writing the ActionScript code that will convert the rectangle movie clip into a mask

16 Make a new layer and call it actions.

17 Click on the first (and only) keyframe of the actions layer to select it.

Selecting the first keyframe of the actions layer.

18 Select Window > Actions to open the Actions panel. Enter the following ActionScript code inside:

myImage.setMask(myMask);

19 Test your movie (Control > Test Movie).

You should see your mask appear.

The mask activated via ActionScript.

Before explaining the ActionScript, there is one little detail about masking that needs to be said. The mask is in fact the area where the image or any other graphic content below it comes through, it is the zone where it is visible. All the other content that isn't overlapped by the mask is masked (invisible).

Let me explain you how this line of code functions:

myImage.setMask(myMask);

First comes the name of the movie clip to be masked, myImage. Then you have the ActionScript method setMask, followed by the Instance name of the movie clip that will act as a mask between parentheses (myMask). Yes, it is that simple. 🙂

Now let's make that mask dynamic, by allowing your site visitors to drag it around.

Top of page

Making the mask draggable

20 Add this code to the existing one:

myMask.onPress = function() {
startDrag(this);
}
myMask.onRelease = function() {
stopDrag();
}

Test your movie. Click on the mask and drag it around.

Before I explain you how this functions, you need to make a small adjustement to your Flash movie. Maybe you noticed that the movement isn't really smooth when you dragged your mask around. To correct this, do the following:

21 Close the testing movie and go back to your document. Select Modify > Document (or press Ctrl+J). In the window that appears, enter 30 in the Frame rate field and click OK.

Adjusting the frame rate of your movie.

Test your movie and try dragging your mask around - you'll see the change immediately.

Fine! Let's see how this works. The first function,

myMask.onPress = function() {
startDrag(this);
}

Makes the mask draggable. By saying myMask.onPress = function(), you tell Flash that the onPress event (this event happens when a user presses the mouse button while the cursor is situated over the movie clip) for the myMask movie clip will execute a function.

The function consists of line(s) of code that are placed between its curly braces - { and }. In this example, you have just one line of code:

startDrag(this);

The startDrag command tells Flash to start dragging the movie clip whose Instance name is between the parentheses. And here you've got the this keyword instead of an Instance name. Here's why:

Since the above line of code is a part of the function which is associated with the myMask onPress event, the this keyword refers to the myMask movie clip. You can also write myMask instead of this if you want. The effect will be the same. I just wanted you to learn some more ActionScript 🙂

The function that stops the myMask movie clip from being dragged around,

myMask.onRelease = function() {
stopDrag();
}

uses a function associated to the onRelease event of the myMask movie clip. This event happens when a user has released the mouse button, after having it pressed.

Inside, there is just a simple stopDrag() method. The parentheses of the method are empty, and they should stay that way.

That's because Flash can drag around only one movie clip with the startDrag method. So, by writing stopDrag() you tell it to drop the movie clip it was dragging, no matter what its Instance name may be - Flash will just look up and see what movie clip it is curently dragging, and drop it.

And that's it! Now that was easy, wasn't it? Have fun with this cool effect and keep on expanding your knowledge with more ActionScript lessons by me. Below you can download the source file for the movie covered in this tutorial, and also the example on top of this page which has a simple preloader inside it (maybe you didn't see it if you have a fast Internet connection).

Download the zipped source FLA file for this lesson.

Download the source for the example with the preloader.

Be Sociable, Share!

Comments

Submit a comment

  • Alex Nov 7, 2008 at 8:06 pm

    Could this be done with a picture drawn on a locked layer in flash?

  • Alex Nov 7, 2008 at 9:04 pm

    Ah yes it could, thanks for this, i sort merged this into a sniper game like tatical assassin with your help! Thanks!!

  • Luka Nov 9, 2008 at 10:31 am

    Alex: Wow! Post a link!

  • Jannina Apr 15, 2009 at 5:26 pm

    Nice tutorial!! Very good explained!!

  • rose Aug 16, 2009 at 9:33 am

    how to make the mask moving by itself?

  • Poozzle Nov 7, 2009 at 1:13 am

    A fair bit has changed in AS3 so just wanted to leave an update to this that works in AS3. Hope it helps somone out!

    Cheers
    Nick
    Poozzle.com
    —————–

    myImage.mask = myMask;
    stage.addEventListener(‘mouseDown’, fMouseDown);
    stage.addEventListener(‘click’, fMouseUp);

    function fMouseDown(e:MouseEvent):void {
    myMask.startDrag();

    }
    function fMouseUp(e:MouseEvent):void {
    myMask.stopDrag();
    }

  • davidt Dec 2, 2009 at 2:21 pm

    This is the correct AS3 code

    myImage.mask = myMask;
    stage.addEventListener(MouseEvent.MOUSE_DOWN, fMouseDown);
    stage.addEventListener(MouseEvent.CLICK, fMouseUp);
    function fMouseDown(e:MouseEvent):void {
    myMask.startDrag();
    }
    function fMouseUp(e:MouseEvent):void {
    myMask.stopDrag();
    }

  • Adam Jan 21, 2010 at 5:57 pm

    how do you limit the mask movement to just the X axis? Is it possible to put a line or handle on the mask like in this example:

    http://www.nytimes.com/2008/12/28/nyregion/18thennow.html?_r=1

  • Jake DiMare Apr 7, 2010 at 1:41 pm

    Another great tutorial…thanks!

  • Subbu Aug 16, 2010 at 7:33 am

    Tutorial was of great help!!! Thank you for the detailed explanation….

    Is there a way i can capture the image that is visible(under the mask) and re-size(INCREASE width and height) the captured image without LOOSING the quality of the re-sized image?

  • Ollie Jan 21, 2011 at 7:46 am

    Did you find the answer Adam?
    Cheers

  • allyrosey Mar 10, 2011 at 10:11 am

    Went through this tutorial 3 times and could not get it! At what point do you convert myMask into a mask? Could you specify that your tutorial is for AS3 at the top of page also if that’s what it’s for?

    I tried your instructions for Flash CS3 and didn’t get anything more than a static mask which I converted to a mask via right click and choosing “mask”. Still not working 🙁

  • damla Jun 8, 2011 at 9:24 am

    hi, is that possible to put a visible object above mask and drag both of them? I use the drag action for that objest but now they became draggable but seperately instead of 2 at the same time.
    thanks for the answer
    damla

  • Jorge Sep 9, 2011 at 11:53 am

    This does NOT work in AS3

  • Jorge Sep 9, 2011 at 12:17 pm

    The missing line to make it work with AS3:

    myMask.buttonMode = true;

    (to the mask mc)

    … and the mask_mc can now have event listeners, they dont need to be on the stage

  • […] http://flashexplained.com//actionscript/how-to-easily-make-a-draggable-mask-with-actionscript/ […]

You must log in to post a comment.