2 Replies Latest reply on Mar 31, 2010 12:03 PM by Rothrock

    How do I make two movie clips stick together when they contact each other?

    Shad0wdrag0n

      I'm making a jigsaw puzzle in flash and there's something I just can't figure out. I want it so that if you pick up a piece, drop it next to another piece, and the two pieces are supposed to go together, the two pieces will snap together so that if you move one piece the other will move with it. I've seen some games where they somehow get movie clips to stick together when they come into contact with each other, but I haven't been able to figure out how they did it. I'd really appreciate some help, maybe a link to a tutorial or something.

        • 1. Re: How do I make two movie clips stick together when they contact each other?
          kglad Adobe Community Professional & MVP

          to move two or more movieclips simultaneously either drag one (startDrag() ) and use a loop (enterframe, setInterval) to move the others or use a loop to move them all.

          • 2. Re: How do I make two movie clips stick together when they contact each other?
            Rothrock Level 5

            Here is some code. Put a movieclip on the stage with the instance name "picture" and set its properties to "Export for Actionscript" with an identifier of "Picture"

             

             

            import flash.geom.Point;
            import flash.filters.DropShadowFilter;
            import flash.filters.BevelFilter;
            import mx.transitions.Tween;
            import mx.transitions.easing.*;

            var home:MovieClip = this;
            var picture:MovieClip;
            picture._visible = false;

            var w:Number = picture._width;
            var h:Number = picture._height;

            var cols:Number = 6;
            var rows:Number = 4;

            var wX:Number = .5 * w / cols;
            var wY:Number = .5 * h / rows;

            var hMax:Number = 2 * wX + 6;
            var hMin:Number = 2 * wX - 6;
            var hDelta:Number = 14;

            var vMax:Number = 2 * wY + 7;
            var vMin:Number = 2 * wY - 7;
            var vDelta:Number = 12;

            var puzzle:MovieClip = home.createEmptyMovieClip("puzzle", 1000);
            puzzle._x = 0
            puzzle._y = 0

            var dropShadow:DropShadowFilter = new DropShadowFilter(6, 45, 0, .9, 8, 8, 1, 3);
            var bevel:BevelFilter = new BevelFilter(2, 45, 0xffffff, .7, 0x0, .7, 1, 1, 1, 3, "inner");

            var thePieces:Array = new Array();
            var theGroups:Array = new Array();
            var theSides:Array = new Array();
            for (var i = 0; i < (cols + 1) * rows + cols * (rows + 1); i++) {
            theSides.push(generateSide());
            }

            var count:Number = 0;
            for (var i = 0; i < cols; i++) {
            for (var j = 0; j < rows; j++) {
              var curPiece:MovieClip = puzzle.createEmptyMovieClip("piece" + i + "_" + j, 1000 * i + j);
              var mask:MovieClip = curPiece.createEmptyMovieClip("mask", 1000);
              var art:MovieClip = curPiece.attachMovie("Picture", "art", 500);
              art.cacheAsBitmap = true;
              art.setMask(mask);

              curPiece.i = i;
              curPiece.j = j;
              curPiece.myGroup = i * rows + j;
              theGroups[curPiece.myGroup] = [curPiece];

              curPiece._x = 200+0 * i + (.5 + i) * w / cols;
              curPiece._y = 150+0 * j + (.5 + j) * h / rows;

              art._x = -(.5 + i) * w / cols;
              art._y = -(.5 + j) * h / rows;

              mask.beginFill(0xff0000);
              mask.moveTo(-wX,wY);
              drawSide(mask,new Point(-wX, wY),new Point(-wX, -wY),(i == 0) ? null : rotateSide(theSides[count - (2 * rows)], -Math.PI / 2));
              drawSide(mask,new Point(-wX, -wY),new Point(wX, -wY),(j == 0) ? null : theSides[count - 1]);
              drawSide(mask,new Point(wX, -wY),new Point(wX, wY),(i == (cols - 1)) ? null : rotateSide(flipSide(theSides[count], "x"), -Math.PI / 2));
              drawSide(mask,new Point(wX, wY),new Point(-wX, wY),(j == (rows - 1)) ? null : flipSide(theSides[count + 1], "x"));
              mask.moveTo(-wX,wY);

              curPiece.filters = [bevel];
              curPiece.onPress = dragPiece;
              curPiece.onRelease = curPiece.onReleaseOutside = dropPiece;
              count += 2;
              thePieces.push(curPiece);
            }
            }

            setTimeout(randomGrid,700);

            function randomGrid() {
            thePieces = shuffle(thePieces);
            for (var i = 0; i < cols; i++) {
              for (var j = 0; j < rows; j++) {
               var curPiece:Object = thePieces.pop();
               var x = 100+40 * i + (.5 + i) * w / cols;
               var y = 100+40 * j + (.5 + j) * h / rows;

               new Tween(curPiece, "_x", Back.easeInOut, curPiece._x, x, .5+Math.random()*1.5, true);
               new Tween(curPiece, "_y", Back.easeInOut, curPiece._y, y, .5+Math.random()*1.5, true);
               new Tween(curPiece, "_rotation",Elastic.easeOut,0,360*((Math.random()<.5) ? -1 : 1),1.5,true);
              }
            }
            }

            function shuffle(src:Array) {

            var tmp:Array = src.slice();
            for (var i = tmp.length - 1; i >= 0; i--) {
              var p:Number = Math.floor(Math.random() * (i + 1));
              var t = tmp[i];
              tmp[i] = tmp[p];
              tmp[p] = t;
            }
            return tmp;
            }


            function dragPiece() {
            theGroups[this.myGroup].sortOn(["j","i"],[Array.NUMERIC | Array.DESCENDING]);
            for (var a in theGroups[this.myGroup]) {
              var curPiece:MovieClip = theGroups[this.myGroup][a];
              curPiece.swapDepths(this._parent.getNextHighestDepth());
              curPiece.filters = [dropShadow, bevel];
              curPiece.offsetX = curPiece._x - puzzle._xmouse;
              curPiece.offsetY = curPiece._y - puzzle._ymouse;
            }
            this.onEnterFrame = positionPieces;
            }

            function positionPieces() {
            for (var i = 0; i < theGroups[this.myGroup].length; i++) {
              var curPiece:MovieClip = theGroups[this.myGroup][i];
              curPiece._x = puzzle._xmouse + curPiece.offsetX;
              curPiece._y = puzzle._ymouse + curPiece.offsetY;
            }
            }

            function dropPiece() {
            delete this.onEnterFrame;

            var val:Array = [[-1, 0, hMin, hMax, vDelta, "_x", "_y"], [1, 0, hMin, hMax, vDelta, "_x", "_y"], [0, -1, vMin, vMax, hDelta, "_y", "_x"], [0, 1, vMin, vMax, hDelta, "_y", "_x"]];

            var curGroup:Array = theGroups[this.myGroup].slice();

            for (var a in curGroup) {
              var curPiece:MovieClip = curGroup[a];
              curPiece.filters = [bevel];

              var newPiece:MovieClip;
              var dx, dy, dist, i, j, dir, min, max, delta:Number;
              var prop:String;

              for (var n = 0; n < 4; n++) {
               i = val[n][0];
               j = val[n][1];
               dir = (i != 0) ? i : j;
               min = val[n][2];
               max = val[n][3];
               delta = val[n][4];
               p1 = val[n][5];
               p2 = val[n][6];

               newPiece = puzzle["piece" + (curPiece.i + i) + "_" + (curPiece.j + j)];
               if (newPiece.myGroup != this.myGroup) {
                dx = curPiece._x - newPiece._x;
                dy = curPiece._y - newPiece._y;
                dist = Math.sqrt(dx * dx + dy * dy);

                if (dist < max && dist > min && dir * curPiece[p1] < dir * newPiece[p1] && curPiece[p2] > (newPiece[p2] - delta) && curPiece[p2] < (newPiece[p2] + delta)) {
                 var gNum:Number = newPiece.myGroup;
                 for (var m in theGroups[gNum]) {
                  var tmp:MovieClip = theGroups[gNum][m];
                  if (tmp.myGroup != this.myGroup) {
                   tmp.myGroup = this.myGroup;
                   theGroups[this.myGroup].push(tmp);
                  }
                 }
                }
               }
              }
            }

            for (var i = 0; i < theGroups[this.myGroup].length; i++) {
              var curPiece:MovieClip = theGroups[this.myGroup][i];
              if (curPiece != this) {
               curPiece._x = this._x + 2 * wX * (curPiece.i - this.i);
               curPiece._y = this._y + 2 * wY * (curPiece.j - this.j);
              }
            }

            if (theGroups[this.myGroup].length == rows * cols) {
              trace("All together.");
            }
            }

            function drawSide(clip:MovieClip, p0:Point, p1:Point, s:Array) {
            var len:Number = p1.subtract(p0).length;
            with (clip) {
              lineTo(p0.x,p0.y);
              for (var i = 1; i < s.length; i = i + 2) {
               c = s[i];
               p = s[i + 1];
               curveTo(c.x * len + p0.x,c.y * len + p0.y,p.x * len + p0.x,p.y * len + p0.y);
              }
            }
            }

            function rotateSide(s:Array, angle:Number):Array {
            var tmp:Array = s.slice();
            var cos:Number = Math.cos(angle);
            var sin:Number = Math.sin(angle);
            var x, y:Number;
            for (var i = 1; i < tmp.length; i++) {
              tmp[i] = tmp[i].clone();
              x = tmp[i].x * cos - tmp[i].y * sin;
              y = tmp[i].x * sin + tmp[i].y * cos;
              tmp[i].x = x;
              tmp[i].y = y;
            }
            return tmp;
            }

            function flipSide(a:Array, axis:String):Array {
            var tmp:Array = a.slice();
            tmp.reverse();
            for (var i = 0; i < tmp.length; i++) {
              tmp[i] = tmp[i].clone();
              tmp[i][axis] -= 1;
            }
            return tmp;
            }

            function generateSide():Array {
            var dir:Number = (Math.random() < .5) ? -1 : 1;
            var p2:Point = new Point(.3 + Math.random() * .4, (Math.random() * .05 + .1) * dir);
            var c2:Point = new Point(p2.x - (Math.random() * .2 + .1), p2.y + (Math.random() * 0.08 - .04));
            var c3:Point = Point.interpolate(p2, c2, 1.5 + Math.random());
            var p1:Point = new Point(p2.x - (Math.random() * .08 + .02), Math.random() * .04 - .02);
            var c1:Point = Point.interpolate(p1, c2, 1.4 + Math.random() * .1);
            var p3:Point = new Point(p2.x + (Math.random() * .08 + .02), Math.random() * .04 - .02);
            var c4:Point = Point.interpolate(p3, c3, 1.4 + Math.random() * .1);
            return ([new Point(0, 0), c1, p1, c2, p2, c3, p3, c4, new Point(1, 0)]);
            }