As: For Animation

2,768 Views | 6 Replies
New Topic Respond to this Topic

As: For Animation 2006-08-20 17:07:59


FOR Animation

This tutorial is meant to link the chains of animation and actionscripting through means of the for loop. The for loop can be very useful in many animating scenarios. A few would be blades of grass, stars in the vast night sky, polka dot backgrounds, or even something like trees.

First we will look at the powers of the mighty for loop. Why do something 1000 times when actionscript can do it FOR you? (Bad pun XD)

Maybe you want to make an intense ninja fight scene in the deep depths of Lesotho that will not only portray the immense amounts of violence in a typical sword fight, but will also allude to the deep mental confrontations found in the weary warrior as he looks death in the eye, for possibly the last time during his life on earth. You can’t be bothered to draw 500 little dots in the sky. Well actionscript is here FOR you. (Those puns are so easy to make, I just can’t help myself)

1) First thing you have to do is create a new movie clip named “star”; in this movie clip draw one little white dot.
2) Right click this movie clip in your library and select linkage.
3) Check the box that says “export for actionscript”
4) Check the top text box in that window, labeled “identifier”. Make sure it says star then close the window.
5) Create another movie clip, name it something like stars_bg, it doesn’t really matter what you call it as long as you know what it is.
6) Click the one and only frame that should ever be in this symbol and open up your actions panel.
7) Paste this code in:

widthSpan = Stage.width;
heightSpan = Stage.height;
twinkle = 30;
twinkleS = 5;
Stars = 1000;
for (i=0; i<Stars; i++) {
attachMovie("star", "star"+i, i);
star = this["star"+i];
star._alpha = Math.random()*twinkle+(100-twinkle);
star.Aset = star._alpha;
star.c = Math.random()*(star.Aset/2)+(star.Aset/2);
star.p = Math.random()*twinkleS;
star.pos = "waning";
star._x = Math.random()*widthSpan;
star._y = Math.random()*heightSpan;
star._xscale = star._yscale=Math.random()*80+20;
star.onEnterFrame = function() {
if (this.pos == "waning") {
this._alpha -= this.p;
if (this._alpha<=this.c) {
this.pos = "waxing";
if (this.pos == "waxing") {
this._alpha += this.p;
if (this._alpha>=this.Aset) {
this.pos = "waning";

Woah… This is pretty hefty for an animator.
The first part of this code is five variables.

The first two are the width and height that your stars will span. The default value is the width and height of your stage. Change those values to whatever you feel like.

The next two variables are for the twinkle of your stars (yes, these stars twinkle too). The first variable, twinkle, is how large the twinkle window is. Right now it is set to 30, meaning the star will go from 70 alpha to 100 alpha and back again at the rate of the next variable, twinkleS. twinkleS is the max speed at which your star will twinkle at. The range of speeds goes from 0 (stagnant twinkle) to twinkleS.

The last variable, Stars is how many stars you want in your sky. Remember that the number of stars that looks good in a 1000x750 window won’t look good in a 350x100 window.
The rest of the code is what makes the starry background work. If you’re a lazy animator who is afraid to learn anything actionscript related *cough* Luis *cough*, I won’t mind if you don’t read this.
The first line you read is:

for (i=0; i<Stars; i++){

This line opens up the for loop. A for loop is defined as for(init; condition; next). Init is the initial value of the condition. The condition is much like a simple if else statement; if condition is true, for loop continues, if condition is false, the for loop ends. Next is what happens after the code is run through. When making for loops, make sure all three of these variables relate or you may create an endless loop. Notice how in the example for loop all three parts relate around i, if next didn’t relate around i, then the for loop would never end because i would always be less than Stars.

The next few lines of code is setting up the star that is added each time the code is ran. attachMovie attaches the movie clip specified, under the instance name that is specified next, followed by the depth said in the third part.

attachMovie(“star”, ”star”+i, i);

If you look at this example code, you can see that we are sttaching the MC star (star doesn’t come from the name of the movie clip, but rather the indentifier that we set up in the linkage window), then we are giving star the instance name of “star”+i, every name has to be unique so why not use a variable, better yet, lets use a variable that is already being used for something else; no need for a new one. The third part is simply I. We give the movie clip the depth of i because all the stars need their own depth and we can still use i as a variable.

The next 9 lines of code are setting attributes to the star that won’t change, such as its size, its location, its twinkle speed, its max twinkle, and we also tell the star that it is waning. Waning? Why do we need to say that? Read further and find out.

The last section of code is what happens to the star on any given frame. Well the only thing that changes about the star is its alpha for the twinkle. With two if statements, we can make the star get dimmer, then get brighter dependant upon its own twinkle variables. We need to tell flash when the star should be getting dimmer and when it should be getting brighter for this to work though. To do this, we set up the variable pos and make it either waning when the star should be getting dimmer, or waxing when the star should be getting brighter. This is why we had to tell the star to be waning earlier; if we didn’t then this code wouldn’t work because pos wouldn’t equal anything.

After closing all of the handlers, your star back ground is complete, see an example here:

Starry Night Example

Using this same method, you can do many things, like make a dotted background or blades of grass like I said earlier.

Post 1 of 2, don’t post yet.

Response to As: For Animation 2006-08-20 17:10:02

The key to making these AS shortcuts is knowing what you want to come out of it.

If you are going to make a polka background then you don’t want them to be twinkling, but you do want them to be different sizes, and maybe even different colors. So you will want to use an _xscale = _yscale = Math.random()*size to make them have their own unique size and you will want to make a method for random colors. You can do this by using drawing API and a color array or you can make multiple frames in your dot MC with different colors then make the dot go to a random frame.

For blades of grass you would want a different set of variables also. You may want to make the blades of grass have a random height, and/or a random rotation.

If you know what you want, you can do it!


Now for another example:

This example is FOR trees (did I already use that pun?)

To difference between this for example and the star one is that this one deals with depths and is a little more tricky. Like I was saying, to make these for helpers successful, all you need to know is what you want.

For trees I want a slightly random amount of trees, I want the trees’ depths and size to be dependant upon their y coordinate and I want to have their positions random, but I don’t want them to be in the middle of the screen x-wise.

And BAM!! Here’s the code:

ySpan = 200;
Trees = 60;
tWidth = 200;
for (i=0; i<Trees; i++) {
left = Math.random()*tWidth;
right = Math.random()*tWidth+Stage.width-tWidth;
attachMovie("tree", "tree"+i, i);
tree = this["tree"+i];
i<Trees/2 ? tree._x=left : tree._x=right;
tree._y = Math.random()*ySpan;
test = this.getInstanceAtDepth(tree._y);
while (test != undefined) {
q = tree._y;
test = this.getInstanceAtDepth(q);
if (test == undefined) {
tree._xscale = tree._yscale=tree._y/ySpan*100+50;

This code may look similar to the last code, and it should.

You can see that I started out by defining some variables so I can use this same code and change stuff without having to think about what part of the code I would have to change. You don’t have to use variables if you don’t want to, but for simplicity in the long run, I do.

The three variables this time are ySpan Trees, and tWidth. The first variable, ySpan, is the window of y values that the trees can be at, the second variable, Trees, is the number of trees wanted, and the last variable tWidth is the width of tree x values (remember I have the gap in the middle that I wanted so the span is actually 200 on the left and 200 on the right as is).
Now begins the for loop; it starts out the same way as last time with the three specifications based upon the init, i.

The first things to be executed are the variables left and right. These two variables are random numbers in the window of tWidth and is used to give the tree an x value.

After those two variables, the movie clip ‘tree’ is attached the same way as before.

The next line of code is a conditional operator (a one line rendition of a simplex if/else statement). It is set up so that if i is less than or equal to half of the variable Trees then the tree will be added on the left side of the stage, otherwise it will be added on the right side.

Next the tree is given a y value in respect of the ySpan variable.

After the tree has a y variable, it needs to get a depth in accordance. You wouldn’t want a tree at a y:100 to have a greater depth than a tree at y:400. This is where the very basic 3D engine comes in (it only deals with depths and scaling, w00t!)

The variable ‘test’ is established and it checks to see if there is an object at the depth of the tree’s y value. If there isn’t an object at the depth, then the tree takes it, otherwise the tree’s y value is pushed back one and its y value is tested again for a unique depth. This is tested by a while loop that runs until test equals undefined, meaning there is nothing at the depth of the tree’s y value.

Now all of the trees can have their own depth without any awkward problems that would occur if the while loop wasn’t established.

The last line of code scales the tree down to a fraction of its y value.

Here is the example file for the tree generator (pay attention to the grass also, for it is added by a for loop also)

Tree Example

This is where the tutorial ends, but it shouldn’t be where your imagination and experimenting ends. There are many other things that can be done with for loops and also other actionscript that can help you when animating.

Happy animating, happy actionscripting, and always…


Response to As: For Animation 2006-08-20 17:12:26

Wow DEF. one of the best animation tut's around. I'll look over it later, but it looks good from what i've read. Great job. I never thought of using AS like that :)

Luke, use the for !!!11 Lol.

BBS Signature

Response to As: For Animation 2006-08-20 17:13:46

Wow I really like the star thing

Response to As: For Animation 2006-08-20 17:20:56

you can use AS to create trees for you even you know, a while ago i made a factorial tree generation program that generates cool looking trees randomly, so every one is different. Only problem is it takes a while to make a tree

Response to As: For Animation 2006-08-20 17:24:50

At 8/20/06 05:20 PM, Glaiel_Gamer wrote: you can use AS to create trees for you even you know, a while ago i made a factorial tree generation program that generates cool looking trees randomly, so every one is different. Only problem is it takes a while to make a tree

Yea I know, but I didn't want to make too much script run in the first frame. Two massive for loops both containing while loops is enough on its own :P

Response to As: For Animation 2006-08-20 19:03:09

the fantsatic FOR..
I did know about this.. but Iv never hadd to use it yett..
but thanks.. it gave me an idea Im gonna start working on soon!!