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

Tutorial is great, but I'm having problem with add similar function to another movie clip. Can You add code for example two MC's? Thanks a lot for help.

By  Remi, at December 16, 2008 1:15 PM  

Thanks, I've just got it :)

By  Remi, at December 16, 2008 2:24 PM  

thanks a lot

By  jihoon1209, at January 2, 2009 10:20 AM  

I have the same problem of REMI,
"I'm having problem with add similar function to another movie clip." i need it for 3 MC can you send me the code you send remi please??

By  dippa31, at January 5, 2009 8:57 AM  

could I please also have the code example for multiple mcs?

By  nsolcis, at January 19, 2009 12:07 AM  

For multiple mc's create a custom class and asign it to each MovieClip via the "linkage" property. If you substitute "this" with the instance name, the code should work with any mc.

By  Alchemist - Dan, at April 3, 2009 8:50 AM  

//Here's another solution.
//create two MovieClips titled
//pane1
//pane2
//paste following code

//note using TweenLite here
import gs.TweenLite;
import fl.motion.easing.*;


pane.addEventListener(MouseEvent.MOUSE_DOWN, beginDrag);
pane.addEventListener(MouseEvent.MOUSE_UP, endDrag);


pane2.addEventListener(MouseEvent.MOUSE_DOWN, beginDrag);
pane2.addEventListener(MouseEvent.MOUSE_UP, endDrag);

function beginDrag(e:MouseEvent):void
{
e.target.addEventListener(MouseEvent.MOUSE_MOVE, smoothDrag);
}
function smoothDrag(e:MouseEvent):void
{
TweenLite.to(e.target, .5, {x:mouseX, y:mouseY, ease:Cubic.easeOut});
}
function endDrag(e:MouseEvent):void
{
e.target.removeEventListener(MouseEvent.MOUSE_MOVE, smoothDrag);
}

//e.target used for the instance //name will target any
//mc with
//the event listener

By  Alchemist - Dan, at April 3, 2009 8:56 AM  

//custom class save as SmoothSDrag.as

package
{
import gs.TweenLite;
import fl.motion.easing.*;
import flash.display.MovieClip;
import flash.events.*;
import flash.display.Stage;

public class SmoothDrag extends MovieClip
{

var sd:Boolean;


public function SmoothDrag()
{



}
public function startSmoothDrag(mc:MovieClip, sd:Boolean, w:Number)
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, beginDrag)
function beginDrag(e:MouseEvent):void
{
if(sd == true)
{
TweenLite.to(mc, w, {x:mouseX, y:mouseY, ease:Cubic.easeOut});
}else{
TweenLite.to(mc, w, {x:mc.x, y:mc.y, ease:Cubic.easeOut});
}
}


}

}


}


//then use the class in your .fla like this

import gs.TweenLite;
import fl.motion.easing.*;
import SmoothDrag;


var sd:SmoothDrag = new SmoothDrag();
addChild(sd)

pane3.addEventListener(MouseEvent.MOUSE_DOWN, beginDrag);
function beginDrag(e:MouseEvent):void
{

sd.startSmoothDrag(pane3, true, .5);

}
stage.addEventListener(MouseEvent.MOUSE_UP, endDrag);
function endDrag(e:MouseEvent):void
{

sd.startSmoothDrag(pane3, false, .5);

}

//not perfect, I'm a noob, but gets //the job done.

By  Alchemist - Dan, at April 3, 2009 11:48 AM  

Typo above should be SmoothDrag.as

By  Alchemist - Dan, at April 3, 2009 11:49 AM  

Cool, I've been trying to modify the code so that you can drag along a large movieclip (i.e. a thumbmail panel), but I haven't had success in getting it to work.

Does anyone have any ideas?

By  Used, at November 5, 2009 1:26 AM