Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » as » Drag a MovieClip in ActionScript 3

Drag a MovieClip in ActionScript 3

How to setup a MovieClip so that it can be dragged using Event handlers in ActionScript 3.

Dragging a MovieClip is a very common task in a Flash application or movie. The code to achieve this result is fairly simple

For this example, the dragging code will be assigned within a function for portability

function initDragger(mc:MovieClip):void
{	
	...	
}

Here is the contents of that function which is setup using event listeners. The MouseEvent Class has a custom function attached where the drag code is called.

mc.addEventListener(MouseEvent.MOUSE_DOWN, function (e:MouseEvent):void
{
	e.currentTarget.startDrag();
});
mc.addEventListener(MouseEvent.MOUSE_UP, function (e:MouseEvent):void
{
	e.currentTarget.stopDrag();
});

The final step is to make a call to the newly created function and test it all out

function initDragger(mc:MovieClip):void
{	
	mc.addEventListener(MouseEvent.MOUSE_DOWN, function (e:MouseEvent):void
	{
		e.currentTarget.startDrag();
	});
	mc.addEventListener(MouseEvent.MOUSE_UP, function (e:MouseEvent):void
	{
		e.currentTarget.stopDrag();
	});
	
}

// Set up drag
initDragger(boxMC);

Update: After this tutorial was finished it was brought to my attention that inline functions can cause a memory leak over time. This is obviously not the desired result, so here is the same code modified to prevent that memory leak.


function initDragger(mc:MovieClip):void
{
	mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
	mc.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}

function mouseDownHandler(e:MouseEvent):void
{
	e.currentTarget.startDrag();
}
function mouseUpHandler(e:MouseEvent):void
{
	e.currentTarget.stopDrag();
}

// Set up drag
initDragger(boxMC);

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Drag a MovieClip in ActionScript 3

 jacob  Sat Dec 1, 2007 8:36 am  
doing in line functions for event handlers is a sure fire way to have an awesome mem leak in as3. they shouldn't be declared that way because there is no way to remove them.
 me  Fri Dec 14, 2007 5:57 am  
cool thanks
 owen  Mon Mar 17, 2008 6:13 pm  
@jacob
So... how do you accomplish the same without the memory leak?
 mkeefe  Mon Mar 17, 2008 6:51 pm  
@owen,

I have updated the code, this previous version was provided a while ago.

Thanks for reminding me :)
 Damilola Jegede  Mon Mar 23, 2009 2:44 am  
Thanks. God bless you!
 rouslan  Wed Jul 22, 2009 4:54 am  
Hi, any ideas why this doesn't work:

function initDragger(mc:MovieClip):void
{
mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
mc.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}

function mouseDownHandler(e:MouseEvent):void
{
e.currentTarget.startDrag();
}
function mouseUpHandler(e:MouseEvent):void
{
e.currentTarget.stopDrag();
}

// Set up drag
//initDragger(grafiks);





//getting the mouse click report
stage.addEventListener(MouseEvent.CLICK, reportClick);

function reportClick(event:MouseEvent):void
{
initDragger(event.target.name);
}
 Kamran  Fri Oct 9, 2009 2:17 am  
Ah thanks, that helped a lot! ;)
 Alvin  Thu Dec 10, 2009 5:54 am  
// Set up drag
initDragger(boxMC);

shouldnt this refer to the mc?

i.e

initDragger(mc);
 Ronie Neubauer  Wed Feb 24, 2010 3:23 pm  
Thanks!
 vishnubhatal  Mon Jun 7, 2010 6:45 am  
you can visit the code for dragging an object in flash actionscript 3.0, and follow

myobj.addEventListener(MouseEvent.MOUSE_DOWN,startdrag);
myobj.addEventListener(MouseEvent.MOUSE_UP,stopdrag);
var clickoffset:Point=null;
function startdrag(event:MouseEvent)
{
clickoffset=new Point(event.localX,event.localY);
}
function stopdrag(event:MouseEvent)
{
clickoffset=null;
}
 michael095  Mon Apr 4, 2011 12:10 pm  
Great tut., but what if i want to have a movie clip on a main timeline, that may be draggable only when i click (and hold) defined area inside this movieclip? The same concept which is in MS Windows ... windows :), i can drag the window only by selecting defined border in the top of that window. I want to be able do the same with my MovieClip. For example - I'm in inside that Movie Clip, and i draw the rectangle and change it into another (nested) movieclip that is called "draghitarea" as its instance name. Then i go to the main timeline, and what should i insert into the frame where my Movie Clip is, so that dragging could be possible only by holding "draghitarea".? Thanks
 mkeefe  Mon Apr 4, 2011 5:28 pm  
@michael095 - Simply create the graphic inside your MovieClip to be dragged, then just reference the parent MovieClip in the startDrag operation.
 michael095  Wed Apr 6, 2011 8:53 am  
@mkeefe -

For example? This is my code in the main timeline:

function movewindow(mc:MovieClip):void
{
welcome_mc.addEventListener(MouseEvent.MOUSE_DOWN, mychaprzycisnieta);
welcome_mc.addEventListener(MouseEvent.MOUSE_UP, mychapuszczona);
}

function mychaprzycisnieta(e:MouseEvent):void
{
e.currentTarget.startDrag();
}
function mychapuszczona(e:MouseEvent):void
{
e.currentTarget.stopDrag();
}

// Set up drag
movewindow(welcome_mc);



so, how should it look like in order to work?
the instance name of my rectangle inside the movie clip is "recgrab".
 mkeefe  Wed Apr 6, 2011 10:18 am  
@micheal095 - You would reference the "recgrab" in order to register the MouseDown/MouseUp event listeners. Then just move the window when those occur. Like this:


var window:MovieClip = welcome_mc;
var grabber:MovieClip = welcome_mc.recgrab;

function moveWindow():void {
grabber.addEventListener(MouseEvent.MOUSE_DOWN, grabberDownHandler);
grabber.addEventListener(MouseEvent.MOUSE_UP, grabberUpHandler);
}
function grabberDownHandler(e:MouseEvent):void {
window.startDrag();
}
function grabberUpHandler(e:MouseEvent):void {
window.stopDrag();
}

// Set up drag
moveWindow();
 michael095  Wed Apr 6, 2011 12:10 pm  
@mkeefe - You're THE MAN :) everything's working as it should. Once again huge thanks!
 mkeefe  Wed Apr 6, 2011 1:29 pm  
@michael095 - Glad to help. Don't hesitate to post/ask questions in the future.
 jvoll  Sun Jan 1, 2012 9:30 am  
how would i get a movie clip to animate on the drag of a mouse? example : http://helloevoque.com/beinghenry/en-us/

i would like to achieve a similar function where the mc goes through a certain animation when the user drags the mc to the left or the right...
any help would be greatly appreciated!
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles