Tiled BG in AS3?

[ghostmonk]

Pretty simple question.... I'm using an old AS2 technique to place a bitmap on the stage (from the library), and tile a background.

However, the loadBitmap method is no longer available in AS3.

Does anyone know how to do this now in ActionScript 3.0?
Not overly concerned how, but if someone knows the "best practice" method, I'd much appreciate it.

[TheCanadian]

You would import your bitmap into the library and link it to a class then create and instance of that class using the new operator and pass that instance to the beginBitmapFill method.

[ghostmonk]

You would import your bitmap into the library and link it to a class then create and instance of that class using the new operator and pass that instance to the beginBitmapFill method.

Thanks for the response... however, the ins and out of your explanation are too cryptic for me.

I'm assuming I export the image (in this case tile.png) for actionscript. In the linkage I name the class "Pattern" will be generated on export of the swf.

Not sure how to follow your instructions after that.
This is what I'm doing so far.

import flash.display.BitmapData;
import Pattern;
var tile: pattern = new Pattern();

function fillStage():void{
this.beginBitmapFill(tile);
this.lineTo(stage.stageWidth, 0);
this.lineTo(stage.stageWidth, stage.stageHeight);
this.lineTo(0, stage.stageHeight);
this.lineTo(0, 0);
this.endFill();
}

fillStage();

(do I need to import Pattern?)

Thanks again for your help... I think your flash experiments are pretty rad.

Nicholas

[devonair]

In AS3, you have to get away from the idea of linkage names or linkage id's. Everything in AS3 is a Class and (most) can be instantiated using the standard:
var myClassInstance:MyClass = new MyClass(params);
syntax..

So when you set your pattern to export for actionscript, you give it a class name like "Pattern", and see that Flash automatically makes it extend the BitmapData class. Now you can create an instance of your pattern with: new Pattern(0, 0); (the Bitmap data class requires a width and height parameter to be passed to the constructor. In this case they'll be ignored and the width and height of your imported tile.png will be used).

So, to fill the background with the pattern, you can say something like:
var backGroundSprite:Sprite = new Sprite();
backGroundSprite.graphics.beginBitmapFill(new Pattern(0, 0));
backGroundSprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
backGroundSprite.graphics.endFill();
addChild(backGroundSprite);

[ghostmonk]

Awesome

that make a lot of sense... thanks

[ghostmonk]

Thanks again for all your help... a quick question.... kind of a side note:

I am able to re-tile my background on a stage resize by doing this:

var tile:Sprite = new Sprite();

stage.addEventListener(Event.RESIZE, reTile);

function tileBG():void{
tile.graphics.beginBitmapFill(new Pattern(0, 0));
tile.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
tile.graphics.endFill();
addChild(tile);
}

function reTile(event:Event):void{
tileBG();
}

tileBG();

But instead of writing the reTile() funtion, I'd like to be able to use tileBG() as both the function for the stage resize, and the the initial load up. I just don't know how to pass a function automatically, when it is looking for an event...

[lfdesign]

But instead of writing the reTile() funtion, I'd like to be able to use tileBG() as both the function for the stage resize, and the the initial load up. I just don't know how to pass a function automatically, when it is looking for an event...

I would like to know that too!! Please someone help...

[devonair]

function tileBG(evt:Event = null){};

[lfdesign]

function tileBG(evt:Event = null){};Sorry devonair but I didn't understand that... I tried it but it does nothing...

Can you explain it please?

[Toiletfreak]

Quite interesting, can be used as a replacement for duplicatemovieclip() function...btw, how can the objects duplicated in a <new> loop be identified? Thanks...

[tortuga]

Sorry devonair but I didn't understand that... I tried it but it does nothing...

Can you explain it please?
Here is what he meant:


var tile:Sprite = new Sprite();

stage.addEventListener(Event.RESIZE, tileBG);

function tileBG(event:Event=null):void {
tile.graphics.beginBitmapFill(new Pattern(0, 0));
tile.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
tile.graphics.endFill();
addChild(tile);
}

tileBG();

[tortuga]

Quite interesting, can be used as a replacement for duplicatemovieclip() function...btw, how can the objects duplicated in a <new> loop be identified? Thanks...

If I understand you correctly, you could do something like this:


//stage align/scale stuff
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

stage.addEventListener(Event.RESIZE, tileBG);

var tile:Sprite;

function tileBG(event:Event=null):void {

//create a reference to the old tile container
var oldTile:Sprite = tile;

//create a new tile container
tile = new Sprite();

//fill the container
tile.graphics.beginBitmapFill(new Pattern(0, 0));
tile.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
tile.graphics.endFill();

//add the tile container to the display list
addChild(tile);

//get rid of the old container
if (oldTile != null && oldTile != tile) {
removeChild(oldTile);
}
}

tileBG();
This is pretty much how they are doing it in the AS3 UI Components.

[efnx]

I recently wrote a class for just this occasion. The class is called tile and you can download the source and view usage info here => http://blog.efnx.com/?p=25

[jorisx]

maybe it's a good idea to just place the tile once for the whole monitor resolutiuon instead of redrawing everytime with stageHeight and stageWidth:

backGroundSprite.graphics.drawRect(0, 0,Capabilities.screenResolutionX, Capabilities.screenResolutionY);



Thanks again for all your help... a quick question.... kind of a side note:

I am able to re-tile my background on a stage resize by doing this:

var tile:Sprite = new Sprite();

stage.addEventListener(Event.RESIZE, reTile);

function tileBG():void{
tile.graphics.beginBitmapFill(new Pattern(0, 0));
tile.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
tile.graphics.endFill();
addChild(tile);
}

function reTile(event:Event):void{
tileBG();
}

tileBG();

But instead of writing the reTile() funtion, I'd like to be able to use tileBG() as both the function for the stage resize, and the the initial load up. I just don't know how to pass a function automatically, when it is looking for an event...

[adefesche]

I used this method to get a tiled background but it covers up all of the movie clips I have on the stage. How do I move it BEHIND all of the stuff on the stage?

[whenqtipsattack]

I used this method to get a tiled background but it covers up all of the movie clips I have on the stage. How do I move it BEHIND all of the stuff on the stage?

addChildAt(tile, 0);

[dhingue]

maybe it's a good idea to just place the tile once for the whole monitor resolutiuon instead of redrawing everytime with stageHeight and stageWidth:

backGroundSprite.graphics.drawRect(0, 0,Capabilities.screenResolutionX, Capabilities.screenResolutionY);

Thanks a lot jorisx! Works fine!

[bluerain]

stage.scaleMode="noScale";
stage.align="TL";

var pt: Pattern=new Pattern(0,0);
var backGroundSprite:Sprite = new Sprite();
addChild(backGroundSprite);
stage.addEventListener(Event.RESIZE, Tile);
Tile(null);
function Tile(e:Event):void {
backGroundSprite.graphics.beginBitmapFill(pt);//new Pattern(0, 0));
backGroundSprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
backGroundSprite.graphics.endFill();
}