13 Replies Latest reply on Sep 18, 2012 11:58 AM by kglad

    Drag and Drop alignment is funky...

    fritzdaworm Level 1

      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?

        • 1. Re: Drag and Drop alignment is funky...
          kglad Adobe Community Professional & MVP

          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.

          • 2. Re: Drag and Drop alignment is funky...
            fritzdaworm Level 1

            I tried that and confirmed that all of the textfields are within the borders of the background.  I even did a test and actually moved the text on one piece way outside the border, but it did not change where the background image actually snapped to on the target.

             

            Another weird thing I'm finding is that the pieces with single lines of text are 165 x 19.80 px. However, the multi-line text pieces are 165 x 22.80.  Both show as the exact same visual size on the board.  Yet, when I resize a multi-line text piece to match the pixel size of the single-line pieces, you can see it makes them visually shorter in height than the single line pieces, even though the pixel sizes are *supposedly* the same.  Any other ideas?

            • 3. Re: Drag and Drop alignment is funky...
              kglad Adobe Community Professional & MVP

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

              • 4. Re: Drag and Drop alignment is funky...
                fritzdaworm Level 1

                Yes, that is what I did.  Pixel sizes are referenced in my previous message. If I set all of them to the same pixel sizes, they do not visually match in size on the stage. 

                 

                Let me add that when I say "multiline", I am simply stating that some text falls on 2 lines instead of one.  I am not using the "multiline" behavior because I am using Classic Static Text.

                • 5. Re: Drag and Drop alignment is funky...
                  kglad Adobe Community Professional & MVP

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

                  • 6. Re: Drag and Drop alignment is funky...
                    fritzdaworm Level 1

                    Here is the AS I'm using.  Like I said, everything works correctly, but it's just the alignment on the stage that is a bit off between the puzzle pieces once dragged onto the targets (note that I am new to AS so I know I've broken a few coding principles with the code below):

                     

                    var startX:Number;

                    var startY:Number;

                    var counter:Number = 0;

                     

                     

                    target_D1_1_mc.allowed = new Array(D1_1_mc);

                    target_D1_2_mc.allowed = new Array(D1_2_mc);

                    target_D1_3_mc.allowed = new Array(D1_3_mc,D1_4_mc,D1_5_mc,D1_6_mc,D1_7_mc);

                    target_D1_4_mc.allowed = new Array(D1_3_mc,D1_4_mc,D1_5_mc,D1_6_mc,D1_7_mc);

                    target_D1_5_mc.allowed = new Array(D1_3_mc,D1_4_mc,D1_5_mc,D1_6_mc,D1_7_mc);

                    target_D1_6_mc.allowed = new Array(D1_3_mc,D1_4_mc,D1_5_mc,D1_6_mc,D1_7_mc);

                    target_D1_7_mc.allowed = new Array(D1_3_mc,D1_4_mc,D1_5_mc,D1_6_mc,D1_7_mc);

                    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_5_mc,D2_6_mc,D2_7_mc);

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

                    target_D2_5_mc.allowed = new Array(D2_3_mc,D2_4_mc,D2_5_mc,D2_6_mc,D2_7_mc);

                    target_D2_6_mc.allowed = new Array(D2_3_mc,D2_4_mc,D2_5_mc,D2_6_mc,D2_7_mc);

                    target_D2_7_mc.allowed = new Array(D2_3_mc,D2_4_mc,D2_5_mc,D2_6_mc,D2_7_mc);

                    target_D3_1_mc.allowed = new Array(D3_1_mc);

                    target_D3_2_mc.allowed = new Array(D3_2_mc);

                    target_D3_3_mc.allowed = new Array(D3_3_mc,D3_4_mc,D3_5_mc,D3_6_mc,D3_7_mc);

                    target_D3_4_mc.allowed = new Array(D3_3_mc,D3_4_mc,D3_5_mc,D3_6_mc,D3_7_mc);

                    target_D3_5_mc.allowed = new Array(D3_3_mc,D3_4_mc,D3_5_mc,D3_6_mc,D3_7_mc);

                    target_D3_6_mc.allowed = new Array(D3_3_mc,D3_4_mc,D3_5_mc,D3_6_mc,D3_7_mc);

                    target_D3_7_mc.allowed = new Array(D3_3_mc,D3_4_mc,D3_5_mc,D3_6_mc,D3_7_mc);

                    target_D4_1_mc.allowed = new Array(D4_1_mc);

                    target_D4_2_mc.allowed = new Array(D4_2_mc);

                    target_D4_3_mc.allowed = new Array(D4_3_mc,D4_4_mc,D4_5_mc,D4_6_mc,D4_7_mc);

                    target_D4_4_mc.allowed = new Array(D4_3_mc,D4_4_mc,D4_5_mc,D4_6_mc,D4_7_mc);

                    target_D4_5_mc.allowed = new Array(D4_3_mc,D4_4_mc,D4_5_mc,D4_6_mc,D4_7_mc);

                    target_D4_6_mc.allowed = new Array(D4_3_mc,D4_4_mc,D4_5_mc,D4_6_mc,D4_7_mc);

                    target_D4_7_mc.allowed = new Array(D4_3_mc,D4_4_mc,D4_5_mc,D4_6_mc,D4_7_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);

                    D1_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D1_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                    D1_5_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D1_5_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                    D1_6_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D1_6_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                    D1_7_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D1_7_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);

                    D2_5_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D2_5_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                    D2_6_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D2_6_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                    D2_7_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D2_7_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);

                    D3_4_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D3_4_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                    D3_5_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D3_5_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                    D3_6_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D3_6_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                    D3_7_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D3_7_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);

                    D4_5_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D4_5_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                    D4_6_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D4_6_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                    D4_7_mc.addEventListener(MouseEvent.MOUSE_DOWN, pickUp);

                    D4_7_mc.addEventListener(MouseEvent.MOUSE_UP, dropIt);

                     

                     

                    function pickUp(event:MouseEvent):void {

                     

                    reply_txt.textColor = 0x990099

                    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.target) > -1){

                            reply_txt.textColor = 0x33BC10

                            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.textColor = 0xEE1212

                            reply_txt.text = "Oops!  Try Again!";

                            event.target.x = startX;

                            event.target.y = startY;      

                        }

                     

                     

                        if(counter == 28){

                            reply_txt.textColor = 0x33BC10

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

                           

                        }

                    }

                     

                     

                    D1_1_mc.buttonMode = true;

                    D1_2_mc.buttonMode = true;

                    D1_3_mc.buttonMode = true;

                    D1_4_mc.buttonMode = true;

                    D1_5_mc.buttonMode = true;

                    D1_6_mc.buttonMode = true;

                    D1_7_mc.buttonMode = true;

                    D2_1_mc.buttonMode = true;

                    D2_2_mc.buttonMode = true;

                    D2_3_mc.buttonMode = true;

                    D2_4_mc.buttonMode = true;

                    D2_5_mc.buttonMode = true;

                    D2_6_mc.buttonMode = true;

                    D2_7_mc.buttonMode = true;

                    D3_1_mc.buttonMode = true;

                    D3_2_mc.buttonMode = true;

                    D3_3_mc.buttonMode = true;

                    D3_4_mc.buttonMode = true;

                    D3_5_mc.buttonMode = true;

                    D3_6_mc.buttonMode = true;

                    D3_7_mc.buttonMode = true;

                    D4_1_mc.buttonMode = true;

                    D4_2_mc.buttonMode = true;

                    D4_3_mc.buttonMode = true;

                    D4_4_mc.buttonMode = true;

                    D4_5_mc.buttonMode = true;

                    D4_6_mc.buttonMode = true;

                    D4_7_mc.buttonMode = true;

                    • 7. Re: Drag and Drop alignment is funky...
                      kglad Adobe Community Professional & MVP

                      (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,puzzlePiece.numChildren);

                      }

                      }

                      • 8. Re: Drag and Drop alignment is funky...
                        fritzdaworm Level 1

                        Thanks!  Here is the output:

                         

                        D1_1_mc 165 20.8 2

                        D1_2_mc 165 20.8 2

                        D1_3_mc 165 19.95 2

                        D1_4_mc 164.6 20.45 2

                        D1_5_mc 165 19.95 2

                        D1_6_mc 167.4 19.95 2

                        D1_7_mc 165 19.95 2

                        D2_1_mc 165.85 20.8 2

                        D2_2_mc 165 20.8 2

                        D2_3_mc 164.85 21.05 2

                        D2_4_mc 164.85 21.5 2

                        D2_5_mc 165 19.95 2

                        D2_6_mc 165 20 2

                        D2_7_mc 165 20.45 2

                        D3_1_mc 165 20.8 2

                        D3_2_mc 164.6 20.8 2

                        D3_3_mc 165 20.8 2

                        D3_4_mc 165 20.8 2

                        D3_5_mc 165.25 20.8 2

                        D3_6_mc 165 20.8 2

                        D3_7_mc 165 20.8 2

                        D4_1_mc 165 20.8 2

                        D4_2_mc 165.85 20.8 2

                        D4_3_mc 166.4 20.8 2

                        D4_4_mc 165 20.8 2

                        D4_5_mc 165 20.7 2

                        D4_6_mc 165 20.8 2

                        D4_7_mc 165 20.8 2

                         

                        After seeing these results, obviously there are some size discrepancies.  However, the Properties are doesn't seem to be cooperating, well.  Are there any other areas where I can set the dimensions?

                        • 9. Re: Drag and Drop alignment is funky...
                          kglad Adobe Community Professional & MVP

                          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);

                          }

                          }

                          }

                          • 10. Re: Drag and Drop alignment is funky...
                            fritzdaworm Level 1

                            Here is the output:

                             

                            D1_1_mc 20.8

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 11.35

                            D1_2_mc 20.8

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 10.25

                            D1_3_mc 19.95

                            [object Shape] 0.85 20.8

                            [object StaticText] -5.45 10.4

                            D1_4_mc 20.45

                            [object Shape] 1 20.8

                            [object StaticText] -9.2 19.65

                            D1_5_mc 19.95

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 10.35

                            D1_6_mc 19.95

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 10.45

                            D1_7_mc 19.95

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 10.35

                            D2_1_mc 20.8

                            [object Shape] 0 20.8

                            [object StaticText] -5.15 9.55

                            D2_2_mc 20.8

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 10.4

                            D2_3_mc 21.05

                            [object Shape] 0 20.8

                            [object StaticText] -9.9 18.6

                            D2_4_mc 21.5

                            [object Shape] 0 20.8

                            [object StaticText] -9.25 18.1

                            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

                            D3_1_mc 20.8

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 11.35

                            D3_2_mc 20.8

                            [object Shape] 0.45 20.8

                            [object StaticText] -7.75 16.35

                            D3_3_mc 20.8

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 10.4

                            D3_4_mc 20.8

                            [object Shape] 0 20.8

                            [object StaticText] -9.2 19.65

                            D3_5_mc 20.8

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 10.05

                            D3_6_mc 20.8

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 10.5

                            D3_7_mc 20.8

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 8.9

                            D4_1_mc 20.8

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 9.65

                            D4_2_mc 20.8

                            [object Shape] 0 20.8

                            [object StaticText] -4.7 10.5

                            D4_3_mc 20.8

                            [object Shape] 0 20.8

                            [object StaticText] -5.9 10.45

                            D4_4_mc 20.8

                            [object Shape] 0.85 20.8

                            [object StaticText] -5.15 10.5

                            D4_5_mc 20.7

                            [object Shape] 0 20.8

                            [object StaticText] -9.2 19.6

                            D4_6_mc 20.8

                            [object Shape] 0.85 20.8

                            [object StaticText] -4.35 10.45

                            D4_7_mc 20.8

                            [object Shape] 0 20.8

                            [object StaticText] -9.2 19.65

                            • 11. Re: Drag and Drop alignment is funky...
                              kglad Adobe Community Professional & MVP

                              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.

                              • 12. Re: Drag and Drop alignment is funky...
                                fritzdaworm Level 1

                                No, I am not scaling or rotating them.  All of the shapes were on the scene with some default text before I started working on the AS .  I would modify the text on each shape to be unique, then I would convert that puzzle piece into a symbol. 

                                 

                                Am I going to the wrong area to modify the properties of the height?  I am clicking on the instance on the scene, and then modifying the height under the "Properties" panel.

                                • 13. Re: Drag and Drop alignment is funky...
                                  kglad Adobe Community Professional & MVP

                                  upload your fla to a server and post a link.