10 Replies Latest reply on Feb 14, 2017 6:16 AM by kglad

    Drag & Drop matching game

    jackh8500410 Level 1

      Hi all,

       

      I have a drag and drop matching game in the test app that I'm building. The only problem is, I am unable to drag the objects and it doesn't come up with any errors. The code I have is from a generic tutorial and so I've edited the code to suit me but not much luck.

       

      The code is;

       

      import flash.events.MouseEvent;

      import flash.display.DisplayObject;

       

      stop();

       

      var objectoriginalX:Number;

      var objectoriginalY:Number;

       

      ans1NF1.buttonMode = true;

      ans1NF1.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);

      ans1NF1.addEventListener(MouseEvent.MOUSE_UP, dropObject);

       

      ans1NF2.buttonMode = true;

      ans1NF2.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);

      ans1NF2.addEventListener(MouseEvent.MOUSE_UP, dropObject);

       

      ans1NF3.buttonMode = true;

      ans1NF3.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);

      ans1NF3.addEventListener(MouseEvent.MOUSE_UP, dropObject);

       

      ansDataR.buttonMode = true;

      ansDataR.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);

      ansDataR.addEventListener(MouseEvent.MOUSE_UP, dropObject);

       

      ansDead.buttonMode = true;

      ansDead.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);

      ansDead.addEventListener(MouseEvent.MOUSE_UP, dropObject);

       

      ansPK.buttonMode = true;

      ansPK.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);

      ansPK.addEventListener(MouseEvent.MOUSE_UP, dropObject);

       

      ansProto1.buttonMode = true;

      ansProto1.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);

      ansProto1.addEventListener(MouseEvent.MOUSE_UP, dropObject);

       

      ansProto2.buttonMode = true;

      ansProto2.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);

      ansProto2.addEventListener(MouseEvent.MOUSE_UP, dropObject);

       

      ansRule1NF.buttonMode = true;

      ansRule1NF.addEventListener(MouseEvent.MOUSE_DOWN, pickupObject);

      ansRule1NF.addEventListener(MouseEvent.MOUSE_UP, dropObject);

       

      function pickupObject(event:MouseEvent):void

      {

        event.target.startDrag();

        event.target.parent.addChild(event.target);

        objectoriginalX = event.target.x;

        objectoriginalY = event.target.y;

      }

       

       

      function dropObject(event:MouseEvent):void

      {

        event.target.stopDrag();

        var matchingTargetName:String = "target" + event.target.name;

        var matchingTarget:DisplayObject = getChildByName(matchingTargetName);

        if(event.target.dropTarget != null && event.target.dropTarget.parent == matchingTarget)

        {

        event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickupObject);

        event.target.removeEventListener(MouseEvent.MOUSE_UP, dropObject);

        event.target.buttonMode = false;

        event.target.x = matchingTarget.x;

        event.target.y = matchingTarget.y;

        }

        else

        {

        event.target.x = objectoriginalX;

        event.target.y = objectoriginalY;

        }

      }

       

      The targets for the have the same naming convention as the tutorial for example ans1NF1 would have a target of target1NF. I tried changing the target name to targetAns1NF but that didn't make a difference.

       

      All of the objects are Movie Clips.

       

      Can someone point me in the direction of being able to drag the items and match them to their target?

       

      Thanks,
      Jack

        • 1. Re: Drag & Drop matching game
          kglad Adobe Community Professional & MVP

          1.  use the trace function to debug acrionscript that triggers no errors, Debugging ActionScript That Triggers No Errors |Adobe Community

           

          2.  you should change event.target to event.currentTarget

          1 person found this helpful
          • 2. Re: Drag & Drop matching game
            jackh8500410 Level 1

            Cheers kglad.

             

            I've replaced all event.target with event.currentTarget.

             

            When I come to trace my event, it give me an error. I've put the e in the code like he has;

             

            function pickupObject(e: event: MouseEvent): void {

             

            and I get the error; 1084: Syntax error: expecting rightparen before colon

            I also tried removing event and just having e: MouseEvent but it didn't like that either.

             

            Is there a different way to do this?

            • 3. Re: Drag & Drop matching game
              kglad Adobe Community Professional & MVP

              your function was correct before:

               

              function pickupObject(event:MouseEvent):void{

               

              or you could also use:

               

              function pickupObject(e:MouseEvent):void{

               

              which is quicker and easier to type.

              • 4. Re: Drag & Drop matching game
                jackh8500410 Level 1

                Ahh, I see how it works now. Thanks!

                 

                The good news is I know how to use e: now, the bad news is nothing is put in the output so it has no idea I'm dragging or clicking.

                 

                What confuses me is, if the objects are movie clips, I shouldn't be able to highlight the text inside should I? Especially if buttonMode = true?

                • 5. Re: Drag & Drop matching game
                  kglad Adobe Community Professional & MVP

                  if an object with mouse listeners are movieclips and buttonMode=true, you expect the mouse pointer to change when you rollover the object.  you don't expect a movieclip to do anything else unless there's a mouse listener and listener function that directs the movieclip to do something.

                   

                  in any case, if you mousedown on an object that calls pickupObject, you expect this trace output to appear in the output panel:

                   

                  function pickupObject(event:MouseEvent):void

                  {

                  trace(event);

                    event.target.startDrag();

                    event.target.parent.addChild(event.target);

                    objectoriginalX = event.target.x;

                    objectoriginalY = event.target.y;

                  }

                   

                  if that doesn't appear, make sure you trace statements enabled by using:

                   

                  trace("trace test");

                  function pickupObject(event:MouseEvent):void

                  {

                  trace(event);

                    event.target.startDrag();

                    event.target.parent.addChild(event.target);

                    objectoriginalX = event.target.x;

                    objectoriginalY = event.target.y;

                  }

                   

                  if you see "trace test" in the output panel, you know your trace is working and you need to find why you're not triggering your listener function.  again, the ink in message 1 contains just some of the ways that can occur.

                  • 6. Re: Drag & Drop matching game
                    jackh8500410 Level 1

                    Someone else has had the same sort of issue as mine. They were advised to change addEventListener to stage.addEventListener which I have done.

                     

                    The game still doesn't work but at least I now have an output error.

                    When I click on the stage I get the error;

                    trace test1

                    [MouseEvent type="mouseDown" bubbles=true cancelable=false eventPhase=2 localX=426.66363525390625 localY=109.09090423583984 stageX=426.65 stageY=109.05 relatedObject=null ctrlKey=false altKey=false shiftKey=false buttonDown=true delta=0]

                    trace test2

                    ReferenceError: Error #1069: Property startDrag not found on flash.display.Stage and there is no default value.

                      at UniversalRevision_matching1_fla::MainTimeline/pickupObject()

                    ReferenceError: Error #1069: Property stopDrag not found on flash.display.Stage and there is no default value.

                      at UniversalRevision_matching1_fla::MainTimeline/dropObject()

                    and when I go to drag an item I get;

                    ReferenceError: Error #1069: Property stopDrag not found on flash.display.Stage and there is no default value.

                      at UniversalRevision_matching1_fla::MainTimeline/dropObject()

                     

                    The forums I found with Error 1069 I didn't find relate well to what I have.

                    Have you got any suggestions?

                     

                    Thanks!

                    • 7. Re: Drag & Drop matching game
                      kglad Adobe Community Professional & MVP

                      remove that stage listener and re-add it to your draggable items. and retest.

                       

                      you'll see the test1 output and probably nothing else because you're not clicking any draggable items (even though you think you are) and your trace statements are working.

                       

                      to remedy, start by putting each draggable in its own layer.  add one keyframe to that layer unless you're adding your draggable to frame 1 which is always a keyframe.  assign each draggable its instance name in that keyframe.  add your code to that frame (should be a different layer where all your code on that frame resides but that's not critical).  test.  any problem?

                       

                      if not, you can add other keyframes in the draggables' layers to suit your design but do not remove a draggable or you will no longer be able to use that code in the first keyframe.

                      • 8. Re: Drag & Drop matching game
                        jackh8500410 Level 1

                        Cheers for the suggestion.

                        I've managed to fix the problem with my mouse highlighting the text inside of the movie clips - I had to convert them to a bitmap and then back to a symbol, so now it comes up with the drag pointer!

                         

                        Will let you know how I get on.

                        • 9. Re: Drag & Drop matching game
                          jackh8500410 Level 1

                          I've done that and it works with no errors which I'm happy with.

                          Another problem was the stage.addEventListener. I removed stage and it started behaving.

                          And the items lock to the answer when dragged!

                           

                          Thanks so much for the help!!!!

                           

                          Jack

                          • 10. Re: Drag & Drop matching game
                            kglad Adobe Community Professional & MVP

                            you're welcome.