 |
|
|
|
|
|
|
|
|
|
|
|
||||
|
||||
|
||||
I was most disappointed to discover that Flash5 still doesn't allow you to directly move a mask through scripting. So I thought I'd update my Draggable Mask tutorial for Flash4 with a new, Flash5-enhanced version. This is the result -- you'll find a demo .fla file here.
Not really -- the principle is the same, but the code has been revised to take advantage of some of Flash5's new features.
First create a movie clip with your object to be masked (in this case, Masked Object, with some text). Now drop it into a new movie clip (Mask Movie) and give it the Instance Name masked_object. In the new movie clip, create your mask (here a red circle) on the layer above the one with the object in it, and set it to mask the layer below. Now, drop this new movie clip into your main timeline and give it an instance name (here, mask_movie).
All the clever stuff happens in the object actions of the _root.mask_movie clip. You can view these either by selecting the movie, then right-clicking and choosing Actions, or alternatively select the movie and then click the blue 'Show Actions' arrow at the bottom right of the Flash window.
TUTORIAL INFO
OTHER LANGUAGES
Français
DOWNLOAD
onClipEvent (mouseMove) {
// Get the co-ordinates of the mouse
x = _root._xmouse;
y = _root._ymouse;
// Move the masked clip to the mouse co-ordinates
this._x = x;
this._y = y;
// Move the masked object by exactly the opposite amount
this.masked_object._x = (0-x);
this.masked_object._y = (0-y);
// Update the movie to smooth the movement
updateAfterEvent();
}
As you can see, there's not a lot to it. The movie uses an 'onClipEvent' to detect whenever the mouse is moved, and then sets the variables x and y to the co-ordinates of the mouse. Note the use of _root. in these lines; unless otherwise specified, Flash5 will give the 'local' mouse coordinates -- ie. relative to the centre of the clip you're calling them from -- rather than from the centre of the main movie itself. Prefixing them with _root. avoids this.
Once we've got the position of the mouse, we use this._x and this this._y (which perform the same function a Flash4's SetProperty command) to move the mask_movie to the same place. Note how we use the parameter this -- it's a shortcut, meaning 'this movie clip', so we don't have to specify the whole path (_root.mask_movie).
To give the illusion that the masked object is staying still while the mask is moving, we move it the exact opposite direction and distance -- here calculated by (0-x) and (0-y). It's a kludge, but it works.
Finally, the command updateAfterEvent(); forces the mask movement to update immediately, thus making it much smoother than if we had it updating just once per frame.
That's it. Simple (I hope...).
Good luck!
All files and text copyright ©Stickman 1998 - 2003. For copyright and terms of use information, please read this page.