3 Replies Latest reply on Mar 26, 2009 4:27 PM by Rothrock

    Drag and drop hitTest not working

    tburton1004
      I'm trying to set up a very simple drag and drop game where users drag movie clips onto other matching movie clips. If the answer is correct, the mc stays in place; otherwise, it snaps back to original position. So far, only the dragging part works -- the movie clip won't stay in place when dragged to the correct position.

      I'm using Flash CS3 and Actionscript 2.

      The Flash movie can be found here: http://fcmdsc.org/test/fishtest.html. As it's set up now, the mc with the buffalo symbol is draggable, and the correct drop zone is the fish with the text.

      Here's the script I'm using:

      // Get the movie clip's location and
      // store the coordinates as variables
      onClipEvent (load) {
      origX = this._x;
      origY = this._y;
      }
      // Make the movie clip dragable
      onClipEvent(enterFrame) {
      this.onPress = function () {
      startDrag(this)
      }
      // Stop dragging the object
      this.onRelease = this.onReleaseOutside = function () {
      this.stopDrag();

      // see if the dropZone contains the center of this mc
      if (_parent.dropZone3.hitTest(this._x,this._y,true)) {

      // center it on the drop zone
      this._x = _parent.dropZone3._x;
      this._y = _parent.dropZone3._y;

      } else {

      // if it's not in the drop zone, return to original location
      this._x = origX;
      this._y = origY;
      }
      }
      }


      Thanks for any help.
        • 1. Re: Drag and drop hitTest not working
          Rothrock Level 5
          There are so many things wrong here. So I'm willing to help, but we have to fix them all.

          First. Stop using on(event) handlers. That is an old style of coding that should have gone out with Flash 6 (in 2002), but has continued for far too long. Here is a great tutorial about why not to use it:

          http://www.quip.net/blog/2006/flash/museum-pieces-on-and-onclipevent

          And of course it is ironic that you are using it AND you are using onPress!

          So take this code off of the drag and put it on the timeline.

          The next thing is that you don't want to be assigning the onPress and onRelease handlers 30 times a second (or what ever your frame rate is). You only need to assign those once. So if your fish with the buffalo has an instance name of fish1 your code would look like this:

          // Get the movie clip's location and store the coordinates as variables
          fish1.origX = fish1._x;
          fish1.origY = fish1._y;

          // Make the movie clip dragable

          fish1.onPress = function () {
          this.startDrag()
          }

          // Stop dragging the object
          fish1.onRelease = fish1.onReleaseOutside = function () {
          stopDrag();

          // see if the dropZone contains the center of this mc
          if (_parent.dropZone3.hitTest(this._x,this._y,true)) {

          // center it on the drop zone
          this._x = _parent.dropZone3._x;
          this._y = _parent.dropZone3._y;

          } else {

          // if it's not in the drop zone, return to original location
          this._x = this.origX;
          this._y = this.origY;
          }
          }
          }

          Also I'm guessing that there is some scope problem with the hitTesting. I'm not quite sure what it is and I always have problems myself getting that part to work. You might want to add out some traces such as:

          trace("dropZone3 is at: "+[_parent.dropZone3._x,_parent.dropZone3._y]);
          trace("drag is at: "+[this._x,this._y]);

          Also just checking on the center point is a bit awkward because it is completely possible that the user will have almost half of the item over the drop target and in their mind it would clearly be touching! I would recommend also checking on the pointer since they are likely to be looking at that.

          And grant skinner has a great collision detection class that can detect completely odd shapes so if you are publishing to at least Flash 8 you will be able to use it.
          • 2. Re: Drag and drop hitTest not working
            tburton1004 Level 1
            Rothrock, thank you much for your detailed response. I am a newbie and apparently way over my head. When you say "take this code off of the drag and put it on the timeline," what do you mean? Also, where in the code should the trace go?
            Thanks again for your help.
            • 3. Re: Drag and drop hitTest not working
              Rothrock Level 5
              Timeline code is so much better for so many reasons. Not the least of which is that it is easier to find where all the code is. But David Stiller's article gives a lot more details about that...

              For timeline code this is how many people do it. Create a new layer at the top (or bottom) of your main timeline. Rename the layer to something like "Actionscript" or "AS code." And then lock that layer to prevent you from acidentally putting some artwork on that layer.

              Then at a frame where your fish clips exist make sure there is a key frame in the AS Code layer and select it. Open your actionscript window and put the code there. If your main timeline is continuing playing or looping there might be other issues, but let's deal with one at at time. :)

              Traces are used at places where you want to see information. So I would add traces like this just above the line for checking the hitTest.