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:
//EDIT ME
widthSpan = Stage.width;
heightSpan = Stage.height;
twinkle = 30;
twinkleS = 5;
Stars = 1000;
//DON’T TOUCH ME
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:
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.
