This isn't much of a tutorial, more of a code, but it's fully annotated which should help you to understand, it will hopefully show you a more advanced way of doing drag and drop in flash: 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.
![[image]](http://www.theflashplace.com/tut1.JPG)
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._xmyFocus._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//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 you need any help
Source1 - 7507draganddrop.swf (right-click > "save target as" to download)
Source2 - 7507draganddrop.fla (right-click > "save target as" to download)
Back to tutorials
Sponsored Link
|