Skip navigation
Currently Being Moderated

Drag and Drop alignment is funky...

Sep 14, 2012 4:38 PM

Tags: #help #flash_cs5.5

I've created a drag an drop interaction and everything is working great except for the alignment of the "puzzle pieces" once they are dropped onto their targets.  There are 28 pieces, all of which are the same size in pixel height and width.  However, some have text on them that is a single line, while others have text that is two lines, all of which still fit on each piece.

 

For the pieces that have single lines of text, they drop exactly onto their targets and are spaced appropriately.  However, the pieces with the dual lines of text do not match the spacing.  Hence, when the "puzzle" is completed, not everything is aligned evenly and looks somewhat sloppy (i.e. on certain sections of the stage, 5 puzzle pieces should be stacked vertically with even spacing between them, but the problem is the two-line text pieces don't align correctly and mess up the spacing).

 

I've checked the pieces with two lines of text and confirmed that the actual text boxes still fit on the background of the puzzle piece without going past the background borders.  What else am I missing?  Does anyone know the trick to this?

 
Replies
  • kglad
    62,165 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 14, 2012 5:30 PM   in reply to fritzdaworm

    while testing, enable the border of your textfields both single and multiline and then test to see if the populated textfield borders are extending beyond the rest of the parent graphics.

     
    |
    Mark as:
  • kglad
    62,165 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 17, 2012 11:21 AM   in reply to fritzdaworm

    check the size of all children of both (single line and multiline) puzzle piece types.

     
    |
    Mark as:
  • kglad
    62,165 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 17, 2012 2:52 PM   in reply to fritzdaworm

    show a code snippet where you loop through all your puzzle pieces.

     
    |
    Mark as:
  • kglad
    62,165 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 17, 2012 3:31 PM   in reply to fritzdaworm

    (you could make your coding life easier if you learn about array notation.)

     

    assuming the puzzle pieces are D1_1_mc,...,D4_7_mc, copy and paste the trace output that results from the code below.

     

    var puzzlePiece:MovieClip

    for(var i:int=1;i<=4;i++){

    for(var j:int=1;j<=7;j++){

    puzzlePiece=MovieClip(this["D"+i+"_"+j+"_mc"]);

    trace(puzzlePiece.name,puzzlePiece.width,puzzlePiece.height,puzzlePiec e.numChildren);

    }

    }

     
    |
    Mark as:
  • kglad
    62,165 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 17, 2012 4:21 PM   in reply to fritzdaworm

    copy and paste the output from:

     

    var puzzlePiece:MovieClip;

    var dobj:DisplayObject;

    for(var i:int=1;i<=4;i++){

    for(var j:int=1;j<=7;j++){

    puzzlePiece=MovieClip(this["D"+i+"_"+j+"_mc"]);

    trace(puzzlePiece.name,puzzlePiece.height);

    for(var k:int=0;k<puzzlePiece.numChildren;k++){

    dobj=puzzlePiece.getChildAt(k);

    trace(dobj,dobj.y,dobj.height);

    }

    }

    }

     
    |
    Mark as:
  • kglad
    62,165 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 18, 2012 10:49 AM   in reply to fritzdaworm

    looking at those numbers makes it surprising you are not having more trouble than you describe.

     

    are you scaling or rotating those movieclips?  i ask because i can't see anyway you could create a movieclip, add a shape and textfield and end up with these numbers unless there is some sort of transform being applied:

     

    D2_5_mc 19.95

    [object Shape] 0.85 20.8

    [object StaticText] -5.45 10.45

    D2_6_mc 20

    [object Shape] 0 20.8

    [object StaticText] -4.35 10.45

    D2_7_mc 20.45

    [object Shape] 0 20.8

    [object StaticText] -9.2 19.3

     

    all three of those movieclips have heights that are less than their child shape.  in addition, those textfields are at negative y so the parent could (depending on the text font characteristics) have a height greater than the shape.

     
    |
    Mark as:
  • kglad
    62,165 posts
    Jul 21, 2002
    Currently Being Moderated
    Sep 18, 2012 11:58 AM   in reply to fritzdaworm

    upload your fla to a server and post a link.

     
    |
    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