24 Replies Latest reply on Nov 20, 2017 6:32 AM by kglad

    drag and drop in flash cc 2015 with createjs

    menjli Level 1

      can anyone know how to do simple drag and drop in flash canvas with createjs ?

      this.circle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));

      function fl_MouseClickHandler_2()

      {

      // Start your custom code // This example code displays the words "Mouse clicked" in the Output panel.

      evt.target.x = evt.stageX;

      evt.target.y = evt.stageY; }

      thanks

        • 1. Re: drag and drop in flash cc 2015 with createjs
          kglad Adobe Community Professional & MVP

          use:

           

          this.circle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));

          function fl_MouseClickHandler_2(evt)

          {

          // Start your custom code // This example code displays the words "Mouse clicked" in the Output panel.

          evt.target.x = evt.stageX;

          evt.target.y = evt.stageY; }

          thanks

          1 person found this helpful
          • 2. Re: drag and drop in flash cc 2015 with createjs
            menjli Level 1

            thank you so much it worked but the the draggable object is not aligned with the mouse it has some kind of offset

            thnaks kglad

            • 3. Re: drag and drop in flash cc 2015 with createjs
              menjli Level 1

              ok i just added current target and everything is good

              here the final code if anyone want to use it

               

              this.circle.addEventListener("pressmove", fl_MouseClickHandler_2.bind(this));

               

              function fl_MouseClickHandler_2(evt)

               

              {

               

                evt.currentTarget.x = evt.stageX ;

               

                evt.currentTarget.y = evt.stageY ;

              }

               

              thnaks kglad

              1 person found this helpful
              • 4. Re: drag and drop in flash cc 2015 with createjs
                kglad Adobe Community Professional & MVP

                you're welcome.

                 

                (p.s when using the adobe forums, please mark helpful/correct responses, if there are any.)

                • 7. Re: drag and drop in flash cc 2015 with createjs
                  menjli Level 1

                  you're welcome.

                  • 8. Re: drag and drop in flash cc 2015 with createjs
                    Mohammed Sedawei Level 1

                    Thank you it's really useful, but when i want to add event to a target like in AS3 for example:

                    if(circle1.hitTestObject(circleTarget)){

                    circle1.x = circleTarget.x;

                    circle1.y = circleTarget.y;

                    }

                     

                    what is the alternative code for it in JS HTML5 canvas??

                     

                    Thanks

                    • 9. Re: drag and drop in flash cc 2015 with createjs
                      kglad Adobe Community Professional & MVP

                      easeljs has a hitTest (but the arguments are x,y points), so you can use:

                       

                      this.circle1.hitTest(this.circleTarget.x,this.circleTarget.y);

                      • 10. Re: drag and drop in flash cc 2015 with createjs
                        Mohammed Sedawei Level 1

                        i tried to use this command as you said

                        this.circle1.hitTest(this.circleTarget.x,this.circleTarget.y);

                         

                        the code become like this:

                         

                        this.circle.addEventListener("pressmove", f1.bind(this));

                         

                        function f1(evt)

                         

                        {

                        evt.currentTarget.x = evt.stageX ;

                        evt.currentTarget.y = evt.stageY ;

                         

                        if(this.circle.hitTest(this.circleTarget.x,this.circleTarget.y);

                          {

                          evt.currentTarget.x = this.circleTarget.x;

                          evt.currentTarget.y = this.circleTarget.y;

                          }

                         

                        }

                         

                         

                        but it does not work when i ad if statement can you help me Mr. kglad please?

                         

                        Thank you

                        • 11. Re: drag and drop in flash cc 2015 with createjs
                          kglad Adobe Community Professional & MVP

                          that should be:

                           

                           

                          this.circle.addEventListener("pressmove", f1.bind(this));

                           

                          function f1(evt)

                           

                          {

                          evt.currentTarget.x = evt.stageX ;

                          evt.currentTarget.y = evt.stageY ;

                           

                          if(this.circle.hitTest(this.circleTarget.x,this.circleTarget.y))

                          {

                          evt.currentTarget.x = this.circleTarget.x;

                          evt.currentTarget.y = this.circleTarget.y;

                          }

                           

                          }

                           

                           

                          1 person found this helpful
                          • 12. Re: drag and drop in flash cc 2015 with createjs
                            Marampazú Level 1

                            Hello everyone.

                            I'm doing a mini drag and drop game. I had done it earlier in AS2 / 3 but I still have a hard time doing it.

                            I used the code that is here, I added a couple of lines to check the coordinates of the drop (in this case circleTarget) and another to let me know when they touch. I have tried it and it does not work, it does not send the messages in the console.log.

                             

                            this.circle.addEventListener("pressmove", f1.bind(this));

                             

                             

                            function f1(evt) {

                                 evt.currentTarget.x = evt.stageX;

                                 evt.currentTarget.y = evt.stageY;

                                 console.log(this.circleTarget.x, this.circleTarget.y);

                                      if (this.circle.hitTest(this.circleTarget.x, this.circleTarget.y)) {

                                           evt.currentTarget.x = this.circleTarget.x;

                                           evt.currentTarget.y = this.circleTarget.y;

                                           console.log("touch");

                                      }

                            }

                             

                            What I'm trying is to do an interactive to place 5 objects in the right place, but I have not been lucky, it has not worked. Hopefully they can help me or give me some suggestions.

                             

                            Thanks for your support.

                            Greetings.

                            • 13. Re: drag and drop in flash cc 2015 with createjs
                              Rachel-Martin Level 1

                              Just in case it helps, I was also having issues with hitTest.  I ended up instead using getObjectsUnderPoint().  There is also a getObjectUnderPoint, but I found that my drag object was always one of the targets and it always wanted to grab an extra object in my drop target even though I had disabled mouseChildren earlier.  I created a function to check for my drop target in the list of objects found.  It might not be a perfect system, but it is a workaround that someone could try if needed.

                               

                               

                              function endDrag(e)

                              {

                              for (var i=0; i<btnArr.length; i++)

                              {

                              if (e.currentTarget == btnArr[i])

                              {

                              var dropTargets = s.getObjectsUnderPoint(btnArr[i].x, btnArr[i].y, 1);

                              if (checkTargets(dropTargets, dropArr[i]))

                              {

                              btnArr[i].visible = false;

                              dropArr[i].gotoAndStop(1);

                              }

                              else

                              {

                              btnArr[i].x = oLocs[i][0];

                              btnArr[i].y = oLocs[i][1];

                              }

                              }

                              }

                              }

                               

                              function checkTargets(dropTargets, selected)

                              {

                              for (var i=0; i<dropTargets.length; i++)

                              {

                              if ((dropTargets[i] == selected) || (dropTargets[i].parent == selected))

                              {

                              console.log('found');

                              return true;

                              }

                              }

                              return false;

                              }

                              • 14. Re: drag and drop in flash cc 2015 with createjs
                                kglad Adobe Community Professional & MVP

                                if you don't see the results of this console.log (console.log(this.circleTarget.x, this.circleTarget.y);)  your not eliciting a pressmove on this.circle

                                • 15. Re: drag and drop in flash cc 2015 with createjs
                                  cbunbury20 Level 1

                                  kglad, but speaking in gave dev termns, we should in something where we had to drag multiple object opt for clicking solution, as multiple drags would load process and spaggetti code, and most succesfull game go for just clic object solutions and not drag and drop, in other words, what would you use, for a like make and ice cream with 20 topings food game app, would yo do drag n drops or youl opt for a clic goto and play objects, variables interacttion? tyvm for keeping us out of the blind fog

                                  • 16. Re: drag and drop in flash cc 2015 with createjs
                                    kglad Adobe Community Professional & MVP

                                    i use drag and drop of many objects frequently and the code's concise.  here's an example:

                                     

                                     

                                    var this_var = this;

                                    this_var.index = 0;

                                    initF();

                                    this.pzA = [1,8,9,7,12,4,13,14,5,15,6,2,3,10,11];

                                    startTweenF(this_var.index);

                                     

                                    function initF(){

                                        for(var i=1;i<=15;i++){

                                            this_var['pz'+padF(i)].addEventListener('pressmove',startDrag2F);

                                            this_var['pz'+padF(i)].addEventListener('pressup',stopDrag2F);

                                            this_var['pz'+padF(i)].cursor = 'pointer';

                                            this_var['pz'+padF(i)].ivar = padF(i);

                                        }

                                    }

                                     

                                    function startTweenF(i){

                                        createjs.Tween.get(this_var['pz'+padF(this_var.pzA[i])]).to({x:(this_var['pz'+padF(this_v ar.pzA[i])].x+790)}, 300/(1+Math.sqrt(i)), createjs.Ease.cubicOut).call(completeTweenF);

                                    }

                                    function completeTweenF(){   

                                        var i = this_var.index;

                                        this_var['pz'+padF(this_var.pzA[i])].startX = this_var['pz'+padF(this_var.pzA[i])].x;

                                        this_var['pz'+padF(this_var.pzA[i])].startY = this_var['pz'+padF(this_var.pzA[i])].y;

                                        this_var.index++;

                                        if(this_var.index<15){

                                            startTweenF(Number(this_var.index));

                                        }

                                    }

                                    function startDrag2F(e){

                                        var img = e.currentTarget;

                                        img.parent.addChild(e.currentTarget);

                                        img.x = e.stageX;

                                        img.y = e.stageY;

                                    }

                                    function stopDrag2F(e){   

                                        var hit = false;

                                        for(var i=1;i<=15;i++){

                                            var p = this_var['t_grid'+padF(i)].globalToLocal(e.stageX, e.stageY); 

                                            if(e.currentTarget.hitTest(p.x,p.y)){

                                                e.currentTarget.x = this_var['t_grid'+padF(i)].x;

                                                e.currentTarget.y = this_var['t_grid'+padF(i)].y;

                                                hit = true;

                                                break;

                                            }

                                        }

                                        if(!hit){

                                            e.currentTarget.x = e.currentTarget.startX;

                                            e.currentTarget.y = e.currentTarget.startY;

                                            //console.log('!hit:'+e.currentTarget.startX);

                                        } else {

                                            checkForEndF();

                                        }

                                    }

                                    1 person found this helpful
                                    • 17. Re: drag and drop in flash cc 2015 with createjs
                                      cbunbury20 Level 1

                                      cool i will opt for an option like that prob 5 times biger cous i cant do loops, but its insightfull. I notice game makers really slow down performance with multple objects and i was wondering if it was worth attempting it on flash, tyvm and have a nice nfl sunday, as i will, plus the fight in a couple hours,

                                      • 19. Re: drag and drop in flash cc 2015 with createjs
                                        aidans35222432

                                        Hi I can get this to work but not in a really nice way, by which I mean the object always shifts the centre of it to the mouse pointer, rather than dragging from the exact mouse pointer location.

                                         

                                        Any thoughts no how to help with this?

                                         

                                        thanks

                                        • 20. Re: drag and drop in flash cc 2015 with createjs
                                          kglad Adobe Community Professional & MVP

                                          mine drag from the center (with most browsers) but i assign the reg point to the center.  also html5/js is not uniformly interpreted across all browsers.

                                          • 21. Re: drag and drop in flash cc 2015 with createjs
                                            aidans35222432 Level 1

                                            Hi kglad,

                                             

                                            Yes, I assigned the reg point to the centre but if I move the scene almost entirely off the screen it will jump back as soon as a repeat the drag and drop

                                             

                                            Is there no way to create more of a scrolling effect? Maybe a drag and drop is the wrong way of doing what I want, which is to simply move a background across the scene using the mouse...

                                            • 22. Re: drag and drop in flash cc 2015 with createjs
                                              kglad Adobe Community Professional & MVP

                                              i wouldn't use a drag and drop for that because it won't look as smooth as you probably want.

                                               

                                              start a loop and ease your background to the mouse's position.  that will look more natural.

                                              • 23. Re: drag and drop in flash cc 2015 with createjs
                                                aidans35222432 Level 1

                                                Thanks kglad, I'll look into this. Thanks for the advice.

                                                • 24. Re: drag and drop in flash cc 2015 with createjs
                                                  kglad Adobe Community Professional & MVP

                                                  you're welcome.

                                                   

                                                  p.s.  this is the typical easing i would use:

                                                   

                                                  var speed = .5;  // <- any number from 0 to 1. closer to 0 is faster

                                                   

                                                  function easeF(){

                                                  this.your_mc.x = speed*this.your_mc.x+(1-speed)*your_mouseX;

                                                  }