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

    The Pan|Zoom component on a website?

    matheuwhitehead

      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.

       

      Thanks,

       

      Matt

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

          Hi,

          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()" >

          <mx:Script>
              <![CDATA[
                  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);
                      this.addChild(draggedObject);
                      event.currentTarget.startDrag();
                  }
                  private function stopDragging(event:MouseEvent):void{
                      event.currentTarget.stopDrag();
                  }
                  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){
                              return;
                          }
                          // zoom in
                          scaleAt( 6/5, originX, originY );
                      }else{
                          //limit zoom:
                          if (imageMatrix.a < .26){
                              return;
                          }
                          // 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:Script>


              <mx:Image id="img1"
                  mouseDown="startDragging(event)"
                  mouseUp="stopDragging(event)"
                  mouseWheel="onMouseWheel(event)"
                  source="assets/images/test/DSC01916.JPG"
                  x="50" y="50"
                  >       
                  <mx:filters>
                      <mx:DropShadowFilter/>
                  </mx:filters>
              </mx:Image>
           
              <mx:Text x="15" id="txtZoomLevel" width="137"
                  color="#ffffff" text="Zoom Level:" bottom="20"/>

          </mx:Application>

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

            hi,

             

            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)

             

            David

             

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

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

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx">

             

            <fx:Declarations>

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

            </fx:Declarations>

             

            <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:stroke>

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

            </s:stroke>

            </s:Rect>

            <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"/>

            </s:Group>

            </s:Application>