13 Replies Latest reply: Nov 13, 2013 11:33 PM by moccamaximum RSS

    Mouse Wheel event for zoom in and zoom out

    vari25 Community Member

      Hi All,

      I have this for my function:


      var Mydelta:int;
      var zoomAmt:int = 35;

      addEventListener(MouseEvent.MOUSE_WHEEL, Myzoom);

      function Myzoom(event:MouseEvent):void
      {
      Mydelta = event.delta;

      if (Mydelta > 0)
      {
        images_mc.width +=  zoomAmt;
        images_mc.height +=  zoomAmt;
      }
      else if (Mydelta < 0)
      {
        images_mc.width -=  zoomAmt;
        images_mc.height -=  zoomAmt;
      }
      }

       

       

      But I want the zoom out to stop at document size

       

       

       

      Please help.

       

      Thanks in advance.

        • 1. Re: Mouse Wheel event for zoom in and zoom out
          moccamaximum Community Member

          make a condition which flash checks before it begins zooming like:

           

           

          if(images_mc.width+zoomAmt<stage.stageWidth){

                     images_mc.width +=  zoomAmt;

          }

          • 2. Re: Mouse Wheel event for zoom in and zoom out
            vari25 Community Member

            Thank you for the help.

             

            But, after adding the condition its not zooming in at all.

             

            I am a novice in AS  please explain.

             

            Thank u.

            • 3. Re: Mouse Wheel event for zoom in and zoom out
              vari25 Community Member

              Hi,

               

               

              var Mydelta:int;
              var zoomAmt:int = 30;

              addEventListener(MouseEvent.MOUSE_WHEEL, Myzoom);

              function Myzoom(event:MouseEvent):void
              {
              Mydelta = event.delta;

              if (Mydelta > 0)
              {
                 images_mc.width +=  zoomAmt;
                 images_mc.height +=  zoomAmt;
              }
              else if (Mydelta < 0)
              {
                if (images_mc.width + zoomAmt > stage.stageWidth)
                {
                 images_mc.width -=  zoomAmt;
                }
                if (images_mc.height + zoomAmt > stage.stageHeight)
                {
                 images_mc.height -=  zoomAmt;
                }
              }
              }

               

               

              Now that everything works fine.

               

               

              But the zoom out stops leaving some white border around my document.

               

              What cud be done.

               

              Please help.

              • 4. Re: Mouse Wheel event for zoom in and zoom out
                moccamaximum Community Member

                its obvious

                 

                the moment you reach the size of you stage, you immediately shrink your image

                 

                if (images_mc.width + zoomAmt > stage.stageWidth)

                  {

                   images_mc.width -=  zoomAmt;

                  }

                  if (images_mc.height + zoomAmt > stage.stageHeight)

                  {

                   images_mc.height -=  zoomAmt;

                  }

                }

                 

                so it never actually fills the whole stage.

                • 5. Re: Mouse Wheel event for zoom in and zoom out
                  vari25 Community Member

                  Then wat could I do to just stop at my stage size.

                   

                   

                  Thank u.

                   

                  And if I want the same function for a document which has multiple movieclips den wat to do???

                   

                   

                  Please help..

                  • 6. Re: Mouse Wheel event for zoom in and zoom out
                    moccamaximum Community Member

                    1.if you have multiple MovieClips that should react to your zoom function you could push all movieclips in an array

                     

                     

                    var arr:Array = new Array();

                    arr = [img1,img2,img3];

                     

                    2.then you would declare a pointer

                     

                    var pointer:int = 0;

                     

                    and in your zoomEventHandler you would have to substitute

                     

                    all "images_mc" with sth. like:

                     

                    arr[pointer]

                     

                    3.You would also need a function that handles the indexing of the pointer,

                    for example

                     

                    function nextImage():void{

                    pointer++;

                    }

                     

                    function prevImage():void{

                    pointer--;

                    }

                    • 7. Re: Mouse Wheel event for zoom in and zoom out
                      vari25 Community Member

                      Thank u for all the help.

                       

                      But how cud i restrict the prev. code till only stage size.

                       

                      i.e.,

                       

                      var Mydelta:int;
                      var zoomAmt:int = 30;

                      addEventListener(MouseEvent.MOUSE_WHEEL, Myzoom);

                      function Myzoom(event:MouseEvent):void
                      {
                      Mydelta = event.delta;

                      if (Mydelta > 0)
                      {
                         images_mc.width +=  zoomAmt;
                         images_mc.height +=  zoomAmt;
                      }
                      else if (Mydelta < 0)
                      {
                        if (images_mc.width + zoomAmt > stage.stageWidth)
                        {
                         images_mc.width -=  zoomAmt;
                        }
                        if (images_mc.height + zoomAmt > stage.stageHeight)
                        {
                         images_mc.height -=  zoomAmt;
                        }
                      }
                      }

                      • 8. Re: Mouse Wheel event for zoom in and zoom out
                        moccamaximum Community Member

                        show more of you app.

                        (Screenshots how the images you want to zoom appear on screen.

                        Are they small or large (bigger than the stage))

                        • 9. Re: Mouse Wheel event for zoom in and zoom out
                          vari25 Community Member

                          no, the images are exactly of the stage size.

                           

                          Normal zoom in and, zoom out has to be of only stage size.

                          • 10. Re: Mouse Wheel event for zoom in and zoom out
                            moccamaximum Community Member

                            //scaleX is per default 1.0 use a reasonable increment

                            var zoomAmt:Number = .1;

                             

                            function Myzoom(event:MouseEvent):void

                            {

                                Mydelta = event.delta;

                               

                                if (Mydelta > 0)

                                {

                                    images_mc.scaleX += zoomAmt;

                                    images_mc.scaleY += zoomAmt;

                                }

                                else if (Mydelta < 0)

                                {

                                    if (images_mc.width - zoomAmt >= stage.stageWidth)

                                    {

                                        images_mc.scaleX -= zoomAmt;

                                    }

                                    if (images_mc.height - zoomAmt >= stage.stageHeight)

                                    {

                                        images_mc.scaleY -= zoomAmt;

                                    }

                                }

                            }

                            • 11. Re: Mouse Wheel event for zoom in and zoom out
                              vari25 Community Member

                              Thank u for all the help.

                              • 12. Re: Mouse Wheel event for zoom in and zoom out
                                IncreMan

                                Hi All,

                                Maybe some one knows how to upgrade this code for the further functionality:

                                I have movieclip that I'm zooming in/out, for example picture of house. It zooms the movieclip with the house, but the zooming is like around virtual center point of the whole movieclip. I want to make zoom to the place of mouse cursor coordinates, so if my mouse is over the door of the house it will zoom to the door and not like it is now zoomed to a absolute center of the movieclip.

                                Thanks a lot,

                                Will be appreciated for any help and assistance.

                                • 13. Re: Mouse Wheel event for zoom in and zoom out
                                  moccamaximum Community Member

                                  I wrote sth. tat has zoomcenter correction built in:

                                   

                                  stage.addEventListener(MouseEvent.CLICK, zoomHandler);

                                  function zoomHandler(e:MouseEvent):void{

                                      var zoomFactor:Number = 1.1;

                                      var zoomCenter:Point = new Point(e.stageX, e.stageY);

                                      var mcCenter:Point = new Point(mc.x, mc.y);

                                      var _xCorrection:Number = mcCenter.x-zoomCenter.x;

                                      var _yCorrection:Number = mcCenter.y-zoomCenter.y;

                                      mc.scaleX +=zoomFactor-1;

                                      mc.scaleY +=zoomFactor-1;

                                      mc.x -=_xCorrection*zoomFactor*.5;

                                      mc.y -=_yCorrection*zoomFactor*.5;

                                  }

                                   

                                  you have to exchange the click event for mousewheel

                                  and make a distinction between e.delta+/-