15 December 2008

Tiled Flash Backgrounds Tutorial PART II

This is part II of tiled backgrounds Flash tutorial. If you haven't already, I strongly recommend you read tutorial - part I, where I described how to create tiled backgrounds without any Library movie clips.

Second solution requires custom movie clip which acts as single tile. You can draw whatever you want. Size of your movie clip is important. Function we will write takes original movie clip dimensions, width and height and creates tiles based on those. Name instance of your movie clip 'pattern'.

Tile movie clip dimensions depends on your needs, but if relation between Stage dimensions and movie clip is small, let's say we have Stage 500x400 and movie clip 100x80 it is obvious that resulting tiles set will be only 5x5. If relation between Stage dimensions and movie clip is too big, let's say for Stage 500x400 we take movie clip 5x4, result may be too many tiles and even your script may become too slow and crush your comp. So be careful and plan accordingly.

tiled flash backgrounds tutorial examples
Code is very simple, it has few lines and consist of single drawBackground() function:

function drawBackground() {
var limitWidth = Math.floor(Stage.width / pattern._width)+2;
var limitHeight = Math.floor(Stage.height / pattern._height)+2;
var counter = 0;
pattern._visible = false;
for(var i=0; i<limitWidth; i++) {
for(var j=0; j<limitHeight; j++) {
var current:MovieClip = pattern.duplicateMovieClip("tile"+counter, counter);
current._x = i*pattern._width;
current._y = j*pattern._height;
counter += 1;

Nothing much to explain here. We add 2 to limitWidth and limitHeight just to make sure no empty space is created on Stage. We use variable counter to name new movie clips and set their depth. Since we don't need pattern movie clip on Stage, we set it's visibility to false. For loops are doing their job and create nice tiled background.




template by blogger templates