Duplicate
Background
by kirupa
| 11 July 2004
While scanning through the various threads
in the Flash MX 2004 forum, there was a question asking whether it was
possible to tile a background in Flash. This tutorial is an extension of
the answer I wrote for that question, and I think there are some
interesting concepts in the code that may benefit you in more
applications beyond simple background duplication.
The following is an example of a small background image automatically
tiled using some ActionScript in Flash:
[ an example
of what you will create ]
Here's how:
- First, create a new animation in
Flash. Set the width of your movie to 300 pixels and set the height
of your movie to 200 pixels.
- Now that you have your movie setup,
you will need to find a background tile. Copy and paste the
following image into Flash:
[ pattern
courtesy of
squidfingers ]
- After you have pasted that image in Flash, select the image and
press F8 (Insert | Convert to Symbol). The Convert to Symbol dialog
box will appear. Give the movie clip the name 'tile'. Don't
press the OK button just yet:
[ the Convert to Symbol
dialog box ]
- While still on the Convert to Symbol dialog box, press the
Advanced button to display more options. Check the box for "Export for ActionScript" and enter
square in the field for Identifier. After you have done that,
press OK to close the Convert to Symbol dialog box.
[ enter square in the
Identifer field for your tile movie clip ]
- Your newly converted image should still be selected. Check your
Properties panel's Width and Height text fields towards your bottom
left to see what the width and height of your image is.
If you
used my background tile, your image should have a width and height
of 34 pixels! Make a mental note of that number for now.
- Delete the image from your stage by pressing the Delete key.
Don't worry, all our work has not been wasted. Your movie clip and
its Linkage Identifier data should be saved in your Library.
- Alright, time to make this tutorial worthy of being in
the ActionScript section. Select the first frame in your timeline,
press F9 or Window | Development Panels | Actions to display the
Actions window. Copy and paste the following code inside it:
- tileBG =
function ()
{
- tile_width
= 34;
- tile_height
= 34;
- //
- x_max
= Math.round(Stage.width/tile_width);
- y_max
= Math.round(Stage.height/tile_height);
- trace(x_max);
- trace(y_max);
- for (x=0;
x<=x_max;
x++)
{
- for
(y=0;
y<=y_max;
y++)
{
- bg
=
_root.attachMovie("square",
"bg"+x+y,
this.getNextHighestDepth());
- bg._x
=
tile_width*x;
- bg._y
=
tile_height*y;
- }
- }
- };
- tileBG();
[ copy and paste the
above code into your Actions window ]
- Press Ctrl + Enter or Preview in HTML. Notice that your image is now
tiled throughout your stage area.
ActionScript Explained
Let's take a look at the code and what
causes our image to tile. There are some interesting concepts that you
might find useful for other uses beyond just tiling!
- tileBG
=
function ()
{
I create a new function, and I call it
tileBG. Notice that the function takes in no arguments.
- tile_width
=
34;
- tile_height
=
34;
In the tile_width and tile_height
variables, make sure to enter the width and height of your background
tile. In our case, the tile graphic was conveniently 34 pixels wide by
34 pixels tall.
- x_max
=
Math.round(Stage.width/tile_width);
- y_max
=
Math.round(Stage.height/tile_height);
In the above two lines, I
determine the
total number of tiles that will be needed to cover the stage
horizontally (x_max) and vertically (y_max). I do that by dividing the
total width and height of our stage by the width and height of your
background tile. I use Math.round() to round our values to the nearest
whole number.
- for
(x=0;
x<=x_max;
x++)
{
- for
(y=0;
y<=y_max;
y++)
{
-
bg
=
_root.attachMovie("square",
"bg"+x+y,
this.getNextHighestDepth());
-
bg._x
=
tile_width*x;
-
bg._y
=
tile_height*y;
- }
- }
The two for loops conduct the horizontal
and vertical sweep for creating our grid that will contain our
background tiles. Let's arbitrarily set x_max to be = 3, and y_max to be
4. First, x is set to zero. For x = 0, the for loop for the y runs all
the way until y <= y_max. Then x is set to 1, and the y loop runs again.
The loops run until x <= x_max or, occasionally.
A good way to picture this would be to
imagine the x value representative of the top row of a puzzle. For each
x piece laid, a series of y pieces go straight down and fill up all the
vertical spaces below the x piece. That process goes until you reach the
end of your puzzle and can't lay any more x pieces.
That is similar to our code above. You
will lay pieces symbolic of our background tile until you reach the edge
of our stage.
- bg
=
_root.attachMovie("square",
"bg"+x+y,
this.getNextHighestDepth());
In this line, I invoke our background
tile by using the attachMovie function combined with our movie's linkage
identifier, square. The attachMovie function called to a target
(_root for us) takes in the following three arguments: the movie clip's
identifier, the new movie clip's name, and the movie clip's depth.
For the depth, I use the
getNextHighestDepth() function. It automatically places newly attached
or created movies at one depth higher than the elements around it. You
could use an arbitrary value incremented by x or y, but if you are
working on a large animation with lots of dynamically created "stuff"
occupying precious depths in your timelines, letting Flash keep track of
the depths sounds like a good thing to do.
One last thing to note is that I am
storing our newly attached movie clip in the variable bg.
- bg._x
=
tile_width*x;
- bg._y
=
tile_height*y;
Since bg represents our newly
attached movie clip, I can use the _x and _y properties to specify
the horizontal and vertical position of our bg movie clip. tile_width*x
ensures that each subsequent image is shifted over by x. The same is
true in the code used for shifting our movie clip in the vertical
position.
Wrapping Up
If you want to learn more about grids,
Pom's tutorial on
grids and senocular's tutorial on
isometric grids
should help you out immensely.
You may be wondering, why go through the hassle of tiling
an image when you could just take a screenshot of the tiled
background, save it as an image, and then just import that
one large image as opposed to tiling one small image
dynamically in Flash!
You can create photo thumbnail galleries where each
square in the grid is actually a small preview of a larger
picture. For a project I was working on at MIT, I used the
grid as a representation of a larger map to use as a
minimap. Almost all of senocular's Isometry tutorials
involve manipulations of the basic grid.
What I hope to convey through this tutorial, is that
grids allow you to divide your stage area into small parcels
of pixels that you can manipulate and use to your will. I
have provided the source zip file that contains a working
FLA of my example.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
|