{"id":399,"date":"2009-09-08T11:25:08","date_gmt":"2009-09-08T18:25:08","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=2132"},"modified":"2009-09-08T11:25:08","modified_gmt":"2009-09-08T18:25:08","slug":"matrix-zoom-and-pan","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=399","title":{"rendered":"Matrix Zoom and Pan"},"content":{"rendered":"
\r\n[SWF(width=600, height=600, frameRate=30)]\r\nvar sw:Number = stage.stageWidth;\r\nvar sh:Number = stage.stageHeight;\r\n\r\nvar s:Shape = Shape(addChild(new Shape()));\r\n\r\nvar scale:Number = 1;\r\nvar scaleDest:Number = 1;\r\nvar down:Boolean = false;\r\nvar dx:Number = 0, dy:Number = 0, time:Number = 0;\r\n\r\nbuttonMode = true;\r\n\r\naddInstructions();\r\nvectorTexture();\r\n\r\nstage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);\r\nstage.addEventListener(MouseEvent.MOUSE_UP, onUp);\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\n\r\nfunction addInstructions():void{\r\n\tvar instruct:Sprite = Sprite(addChild(new Sprite()));\r\n\twith (instruct.graphics) beginFill(0x666666), drawRect(0,0,270, 30);\r\n\tinstruct.x = instruct.y = 20;\r\n\tvar txt:TextField = TextField(instruct.addChild(new TextField()));\r\n\ttxt.defaultTextFormat = new TextFormat("Verdana", 11);\r\n\ttxt.x = txt.y = 5;\r\n\ttxt.selectable = false;\r\n\twith (txt) textColor = 0xFFFFFF, autoSize = "left", text = "Click and hold to zoom, move mouse to pan";\r\n}\r\n\r\nfunction vectorTexture():void{\r\n\tvar cols:Vector.<uint> = Vector.<uint>([0xFFFFFF, 0x000000]);\r\n\tvar rnd:Vector.<Number> = new Vector.<Number>(6, true);\r\n\t\r\n\tfor(var i:int = 0 ; i<50; i++){\r\n\t\twith(s.graphics){\r\n\t\t\tlineStyle(Math.random() * 50 + 2, cols[int(Math.random()*cols.length)]);\r\n\t\t\tdrawCircle(Math.random() * sw, Math.random() * sh, 10 + Math.random() * Math.random() * 400);\r\n\t\t}\r\n\t}\r\n\ts.graphics.lineStyle(20, 0xCCCCCC);\r\n\ts.graphics.drawRect(0, 0,sw, sh);\r\n}\r\n\r\nfunction onDown(evt:MouseEvent):void{ down = true; }\r\nfunction onUp(evt:MouseEvent):void{ down = false; }\r\nfunction onLoop(evt:Event):void {\r\n   if (down){\r\n\t scaleDest *= 1.05;  \r\n\t time = 0;\r\n   }else{\r\n\t time++;\r\n\t \/\/ zoom out after 30 iterations\r\n\t if (time == 30){\r\n\t\t scaleDest = 1;  \r\n\t }\r\n   }\r\n   scale += (scaleDest - scale) \/ 4;\r\n   if (scale > 10) scale = scaleDest = 10;\r\n   \r\n   dx += (mouseX - dx) \/ 4;\r\n   dy += (mouseY - dy) \/ 4;\r\n   if (dx < 0) dx = 0;\r\n   if (dy < 0) dy = 0;\r\n   if (dx > sw) dx = sw;\r\n   if (dy > sh) dy = sh;\r\n   \r\n   \/\/ matrix zoom\/pan\r\n   var m:Matrix = s.transform.matrix;\r\n   m.identity();\r\n   m.translate(-dx,-dy);\r\n   m.scale(scale, scale);\r\n   m.translate(dx,dy);\r\n   s.transform.matrix = m;\r\n}\r\n<\/pre>\n
I haven’t been by the computer much these last two weeks – been traveling. Going back to nyc tomorrow so I’ll go back to posting once a day.<\/em><\/p>\n
This snippet uses a transformation matrix to zoom in and pan a Sprite instance. For demo purposes I filled the sprite with a few circles – but you’d likely be using this with a vector image of a map, a floor plan or some other graphic that warrants zooming and panning.<\/p>\n
Back around flash 7 (I think) before the Matrix class was introduced we used to have to use MovieClip nesting to achieve this effect. <\/p>\n

\nHave a look at the swf…<\/p>\n

\n<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
[SWF(width=600, height=600, frameRate=30)] var sw:Number = stage.stageWidth; var sh:Number = stage.stageHeight; var s:Shape = Shape(addChild(new Shape())); var scale:Number = 1; var scaleDest:Number = 1; var down:Boolean = false; var dx:Number = 0, dy:Number = 0, time:Number = 0; buttonMode = true; addInstructions(); vectorTexture(); stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown); stage.addEventListener(MouseEvent.MOUSE_UP, onUp); addEventListener(Event.ENTER_FRAME, onLoop); function addInstructions():void{ var instruct:Sprite = Sprite(addChild(new […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,118,13],"tags":[99,14,4],"class_list":["post-399","post","type-post","status-publish","format-standard","hentry","category-graphics","category-matrix","category-motion","tag-actionsnippet","tag-as3","tag-flash"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=399"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/399\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=399"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=399"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}