11 Replies Latest reply on Jul 6, 2015 2:28 PM by kglad

    Flash Canvas zoom and pan problem

    pedrom48110900 Level 1

      I'm trying to make an interactive map with zoom and pan capabilities. The demo is in this url: test_zoom

      The zoom is made with the scroll wheel of the mouse, and the pan with click and drag.

      My problem is that I only want the photo (movie clip with instance name "map_mc") in the middle to zoom and pan, but all the objects move at the same time...

      I'm using the following script:

       

      canvas.addEventListener("mousewheel", MouseWheelHandler, false);

      canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);

       

      var zoom;

       

      function MouseWheelHandler(ezoom) {

        if (Math.max(-1, Math.min(1, (ezoom.wheelDelta || -ezoom.detail))) > 0)

        zoom = 1.1;

        else

        zoom = 1 / 1.1;

        var local = stage.globalToLocal(stage.mouseX, stage.mouseY);

        stage.regX = local.x;

        stage.regY = local.y;

        stage.x = stage.mouseX;

        stage.y = stage.mouseY;

        stage.scaleX = stage.scaleY *= zoom;

        stage.update();

      }

       

      stage.addEventListener("stagemousedown", function (emove) {

        var offset = {

        x: stage.x - emove.stageX,

        y: stage.y - emove.stageY

        };

        stage.addEventListener("stagemousemove", function (ev) {

        stage.x = ev.stageX + offset.x;

        stage.y = ev.stageY + offset.y;

        stage.update();

        });

        stage.addEventListener("stagemouseup", function () {

        stage.removeAllEventListeners("stagemousemove");

        });

      });

       

      I need urgent help with this script so that I move and zoom only the movie clip "map_mc".

      Thank you

        • 1. Re: Flash Canvas zoom and pan problem
          kglad Adobe Community Professional & MVP

          if you only want map_mc to move why are you assigning new x and y properties to the stage??

          • 2. Re: Flash Canvas zoom and pan problem
            pedrom48110900 Level 1

            Hello. Thank you for your reply.

            I'm new to flash and javascript and so I found a script in another example and tried to apply it in my project...

            What would be the changes I need to do?

            Thank you.

            • 3. Re: Flash Canvas zoom and pan problem
              kglad Adobe Community Professional & MVP

              try:

               

               

              canvas.addEventListener("mousewheel", MouseWheelHandler, false);

              canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);

               

              var zoom;

               

              function MouseWheelHandler(ezoom) {

                if (Math.max(-1, Math.min(1, (ezoom.wheelDelta || -ezoom.detail))) > 0)

                zoom = 1.1;

                else

                zoom = 1 / 1.1;

                var local = stage.globalToLocal(stage.mouseX, stage.mouseY);

                stage.regX = local.x;

                stage.regY = local.y;

                stage.x = stage.mouseX;

                stage.y = stage.mouseY;

                stage.scaleX = stage.scaleY *= zoom;

                stage.update();

              }

               

              stage.addEventListener("stagemousedown", function (emove) {

                var offset = {

                x: stage.x - emove.stageX,

                y: stage.y - emove.stageY

                };

                stage.addEventListener("stagemousemove", function (ev) {

              map_mc.x = ev.stageX + offset.x;

              map_mc.y = ev.stageY + offset.y;

                stage.update();

                });

                stage.addEventListener("stagemouseup", function () {

                stage.removeAllEventListeners("stagemousemove");

                });

              });

               

              • 4. Re: Flash Canvas zoom and pan problem
                pedrom48110900 Level 1

                hello.

                it doesn't work... now the mouse scroll still works (although it continues to affect all the objects), and the click/drag doesn't work...

                I've placed the .fla file in a zip file on this url: http://www.buar.pt/madalena/test/test_zoom.zip

                • 5. Re: Flash Canvas zoom and pan problem
                  kglad Adobe Community Professional & MVP

                  i don't download and correct files unless i'm hired.

                   

                  free help i only offer via the adobe forums.

                   

                  do you want to scale everything or just map_mc?

                  • 6. Re: Flash Canvas zoom and pan problem
                    pedrom48110900 Level 1

                    ok. please accept my apologies for that.

                    regarding the project, I really just want to scale and drag the "map_mc" movie clip

                    thank you

                    • 7. Re: Flash Canvas zoom and pan problem
                      kglad Adobe Community Professional & MVP

                      use:

                       

                      canvas.addEventListener("mousewheel", MouseWheelHandler, false);

                      canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);

                       

                      var zoom;

                       

                      function MouseWheelHandler(ezoom) {

                        if (Math.max(-1, Math.min(1, (ezoom.wheelDelta || -ezoom.detail))) > 0)

                        zoom = 1.1;

                        else

                        zoom = 1 / 1.1;

                      map_mc.x = stage.mouseX;

                        map_mc.y = stage.mouseY;

                        map_mc.scaleX = map_mc.scaleY *= zoom;

                        stage.update();

                      }

                       

                      stage.addEventListener("stagemousedown", function (emove) {

                        var offset = {

                        x:  emove.stageX,

                        y: emove.stageY

                        };

                        stage.addEventListener("stagemousemove", function (ev) {

                      map_mc.x = ev.stageX- offset.x;

                      map_mc.y = ev.stageY -offset.y;

                        stage.update();

                        });

                        stage.addEventListener("stagemouseup", function () {

                        stage.removeAllEventListeners("stagemousemove");

                        });

                      });

                      • 8. Re: Flash Canvas zoom and pan problem
                        pedrom48110900 Level 1

                        Sorry... Nothing moves... I tried also with "this.map_mc", but nothing happens, no drag and no zoom, the objects just stand still.

                        I appreciate your efforts. Sorry again.

                        • 9. Re: Flash Canvas zoom and pan problem
                          kglad Adobe Community Professional & MVP

                          use:

                           

                          var tl = this;

                          var zoom;

                           

                          canvas.addEventListener("mousewheel", MouseWheelHandler, false);

                          canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);

                           

                          function MouseWheelHandler(ezoom) {

                            if (Math.max(-1, Math.min(1, (ezoom.wheelDelta || -ezoom.detail))) > 0){

                              zoom = 1.1;

                            } else {

                              zoom = 1 / 1.1;

                            }

                              tl.map_mc.x = stage.mouseX;

                              tl.map_mc.y = stage.mouseY;

                              tl.map_mc.scaleX = tl.map_mc.scaleY *= zoom;

                           

                          }

                           

                          stage.addEventListener("stagemousedown", downF);

                           

                          function downF(e) {

                              tl.offset = {x:e.stageX, y:e.stageY, map_mcX:tl.map_mc.x, map_mcY:tl.map_mc.y};

                              stage.addEventListener("stagemousemove", stagemoveF);

                              stage.addEventListener("stagemouseup", stageupF);

                          }   

                           

                          function stageupF(e) {

                              stage.removeAllEventListeners("stagemousemove");

                           

                          function stagemoveF(e) {

                              tl.map_mc.x = tl.offset.map_mcX+e.stageX-tl.offset.x;

                              tl.map_mc.y = tl.offset.map_mcY+e.stageY-tl.offset.y;

                          }

                          • 10. Re: Flash Canvas zoom and pan problem
                            pedrom48110900 Level 1

                            That's it! Great! You're a life saver!

                            test_zoom

                            • 11. Re: Flash Canvas zoom and pan problem
                              kglad Adobe Community Professional & MVP

                              you're welcome.