Wednesday, 3 June 2009

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.



You should now be able to drag and drop in Actionscript 3.0. The source files can be downloaded here.
Checkout out part 2 to drag and drop multiple objects.

6 comments:

Nesmoth 3 November 2009 at 11:05  

hi friend, thanks for the tut, it was very useful, but I´m using it in a flash file with liquid layout, and on the browser, every time I rezise, the dragable window freeze, please do you know if there other way to do this?
thanks again for the tutorial.

iliketo 3 November 2009 at 15:11  

@Nesmoth

I believe there are no other methods other than the stopDrag() and startDrag() to drag and drop objects.

Karin 20 November 2009 at 12:06  

This tutorial is great. Very straight forward. Thanks. I have a caption /rectangular box that I want to drag around the screen and this worked fine. Now, I need to add some dynamic text to the object I am dragging. Do you have any suggestions of a simple way to do this? Ultimately I want to import this caption box into Captivate. Thanks so much for your help. Karin

iliketo 20 November 2009 at 16:07  

@Karin

Since, your draggable object is a movie clip. You can enter its timeline and add a dynamic text field onto the object.

Anil 30 March 2012 at 02:47  

hi this is very helpful for me but i want to do some extra. after completing drag and drop i want their submit button. when i will click on that if my puzzle is right then want to come congragulation's mesaage else sorry. Is it possible

iliketo 31 March 2012 at 02:41  

@Anil,

That should be possible.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP