Drag and drop in AS3

Advertisement

Drag and drop in AS3

This Flash tutorial will teach you about the basic drag and drop in Actionscript 3.0. You will learn how to drag an object around the stage. I have used an image of a sheep as the object to demonstrate the drag and drop functionality. This is an update from the previous create a draggable objects tutorial in Actionscript 2.0. The code in AS3 is slightly different from the AS2 version, but shouldn’t be too difficult to understand.

Drag and drop in AS3

Step 1 – Create the object

Open a new Flash document and create whatever object you wish.
Alternatively you could use an image as an object, like I have, by selecting File > Import > Import to stage select your file and click ok.


Step 2 – Convert object to symbol

Convert your object into a symbol by pressing F8.
Give your symbol an appropriate name, check movie clip and click ok.
Select your object using the selection tool (V) and give the instance name: sheep_mc
Step 3 - Add the code

On the timeline insert a new layer called “actions” right click on the first frame and select Actions from the drop down menu.



Add the following code:

sheep_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);

sheep_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

function drag(event:MouseEvent):void {

sheep_mc.startDrag();

}

function drop(event:MouseEvent):void {

sheep_mc.stopDrag();

}

**The first and second lines of code adds event listeners for the mouse up and mouse down events with the parameters drag and drop.

The drag function starts the dragging of the object when the mouse is pressed, and the drop function stops the dragging of the object when the mouse is released.

The drag and drop functions can also be adapted to be used multiple times. An example of this can be found here. And if you wish to limit the object to the stage boundaries, checkout this tutorial.

Step 4 – Test your movie

Test your movie Ctrl + Enter. Now use your mouse to drag and drop the sheep.

Share This