1 In this example, we’re using a Movie Clip symbol, because the MovieClip class supports startDrag() and stopDrag() methods. The movie clip has the instance name smileyFace. This code goes in a keyframe where that movie clip starts. Two event handlers, this time. The MouseEvent. MOUSE_DOWN event occurs when the user clicks the mouse over the movie clip and triggers a function that initiates the startDrag() method. The MouseEvent.MOUSE_UP event occurs when the user lets go of the mouse over the movie clip. It triggers a function that initiates stopDrag(). The very first line makes the finger cursor show when the mouse moves over the movie clip. Unlike buttons, movie clips in AS3 don’t show the finger cursor by default, even if you’re handling mouse-related events. Note that the functions mention the smileyFace instance by name. This is a difference from how things worked in AS2.

2 Here’s the AS2 version. This code goes in a keyframe where the movie clip starts. Note the absence of any sort of buttonMode reference. In AS2, buttons and movie clips alike display the finger cursor when mouse-related events are being handled. If you want to turn the finger cursor off, precede the code below with a single line: smileyFace.useHandCursor = false;. Even more important is the presence of the global this property. In AS2, the lines of code inside the function actually see that function as their “point of view”. Because the function is associated with the smileyFace instance, the term this ultimately refers to smileyFace in this context.

Constrained Drag and Drop

1 Because AS3 has no “release outside” event, you can use a “mouse up” event for the stage itself. If the movie itself is listening for the mouse to lift, it doesn’t matter where the event occurs, even if the mouse lifts outside the button or movie clip it started in. The trick is to only handle this event when you need it. You might, after all, want to listen for stage-wide “mouse up” events for other reasons, so we’ll only commandeer this event while the mouse is pressed for the drag. We’ll give the event back after the release. To do this, use the named function approach.

2 Thanks to the onReleaseOutside event, things are much easier in AS2. Notice that AS2’s version of the startDrag() method accepts five parameters instead of two. The last four correspond more or less to the Rectangle object in AS3’s version, except these are actual coordinates rather than a starting point plus a width and height.

In the last line, the onReleaseOutside event is set to the same thing as the onRelease event, so the mouse will stop dragging whether or not it’s inside the movie clip when the user lets go.

// ActionScript 1.0 and 2.0 someMovieClipInstance.startDrag (lockCenter, left, top, right, bottom); // ActionScript 3.0 someMovieClipInstance.startDrag (lockCenter, {x, y, width, height});

The first parameter isn’t so much about constraint as it is where the mouse stays during the drag. By default, the lockCenter parameter is false, which means dragging occurs from wherever the mouse first clicked the movie clip. If you set this parameter to true, dragging occurs from the movie clip’s registration point.

The rest of the parameters are numbers, based on the parent timeline of the movie clip. The way these numbers are provided depends on the version of ActionScript. An interesting thing happens with constrained dragging: if the mouse goes outside the bounds of the constraint, it might actually end up outside the movie clip when the user lets go. When that happens, the “release” event doesn’t apply, because a bona fide release hasn’t occurred. Instead, a “release outside” has. In AS1 and AS2, there is an event tailor-made for this circumstance. In AS3, it takes a bit more effort.