Drag & Drop along a path


I’m a Flash newbie and want to make a content box that can be dragged onto the stage. It will just have a little tab on the side that’s visible when it’s off stage so that when you drag it out, it brings along the content box. It needs to do that in a straight line and stop so that the box is in a final position and not dragged all over.

Can anyone point me to a tutorial or code snippet for this?

Thanks guys.

As far as getting the motion to stick to a certain path and distance, you can use motion guides. An object “snaps” to a line you draw (straight line, curvy path, etc.) and follows it as a “path” or “guide” line.

Here are a few tutorials on motion guides:


I’ll leave the triggering/event scripting up to you to figure out, but this should help so your box follows a designated path and starts/ends at the right spots.

You can look in flashkit site for more details. You need to create a movie clip and have button on it. You need to actionscript javascript on F9 on Mousedrag and on Mouserelease.

Thanks for the answers, but I’m not sure that’s it. I need to make it so that you drag the content box out in a straight path, but wherever you let go (mouse up) along the path, the box stops in that position. I don’t want a canned action that on click moves an object a predetermined distance. Is that more clear?

Even nicer would be the ability to “fling” the box out along the path with a quick mouse flick movement, kind of like you can do in some phone apps w/o dragging the mouse the whole distance. How is that done?

All you need for a basic drag out is to use startDrag and stopDrag activated by mouse down and release events. To ensure motion is constrained correctly just put in the correct coordinates into the startDrag parameters.

Being able to fling the box is more complicated - you need to track the current velocity of the box by comparing the current coordinates to a previously stored set over a given time interval (or to make it smoother, averaging velocities).
When the box is released, use this velocity and a deceleration value to initiate a programmed tween ending at a calculated position.

Thanks. That makes complete sense to me logically, but is totally beyond my Newbie Flash skills.

Anyone know where I can get that written for a reasonable cost for my junior project?



i know it’s uncomfortable to read. but this way you have to read the code at least kind of

// define a value for how much it needs to moveThisMuch
moveThisMuch = 400;

// change the size of the line_mc (so you have a guide), add the width of the dragged MC so it matches the end and not the beginning
line_mc._width = moveThisMuch + mc._width

//when you press your MC (a movieclip on scene with an instane name "mc"

mc.onPress = function() {
	//startDrag (target, lockcenter, left, top, right bottom);
	//it need to use this._x, this_x, etc.  instead of the number so i can re use the code afterwards with another MC
	//it will move with a constraint defined by in a straight horizontal line  form left to right;
	// change which one has the "+ moveThisMuch" for changing the direction of the line
	startDrag(mc, true, this._x, this._y, this._x + moveThisMuch, this._y);
// when you release it, stop draging
mc.onRelease = function() {

// what I would do in that situation is not to use drag (annoying in laptops) but trigger the movement when you clik on the little tab
// it looks like you could use the greensock tween library
// 		import gs.*;
//		mc.onRelease = function (){ 
//			TweenLite.to (mc, 1, {_x:mc._x+moveThisMuch});
//		}
// this code will automatically move your movieclip to the left when you click it
// google greensock Tween and i will find it, i cant post links yet
// and you will learn how to work with classes and libraries as well. saves tons of time

sorry, my bad, change that “true” to “false” on the startDrag command

and no cost involved, this is a forum for helping people!