Skip navigation
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;

 
Replies
  • Currently Being Moderated
    Sep 12, 2012 1:07 PM   in reply to fritzdaworm

    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:
  • Currently Being Moderated
    Sep 12, 2012 3:14 PM   in reply to fritzdaworm

    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:
  • Currently Being Moderated
    Sep 13, 2012 8:47 AM   in reply to fritzdaworm

    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:
  • Currently Being Moderated
    Sep 13, 2012 8:49 AM   in reply to fritzdaworm

    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:
  • Currently Being Moderated
    Sep 13, 2012 9:25 AM   in reply to fritzdaworm

    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:
  • Currently Being Moderated
    Sep 13, 2012 10:00 AM   in reply to fritzdaworm

    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:
  • Currently Being Moderated
    Sep 13, 2012 10:28 AM   in reply to fritzdaworm

    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:
  • Currently Being Moderated
    Sep 13, 2012 11:43 AM   in reply to fritzdaworm

    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:
  • Currently Being Moderated
    Sep 13, 2012 12:07 PM   in reply to fritzdaworm

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

     
    |
    Mark as:

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