{"id":168,"date":"2009-01-26T00:00:13","date_gmt":"2009-01-26T07:00:13","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=596"},"modified":"2009-01-26T00:00:13","modified_gmt":"2009-01-26T07:00:13","slug":"seamless-tiles","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=168","title":{"rendered":"Seamless Tiles"},"content":{"rendered":"
\r\n[SWF(width=600, height=500, backgroundColor=0xFFFFFF, frameRate=30)]\r\n\r\nfunction seamlessTile(img:BitmapData, featherSize:Number = 5):BitmapData{\r\n\tvar pnt:Point = new Point(0,0);\r\n\tvar tile:BitmapData = new BitmapData(img.width, img.height, true, 0xFF000000);\r\n\ttile.copyPixels(img, img.rect, pnt, null, null, true);\r\n\t\r\n\tvar flipped:BitmapData = new BitmapData(img.width, img.height, true, 0xFF000000);\r\n\tvar m:Matrix = new Matrix();\r\n\tm.scale(-1, 1);\r\n\tm.translate(tile.width,0);\r\n\tflipped.draw(tile, m);\r\n\t\r\n\tvar aChannel:BitmapData = new BitmapData(img.width, img.height, true, 0x00000000);\r\n\tvar grad:Sprite = new Sprite();\r\n\tm.createGradientBox(img.width, img.height, 0, 0, 0);\r\n\t\r\n\tgrad.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF],  [1, 0], [0, (255 \/ img.width) * img.width \/ featherSize], m, SpreadMethod.PAD);\r\n\t\r\n\tgrad.graphics.drawRect(0,0,img.width, img.height);\r\n\taChannel.draw(grad);\r\n \r\n\ttile.copyPixels(flipped, flipped.rect, pnt, aChannel, pnt, true);\r\n\t\r\n\tm.identity();\r\n\tm.scale(1, -1);\r\n\tm.translate(0,tile.height);\r\n\tflipped.draw(tile, m)\r\n\t\r\n\taChannel.fillRect(aChannel.rect, 0x00000000);\r\n\tm.createGradientBox(img.width, img.height, Math.PI \/ 2, 0, 0);\r\n\tgrad.graphics.clear();\r\n\tgrad.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF], [1, 0], [0, (255 \/ img.height) * img.height \/ featherSize],  m, SpreadMethod.PAD);\r\n\t\r\n\tgrad.graphics.drawRect(0,0,img.width, img.height);\r\n\taChannel.draw(grad, grad.transform.matrix);\r\n\t\r\n\ttile.copyPixels(flipped, flipped.rect, pnt, aChannel, pnt, true);\r\n\treturn tile;\r\n}\r\n\r\n\/\/ test out the function:\r\nvar canvas:BitmapData = new BitmapData(600, 470, true, 0xFF000000);\r\naddChild(new Bitmap(canvas));\r\n\r\nvar image:Loader = new Loader();\r\nimage.load(new URLRequest("https:\/\/actionsnippet.com\/imgs\/paper.jpg"));\r\nimage.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);\r\nvar texture:BitmapData;\r\n\r\nfunction onLoaded(evt:Event):void {\r\n\ttexture =  Bitmap(image.content).bitmapData;\r\n\taddEventListener(Event.ENTER_FRAME, onLoop);\r\n\timage.removeEventListener(Event.COMPLETE, onLoaded);\r\n}\r\n\r\nfunction onLoop(evt:Event):void{\r\n\tvar tile:BitmapData = seamlessTile(texture, Math.max(1,mouseX\/30));\r\n\tvar p:Point = new Point();\r\n\tfor (var i:int = 0; i<8; i++){\r\n\t\tp.x = (i % 4) * tile.width;\r\n\t\tp.y = int(i \/ 4) * tile.height;\r\n\t\tcanvas.copyPixels(tile, tile.rect, p);\r\n\t}\r\n}\r\n<\/pre>\n
The above demos a function called seamlessTile() which takes a BitmapData object and uses an oldschool seamless tile technique on it. <\/p>\n
The result is that you can have an image that would normally tile like this:<\/p>\n

\nend up looking like this:<\/p>\n

\n
\nYou can take a look at the swf here.<\/a>