Written by: Jesse Stratford [email:jessestratford@actionscript.org]
Time: 15 minutes
Difficulty Level: Beginner
Requirements: Flash 4 or higher
Topics Covered: startDrag(), stopDrag(), this element.
Assumed knowledge: Instances, Paths.

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:

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

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:

[as]on (press) {
startDrag (this, true);
}
on (release) {
stopDrag ();
}[/as]

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.

How simple is that? It gets a bit more complicated on the next page...

If you examine the pink button it has very similar code except it also includes constraints on movements. This allows us to limit the area in which the clip may be dragged. This is useful for singular plain (along _x or along _y) dragging only, or when we don't want people dragging one window over another. The syntax is as follows: [as]on (press) {
startDrag (this, true, 30, 80, 140, 110);
}
on (release) {
stopDrag ();
}
[/as]

Notice it's very much the same except for the numbers which follow the 'true'. These numbers are the bounds of the rectangle within which we will allow users to drag the clip. (Yes, you must define a rectangle, no circles or triangles, it's four points people!). From left to right the numbers are: left, top, right, bottom. These are measured in pixels from the top left corner of the movie where _x and _y both equal 0.

Finally, the _droptarget property allows us to detect where a user has dropped a draggable clip. Actually it allows us to detect if a user has dropped the clip on another clip with a name, and if so, upon which. This operation is as easy as adding the following lines of code:

[as]on (release) {
stopDrag ();
if (this._droptarget == "/green_box") {
_root.green_box.gotoAndStop(2);
}
}
[/as]

The IF statement here checks if the _droptarget property (see Get Property tutorial) of the draggable clip is equal to the string "/green_box". "/green_box" is the path to another element in my sample movie above. If the users drops the clip on the clip with the instance name "green_box", the _droptarget property evaluates to the full path to that object, in this case "/green_box". Note that "/green_box" is a Flash 4 format path (see the paths tutorial for more on this), which is necessary for backward compatibility of the Flash player. The next line just uses tell targets to send my green_box clip forward one frame.

And that's it!

Jesse Stratford [email:jessestratford@actionscript.org] is the Co-Master of ActionScript.org and a freelance Flash developer and teacher. He is based in Australia and enjoys all things Flash. NB: If you have comments or feedback please feel free to email me, but please do not email me Flash questions; the forums are provided for that purpose and you will get a faster answer by posting you question there.

If you have found this tutorial helpful, I hope that you will take 30 seconds to visit The Hunger Site where, with just one click you can make a free donation of food to a starving person in a third-world country. We do not benefit financially from this action; it is purely an act of charity.

This tutorial is protected by International Intellectual Property Rights laws and may not be reproduced or redistributed in full or part, without the prior written consent of the author. Unauthorized reproduction of this tutorial or its contents may result in prosecution. I've worked hard on this tutorial, please don't steal it.