2 Replies Latest reply on Feb 18, 2017 11:41 AM by Le Dirlo...

    Drag in a limited zone

    Le Dirlo...

      ...

       

      Hello there !...

       

      After 10 days scratching my head, I manage to make my first drag an drop animation with animate cc !...

      I used to work with Flash (AS2) and it was a real challenge for me...

       

      But I still have a big problem... I want to limit the drag zone in the upper zone of my stage... so that the draggables don't cover the buttons or the score / comments...

       

      My stage is 865 x 482.

      I have 6 draggables images : d_0, d_1,... d_5

      I have 6 droppables zone : box_1, box_2, ... box_5

      I also put a response for each draggables and a score field...

       

      And there is my code for the drag and drop :

       

      // Variables

      var totalscore = 6;

      this.totalscore.text=totalscore;

       

      var count=0;

      this['thecount'].text = '0';

       

      var offset;

       

      // ???

       

      dragRadius = 40;

      //Destination Size

      destHeight = 100;

      destWidth = 100;

       

      //d_0

      //d_0 reponse check box

      var reponse_0 = this.reponse_0;

       

      //d_0 drop_zone

      var destination_0 = new createjs.Container();

      destination_0.addChild(this.box_0);

      destination_0.setBounds(31, 169, 40, 40);

       

      //d_0 on top when dragged

      this.d_0.on("mousedown", function (evt) {

          this.parent.addChild(this);

          this.offset = {x: this.x - evt.stageX, y: this.y - evt.stageY};

              if (evt.currentTarget.x === 91 && evt.currentTarget.y === 221) {

              evt.remove();

          } else {

              //evt.currentTarget.alpha = 1;

          }

          });

       

      //d_0 draggable un less in droppable

      this.d_0.on("pressmove", function (evt) {

          if (evt.currentTarget.x === 91 && evt.currentTarget.y === 221) {

              evt.remove();

          } else {

          evt.currentTarget.x = evt.stageX + this.offset.x;;

          evt.currentTarget.y = evt.stageY + this.offset.y;;

          stage.update(); //much smoother

          }

      });  

       

      var that = this;

       

      //d_0 hittest drop_zone

      this.d_0.on("pressup", function (evt) {

          if (intersect(evt.currentTarget, destination_0)) {

              destination_0.alpha = 0.5;

              evt.currentTarget.alpha = 1;

              evt.currentTarget.x = 91;

              evt.currentTarget.y = 221;

              reponse_0.gotoAndStop(1);

              count++;

              that['thecount'].text = count;

              stage.update(evt);

              evt.remove();

          } else {

              reponse_0.gotoAndStop(0);

              that['thecount'].text = count;      

              evt.currentTarget.x = evt.currentTarget.x;

              evt.currentTarget.y = evt.currentTarget.y;

          }

      });

       

      ////  (And I repeat this code 5 times for each draggables... I only change the x ans y coordinates...) ////

       

      //Tests if two objects are intersecting

      function intersect(obj1, obj2) {

          var objBounds1 = obj1.getBounds().clone();

          var objBounds2 = obj2.getBounds().clone();

       

          var pt = obj1.globalToLocal(objBounds2.x, objBounds2.y);

       

          var h1 = -(objBounds1.height / 2 + objBounds2.height);

          var h2 = objBounds2.width / 2;

          var w1 = -(objBounds1.width / 2 + objBounds2.width);

          var w2 = objBounds2.width / 2;

       

          if (pt.x > w2 || pt.x < w1) return false;

          if (pt.y > h2 || pt.y < h1) return false;

       

          return true;

      }

       

      ...

       

      I add an image !...

      Image2.jpg

       

      Big thanks !!...

       

      ...

       

      Message was edited by: Ludovic Mercier

        • 1. Re: Drag in a limited zone
          nickg28 Adobe Community Professional

          Hi Ludovic Mercier,

           

          I know this is probably more work, but maybe try writing the code in Actionscript 3.

          Below is a tutorial on how to make a puzzle with AS3.

           

          https://code.tutsplus.com/tutorials/create-a-drag-and-drop-puzzle-in-actionscript-30--acti ve-2920

           

          If you don't want to do that, here is code from a puzzle game I built in AS2 years ago. I put in comments to try to explain the code.

          Hopefully one of these suggestions helps you out.

           

          youWin._visible = false;

          checkContainer.check1._visible = false;

          checkContainer.check2._visible = false;

          checkContainer.check3._visible = false;

          checkContainer.check4._visible = false;

          checkContainer.check5._visible = false;

          checkContainer.check6._visible = false;

          checkContainer.check7._visible = false;

          checkContainer.check8._visible = false;

           

           

          /*****************************************/

           

           

          function dragSetup1(clip, targ)

          {

            clip.onPress = function()

            {

            startDrag(this);

            this.beingDragged = true;

            };

            clip.onRelease = clip.onReleaseOutside = function ()

            {

            stopDrag();

            this.beingDragged = false;

            if (eval(this._droptarget) == targ)

            {

            this.onTarget = true;

            _root.targ.gotoAndStop(2);

            _root.answer1.gotoAndPlay(2);

            checkContainer.check1._visible = true;

            if (answer1._currentframe == 2 && answer2._currentframe == 8 && answer3._currentframe == 8 && answer4._currentframe == 8 && answer5._currentframe == 8 && answer6._currentframe == 8 && answer7._currentframe == 8 && answer8._currentframe == 8)

            {

            youWin._visible = true;

            }

            }

            else

            {

            this.onTarget = false;

            _root.targ.gotoAndStop(1);

            }

            };

            //the variables below will store the clips starting position

            clip.myHomeX = clip._x;

            clip.myHomeY = clip._y;

            //the variables below will store the clips end position

            clip.myFinalX = targ._x;

            clip.myFinalY = targ._y;

            clip.onEnterFrame = function()

            {

            //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)

            // then move the MC back to its original starting point (with a smooth motion)"

            if (!this.beingDragged && !this.onTarget)

            {

            this._x -= (this._x - this.myHomeX) / 5;

            this._y -= (this._y - this.myHomeY) / 5;

            //if the circle is dropped on any part of the target it slides to the center of the target

            }

            else if (!this.beingDragged && this.onTarget)

            {

            this._x -= (this._x - this.myFinalX) / 5;

            this._y -= (this._y - this.myFinalY) / 5;

            }

            };

          }

           

           

          dragSetup1(answer1,target1);

           

           

          /*****************************************/

           

           

          /*****************************************/

           

           

          function dragSetup2(clip, targ)

          {

            clip.onPress = function()

            {

            startDrag(this);

            this.beingDragged = true;

            };

            clip.onRelease = clip.onReleaseOutside = function ()

            {

            stopDrag();

            this.beingDragged = false;

            if (eval(this._droptarget) == targ)

            {

            this.onTarget = true;

            _root.targ.gotoAndStop(2);

            _root.answer2.gotoAndPlay(2);

            checkContainer.check2._visible = true;

            if (answer1._currentframe == 8 && answer2._currentframe == 2 && answer3._currentframe == 8 && answer4._currentframe == 8 && answer5._currentframe == 8 && answer6._currentframe == 8 && answer7._currentframe == 8 && answer8._currentframe == 8)

            {

            youWin._visible = true;

            }

           

            }

            else

            {

            this.onTarget = false;

            _root.targ.gotoAndStop(1);

            }

            };

            //the variables below will store the clips starting position

            clip.myHomeX = clip._x;

            clip.myHomeY = clip._y;

            //the variables below will store the clips end position

            clip.myFinalX = targ._x;

            clip.myFinalY = targ._y;

            clip.onEnterFrame = function()

            {

            //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)

            // then move the MC back to its original starting point (with a smooth motion)"

            if (!this.beingDragged && !this.onTarget)

            {

            this._x -= (this._x - this.myHomeX) / 5;

            this._y -= (this._y - this.myHomeY) / 5;

            //if the circle is dropped on any part of the target it slides to the center of the target

            }

            else if (!this.beingDragged && this.onTarget)

            {

            this._x -= (this._x - this.myFinalX) / 5;

            this._y -= (this._y - this.myFinalY) / 5;

            }

            };

          }

           

           

          dragSetup2(answer2,target2);

           

           

          /*****************************************/

           

           

          /*****************************************/

           

           

          function dragSetup3(clip, targ)

          {

            clip.onPress = function()

            {

            startDrag(this);

            this.beingDragged = true;

            };

            clip.onRelease = clip.onReleaseOutside = function ()

            {

            stopDrag();

            this.beingDragged = false;

            if (eval(this._droptarget) == targ)

            {

            this.onTarget = true;

            _root.targ.gotoAndStop(2);

            _root.answer3.gotoAndPlay(2);

            checkContainer.check3._visible = true;

            if (answer1._currentframe == 8 && answer2._currentframe == 8 && answer3._currentframe == 2 && answer4._currentframe == 8 && answer5._currentframe == 8 && answer6._currentframe == 8 && answer7._currentframe == 8 && answer8._currentframe == 8)

            {

            youWin._visible = true;

            }

            }

            else

            {

            this.onTarget = false;

            //_root.targ.gotoAndStop(1);

            }

            };

            //the variables below will store the clips starting position

            clip.myHomeX = clip._x;

            clip.myHomeY = clip._y;

            //the variables below will store the clips end position

            clip.myFinalX = targ._x;

            clip.myFinalY = targ._y;

            clip.onEnterFrame = function()

            {

            //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)

            // then move the MC back to its original starting point (with a smooth motion)"

            if (!this.beingDragged && !this.onTarget)

            {

            this._x -= (this._x - this.myHomeX) / 5;

            this._y -= (this._y - this.myHomeY) / 5;

            //if the circle is dropped on any part of the target it slides to the center of the target

            }

            else if (!this.beingDragged && this.onTarget)

            {

            this._x -= (this._x - this.myFinalX) / 5;

            this._y -= (this._y - this.myFinalY) / 5;

            }

            };

          }

           

           

          dragSetup3(answer3,target3);

           

           

          /*****************************************/

           

           

          /*****************************************/

           

           

          function dragSetup4(clip, targ)

          {

            clip.onPress = function()

            {

            startDrag(this);

            this.beingDragged = true;

            };

            clip.onRelease = clip.onReleaseOutside = function ()

            {

            stopDrag();

            this.beingDragged = false;

            if (eval(this._droptarget) == targ)

            {

            this.onTarget = true;

            _root.targ.gotoAndStop(2);

            _root.answer4.gotoAndPlay(2);

            checkContainer.check4._visible = true;

            if (answer1._currentframe == 8 && answer2._currentframe == 8 && answer3._currentframe == 8 && answer4._currentframe == 2 && answer5._currentframe == 8 && answer6._currentframe == 8 && answer7._currentframe == 8 && answer8._currentframe == 8)

            {

            youWin._visible = true;

            }

            }

            else

            {

            this.onTarget = false;

            _root.targ.gotoAndStop(1);

            }

            };

            //the variables below will store the clips starting position

            clip.myHomeX = clip._x;

            clip.myHomeY = clip._y;

            //the variables below will store the clips end position

            clip.myFinalX = targ._x;

            clip.myFinalY = targ._y;

            clip.onEnterFrame = function()

            {

            //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)

            // then move the MC back to its original starting point (with a smooth motion)"

            if (!this.beingDragged && !this.onTarget)

            {

            this._x -= (this._x - this.myHomeX) / 5;

            this._y -= (this._y - this.myHomeY) / 5;

            //if the circle is dropped on any part of the target it slides to the center of the target

            }

            else if (!this.beingDragged && this.onTarget)

            {

            this._x -= (this._x - this.myFinalX) / 5;

            this._y -= (this._y - this.myFinalY) / 5;

            }

            };

          }

           

           

          dragSetup4(answer4,target4);

           

           

          /*****************************************/

           

           

          /*****************************************/

           

           

          function dragSetup5(clip, targ)

          {

            clip.onPress = function()

            {

            startDrag(this);

            this.beingDragged = true;

            };

            clip.onRelease = clip.onReleaseOutside = function ()

            {

            stopDrag();

            this.beingDragged = false;

            if (eval(this._droptarget) == targ)

            {

            this.onTarget = true;

            _root.targ.gotoAndStop(2);

            _root.answer5.gotoAndPlay(2);

            checkContainer.check5._visible = true;

            if (answer1._currentframe == 8 && answer2._currentframe == 8 && answer3._currentframe == 8 && answer4._currentframe == 8 && answer5._currentframe == 2 && answer6._currentframe == 8 && answer7._currentframe == 8 && answer8._currentframe == 8)

            {

            youWin._visible = true;

            }

            }

            else

            {

            this.onTarget = false;

            _root.targ.gotoAndStop(1);

            }

            };

            //the variables below will store the clips starting position

            clip.myHomeX = clip._x;

            clip.myHomeY = clip._y;

            //the variables below will store the clips end position

            clip.myFinalX = targ._x;

            clip.myFinalY = targ._y;

            clip.onEnterFrame = function()

            {

            //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)

            // then move the MC back to its original starting point (with a smooth motion)"

            if (!this.beingDragged && !this.onTarget)

            {

            this._x -= (this._x - this.myHomeX) / 5;

            this._y -= (this._y - this.myHomeY) / 5;

            //if the circle is dropped on any part of the target it slides to the center of the target

            }

            else if (!this.beingDragged && this.onTarget)

            {

            this._x -= (this._x - this.myFinalX) / 5;

            this._y -= (this._y - this.myFinalY) / 5;

            }

            };

          }

           

           

          dragSetup5(answer5,target5);

           

           

          /*****************************************/

           

           

          /*****************************************/

           

           

          function dragSetup6(clip, targ)

          {

            clip.onPress = function()

            {

            startDrag(this);

            this.beingDragged = true;

            };

            clip.onRelease = clip.onReleaseOutside = function ()

            {

            stopDrag();

            this.beingDragged = false;

            if (eval(this._droptarget) == targ)

            {

            this.onTarget = true;

            _root.targ.gotoAndStop(2);

            _root.answer6.gotoAndPlay(2);

            checkContainer.check6._visible = true;

            if (answer1._currentframe == 8 && answer2._currentframe == 8 && answer3._currentframe == 8 && answer4._currentframe == 8 && answer5._currentframe == 8 && answer6._currentframe == 2 && answer7._currentframe == 8 && answer8._currentframe == 8)

            {

            youWin._visible = true;

            }

            }

            else

            {

            this.onTarget = false;

            _root.targ.gotoAndStop(1);

            }

            };

            //the variables below will store the clips starting position

            clip.myHomeX = clip._x;

            clip.myHomeY = clip._y;

            //the variables below will store the clips end position

            clip.myFinalX = targ._x;

            clip.myFinalY = targ._y;

            clip.onEnterFrame = function()

            {

            //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)

            // then move the MC back to its original starting point (with a smooth motion)"

            if (!this.beingDragged && !this.onTarget)

            {

            this._x -= (this._x - this.myHomeX) / 5;

            this._y -= (this._y - this.myHomeY) / 5;

            //if the circle is dropped on any part of the target it slides to the center of the target

            }

            else if (!this.beingDragged && this.onTarget)

            {

            this._x -= (this._x - this.myFinalX) / 5;

            this._y -= (this._y - this.myFinalY) / 5;

            }

            };

          }

           

           

          dragSetup6(answer6,target6);

           

           

          /*****************************************/

           

           

          /*****************************************/

           

           

          function dragSetup7(clip, targ)

          {

            clip.onPress = function()

            {

            startDrag(this);

            this.beingDragged = true;

            };

            clip.onRelease = clip.onReleaseOutside = function ()

            {

            stopDrag();

            this.beingDragged = false;

            if (eval(this._droptarget) == targ)

            {

            this.onTarget = true;

            _root.targ.gotoAndStop(2);

            _root.answer7.gotoAndPlay(2);

            checkContainer.check7._visible = true;

            if (answer1._currentframe == 8 && answer2._currentframe == 8 && answer3._currentframe == 8 && answer4._currentframe == 8 && answer5._currentframe == 8 && answer6._currentframe == 8 && answer7._currentframe == 2 && answer8._currentframe == 8)

            {

            youWin._visible = true;

            }

            }

            else

            {

            this.onTarget = false;

            _root.targ.gotoAndStop(1);

            }

            };

            //the variables below will store the clips starting position

            clip.myHomeX = clip._x;

            clip.myHomeY = clip._y;

            //the variables below will store the clips end position

            clip.myFinalX = targ._x;

            clip.myFinalY = targ._y;

            clip.onEnterFrame = function()

            {

            //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)

            // then move the MC back to its original starting point (with a smooth motion)"

            if (!this.beingDragged && !this.onTarget)

            {

            this._x -= (this._x - this.myHomeX) / 5;

            this._y -= (this._y - this.myHomeY) / 5;

            //if the circle is dropped on any part of the target it slides to the center of the target

            }

            else if (!this.beingDragged && this.onTarget)

            {

            this._x -= (this._x - this.myFinalX) / 5;

            this._y -= (this._y - this.myFinalY) / 5;

            }

            };

          }

           

           

          dragSetup7(answer7,target7);

           

           

          /*****************************************/

           

           

          /*****************************************/

           

           

          function dragSetup8(clip, targ)

          {

            clip.onPress = function()

            {

            startDrag(this);

            this.beingDragged = true;

            };

            clip.onRelease = clip.onReleaseOutside = function ()

            {

            stopDrag();

            this.beingDragged = false;

            if (eval(this._droptarget) == targ)

            {

            this.onTarget = true;

            _root.targ.gotoAndStop(2);

            _root.answer8.gotoAndPlay(2);

            checkContainer.check8._visible = true;

            if (answer1._currentframe == 8 && answer2._currentframe == 8 && answer3._currentframe == 8 && answer4._currentframe == 8 && answer5._currentframe == 8 && answer6._currentframe == 8 && answer7._currentframe == 8 && answer8._currentframe == 2)

            {

            youWin._visible = true;

            }

            }

            else

            {

            this.onTarget = false;

            //_root.targ.gotoAndStop(1);

            }

            };

            //the variables below will store the clips starting position

            clip.myHomeX = clip._x;

            clip.myHomeY = clip._y;

            //the variables below will store the clips end position

            clip.myFinalX = targ._x;

            clip.myFinalY = targ._y;

            clip.onEnterFrame = function()

            {

            //all these actions basically just say "if the mouse is up (in other words - the clip is not being dragged)

            // then move the MC back to its original starting point (with a smooth motion)"

            if (!this.beingDragged && !this.onTarget)

            {

            this._x -= (this._x - this.myHomeX) / 5;

            this._y -= (this._y - this.myHomeY) / 5;

            //if the circle is dropped on any part of the target it slides to the center of the target

            }

            else if (!this.beingDragged && this.onTarget)

            {

            this._x -= (this._x - this.myFinalX) / 5;

            this._y -= (this._y - this.myFinalY) / 5;

            }

            };

          }

           

           

          dragSetup8(answer8,target8);

           

           

          /*****************************************/

           

           

           

           

          /*if (theChosenOne == 1 && theChosenTwo == 2 && theChosenThree == 3 && theChosenFour == 4 && theChosenFive == 5 && theChosenSix == 6 && theChosenSeven == 7 && theChosenEight == 8)

          {

          trace("what up");

          youWin._visible = true;

          }

          */

           

           

          /*if (answer1._currentframe == 2)

          {

          trace("what up");

          youWin._visible = true;

          }

          */

          1 person found this helpful
          • 2. Re: Drag in a limited zone
            Le Dirlo... Level 1

            ...

             

            Thanks for your answer !...

             

            But the point is that I want to make this kind of animation in html5/js...

            I did this originally in AS2 like there :

            http://soutien67.free.fr/math/activites/compter/5/compter_5_1.htm

             

            But I read that swf files will not last forever, and that's why I don't want them in AS3 neither...

             

            It was so simple in actionscript... I'm wondering why its not as easy for html5 and javascript... ???...

             

            I have so many swf files on my school site... and still no idea how I will keep them active...

             

            I need help !!...

             

            ...