Drag 'n Drop and Drop Targets

Download the source for the above movie here. (Zipped, PC Flash 5 file).

This tutorial will deal briefly with how to create drag and drop operations which are pretty vital for interactive Flash sites nowadays. We will also discuss the _dropTarget property. Draggable clips are very useful and ridiculously easy to make. So let's begin!

Start by downloading the source file above or creating the following:

• A new flash file
• A movie clip with an instance name.
• A button within that movie clip.

Now, if you check out the movie clip on the main stage that says "Please Drag Me" you will find that it contains a button. Edit the movie clip so you can get a good look at the button. Since we can't attach 'on' events, such as 'on (click)' to a movie clip and we can't drag a button because it has no (customizable) instance name we must combine a button and a movie clip to get the best of both worlds and produce a draggable object. If you examine the Actionscript on this button you will see that is is as follows:

on (press) {
        startDrag (this, true);
}
on (release) {
        stopDrag ();
        if (this._droptarget == "/green_box") {
                _root.green_box.gotoAndStop(2);
        }
}

Ignore the If statement and all that follows it for the moment. That's the droptarget bit which we'll come back to. For now, take note of this bit:

on (press) {
        startDrag (this, true);
}
on (release) {
        stopDrag ();
}

Didn't I tell you it was ridiculously easy? This script says:

1. When they press this button perform the following actions.
2. Start dragging this clip. (Note that 'this' is the Flash 5 element which provides a relative path to the current object, I could also have centered "/clipName" where clipName was the instance name of the clip I want to drag, but that's not high tech enough for us is it?). The 'true' element here sets 'Lock Center' to true so that the mouse locks to the center of the movie clip, (I always think it looks neater that way).
3. When the button is released, do this:
4. Stop dragging the clip you're dragging.