Advanced Drag and Drop

[Matt]

This isn't much of a tutorial, more of a code, but it's fully annotated which should help you to understand:

Draw 3 objects on the stage (these will be the draggable objects) right click on each one and press “convert to symbol” make sure “movieclip” is selected, give this whatever name you want it isn’t important, then click ok.

Then give each movie clip an Instance Name of “myDragged1_mc” for the first object, “myDragged2_mc” for the second object and “myDragged3_mc” for the third object.



Now draw a square on the stage convert it to symbol and give it an instance name of “myTarget_mc”. This will be your target box.


Click on the timeline and enter the following code:

//Declaring variables, these 6 variables store the original x and y position of each draggable object
myDLoc1X=myDragged1_mc._x;
myDLoc1Y=myDragged1_mc._y;

myDLoc2X=myDragged2_mc._x;
myDLoc2Y=myDragged2_mc._y;

myDLoc3X=myDragged3_mc._x;
myDLoc3Y=myDragged3_mc._y;

//below is calling the functions of each button
myDragged1_mc.onPress=function(){ //when myDragged1_mc is “pressed” begin the following function
startDrag(this,true); // start dragging the current object ‘this’
myDrag=1; // Variable used to define which movieclip is being dragged
}//end function
myDragged1_mc.onRelease=myDragged1_mc.onReleaseOutside=function(){ //when myDragged1_mc is
//released outside of its
//original position, do the
//following functions.
stopDrag(); //stop dragging the movieclip
myHitTest(); //execute the “myHitTest” function
}//end function


myDragged2_mc.onPress=function(){
startDrag(this,true);
myDrag=2;
}
myDragged2_mc.onRelease=myDragged2_mc.onReleaseOutside=function(){
stopDrag();
myHitTest();
}


myDragged3_mc.onPress=function(){
startDrag(this,true);
myDrag=3;
}
myDragged3_mc.onRelease=myDragged3_mc.onReleaseOutside=function(){
stopDrag();
myHitTest();
}
//stop defining button functions



//now we define the functions that are called from the button

function myHitTest(){ //the function name
myFocus=_root["myDragged"+myDrag+"_mc"];

/*the previous line of code is setting variable “myFocus” (‘_root’ means the very bottom of the flash movie) to “myDragged” followed by variable (defined by buttons earlier) ‘myDrag’ and then “_mc”, e.g. “myDragged2_mc”*/

if (myFocus.hitTest(myTarget_mc) == true){ // a hitTest can be used to check if the mouse is inside
// of the movieclip in brackets, in this case
// “myTarget_mc”

trace("hit"); //this will launch an output window that should say “hit” to check if the hit
// test was successful

myDestinationX=myTarget_mc._x; //defining local variable “myDestinationX” as the X
//position of the target movieclip

myDestinationY=myTarget_mc._y; //same as above but defining the Y position

myMovements(); //Calling the myMovements Function (defined later) this is how the
//dragged MC shall move to the target MC or back to its original position

}else{ //if the hitTest does not equal false

trace("nohit"); //trace noHit to show the MC has not hit the target_MC

myDestinationX=_root["myDLoc"+myDrag+"X"]; //the myDestinationX local variable
//is now set to the movieclip’s original
//position so that it can move back to it’s
//starting place

myDestinationY=_root["myDLoc"+myDrag+"Y"]; //same as above but defining ‘Y’

myMovements(); //again this calls the myMovements Function
}//end else
}//end function


function myMovements(){ //defining the myMovements Function

myFocus.onEnterFrame=function(){ //every frame, carry out the following function,

if(myFocus._x<myDestinationX){ //if myFocus x pos. is less than myDestinationX’s x pos.
myFocus._x+=10; //myFocus’s x position will increase by 10 pixels

if(myFocus._x>=myDestinationX){ // if myFocus x position is the same or more than
// myDestinationX’s X position
myFocus._x=myDestinationX; // set myFocus’s X position to the same as
//myDestinationX’s
} // end 2nd if
} end 1st if
if(myFocus._x>myDestinationX){ //basically the same as above but if myFocus’s X pos.
//is more than DestinationX’s then decrease myFocus’s //x position
myFocus._x-=10;
if(myFocus._x<=myDestinationX){
myFocus._x=myDestinationX;

}end 2nd if

} //end 1st if

if(myFocus._y<myDestinationY){ //next to if statements are for the same as above except
//for the MC’s Y position
myFocus._y+=10;
if(myFocus._y>=myDestinationY){
myFocus._y=myDestinationY;
}
}

if(myFocus._y>myDestinationY){
myFocus._y-=10;
if(myFocus._y<=myDestinationY){
myFocus._y=myDestinationY;
}
}

if(myFocus._y==myDestinationY && myFocus._x==myDestinationX){
//use double equal signs for ‘is equal to’ this is saying if myfocus’s x and y positions are equal to that of ‘myDestination’s’
delete myFocus.onEnterFrame; //delete the onEnterFrame Function
trace("deleted"); //and trace that the enter frame has been deleted
}//end last if statement
}//end the enterFrame function
}//end Function


That should work fine, let me know if anyone needs any help

[pauZe]

yo blood make screenshots
makes the tuts look bare more professional
i know it takes loads of effort but its worth it trust!!

[Matt]

pauze said:

yo blood make screenshots
makes the tuts look bare more professional
i know it takes loads of effort but its worth it trust!!

I will do
Just creating the main site atm so I didnt have time but I'll have screenshots up in the next day or so

[pauZe]

safeee as fuccck!!

[coops]

haha you talk more gangsta than the bleds up my way.

it's well funny.
safe blood

[pauZe]

mate
truth is its the way to talk
but i aint a chav for sh!t