How to easily make a draggable mask with 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.
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.
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.
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.
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).
