The Pan|Zoom component on a website?

Question

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

Answer 1

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>