Draggable mask for Flash 4

Drag the grey diamond to move the mask

TUTORIAL INFO
Version Flash 4 Difficulty Intermediate Created 20th July 1999 Updated 13th June 2000

OTHER LANGUAGES

Français

Chinese

DOWNLOAD
ZIP	FLA

A post on Flashpad asked if it's possible to drag a mask in Flash 4. Strictly speaking the answer is no, but I came up with this technique to 'simulate' it. Here's the .fla file in .zip form.

It's by no means perfect -- it's possible to make it misalign the masked object under some circumstances -- but these bugs can be fixed with some tweaks. However, I've left the file in as simple a form as possible, to illustrate the idea, so the bugs remain.

How does it work?

Since you can't drag a mask, some lateral thinking is required. In this case, the mask stays still while everything else moves...

First, create a movie clip with your masked object in it -- here it's the Stickman figure and text (Object). Now drop this into a second new movie clip and give it an Instance Name (eg. /object). In the new movie clip, create your mask (here a small square) and set it to mask the layer with the object movie clip on it. Finally add a button (the small grey diamond).

Now, give the button the following actions:

On (Press)
      Set Variable: "/:Drag" = 1
End On
On (Release, Release Outside)
      Set Variable: "/:Drag" = 0
End On

This sets a variable (/:Drag) either to 1 or 0, depending on whether the user is clicking the mouse on the button or not. Now drop this new movie clip into the main timeline and give it an Instance Name (eg. /mask).

Devious bit ahoy!

Create a movie clip with nothing in it, drop it in the main timeline and give it the Instance Name tracker.

Create another new movie clip and call it control. Create a keyframe in frame two and set it to Go To and Play (frame 1). Now add the following actions to frame 1:

If (/:Drag eq 1)
      Start Drag ("/tracker", lockcenter)
End If
If (/:Drag eq 0)
      Stop Drag
End If
Set Property ("/mask/object", X Position) = 0-(GetProperty ("/tracker",_x))
Set Property ("/mask/", X Position) = GetProperty ("/tracker",_x)
Set Property ("/mask/object", Y Position) = 0-(GetProperty ("/tracker",_y))
Set Property ("/mask/", Y Position) = GetProperty ("/tracker",_y)

Don't forget to drop this new movie clip into the main timeline.

Look carefully and you'll see what's happening is that when /:Drag is set to 1 (ie. the mouse is being held down), the control movie clip (which loops every frame), sets the position of /Mask/Object (ie. the text and figure movie clip) to the 'opposite' of the position of the mask movie clip (whose position is governed by the position of tracker). So, if the mask movie clip is at x = 20, y = 10, the object is moved to x= -20, y= -10. The result is that it looks as if it's staying still while the mask moves.

Ooh, how clever!

I know. Sometimes I'm so smart I frighten myself. Really.

Good luck!

Stickman