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 based upon a tutorial (http://www.kirupa.com/developer/flash8/tiledbackground_flash8.htm)
And because kirupa is great they already have the answer:http://www.kirupa.com/forum/showthread.php?t=265953
But to put it next to each other:
AS2 example
For this example you need a bitmap in the library (right-click >> Linkage… >> activate ‘Export for ActionScript’) with the Linkage Indentifier
‘StripePattern_mc
‘ and this AS2 code placed in the root
[as]
import flash.display.BitmapData;
var backGroundBMP:BitmapData = BitmapData.loadBitmap(“StripePattern_mc”);
this.beginBitmapFill(backGroundBMP);
this.lineTo(Stage.width, 0);
this.lineTo(Stage.width, Stage.height);
this.lineTo(0, Stage.height);
this.lineTo(0, 0);
this.endFill();
[/as]
AS3 example
But in AS3 some things have changed. And for consistency I’m using StripePattern_mc
although coding conventions will say it has to be StripePattern
[as]
var backGroundSprite:Sprite = new Sprite();
backGroundSprite.graphics.beginBitmapFill(new StripePattern_mc(0, 0));
backGroundSprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
backGroundSprite.graphics.endFill();
addChild(backGroundSprite);
[/as]
Besides the obvious changes, which I’m not going to explain (Stage.width
vs stage.stageWidth
, etc).
code line 2
BitmapData.loadBitmap
is removed from AS3. There are no longer Linkage Identifiers and there is no longer attachMovie. Everything is created using the new
operator.
And because a Bitmap(Data) needs two extra variables:
public function BitmapData(width:int, height:int, transparent:Boolean = true, fillColor:uint = 0xFFFFFFFF)
code line 3
drawRect is a new Graphic methode, but is does the same as the AS2 code part with lineTo
, but shorter.
code line 5
and you need to add it to the displaylist (hmmm perhaps I need to explain this in a future post)
For this example I created a pattern with stripegenerator.com/ but any pattern will do.
6 replies on “Tiled background AS3”
Thanks for this tutorial. But when I open the html file all the movieclips that are on the stage disappear, maybe under the tiled background.
How can I fix this?
Ah, I know what goes wrong.
In this tutorial the tile is generated and placed on the stage. This is always on top of the movieclips that you have put on the stage already.
To make sure that the tile in under the other movieclips you should create a empty Movieclip under the movieclips that you want on top.
Lets call that empty movieclip
BGTileMc
the code then will be:
var backGroundSprite:Sprite = new Sprite();
backGroundSprite.graphics.beginBitmapFill(new StripePattern_mc(0, 0));
backGroundSprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
backGroundSprite.graphics.endFill();
BGTileMc.addChild(backGroundSprite);
hope that fixes your problem
😀
This works great, however I am having an issue with my background pattern enlarging and when I open the flash movie full screen the pattern shrinks. Thoughts?
Great Snippet! Very nice work. Thank you!
-dyleeo
Awesome, thanks for this!
Great snippet, thanks alot!