{"id":602,"date":"2009-02-04T09:00:24","date_gmt":"2009-02-04T08:00:24","guid":{"rendered":"http:\/\/www.matthijskamstra.nl\/blog\/?p=602"},"modified":"2009-01-19T18:43:05","modified_gmt":"2009-01-19T17:43:05","slug":"tiled-background-as3","status":"publish","type":"post","link":"https:\/\/www.matthijskamstra.nl\/blog\/2009\/02\/04\/tiled-background-as3\/","title":{"rendered":"Tiled background AS3"},"content":{"rendered":"

Sometimes you just need a pattern in the background that is fullscreen, of course you can use a big .PNG file but that is not always necessary.
\nYou can use a pattern that you need to tile, I’ve written about this before: my post about tiled-background<\/a> in Flash 8 AS2.
\nThe code over there is based upon a tutorial (http:\/\/www.kirupa.com\/developer\/flash8\/tiledbackground_flash8.htm<\/a>)<\/p>\n

And because kirupa is great they already have the answer:http:\/\/www.kirupa.com\/forum\/showthread.php?t=265953<\/a><\/p>\n

But to put it next to each other:<\/p>\n

AS2 example<\/h3>\n

For this example you need a bitmap in the library (right-click >> Linkage\u2026 >> activate \u2018Export for ActionScript\u2019) with the Linkage Indentifier<\/code> \u2018StripePattern_mc<\/code>\u2018 and this AS2 code placed in the root<\/em>
\n[as]
\nimport flash.display.BitmapData;
\nvar backGroundBMP:BitmapData = BitmapData.loadBitmap(“StripePattern_mc”);
\nthis.beginBitmapFill(backGroundBMP);
\nthis.lineTo(Stage.width, 0);
\nthis.lineTo(Stage.width, Stage.height);
\nthis.lineTo(0, Stage.height);
\nthis.lineTo(0, 0);
\nthis.endFill();
\n[\/as]<\/p>\n

AS3 example<\/h3>\n

But in AS3 some things have changed. And for consistency I’m using StripePattern_mc<\/code> although coding conventions will say it has to be StripePattern<\/code>
\n[as]
\nvar backGroundSprite:Sprite = new Sprite();
\nbackGroundSprite.graphics.beginBitmapFill(new StripePattern_mc(0, 0));
\nbackGroundSprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
\nbackGroundSprite.graphics.endFill();
\naddChild(backGroundSprite);
\n[\/as]<\/p>\n

Besides the obvious changes, which I’m not going to explain (Stage.width<\/code> vs stage.stageWidth<\/code>, etc).<\/p>\n

code line 2<\/em>
\nBitmapData.loadBitmap<\/code> is removed from AS3. There are no longer Linkage Identifiers and there is no longer attachMovie. Everything is created using the new<\/code> operator.
\nAnd because a Bitmap(Data) needs two extra variables:
\npublic function BitmapData(width:int, height:int, transparent:Boolean = true, fillColor:uint = 0xFFFFFFFF)
\n<\/code><\/p>\n

code line 3<\/em>
\ndrawRect is a new Graphic methode, but is does the same as the AS2 code part with lineTo<\/code>, but shorter.<\/p>\n

code line 5<\/em>
\nand you need to add it to the displaylist (hmmm perhaps I need to explain this in a future post)<\/p>\n

For this example I created a pattern with stripegenerator.com\/<\/a> but any pattern will do.<\/p>\n","protected":false},"excerpt":{"rendered":"

Sometimes you just need a pattern in the background that is fullscreen, of course you can use a big .PNG file but that is not always necessary. You can use a pattern that you need to tile, I’ve written about this before: my post about tiled-background in Flash 8 AS2. The code over there is […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,172,3],"tags":[39,408,244,40,398,243,140],"class_list":["post-602","post","type-post","status-publish","format-standard","hentry","category-as3","category-as3-migration","category-flash","tag-as2","tag-as3","tag-background","tag-experiments","tag-flash","tag-tiled","tag-tiled-background"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/comments?post=602"}],"version-history":[{"count":9,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/602\/revisions"}],"predecessor-version":[{"id":805,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/602\/revisions\/805"}],"wp:attachment":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/media?parent=602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/categories?post=602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/tags?post=602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}