Flash Explained

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.

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.

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.

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.

7 Call the current layer picture and lock it.

8 Create a new layer and call it mask.

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).

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.

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.

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.

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.

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.

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.

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.

Comments

Submit a comment