zoomable map test

forked:0
favorite:1
lines:84
license : MIT License
modified : 2010-04-17 02:40:49

Embed: Tweet

package {
    import flash.display.Sprite;
    import flash.display.DisplayObject;
    import flash.events.MouseEvent;
    import flash.geom.*;
    
    import flash.text.TextField;
    public class FlashTest extends Sprite
    {
    		private var Map:Sprite;
    		
    		private var cursor:Sprite;
    		
    		private var tb:TextField;
    		
        public function FlashTest()
        {
        		 // the white square that is draggable
        		 // this is where we want the map sprite to zoom towards
        		 cursor = new Sprite();
        		 cursor.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
        		 cursor.addEventListener(MouseEvent.MOUSE_UP, onUp);
        		 
        		 cursor.graphics.beginFill(0xFFFFFF);
        		 cursor.graphics.drawRect(100, 100, 40, 40);
        		 cursor.graphics.endFill();
        		 cursor.buttonMode = true;
        		 
        		 // the large black rectangle with green corners
        		 Map = new Sprite();
        		 Map.addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheel);
        		 
        		// background
        		Map.graphics.beginFill(0x666666);
        		Map.graphics.drawRect(0,0, 465, 465);
        		Map.graphics.endFill();
        		
        		// top left
        		Map.graphics.beginFill(0x00FF33);
        		Map.graphics.drawRect(3, 3, 50, 50);
        		Map.graphics.endFill();
        		
        		// bottom left
        		Map.graphics.beginFill(0x00FF33);
        		Map.graphics.drawRect(3, 412, 50, 50);
        		Map.graphics.endFill();
        		
        		// top right
        		Map.graphics.beginFill(0x00FF33);
        		Map.graphics.drawRect(412, 3, 50, 50);
        		Map.graphics.endFill();
        		
        		// bottom right
        		Map.graphics.beginFill(0x00FF33);
        		Map.graphics.drawRect(412, 412, 50, 50);
        		Map.graphics.endFill();
        		
        		
        		// add our sprites to the displaylist
        		addChild(Map);
        		addChild(cursor);
           
            
            // text box used for traces values
            tb = new TextField();
            tb.width = stage.width;
            tb.y = stage.height-20;
            addChild(tb);
        }
        
        /* used for drag and drop functionality of the cursor sprite*/
        private function onDown(e:MouseEvent):void
        {
        		var c:Sprite = e.currentTarget as Sprite;
        		
        		c.startDrag();
        }	
        
        private function onUp(e:MouseEvent):void
        {
        		var c:Sprite = e.currentTarget as Sprite;
        		c.stopDrag();		
        }
        
        
        /* invoked when you scroll with the mouse wheel while over the map clip*/
        private function mouseWheel(event:MouseEvent):void
        {
			var t_p:Point = new Point(cursor.x, cursor.y)
			var p:Point = localToLocal(this, Map, t_p);
			var internalPoint:Point = p;
			var externalPoint:Point = new Point(cursor.x, cursor.y);
			
			// display text
			tb.text = "mousex/mousey: "+p.x.toString()+","+p.y.toString()+" || globaltolocal: "+internalPoint.x.toString()+" "+internalPoint.y.toString()+" root coord: "+externalPoint.x.toString()+" "+externalPoint.y.toString();			
			
			
			// scale and update the map position
			Map.scaleX=Map.scaleX+event.delta*.01;
			Map.scaleY=Map.scaleX;
			var matrix:Matrix=Map.transform.matrix;
			matchInternalPointWithExternal(matrix, internalPoint, externalPoint);
			Map.transform.matrix=matrix;
        }
        
        public function localToLocal(containerFrom:DisplayObject, containerTo:DisplayObject, origin:Point=null):Point
		{
			var point:Point = origin ? origin : new Point();
			point = containerFrom.localToGlobal(point);
			point = containerTo.globalToLocal(point);
			return point;
		}
        
        // clipped from MatrixTransformer.as
         private function matchInternalPointWithExternal(m:Matrix, internalPoint:Point, externalPoint:Point):void
		{
			var internalPointTransformed:Point = m.transformPoint(internalPoint);
			var dx:Number = externalPoint.x - internalPointTransformed.x;
			var dy:Number = externalPoint.y - internalPointTransformed.y;	
			m.tx += dx;
			m.ty += dy;
		}
    }
}

Code Fullscreen

Preview Fullscreen

layola :

zoomzoom