{"id":344,"date":"2009-07-13T12:32:57","date_gmt":"2009-07-13T19:32:57","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=1754"},"modified":"2009-07-13T12:32:57","modified_gmt":"2009-07-13T19:32:57","slug":"cut-image-into-squares","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=344","title":{"rendered":"Cut Image Into Squares"},"content":{"rendered":"<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\n&#x5B;SWF(width=650, height=650)]\r\nvar loader:Loader = new Loader();\r\nloader.load(new URLRequest(&quot;https:\/\/actionsnippet.com\/wp-content\/chair.jpg&quot;));\r\nloader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);\r\nx = y = 25;\r\nvar w:Number;\r\nvar h:Number;\r\nvar rows:Number = 20;\r\nvar cols:Number = 20;\r\nvar tiles:Vector.&lt;Sprite&gt; = new Vector.&lt;Sprite&gt;();\r\nfunction onLoaded(evt:Event):void{\r\n\tw = evt.target.width;\r\n\th = evt.target.height;\r\n\tvar image:BitmapData = Bitmap(evt.target.content).bitmapData;\r\n\tvar tileWidth:Number = w \/ cols;\r\n\tvar tileHeight:Number = h \/ rows;\r\n\tvar inc:int = 0;\r\n\tvar pnt:Point = new Point();\r\n\tvar rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);\r\n\tfor (var i:int = 0; i&lt;rows; i++){\r\n\t\tfor (var j:int = 0; j&lt;cols; j ++){\r\n\t\t\t var currTile:BitmapData= new BitmapData(tileWidth, tileHeight, true, 0x00000000);\r\n\t\t\t rect.x = j * tileWidth;\r\n\t\t\t rect.y = i * tileHeight;\r\n\t\t\t currTile.copyPixels(image, rect, pnt, null, null, true);\r\n\t\t\t var bit:Bitmap = new Bitmap(currTile, &quot;auto&quot;, false); \r\n\t\t\t var s:Sprite = tiles&#x5B;inc] = Sprite(addChild(new Sprite()));\r\n\t\t\t \/\/ offset them a little bit to show that they are in fact tiles.\r\n\t\t\t s.x = rect.x + Math.random()*10 - 5;\r\n\t\t\t s.y = rect.y + Math.random()*10 - 5;\r\n\t\t\t \r\n\t\t\t\/* If you have TweenLite, try something like this:\r\n\t\t\t s.x = rect.x;\r\n\t\t\t s.y = rect.y;\r\n\t\t\t TweenLite.from(s, 0.3, {x:Math.random()*stage.stageWidth, y:Math.random()*stage.stageHeight, alpha:0, delay:inc \/ 50});\r\n\t\t\t *\/\r\n\t\t\t s.addChild(bit);\r\n\t\t\t inc++;\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p>This snippet shows how to cut a dynamically loaded image up into small squares (or rectangles). Each square is placed into a sprite and these sprites are stored in a vector for later use. This kind of thing could be useful in conjunction with tweening engines to create transition effects. If you have <a href=\"http:\/\/blog.greensock.com\/tweenliteas3\/\">TweenLite<\/a> on your machine you could add the import statement &#8220;import gs.TweenLIte&#8221; and uncomment lines 33-35.<\/p>\n<p>For the purposes of this demo I just offset each sprite slightly to show that it the loaded image has in face been cut up. Here are a few stills with created by altering the rows and cols variables:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/actionsnippet.com\/wp-content\/image_squares.gif\" \/><\/p>\n<p>Without any animation, this snippet is a bit boring &#8211; again, using <a href=\"http:\/\/blog.greensock.com\/tweenliteas3\/\">TweenLite<\/a> or some other tweening engine is the way to go. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#x5B;SWF(width=650, height=650)] var loader:Loader = new Loader(); loader.load(new URLRequest(&quot;https:\/\/actionsnippet.com\/wp-content\/chair.jpg&quot;)); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded); x = y = 25; var w:Number; var h:Number; var rows:Number = 20; var cols:Number = 20; var tiles:Vector.&lt;Sprite&gt; = new Vector.&lt;Sprite&gt;(); function onLoaded(evt:Event):void{ w = evt.target.width; h = evt.target.height; var image:BitmapData = Bitmap(evt.target.content).bitmapData; var tileWidth:Number = w \/ cols; var tileHeight:Number = h [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,88],"tags":[3,14,4,127],"class_list":["post-344","post","type-post","status-publish","format-standard","hentry","category-bitmapdata","category-external-data","tag-actionscript","tag-as3","tag-flash","tag-grid"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/344","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=344"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/344\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}