Tiling and Scaling Flash

[MFrederickson50]

I've seen a lot of posts on how to tile an image in a Flash movie that is being scaled to fit the browser. I found some code posted a while back to do it in MX 2004. (below) Can someone tell me what parts of this don't work in Flash MX? (I don't have 2004) Can this be adapted to work in Flash MX, or does someone know another way to achieve the desired result in MX?



Stage.align = "LT";
Stage.scaleMode = "noScale"; // prevent content being scaled
backgroundClip.makeBackground = function() { // build a background from the tile clip to fill the screen
var tileWidth = 138; // the dimensions of your background tile
var tileHeight = 138;
var cols = Math.ceil((System.capabilities.screenResolutionX - 20) / tileWidth);
var rows = Math.ceil((System.capabilities.screenResolutionY - 20) / tileHeight);
var depth;
for (var i = 0; i < cols; ++i) {
for (var j = 0; j < rows; ++j) {
depth = this.getNextHighestDepth();
this.attachMovie("bg", "bg" + depth, depth, {_x: i * tileWidth, _y: j * tileHeight});
}
}
}
backgroundClip.onResize = function() { // reposition the background as the stage resizes
this._x = (Stage.width - this._width) / 2;
this._y = (Stage.height - this._height) / 2;
};
Stage.addListener(_level0.backgroundClip);
_level0.backgroundClip.makeBackground();
_level0.backgroundClip.onResize();

Thanks,
mfrederickson

[virusescu]

getNextHighestDepth is an MX 2004 perk ;)

Replace depth = this.getNextHighestDepth();
with depth++;
And change var depth; to initialize it like
var depth = 0;

[MFrederickson50]

hmm. I made that change and things still aren't working. I'm almost positive I had the instances set up correctly and all - is there anything else that could be causing this to fail in MX vs. MX 2004?

[MFrederickson50]

Even more irritating new development. I've gotten the code to work generally - it's tiling. But now there are basically a lot of off by one errors. - The tiles I'm using are pixel perfect diagonal tiles, and this code isn't lining them up properly. If I increase tileWidth and tileHeight to 61, 61, there is a 1 pixel gap between the images, though at 60x60 the alignment is no good. Has anyone has this problem with this code before or know why it's happening? Is it a rounding error? What's going on?



Stage.align = "TL";
Stage.scaleMode = "noScale"; // prevent content being scaled
backgroundClip.makeBackground = function() { // build a background from the tile clip to fill the screen
var tileWidth = 60; // the dimensions of your background tile
var tileHeight = 60;
var cols = Math.ceil((System.capabilities.screenResolutionX - 20) / tileWidth);
var rows = Math.ceil((System.capabilities.screenResolutionY - 20) / tileHeight);
var depth = 0;
for (var i = 0; i < cols; ++i) {
for (var j = 0; j < rows; ++j) {

depth++;
this.attachMovie("bgTile", "bgTile" + depth, depth, {_x: i * tileWidth, _y: j * tileHeight});
}
}
}
backgroundClip.onResize = function() { // reposition the background as the stage resizes
this._x = (Stage.width - this._width) / 2;
this._y = (Stage.height - this._height) / 2;
};
Stage.addListener(backgroundClip);
backgroundClip.makeBackground();
backgroundClip.onResize();

Here's a sample of what the tiling looks like... ugh (zoomed screenshot)

http://www.piconeenergy.com/sample.jpg