6 Replies Latest reply on Jul 28, 2010 2:08 AM by MrStuPid1973

    Help required with limiting StartDrag();

    MrStuPid1973

      Hi,

       

      Quite new still to AS3 so if someone can help me out, or point in the right direction, it would be greatly appreciated.

      Thank you for taking the time to look at this, and for any help anyone can offer.

       

      Stage size is set to 750 wide x 440 high and my hi res image is 1500 wide x 880 high. image is called mcImage.

      The hi res image on the stage that is scaled down to 50% on both X and Y axes.

      I have a zoom in button, a zoom out button and a reset button. All do pretty much what their name suggests.

      When you zoom in, it adjusts the Z axes of mcImage to make the image appear larger on the stage. So far so good.

      I then get the new co-ordinates of X and Y by using the localToGlobal feature and record them in a variable, passing them to the mouse Handler for the dragging of the image.

      The issue is, whatever I try in startDrag(); does not limit the size of the dragable image, nothing happens, though I am expecting it to allow me to drag the image around within it's boundary!

      I am sure that the code can be tidied up, but I am still learning a lot about AS3 and trying my hardest.

      I am hoping that it is something really obvious I am overlooking.

      *** Update *** Registration point of mcImage is 0,0.

      Code is below - sorry but it is 60+ lines long!

       

      import flash.geom.Rectangle;

       

      mcImage.width = mcImage.width/2;

      mcImage.height = mcImage.height/2;

      var recX = 0;

      var recY = 0;

       

      /*Button handlers*/

       

      btnZoomOut.addEventListener(MouseEvent.CLICK, zoomImage);

      btnZoomIn.addEventListener(MouseEvent.CLICK, zoomImage);

      btnReset.addEventListener(MouseEvent.CLICK, zoomImage);

       

      function zoomImage(event:MouseEvent){

       

      var Zoom = event.target.name

      switch(Zoom){

      case"btnZoomIn":

      if (mcImage.z > -400) mcImage.z = mcImage.z -100;

      var coords:Point = new Point(mcImage.x, mcImage.y);

      var posX=(mcImage.localToGlobal(coords).x);

      var posY=(mcImage.localToGlobal(coords).y);

      recX = posX;

      recY = posY;

      break;

       

      case"btnZoomOut":

      if (mcImage.z != 0) mcImage.z = mcImage.z +100;

      var coords:Point = new Point(mcImage.x, mcImage.y);

      var posX=(mcImage.localToGlobal(coords).x);

      var posY=(mcImage.localToGlobal(coords).y);

      recX = posX;

      recY = posY;

      break;

       

      case"btnReset":

      mcImage.z = 0;

      mcImage.x = 0;

      mcImage.y = 0;

      recX = 0;

      recY = 0;

      break;

      }

      }

       

      /*Mouse handler for image drag*/

       

      mcImage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

      mcImage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

      mcImage.addEventListener(MouseEvent.MOUSE_OUT, mouseUpHandler);

       

      var rec:Rectangle = new Rectangle(recX ,recY ,(recX-recX-(recX))*2 ,(recY-recY-(recY))*2);

       

      function mouseDownHandler(event:MouseEvent):void {

      var object = event.target;

      object.startDrag(false, rec);

      }

       

      function mouseUpHandler(event:MouseEvent):void {

      var object = event.target;

      object.stopDrag();

      }

        • 1. Re: Help required with limiting StartDrag();
          skarthiks Level 2

          okay, i dint quite get what you are trying to do. So let me answer all the things that i think you are trying to do.

           

          First:

          (recX-recX-(recX))*2

          I dont think you intended to do this ?. This will always be (0-0-0) * = 0. since you set recx=recy = 0;

          the rec will always be (0,0,0,0) since "rec" is not updated on zoomin\zoom out\mousedown etc.

           

          and startDrag second parameter is used to set a rectangle (parents coordinates) in which the whole image would be able to move on.

           

          I guess you want to have a boundary, and if you drag some part of the image will probably not be visible ?

          Like the below:

          one.JPG

          2.JPG

          If you want to do something like the above then you need to use a MASK layer. Please read about mask.

           

          Please let me know what you wanted to do, probably some screenshots....that will be useful.

           

          Karthik

          • 2. Re: Help required with limiting StartDrag();
            MrStuPid1973 Level 1

            Hey Skarthiks

             

            Thanks for your reply, however  (recX-recX-(recX))*2 (or something similar) is what I want to do as the recX & recY values do get changed each time you click on the zoomIn or zoomOut buttons. They get changed to the values by the localToGlobal method. I have done traces on the values and they are exactly what I expect them to be each time the button is clicked. They only get reset back to 0 when you click on the btnReset button.

             

            I want to be able to move the whole image, as is it that image that gets zoomed in on and becomes bigger than the stage size, so I need to be able to move it around. I have managed to do it with a simple single zoom (doubles the image size in one go) though when I try to have multiple zoom levels, it is this that causes the issue!

             

            Something similar to the link below! though without the thumbnail or the scroll buttons (for now anyway, I might add them in afterwards though)

             

            http://activeden.net/item/zoom-pan-controls-with-dynamic-image-settings/15713

             

            Thanks MrPid

            • 3. Re: Help required with limiting StartDrag();
              skarthiks Level 2

              Yes, for the kind od animation in the link you would have to use mask movieclip on top of the original image.

               

              And the "rec" that you provide in the startDrag should be slightly larger then the image size itself, so that the image has some space to move.

              rec should not be equal to the image size (x,y,width,height).

               

              To learn about mask, chk this link

              http://www.flashandmath.com/howtos/mask/

              http://www.republicofcode.com/tutorials/flash/as3masking/

              http://www.flash-here.com/tutorials/flash_masking.html

              • 4. Re: Help required with limiting StartDrag();
                MrStuPid1973 Level 1

                OK, was not too sure that I could use a MASK like that, I thought (being a newbie to Flash) that MASK's could only be used if the image in the background (in this case on the stage) was static and the MASK was dragged around. I did not realise that the MASk could be static and the background could be dragged about. Though if I still have to set the boundary for the "Rec" why do I need to use a MASK, why can I not still use the method I was using? I will look at the mask tutorials you set through and let you know how I get on!

                • 5. Re: Help required with limiting StartDrag();
                  skarthiks Level 2

                  The work that you are trying to achieve is like seeing, an image through a window. Here the window is a mask. and if the image is big then you should be able to drag and see within the bounds of the window (not the image).

                   

                  The startDrag paramater is just used to tell where all you can drag the image, for example, in a game, i dont want somebody to drag and object from the left side of the screen to the right, then i can use the parameter and I guess its not the right use case for you.

                   

                  Hope this helps

                  Karthik

                  P.s. If this helps, please mark the post as answered.

                  • 6. Re: Help required with limiting StartDrag();
                    MrStuPid1973 Level 1

                    Hi Karthik,

                     

                    I managed to get it to work without having to use the MASK option in the end without too much trouble!

                    The problem was with the button identifier I had used, putting them all into one function and using the Case"" to determine what button had been called was the fault. Separating them into individual functions worked a treat!

                     

                    Thank you very much for you time and patience - I am going to look into the mask option (when I have time) just to see if it could neaten up my code though!