This chapter is from the book
This chapter is from the book
This chapter is from the book
Dragging
Now that you know how to select a movie clip, the next step is to learn how to move it. This is called dragging. You can drag files around your operating system's desktop, for instance.
There are two ways to drag a movie clip. You can use Flash's built-in drag commands. These are easy to use but do not allow you many options to modify or monitor the way movie clips are dragged, so we will also look at using some other code to bypass Flash's drag commands.
Basic Dragging
Flash's drag commands are simple: There is a startDrag and a stopDrag command. You issue the startDrag command whenever you want a movie clip to follow the mouse around, and a stopDrag when you want the movie clip to stop following the mouse around.
In the example movie 08basicdrag.fla, you can see the following simple script in action:
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
this.startDrag();
}
}
onClipEvent (mouseUp) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
this.stopDrag();
}
}
The onClipEvent handlers look similar to the ones we have been using. They use hitTest to make sure that it is the current movie clip that the user is clicking. If so, either the startDrag or stopDrag command is issued. The first is issued when the mouseDown message is sent, and the second when the mouseUp message is sent.
In the example movie, you can click and drag either of the two movie clip instances independently. But notice that you can only drag one at a time. Using these drag commands also limits how you can monitor and modify the drag. You will need something a little more flexible if you want to drag movie clips in advanced applications and games.
NOTE
The startDrag command can actually accept up to five additional parameters. The first is a true or false value that determines whether the center of the movie clip locks to the mouse location. The default is false, which is what you usually want. The other four parameters are the left, top, right, and bottom limits of the drag. If you set these, the movie clip can't be dragged beyond these boundaries.
Complex Dragging
If you wanted to drag a movie clip, but couldn't use the startDrag and stopDrag commands, how would you do it?
You'll need a movie clip script that has four parts to it. The first part, the onClipEvent(load) handler, will set a global variable called dragging to false. When this variable is true, it will signal the movie clip to follow the mouse.
Then, when the user clicks on the movie clip, the dragging variable will be set to true. The dragging will then take place in the onClipEvent(enterFrame) handler. It will simply set the _x and _y properties of the movie clip to the _root._xmouse and _root._ymouse properties.
Then, when the user lifts up the mouse button, the dragging property will be set to false again, and the movie clip will no longer move around to follow the mouse. Here is the complete script:
onClipEvent (load) {
// start out not dragging
dragging = false;
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
// follow the mouse from now on
dragging = true;
}
}
onClipEvent (enterFrame) {
if (dragging) {
// set to location of the mouse
this._x = _root._xmouse;
this._y = _root._ymouse;
}
}
onClipEvent (mouseUp) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
// don't follow the mouse any longer
dragging = false;
}
}
This script looks long compared to the ones we have been writing so far, but there is really not much to it. Each onClipEvent handler really only does one thing. Check the script and make sure that you understand each part.
The example movie 08complexdrag.fla contains two movie clips. Test the movie, but only use the movie clip on the left. This is the one that contains the previous script. Notice how the movie clip locks its center to the mouse location. It makes the movie clip jump immediately after you click it.
Usually, when you want an element to drag around the screen, you don't want it to jump to lock the mouse location with the center of the element. Try dragging files around your desktop. Notice how they drag with the mouse locked to the point of the icon where you initially clicked. This is the same way the startDrag command worked too.
To get this functionality, we only need to add a little more to the script. When the user first clicks, we'll get the mouse offset—that is, the distance from the mouse to the center of the movie clip. Then, instead of assigning the mouse location to the center of the movie clip, we'll add this little offset so that the movie clip always appears offset by the same amount as the user drags.
Imagine, for example, that the user clicks five pixels to the right of the center of the movie clip. Then we always want to make sure that the movie clip and the mouse are offset by those same five pixels. This makes it appear as if the user has grabbed that one spot on the movie clip and is dragging it around by that spot. Here is the new script:
onClipEvent (load) {
// start out not dragging
dragging = false;
}
onClipEvent (mouseDown) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
// follow the mouse from now on
dragging = true;
// get the mouse offset
xOffset = this._x - _root._xmouse;
yOffset = this._y - _root._ymouse;
}
}
onClipEvent (enterFrame) {
if (dragging) {
// set to location of the mouse
this._x = _root._xmouse + xOffset;
this._y = _root._ymouse + yOffset;
}
}
onClipEvent (mouseUp) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
// don't follow the mouse any longer
dragging = false;
}
}
In the same example movie, 08complexdrag.fla, if you drag the movie clip to the right, you will see this new script in action. Notice the different behavior between the two movie clips as you drag them. The difference is more pronounced if you click near the edge of the movie clip instead of the center.