|
Creating Grids with Flash/AS
by ilyas usal
Introduction
Grids are wonderful. Starting with a grid, you can achieve so many tremendous effects that it
would be a shame to ignore them any longer.
The only thing you'll need at first is a good understanding of the for loops, so I'll
talk a little bit about them. You'll also need to know how to duplicate a movie clip, so if you
don't know how to do that, check Kirupa's tutorial.
for loops
-
for loops are used when you want a certain number of statements to be executed a
given number of times. The basic structure is:
for(init; condition; next)
{
statement(s);
}
- The
init is almost all the time a variable declaration. Generally, you create a
new variable and give it the value 0.
- The
condition is, well, the condition that Flash will check before executing
the code.
- The
next is what Flash will do once all the statements have been executed. It
(almost) always increments the init variable.
-
Let's take a concrete example. Imagine we want to increment a value 10 times. So let's analyze
this: the
init is a variable initialization, var i=0. Now i
will be the variable that will tell us when we have executed the code 10 times. So when
the loop is over, we have to increment it by 1. This gives us the next:
i++. Finally, the condition we have to check is whether i
is bigger than 10 or not.
for (var i=0;i < 10;i++)
The complete code could be something like this:
myVar=5;
for (var i=0;i < 10;i++)
{
myVar++;
}
trace (myVar);
// returns 15
Building the grid:
[ the grid we're talking about ]
-
First we need a nice movie clip. Simply draw a circle and turn it into a movie clip. Give it
the instance name dot. Now click on the first frame of the main timeline (you might want
to create a new layer to hold the code). Enter this code:
gridx=30;
for (var i=0;i < 10;i++)
{
dot.duplicateMovieClip("dot"+i,i);
mc=this["dot"+i];
mc._x=gridx*i;
}
dot._visible=0;
-
This code is written in Flash 5. There are possible optimizations for Flash MX, you can refer
to the
initClip article in this section.
OK, so we have 1 variable: gridx which refers to the width of 1 cell of our grid.
Then we duplicate the dot movie clip under the name "dot"+i and we
move it to the correct location. Finally we make the main movie clip invisible, but this is not
necessary.
You can try to change _x into _y
to obtain a vertical series of duplicates.
-
The last thing we need is to do the same thing on the y axis. The idea is simple: if the last
bit of code did one line, we are going to put it in another loop to do the same on the
_y
axis.
gridx=30;
gridy=30;
num=0;
for (var i=0;i < 10;i++)
{
for (var j=0;j < 10;j++)
{
dot.duplicateMovieClip("dot"+num,num);
mc=this["dot"+num];
mc._x=gridx*i;
mc._y=gridy*j;
num++;
}
}
dot._visible=0;
The j loop creates a vertical series of duplicates, and the i loop
'duplicates' it at various _x positions.
-
The code is pretty much the same as before. Just 1 new tricky thing: I used another variable,
num, to be able to give a unique name and a unique depth to my duplicates. It can
also be useful in various effects, but I leave this for you to discover...
-
It's over! You have your grid now. You mission now, should you chose to accept it, is to be the
more creative you can and to produce some really cool effects based on this grid. you are free
to add motion, special effects, anything you like, as long at it remains a grid.
If you have any questions, feel free to post them on
the forums @
kirupaforum.com.
|
Creating Grids with Flash/AS
