Real

Theres one thing I always wanted to do : drag a mask. Actually, thats how I got on kirupa.com first. I found that dragging mask tutorial, that surely you all completed since its very easy and looks fantastic. But one day, it just hit me in the eye : in that movie, were not dragging the mask ! Were dragging what is masked by the letters ! We see the spot through the letters, but never does the mask move. Suprabeener the Great told me after that that you CANNOT drag a mask, nor get its position, scale, or anything else.

So why did you name your tutorial drag mask tutorial, then ?, will you ask me. Good question. Thats because I added FAKE in front of it. We are going to simulate the drag.

General Idea
So, hum, how could we do that ? If we cant move the mask, were going to have to move the background. Hold it ! you say. Thats just what Kirupa did ! Yes, but we are going to do that a little bit differently. So stop interrupting me all the time.
So we are going to drag the background. But not only do we have to drag the background, we are going to have to simulate the drag of the mask : we are going to put everything inside a draggable movie clip!!

Here is the effect:

 
[ move mouse over the animation ]

To make this animation easier on you, I have provided a partial source file that you should use to follow along. Click the following link to download the source file.

Download

Let's roll now:

1. If you open the source file, youll see me, during my last holyday, warming up in the morning, with a black spot next to me. If you double click that image, youll find that it is called draggable mask (it appears next to Scene 1 on the top left of your screen and it means that you are editing the object called draggable mask). There are 2 layers there : mask and background. mask is the black spot movie clip (called mask), background is the surfer movie clip (called background foto"). You can notice that mask is centered (see the tutorial Pool of square to see how to use the align tool). We have one movie clip containing two movie clips.

2. Were going to do something to show you how its going to happen. If thats not done, edit the movie clip draggable mask. You should see at the top of your screen the vignette Scene 1 and draggable mask. Select the mask layer, and set it as a mask (right click > mask). Click on the vignette Scene 1, right click the movie clip there and open the Actions panel. Write the code :

onClipEvent (load) { startDrag (this, true); }
 

3. Test your movie. What do you see ? A circle showing one bit of your picture, and following the mouse. The code tells Flash that when the clip is loaded, he can be dragged (this refers to the current object, and true refers to the fact that it must lock mouse to centre).
    
4. What do we want ? We want to see, for instance when we go down, to bottom of the background. All we have to do then is to make the background go up by the exact same amount !!! We are going to use action script to do that. Edit the draggable mask movie clip. Unlock the background layer. We need to give the background an instance name (it has to be a movie clip to do that). Open the instance panel and name it back. Lock the layer again. Go back to the scene 1.
    
5. The code that you added before needs to be modified:

onClipEvent (load) { startDrag (this, true); posx = _x ; posy = _y ; } onClipEvent (enterFrame) { back._x = posx - _x ; back._y = posy - _y }

6. So whats the difference ? When the clip loads, we initialize 2 variables posx and posy as the current position of the movie clip draggable mask. On every new frame, we set the x and y position of the background to the opposite of what we have moved. If we go up by 5, we want the background to go down by 5 to simulate the dragging. Save your work.
    

7. Test the fla. Everything should you be working. Theres something I havent been able to figure out though : if you centre the background and the mask, the masking isnt perfect, but when you put the mask somewhere else that right in the centre, it works nice and smooth.
    

[ notice the location of the mask in relation to the center ]

Anyway, thats it for that very nice effect! To see the final source code for this animation, click the following link:

Download Final Source

This tutorial is written by Ilyas Usal. Ilyas is also known as ilyaslamasse on the kirupa.com forums!

I hope the information helped. If you have any questions or comments, please don't hesitate to post them on the kirupa.com Forums. Just post your question and I, or our friendly forum helpers, will help answer it.

The following is a list of related tutorial and help resources that you may find useful:

How to use the Forums New, Upcoming, and In-Progress Tutorials How to Help out kirupa.com Writing Tutorials

Cheers!
	Kirupa Chinnathambi kirupaBlog