getW3Help.com - Flash, Flex and AIR

Smooth Drag and Drop using Tweener Class AS3

Posted on Oct 25, 2008 by Makubex, 10 comments

In this tutorial, let us create a smooth drag and drop functionality using Tweener Class.

Flash CS3, AS 3.0

Output:

Download Source Files

We are not going to use startDrag() and stopDrag() functions.
First thing you have to do is download the Tweener Class. Place the Tweener class in your global class folder or in the root folder of your .fla file.

Click here to download the Tweener Class (AS3)

Step 1: Create a new Flash File (Actionscript 3.0)

Step 2: Create a movieclip,set the registration point to center. We are going to add the drag and drop functionality to this MovieClip. Give drag_mc as the instance name to the movieclip.

Step 3: Create another movieclip, which will be the target movieclip. Give the instance name as target_mc

Step 4: Now open the Actionscript panel (press F9), copy and paste the below code..


import caurina.transitions.*;

var cirX:Number = 60;
var cirY:Number = 60;

drag_mc.addEventListener(MouseEvent.MOUSE_DOWN,
                         beginDrag);

function beginDrag(e:MouseEvent):void {

stage.addEventListener(MouseEvent.MOUSE_MOVE,moveMC);
stage.addEventListener(MouseEvent.MOUSE_UP,endDrag);
}


function endDrag(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE,moveMC);
drag_mc.stopDrag();
if (drag_mc.hitTestObject(target_mc)) {
Tweener.addTween(drag_mc,{x:340,
y:145,
time:1,
transition:"easeIn"});

} else {
Tweener.addTween(drag_mc,{x:60,
y:60,
time:1,
transition:"easeIn"});
}
stage.removeEventListener(MouseEvent.MOUSE_UP,endDrag);
}

function moveMC(e:MouseEvent):void {

Tweener.addTween(drag_mc,{x:mouseX,y:mouseY,time:0.5,transition:"easIn"});
e.updateAfterEvent();
}

Step 5: Hit Ctrl+Enter to test the movie.

Code Explanation:


import caurina.transitions.*;

As I told before, we importing the Tweener Class. This class is used to make the transition smoother and its easy to implement. Make sure the caurina folder is placed on the same path of the .fla file or in your global class folder.


var cirX:Number = 60;
var cirY:Number = 60;

Here we are initializing the initial position of our movieclip.


drag_mc.addEventListener(MouseEvent.MOUSE_DOWN,
                                      beginDrag);

We add Event Listener to the drag_mc. When the mouse is pressed downed on the drag_mc movieclip beginDrag function is called.


function beginDrag(e:MouseEvent):void {

stage.addEventListener(MouseEvent.MOUSE_MOVE,moveMC);
stage.addEventListener(MouseEvent.MOUSE_UP,endDrag);
}

In beginDrag function we add Event Listeners to the stage. Since AS3 does not support releaseOutside function. On mouse move function moveMC is called and on mouse up endDrag function is called.


function moveMC(e:MouseEvent):void {

Tweener.addTween(drag_mc,{x:mouseX,y:mouseY,time:0.5,transition:"easIn"});
e.updateAfterEvent();
}

Here we are calling the addTween function which is available in the Tweener Class.
It takes two arguments first one is the movieclip instance name and tweening properties. Then we are calling updateAfterEvent to refresh the mouse movement.


function endDrag(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE,moveMC);

if (drag_mc.hitTestObject(target_mc)) {
Tweener.addTween(drag_mc,{x:340,
y:145,
time:1,
transition:"easeIn"});

} else {
Tweener.addTween(drag_mc,{x:60,
y:60,
time:1,
transition:"easeIn"});
}
stage.removeEventListener(MouseEvent.MOUSE_UP,endDrag);
}

We are removing the Event Listener for moveMC function. Its a good practice to remove Event Listeners when they are not needed. Otherwise it will result in memory problems. We are checking whether the drag_mc has hit traget_mc, if its true we call the addTween function to place drag_mc in the coordinate of traget_mc. If its false then we call addTween function place the drag_mc to its initial position.
Finally we remove the event listener for endDrag.

- End of Tutorial

Labels: ActionScript 3, Flash

Continue Reading!