2 Replies Latest reply on May 21, 2010 6:41 PM by David_F57

    The Pan|Zoom component on a website?


      Stumbled across the Pan|Zoom and want to use it on my website, have a large scale image to place in a small area, much to what the webpage I came across does: http://www.adobe.com/devnet/flex/samples/fig_panzoom/


      Have managed produce it with my image in a SWF and Air file, although I am used to putting the swf into a html page, but then launch the page, the image doesn't show and the application does not work, as it needs the other files/code to run it.


      Am I totally off track, as I want it just in one self containing swf... I am very much a newbie to flex/flash builder 4.


      Any help would be greatful, haven't altered any of the orginal code just the image within it.





        • 1. Re: The Pan|Zoom component on a website?
          rtalton Level 4


          I found a technique to pan/zoom somewhere on the 'net, can't remember where, but I adapted it to pan/zoom an image.


          (Flex 3)


          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%"
              verticalScrollPolicy="off" horizontalScrollPolicy="off"
              creationComplete="initApp()" >

                  private var draggedObject:DisplayObject;
                  private var imageMatrix:Matrix;
                  private function initApp():void{
                      imageMatrix = img1.transform.matrix;
                 private function startDragging(event:MouseEvent):void{
                      draggedObject = DisplayObject(event.currentTarget);
                  private function stopDragging(event:MouseEvent):void{
                  private function onMouseWheel(event:MouseEvent) : void{
                      // set the origin of the transformation
                      // to the current position of the mouse           
                      var originX:Number = stage.mouseX;
                      var originY:Number = stage.mouseY;           
                      // zoom
                      imageMatrix = img1.transform.matrix;
                      if( event.delta > 0 ){                   
                          //limit zoom:
                          if (imageMatrix.a > 3){
                          // zoom in
                          scaleAt( 6/5, originX, originY );
                          //limit zoom:
                          if (imageMatrix.a < .26){
                          // zoom out                   
                          scaleAt( 5/6, originX, originY );
                  public function scaleAt(scale:Number, originX:Number, originY:Number) : void{
                      // get the transformation matrix of this object
                      imageMatrix = img1.transform.matrix;
                      // move the object to (0/0) relative to the origin
                      imageMatrix.translate( -originX, -originY );           
                      // scale
                      imageMatrix.scale( scale, scale );           
                      // move the object back to its original position
                      imageMatrix.translate( originX, originY );           
                      // apply the new transformation to the object
                      img1.transform.matrix = imageMatrix;
                      //set the label's text:
                      txtZoomLevel.text = 'Zoom Level: ' + imageMatrix.a.toPrecision(2).toString();           

              <mx:Image id="img1"
                  x="50" y="50"
              <mx:Text x="15" id="txtZoomLevel" width="137"
                  color="#ffffff" text="Zoom Level:" bottom="20"/>


          • 2. Re: The Pan|Zoom component on a website?
            David_F57 Level 5



            The world is way to complicated, so we have a container inside that container we have an image and a slider, the slider sets a scale, the image itself needs to be dragged-- ok time to write some code - ok lets write a whole application .  You just need to use an image source that is available(place it in your projects source folder)




            <?xml version="1.0" encoding="utf-8"?>

            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"





            <s:Scale id="scaler" autoCenterTransform="true" target="{img}" duration="10" scaleYTo="{vs.value*0.10}" scaleXTo="{vs.value*0.10}"/>



            <s:Group id="pnl" width="600" height="400" verticalCenter="0" horizontalCenter="0" clipAndEnableScrolling="true">

            <s:Rect top="0" left="0" bottom="0" right="0">


            <s:SolidColorStroke id="borderStroke" weight="1"/>



            <mx:Image id="img" width="400" height="300" source="myimage.jpg" mouseDown="img.startDrag()" mouseUp="img.stopDrag()"/>

            <s:VSlider id="vs" top="10" bottom="10" left="10" minimum="1" maximum="20" change="scaler.play();" value="10"/>