Drag and Drop in Flash, drag on a specified aria, drag on a vertical or horizontal line

1. Start creating a flash document about 400x400 pixels.

2. Name the first layer background and then introduce a new layer and name it objects. Introduce a third layer and name it actions.

3. In the objects layer draw a orange circle with 50x50 dimensions (to draw a perfect circle hold Shift key pressed while you're drawing).

4. Double click the circle to select both the fill and the stroke and go to Modify>>Convert to Symbol (F8). In the Convert to Symbol window choose MovieClip, name it circleMC and assure that the registration is center. In the Properties panel give it an instance name of circle_mc. Set X:175, Y:175 for circle_mc.


5. In the first frame of the actions layer put the following code:
circle_mc.onPress = function(){
this.startDrag()
}

circle_mc.onRelease = function(){
this.stopDrag()
}

Now test the movie (Ctrl+Enter) and you'll see you can drag the circle.

Drag on a specified aria

But probably you need more than that.
The syntax of startDrag function is the following:

startDrag(target:Object, [lock:Boolean, left:Number, top:Number, right:Number,

bottom:Number]) : Void

target: represents the object to be dragged.
lock: if true the movieclip that is draged is locked to the center of the mouse position, if false it is locked in the point where it was first time clicked when the drag action begun.
left, top, right, bottom: the coordinates that describes an rectangle aria in the parent

movieclip where the movieclip is allowed to be drag.

Maybe it was not very clear, let's have now an example:

1. We will use the document we already created in the previous example. In the first frame of the background layer draw a rectangle with 340x340 dimensions. In the Properties panel set the X:30, Y:30. Choose also a light gray for the Fill Color.



2. Replace the code existing in the actions layer with the code below:
circle_mc.onPress = function(){
startDrag(this, false, 55,55, 345, 345)
}

circle_mc.onRelease = circle_mc.onReleaseOutside = function(){
this.stopDrag()
}

3. Test the movie again and you will observe that the circle is allowed to be dragged only in the aria of the gray rectangle.

If you want that your movieclip to be dragged only an a vertical or horizontal line just put left parameter equal with the right, or top equal with bottom.

Example: Drag on a vertical line

1. We will use the flash document from behind.

2. In the background layer delete the rectangle and draw a black vertical line with stroke height of 5. Set the X:150. Set also X:125 for the circle_mc.

3. In the actions layer replace the code existing with the following:
circle_mc.onPress = function(){
startDrag(this, false, 150,55, 150, 345)
}

circle_mc.onRelease = circle_mc.onReleaseOutside = function(){
this.stopDrag()
}

4. Test again the movie and see the result.

You need to Register in order to download the FLA file.

Subscribe now via RSS feed and get all the new tutorials

written by Shade~Man , August 09, 2007

hi, it may seem so strange or impossible i don't know, but is there any way to let the user choose mp3 sound file from there computer and play it in flash player.!!?

written by Foxology , August 20, 2007

Very nice ! it met my only goal for 2 days :)

written by torskmunken , August 23, 2007

yeah, its possible if you import the mp3 file to your project, and then add a linkage to it, its important. then you make a new variable like this:
a_sound = new Sound();
a_sound.attachSound("soundname in enquotes");

then when you want to play it type : a_sound.start();
its something like that, im not so good in flash.

written by David , August 27, 2007

Yay i have been wanting to know how to do this, thanks.

written by Tarun , August 28, 2007

hi,

i want to change the text value (1 2 3 4 ...) on drag and send this value to php file

my email is This e-mail address is being protected from spam bots, you need JavaScript enabled to view it

pls help

thanks

written by Garnier , September 11, 2007

I need to make a website where the user could drag the background from right to left and change it. If the user drags the new vackground less than the middle of the screen the new background would return to its place (right side of the screen). When the user drags it more than de middle of the screen to the left htat new background would be placed filling the screen.

Any ideas???

Thanks! :)

written by vze25v9v , October 09, 2007

I want to create a kids calculator in flash using movie clips. This is how it word work. On the screen there would be two imput boxes. Then buttons for adding and subtracting. To the right 10 dragable button movie clips (0-9). Then the = (equal) symbol and an output box to show the calculated amount. When the kids drag numbers into the input area, depending on whether they are adding or subtracting, action script would add or subtract the movie clip numbers and give a answer in the output box. I hope I explained this ok.

written by dany , October 18, 2007

nice tutorial,

written by keith patterson , October 18, 2007

i imported a hand drawn document and i was trying to develop a"drag and drop game"but the bounding box radius interferes with many small pieces
i was wondering...was there a way to alter the"bounding box"?

written by splodge , November 17, 2007

is it possable to put easing on a drag and drop object, so when i mouse up the object gluides to a halt?

http://www.hallcross.co.uk/slideAlbum/dragNdrop.html

written by Darren Paul Azzopardi , November 30, 2007

hey there, great tutorial.

After this i will now add a function that allows the the drag feature to move across the time line

Cheers
Dazzclub

written by IrudayarajS , December 10, 2007

on drop the dropped object should adjust/fit to the target

Please give me the solution for that

written by Yatin T. , December 17, 2007

Hi I am Yatin i want to learn action script, So what i done c,c , or java? pls help me.

written by aibhne , December 20, 2007

hi harry!!!!!!!!!!!!!!!!!!!!!!!!!:D:D:D:D:D:D:D:D

written by aibhne , December 20, 2007

hi mariah!!!!!!!!!!!!!!!!!!:D:D:D:D:D:D:D:D:D

written by fahim , December 31, 2007

hi

i need to make a flash movie that will generate five arrow by clicking on one movie clip arrow. then it will allow us to set position each created arrow individually. it can be also drag and drop.
i have worked on the clip duplication but individually drag and drop of the arrow creating problem for me.
here is the code for duplication of arrow

on main screen define count=0
i=0

on (release){
if(i

written by fahim , December 31, 2007

complete code is;

on (release){
if(i

written by bob , January 07, 2008

its okie i could have made better lol wel done it must have taken you years

written by rahima , January 18, 2008

Hi,
i have tried the above drag and drop tutorial, took a while but was good. but now i want to be able to drag and drop the object to the correct place and if it dropd in the wrong place a message to say wrong and vice versa.
can you please help.
Thanx
Rahima

written by ravanan , March 03, 2008

Hey,
It was vey usefull to me.
Thaaaaanks.

written by lini fernandez , May 02, 2008

how can the sound clarity of a flash file be improved?

written by lini fernandez , May 02, 2008

startDrag(this, false, 150,55, 150, 345)

in this code if 150,55,150 345 denotes the coordinates of a rectangle then each corner point should have two coordinates thus total 8 numbers to describe it? so i don't understand.

Do you need more help? Ask now!

Comment
Name
Email
Website
	Add Comment

Trackback(0)

Comments (22)