Tutorials Flash & Swish Flash Tutorials Flash basic pattern

Flash basic pattern

This tutorial is for both, designers and developers; it is about filling the background of your flash movie with a seamlessly tiling pattern of your choice using actionScript. An alternative method is also provided for designers who do not wish to learn actionScript at this point.

Here's a preview of what the final product will look like:

Fire up your flash IDE and let's get started.

Start first by designing the pattern motif, draw any shape you like. I drew this one:

image 1

Convert it to a movie clip by selecting it then choosing Modify > Convert to symbol or simply hit F8.

image 2

Give this symbol the instance name of patt0.

Flash Basic Pattern

Now we want to tile this motif so that it fills the whole stage, the easiest way to do that is by using the duplicateMovieClip() method of the MovieClip class.

This will make a clone of the current instance, the _x and _y properties of the instance are still to be assigned by code. Moreover, one clone will not suffice to fill the stage, several ones are needed, and obviously we need some sort of a loop.

Now, a "for" loop is good and easy, but it will force us to hardcode the number of iterations which is something we don't want to do for the following reasons:

What if we changed the dimensions of our motif?

  • What if we decided to resize our Stage?
  • What if we decided to apply the same tile to a movieClip instance instead of the Stage itself?

For all these reasons, a for loop is not the best option here, a do ...while loop is much better.

Let me explain a bit about do... while loops, the "do while" loop will execute a statement a first time then keep on repeating it till the condition in the while clause becomes false.

It's basic form is the following :

do {
} while (condition is true);

So what we will do is to force duplication of the motif till the whole stage is filled, once that is achieved, the condition must become false to stop duplication.

I've written the following code for that purpose:

i = 1;
do {
duplicateMovieClip(patt0, "patt"+i, i);
this["patt"+i]._x = this["patt"+(i-1)]._x+patt0._width;
this["patt"+i]._y = this["patt"+(i-1)]._y;
if (this["patt"+i]._x>Stage.width) {
this["patt"+i]._y = this["patt"+(i-1)]._y+patt0._height;
this["patt"+i]._x = 0;
//trace(this["patt"+(i-1)]._y+"--- stage hieght is "+Stage.height);
} while (this["patt"+(i-1)]._y<Stage.height);

subscribe to newsletter