Welcome To VertexTemplates.com Flash MX 2004 Tutorials Area - Draggable Masks

Learn how to dynamically create a mask and drag it across your movie.

1. First open up a new Flash document and import any image of your choice by pressing ctrl r. Next you need to resize your flash movie so that it is the same as your pictures. You can get these dimensions by look in the properties tab on your image in flash. Now place your image so that it takes up your whole movie.

2. Once you have setup your image you need to make it a movie clip so that we can mask it with actionScript. Select your image and press F8 to make it a symbol. Choose movie clip as the behavior and name it image. Now give it an instance name of image_mc. (If you are unfamiilar with instance names look under your properties menu when are selected on your movie clip. On the very left hand side you will see a field for an instance name. that is where you enter image_mc.)

3. Now that we have the image completed we need to setup an object so that we can mask the movie. First make a new layer and put it on top of the one that your image is on. Next we need to draw the shape we are going to use. For this example I made a circle that was 67x67 with a fill color of green with no outline. However, the shape is up to you. When you are finished creating the shape that you want to use as your mask select it and press F8 to make it a symbol. Again, make sure that movie clip is selected as the behavior and name it mask. Finally give the maks an instance name of mask_mc.

4. Once our movie is all setup with our movie clips, we need to add the code to mask our movie and make it draggable. Make a new layer ang put it on top of the other two layers you have and name it actions. We are going to put all of our code on one frame. First we are going to create the mask. To do this type the following.

	//mask image
	image_mc.setMask(mask_mc);
	

All we are doing here is telling mask_mc to mask our image_mc. The only thing to keep in mind when using the setMask() function is that a movie clip can only be masked by a single movie clip at one time; a movie clip can only mask a single movie clip at one time. YOu can test your movie now and see how it works.

5. Now we are going to add some functionality to this mask by making it draggable. Add the following code under your mask image code.
//border variables
left = 0;
top = 0;
right = Stage.width;
bottom = Stage.height;
//drag the mask
_root.mask_mc.onPress = function() {
    startDrag(this, true, left, top, right, bottom);
}
_root.mask_mc.onRelease = function() {
   stopDrag();
}
stop();

Here we set the left and top equal to 0, because that is the top left coordinate of your flash movie. Then we are setting the right and bottom variables by using flash's built in Stage.width and Stage.height respectively. That way if you ever want to change the size of your movie you don't have to change the values of these variables. The next thing we do is use some new Flash MX actionScript tricks that let us use our movie clip as a button. We simply state that when the movie clip is pressed it will start dragging and when it is released it will stop being dragged. The reason we put true in the second field is so that mask_mc will lock it's center to the mouse position and the rest of the variables set the bounding box in which we would like our movie clip to be dragged. Another thing to keep in mind here is that only one movie clip on the stage can be dragged at a time.

6. Where to go from here. This is a very easy technique that can be incoporated into your movies for some neat user interaction. However there is much more stuff that could be done using these two functions. Many people use the startDrag() function to make a navigation bar or a window on their site draggable. There is also a way of doing page transitions by using the setMask() function. I hope that this tutorial has helped you out. If you have any questions or comments please be sure to get back to me.

Download Flash File