6 Replies Latest reply on May 4, 2011 7:14 AM by luke_hon

    Drag and Drop multiple boxes and snap to multiple locations then reveal button

    luke_hon Level 1

      Hi I'm Trying to develop a small game where the user chooses from a range of boxes of the left of screen and can drag 3 of them separatley to 3 holding boxes on ther right. each box can be dragged to any location and the order is not important. Once the 3 holding boxes are all full I want a new button to appear. I completed a tutorial and I've got one box working perfectly but no matter what i try I can't get it working with multiple boxes and locations. Below is a list of the instance names of the movie clips plus my actionscript. I've attached a link to the flash file. Any help would be really appreciated. Cheers

       

       

      LINK

       

      http://www.sainters.net/flash_preview/flash_test/flash test_v6.fla.zip

       

       

      INSTANCE NAMES

       

      box 1 = "circle_mc"

       

      box 2 = "circle_mc2"

       

      both the grey boxes are called = "targetCircle"

       

       

      ACTIONSCRIPT

       

      function dragSetup(clip, targ) {
      clip.onPress = function() {
      startDrag(this);
      this.beingDragged=true;
      };

       

      clip.onRelease = clip.onReleaseOutside=function () {
      stopDrag();
      this.beingDragged=false;
      if (eval(this._droptarget) == targ) {
      this.onTarget = true;
      _root.targ.gotoAndStop(2);
      } else {
      this.onTarget = false;
      _root.targ.gotoAndStop(1);
      }
      };
      //the variables below will store the clips starting position
      clip.myHomeX = clip._x;
      clip.myHomeY = clip._y;
      //the variables below will store the clips end position
      clip.myFinalX = targ._x;
      clip.myFinalY = targ._y;
      clip.onEnterFrame = function() {
      //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
      // then move the MC back to its original starting point (with a smooth motion)"
      if (!this.beingDragged && !this.onTarget) {
      this._x -= (this._x-this.myHomeX)/5;
      this._y -= (this._y-this.myHomeY)/5;
      //if the circle is dropped on any part of the target it slides to the center of the target
      } else if (!this.beingDragged && this.onTarget) {
      this._x -= (this._x-this.myFinalX)/5;
      this._y -= (this._y-this.myFinalY)/5;
      }
      };
      }

       

      dragSetup(circle_mc,targetCircle);

        • 1. Re: Drag and Drop multiple boxes and snap to multiple locations then reveal button
          Ned Murphy Adobe Community Professional & MVP

          Two things...

           

          1) if you want both circles to be draggable you need to execute that last line twice, once for each.

           

          dragSetup(circle_mc); // left off second argument purposefully

          dragSetup(circle_mc2);

           

          2) you do not want to name the targets the same name... only one will work as a target that way.  GIve them different names, and assign each one a property like...

           

            targetCircle1.isTarget == true;

            targetCircle2.isTarget == true;

           

          and in your hittest function test for that property.  And if you don't want to allow the user to drop two circles on the same target, set that property to false after it is dropped on... something like...

           

          if (this._droptarget.isTarget) { // may still need eval() portion
              this._droptarget.isTarget = false;

           

          Back to item 1... with this approach you won't need to pass the target as an argument, unless you need to have each circle dropped on a specific target instead of any of them (in that case you go back to specifying and testing the target instance)

           

          Your overall dragSetup function will change in various ways if you follow what is offered here as far as allowing for any circle to be placed on any target.  If you require specific targets, then your code would remain much as it is except you still need different instance names for all the objects.

          1 person found this helpful
          • 2. Re: Drag and Drop multiple boxes and snap to multiple locations then reveal button
            luke_hon Level 1

            thanks heaps for your help. I now have conrol over both the boxes but I can't drop them onto the locations. I dont have alot of experince with this and I think I've posted the code into the wrong place. I've updated the my link with the new code and I've pasted my current code (with bold type indicating my changes). any more help would be great. Cheers

             


            LINK

             

            http://www.sainters.net/flash_preview/flash_test/flash test_v6.fla.zip

             

             

             

             

            ACTIONSCRIPT

             

            function dragSetup(clip, targ) {
            clip.onPress = function() {
            startDrag(this);
            this.beingDragged=true;

             


            };

             

            clip.onRelease = clip.onReleaseOutside=function () {
            stopDrag();
            this.beingDragged=false;
            if (this._droptarget.isTarget) {
                this._droptarget.isTarget = false;

            _root.targ.gotoAndStop(2);
            } else {
            this.onTarget = false;
            _root.targ.gotoAndStop(1);

             

            }
            };
            //the variables below will store the clips starting position
            clip.myHomeX = clip._x;
            clip.myHomeY = clip._y;

             

            //the variables below will store the clips end position
            clip.myFinalX = targ._x;
            clip.myFinalY = targ._y;

             

            clip.onEnterFrame = function() {
            //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
            // then move the MC back to its original starting point (with a smooth motion)"
            if (!this.beingDragged && !this.onTarget) {
            this._x -= (this._x-this.myHomeX)/5;
            this._y -= (this._y-this.myHomeY)/5;
            //if the circle is dropped on any part of the target it slides to the center of the target
            } else if (!this.beingDragged && this.onTarget) {
            this._x -= (this._x-this.myFinalX)/5;
            this._y -= (this._y-this.myFinalY)/5;
            targetCircle1.isTarget == true;
            targetCircle2.isTarget == true;

             

            }
            }
            }

             

             

            dragSetup(circle_mc); // left off second argument purposefully

            dragSetup(circle_mc2);

            • 3. Re: Drag and Drop multiple boxes and snap to multiple locations then reveal button
              Ned Murphy Adobe Community Professional & MVP

              There were a number of things that needed fixing / refinement.  The enterframe coding would have been always working the way you had it, so I made it dependent on need for it (only after an item is dropped)

               

              targetCircle1.isTarget = true;  // these need to be done outside the clip code
              targetCircle2.isTarget = true;
              
              function dragSetup(clip) {
               
               //the variables below will store the clips starting position
               clip.myHomeX = clip._x;
               clip.myHomeY = clip._y;
               
               clip.onPress = function() {
                startDrag(this);
               };
               clip.onRelease = clip.onReleaseOutside=function () {
                stopDrag();
                this.onTarget = false;
                
                   // default to assuming it's a failed attempt
                clip.myFinalX = clip.myHomeX;
                clip.myFinalY = clip.myHomeY;
                
                var thisTarget = eval(this._droptarget);
                if (thisTarget.isTarget) {
                 delete clip.onPress; // disable dragging for this clip
                 thisTarget.isTarget = false; // disable the target
                 this.onTarget = true;
                 _root.thisTarget.gotoAndStop(2);
                    //the variables below will store the clips end position
                       clip.myFinalX = thisTarget._x;
                       clip.myFinalY = thisTarget._y;
                } 
                
                // relocate the clip depending on myFinalX/Y values
                clip.onEnterFrame = function() {
                 //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)
                 // then move the MC back to its original starting point (with a smooth motion)"
                 this._x -= (this._x-this.myFinalX)/5;
                 this._y -= (this._y-this.myFinalY)/5;
              
                 check for near completion and end it - remove enterframe activity 
                 if(this._x-this.myFinalX < 1 && this._y-this.myFinalY < 1){
                  this._x = this.myFinalX;
                  this._y = this.myFinalY;
                  delete clip.onEnterFrame;
                 }
                }
               } 
              }
              dragSetup(circle_mc); 
              dragSetup(circle_mc2);
              
              • 4. Re: Drag and Drop multiple boxes and snap to multiple locations then reveal button
                luke_hon Level 1

                Thank you thats great, almost there. I've greyed out the "disable dragging for this clip" and the "disable the target" code, as this was causing a few problems for me. I'm now able to move the boxes freely and drop them on all the targets. There are couple of other things I just can't figure out though. For instance If I drop "box 1" onto the first grey square and then decide i want box 2 there instead, can I make it so box 2 (when dropped on the same target) replaces box 1, and then box 1 would be returned to it's original starting position? this same rule would apply for all the clips and targets. Also once all the 3 targets have clips on them is it possible for a new movie clip to load elsewhere on the stage, and then unload if any of the clips are removed from the targets? sorry for all the questions, really struggling with this one. I've uploaded my latest file to the new below address. Any more help would be great. Cheers

                 

                 

                http://www.eckul.com/flash_test/flash10.fla

                • 5. Re: Drag and Drop multiple boxes and snap to multiple locations then reveal button
                  Ned Murphy Adobe Community Professional & MVP

                  You can probably do all the things you wish to do.  I won't be doing them for you though.  Try to understand how what I've provided works and then try to reason out things for the changes you want to realize.

                  • 6. Re: Drag and Drop multiple boxes and snap to multiple locations then reveal button
                    luke_hon Level 1

                    ok thanks for your help I'll keep trying. Cheers