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.
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)
|
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:
|
|
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! |
©2004 - 2012 scriptplayground | Privacy Policy | Legal
Validate Site: XHTML CSS | Designed by: Matthew Keefe of mkeefeDESIGN