Skip navigation
fritzdaworm
fritzdaworm
Currently Being Moderated

Newbie requesting assistance with multiple drag-and-drop & multiple targets

Sep 12, 2012 12:50 PM

Tags: #flash #as3 #cs5.5 #as3.0 #actionscript3

I know this question has been asked a million times, but I'm still not quite getting the solution.  I know the solution calls for me using Arrays in part of my code, but I'm having problems understading how to implement it.  I am using Flash CS 5.5 with AS3.

 

I have a drag-and-drop flash file that is divided into 4 separate areas on the stage.  On each area, there are 7 spaces, meant for 7 different "puzzle pieces".  The first two spaces on each quadrant have very a very specific order for the correct puzzle pieces, while the additional 5 spaces on each quadrant also have specific pieces, but the order is not important.  I've included my code below for reference (note that I have not finished all of the instances, yet).

 

Basically, in the code that's been created so far, the following instances have specific targets with specific order:

 

D1_1_mc, D1_2_mc, D1_1_mc, D2_2_mc, D3_1_mc, D3_2_mc, D4_1_mc, and D4_2_mc.

 

All of the other instances, such as D1_3_mc, D2_3_mc, D2_4_mc, etc... do have specific quadrants they need to be dropped onto, but in terms of the last 5 "spaces" on each quadrant, the order does not matter.  I know I can keep doing what I'm doing, but I would prefer that the last 5 pieces on each quandrant do not have to be in a specific order.

 

Any help you can provide is greatly appreciated!

 

 

var startX:Number;

var startY:Number;

var counter:Number = 0;

 

D1_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D1_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D1_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D1_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D1_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D1_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D2_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D2_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D2_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D2_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D2_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D2_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D2_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D2_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D3_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D3_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D3_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D3_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D3_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D3_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D4_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D4_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D4_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D4_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D4_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D4_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

D4_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

D4_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

 

function pickUp(event:MouseEvent):void {

    event.target.startDrag(true);

    reply_txt.text = "";

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

    startX = event.target.x;

    startY = event.target.y;

}

function dropIt(event:MouseEvent):void {

    event.target.stopDrag();

    var myTargetName:String = "target_" + event.target.name;

    var myTarget:DisplayObject = getChildByName(myTargetName);

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

        reply_txt.text = "Good Job!";

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

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

        event.target.buttonMode = false;

        event.target.x = myTarget.x;

        event.target.y = myTarget.y;

        counter++;

    } else {

        reply_txt.text = "Try Again!";

        event.target.x = startX;

        event.target.y = startY;

    }

    if(counter == 5){

        reply_txt.text = "Congratulations, you've done it!";

    }

}

 

D1_1_mc.buttonMode = true;

D1_2_mc.buttonMode = true;

D1_3_mc.buttonMode = true;

D2_1_mc.buttonMode = true;

D2_2_mc.buttonMode = true;

D2_3_mc.buttonMode = true;

D2_4_mc.buttonMode = true;

D3_1_mc.buttonMode = true;

D3_2_mc.buttonMode = true;

D3_2_mc.buttonMode = true;

D4_1_mc.buttonMode = true;

D4_2_mc.buttonMode = true;

D4_3_mc.buttonMode = true;

D4_4_mc.buttonMode = true;

1127 Views   16 Replies   Latest reply: Ned Murphy, Sep 13, 2012 12:07 PM
 
Replies
  • Ned Murphy
    Currently Being Moderated
    1. Ned Murphy,
    Sep 12, 2012 1:07 PM   in reply to fritzdaworm
    Report

    Would it be possible for you to assign an array of allowed dropees to each of the targets so that when you drop an item on the target, the target's array is checked to see if that object is allowed to be dropped there?  Some targets would have just one element in that array, while others could have more.  Then you could just do an indexOf() check on the array to see of the dropped object is in it.

     
    |
    Mark as:
  • fritzdaworm
    Currently Being Moderated
    2. fritzdaworm,
    Sep 12, 2012 1:15 PM   in reply to Ned Murphy
    Report

    That makes sense.  However, I am unsure of how I would actually write that in my existing code.  I'm quite new to writing ActionScript.  The only reason I knew an Array would work is because I've seen it on the other postings as a solution around this same issue.  However, most of the code I've seen seems different that what I've started with, so when I see possible solutions for how it's written and what it replaces in the original code, it's throwing me off.

     
    |
    Mark as:
  • Ned Murphy
    Currently Being Moderated
    3. Ned Murphy,
    Sep 12, 2012 3:14 PM   in reply to fritzdaworm
    Report

    I don't know how you have your targets defined, but for each one you could assign an array...

     

    target1_1_mc.allowed = new Array(D1_1_mc); // just one is okay

    target1_2_mc.allowed = new Array(D1_2_mc);  // just one is okay

    target1_3_mc.allowed = new Array(D1_3_mc,D1_4_mc); // either will be okay

     

     

    then, later on when you are checking to see if the drop is good or not you would do something like...

     

    if(MovieClip(event.target.dropTarget).allowed.indexOf(event.target.dro pTarget.parent) > -1){

        // that's a good drop

    } else {

        // that's a bad drop

    }

     
    |
    Mark as:
  • fritzdaworm
    Currently Being Moderated
    4. fritzdaworm,
    Sep 13, 2012 8:43 AM   in reply to Ned Murphy
    Report

    So just to confirm, I would add the Array statements at the top of my code (using the Target names I have used for instances) above the existing mouse-up/down event listeners. Then, I would go down to the existing drop function and replace this:

     

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

     

    with this:

     

    if(MovieClip(event.target.dropTarget).allowed.indexOf(event.target.dro pTarget.parent) > -1){

     

    Right?  Nothing else needs to be modified?

     
    |
    Mark as:
  • Ned Murphy
    Currently Being Moderated
    5. Ned Murphy,
    Sep 13, 2012 8:47 AM   in reply to fritzdaworm
    Report

    No, you still need to have all your event listeners assigned from the dragging and the dropping, and it would help to leave the "event.target.dropTarget != null" part of the conditional in.

     

    The array statements would be separate, and you would use the actual instance names to target them instead of what I showed.

     
    |
    Mark as:
  • Ned Murphy
    Currently Being Moderated
    6. Ned Murphy,
    Sep 13, 2012 8:49 AM   in reply to fritzdaworm
    Report

    I should add that there is a way to simply the code assigning the event listeners, using two loops and bracket notation, but save that for later.

     
    |
    Mark as:
  • fritzdaworm
    Currently Being Moderated
    7. fritzdaworm,
    Sep 13, 2012 9:04 AM   in reply to Ned Murphy
    Report

    Ok, so I just tried doing a test, but now when I run it, I get the following error (or similar) when I try to drag the objects:

     

    TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Shape@2b5e7e49 to flash.display.MovieClip.

        at TEST16658Adrag_fla::MainTimeline/dropIt()

     

     

    This is what I've done with my code:

     

    var startX:Number;

    var startY:Number;

    var counter:Number = 0;

     

    target_D2_1_mc.allowed = new Array(D2_1_mc);

    target_D2_2_mc.allowed = new Array(D2_2_mc);

    target_D2_3_mc.allowed = new Array(D2_3_mc,D2_4_mc);

     

    D1_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D1_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D1_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D1_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D1_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D1_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D2_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D2_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D2_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D2_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D2_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D2_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D2_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D2_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D3_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D3_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D3_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D3_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D3_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D3_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D4_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D4_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D4_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D4_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D4_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D4_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

    D4_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

    D4_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

     

    function pickUp(event:MouseEvent):void {

        event.target.startDrag(true);

        reply_txt.text = "";

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

        startX = event.target.x;

        startY = event.target.y;

    }

    function dropIt(event:MouseEvent):void {

        event.target.stopDrag();

        var myTargetName:String = "target_" + event.target.name;

        var myTarget:DisplayObject = getChildByName(myTargetName);

        if (MovieClip(event.target.dropTarget).allowed.indexOf(event.target.drop Target.parent) > -1){

            reply_txt.text = "Good Job!";

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

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

            event.target.buttonMode = false;

            event.target.x = myTarget.x;

            event.target.y = myTarget.y;

            counter++;

        } else {

            reply_txt.text = "Try Again!";

            event.target.x = startX;

            event.target.y = startY;       

        }

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

            reply_txt.text = "Good Job!";

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

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

            event.target.buttonMode = false;

            event.target.x = myTarget.x;

            event.target.y = myTarget.y;

            counter++;

        } else {

            reply_txt.text = "Try Again!";

            event.target.x = startX;

            event.target.y = startY;

        }

        if(counter == 5){

            reply_txt.text = "Congratulations, you've done it!";

        }

    }

     

    D1_1_mc.buttonMode = true;

    D1_2_mc.buttonMode = true;

    D1_3_mc.buttonMode = true;

    D2_1_mc.buttonMode = true;

    D2_2_mc.buttonMode = true;

    D2_3_mc.buttonMode = true;

    D2_4_mc.buttonMode = true;

    D3_1_mc.buttonMode = true;

    D3_2_mc.buttonMode = true;

    D3_2_mc.buttonMode = true;

    D4_1_mc.buttonMode = true;

    D4_2_mc.buttonMode = true;

    D4_3_mc.buttonMode = true;

    D4_4_mc.buttonMode = true;

     
    |
    Mark as:
  • Ned Murphy
    Currently Being Moderated
    8. Ned Murphy,
    Sep 13, 2012 9:25 AM   in reply to fritzdaworm
    Report

    It is most likely taking exception to this:  MovieClip(event.target.dropTarget)....  I was going under the assumption that what you had was working to some degree such that the target aspects were valid.

     

    What you should do is put a trace just before that line to see if you can identify what your target is actually turning out to be... it sounds like it might be some Shape inside the movieclip you name  target_D2_1.  Try adding the following trace line just before the conditional...

     

    trace(event.target.dropTarget, event.target.dropTarget.parent)

    if (MovieClip(event.target.dropTarget).allowed.indexOf(event.target.drop Target.parent) > -1){

     

    If that trace ends up showing a Shape and a MovieClip, then my bet goes on you having to use MovieClip(event.target.dropTarget.parent)... in the line that follows it.

     
    |
    Mark as:
  • fritzdaworm
    Currently Being Moderated
    9. fritzdaworm,
    Sep 13, 2012 9:37 AM   in reply to Ned Murphy
    Report

    You were right.  That did seem to fix that issue, but now when I run it, I get a new error:

     

    TypeError: Error #1010: A term is undefined and has no properties.

     

    I ran the debugger and the error is related to this line in my code:

     

    if (MovieClip(event.target.dropTarget.parent).allowed.indexOf(event.targ et.drop Target.parent) > -1){

     
    |
    Mark as:
  • Ned Murphy
    Currently Being Moderated
    10. Ned Murphy,
    Sep 13, 2012 10:00 AM   in reply to fritzdaworm
    Report

    Since there appeared to be afew possible discrepencies in the code you showed and what I was offering in response to your issues, I spent a little time getting a working model of what I imagine you have just using the three targets and four drop objects.  If you like, I can make the file available for you, but for the moment, here is the code that works...

     

    var startX:Number;
    var startY:Number;
    var counter:Number = 0;

     

    target_D2_1_mc.allowed = new Array(D2_1_mc);
    target_D2_2_mc.allowed = new Array(D2_2_mc);
    target_D2_3_mc.allowed = new Array(D2_3_mc,D2_4_mc);

     

    D2_1_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
    D2_1_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
    D2_2_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
    D2_2_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
    D2_3_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
    D2_3_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);
    D2_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);
    D2_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

     

    function pickUp(event:MouseEvent):void {

    reply_txt.text = "Good Luck";
        event.target.startDrag(true);
        event.target.parent.addChild(event.target);
        startX = event.target.x;
        startY = event.target.y;
    }

     

    function dropIt(event:MouseEvent):void {

     

        event.target.stopDrag();

     

    if (event.target.dropTarget != null && MovieClip(event.target.dropTarget.parent).allowed.indexOf(event.targe t) > -1){
            reply_txt.text = "Good Job!";
            event.target.removeEventListener(MouseEvent.MOUSE_DOWN, pickUp);
            event.target.removeEventListener(MouseEvent.MOUSE_UP, dropIt);
            event.target.buttonMode = false;
            event.target.x = MovieClip(event.target.dropTarget.parent).x;
            event.target.y =MovieClip(event.target.dropTarget.parent).y;
            counter++;
        } else {
            reply_txt.text = "Try Again!";
            event.target.x = startX;
            event.target.y = startY;       
        }


        if(counter == 5){
            reply_txt.text = "Congratulations, you've done it!";
        }
    }

     

    D2_1_mc.buttonMode = true;
    D2_2_mc.buttonMode = true;
    D2_3_mc.buttonMode = true;
    D2_4_mc.buttonMode = true;

     
    |
    Mark as:
  • fritzdaworm
    Currently Being Moderated
    11. fritzdaworm,
    Sep 13, 2012 10:20 AM   in reply to Ned Murphy
    Report

    Thanks.  I tried replacing all of my code with what you provided, but I'm still getting the 1010 error and the debugger is tracing it to this line:

     

    if (event.target.dropTarget != null && MovieClip(event.target.dropTarget.parent).allowed.indexOf(event.targe t) > -1){

     

    Could "MovieClip" in the above statement be causing the problem?

     
    |
    Mark as:
  • Ned Murphy
    Currently Being Moderated
    12. Ned Murphy,
    Sep 13, 2012 10:28 AM   in reply to fritzdaworm
    Report

    Here is a link to the file I created using that code.  Maybe you can determine how yours differs and can determine what adjustment needs to be made...

     

    http://www.nedwebs.com/Flash/AS3_DnD_Options.fla

     

    You should make liberal use of the trace() function to track down which objects/code are causing problems.

     
    |
    Mark as:
  • fritzdaworm
    Currently Being Moderated
    13. fritzdaworm,
    Sep 13, 2012 10:32 AM   in reply to Ned Murphy
    Report

    Ok, I just opened your file and am also getting that same error 1010 and it's related to that same line of code even within your FLA.  I am not sure why I am getting an error and you are not.  I am using Flash CS 5.5 if that helps.

     
    |
    Mark as:
  • Ned Murphy
    Currently Being Moderated
    14. Ned Murphy,
    Sep 13, 2012 11:43 AM   in reply to fritzdaworm
    Report

    When are you getting that error.  I get it if I am trying to add the last (4th) object to the thrid target with the other object already there.  Otherwise I do not get that error.

     

    You should use the trace function before that line to see which objects in that line might be null.

     
    |
    Mark as:
  • fritzdaworm
    Currently Being Moderated
    15. fritzdaworm,
    Sep 13, 2012 11:43 AM   in reply to fritzdaworm
    Report

    Still not sure why I was getting that error in your FLA, but I went back to my file with the code you had list.  It turns out that I had to add another array to get it to work correct:

     

    target_D2_4_mc.allowed = new Array(D2_3_mc,D2_4_mc);

     

    Thanks so much for your help!

     
    |
    Mark as:
  • Ned Murphy
    Currently Being Moderated
    16. Ned Murphy,
    Sep 13, 2012 12:07 PM   in reply to fritzdaworm
    Report

    You're welcome.  From the code you showed, I thought there were only three targets.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points