Grassy Field:

If you stumbled upon this page (from a search engine maybe?) without getting a chance to actually create the grass animation, click here to read the first page.

Why Does the Animation Work?
I believe that Flash programming is not about simply copying and pasting code. I think that you should understand the reasoning behind the code so that you can apply what you learned to create something even more cooler than boring grass moving across a field. The following sections will help you to learn how all the pieces of the code work.

Duplicating Grass
If you recall, we started off with only one blade of grass. Yet, in our animation, hundreds of blades of grass are competing for space on the screen. The solution lies in a line of code involving duplicateMovieClip.

The duplicateMovieClip action was included in the code pasted in Frame 1. The code that you pasted in Frame 1 is:

for (i=0; i<300; i++) {
   _root.grass.duplicateMovieClip("movie"+i,i);
}

Now, let's dissect the above lines of code and translate them into English! The first line is the iteration method that sets the duplicating process in motion. An iteration method is anything that creates a loop for a definite period of time until the loop is stopped.

for (i=0; i<300; i++) {
   _root.grass.duplicateMovieClip("movie"+i,i);
}

For tells Flash to begin looping. i=0 sets the initial value of i to zero. i < 300 tells Flash to loop whatever action is contained within the loop (the code in gray) until the variable i almost reaches 300. If we started out with i equaling 0, and we tell Flash to loop until i reaches 300, how does i ever go from 0 to 300? The answer lies in the code i++. i++ is called an "incrementer" because it increments the value of the variable i by a certain amount. In this code, the certain amount is 1.

The second part of duplicating grass is actually duplicating the grass! The line of code we will be focusing on is the following:

for (i=0; i<300; i++) {
   _root.grass.duplicateMovieClip("movie"+i,i);
}

The basic syntax for duplicating a movie clip goes something like this:

myMovieClip.duplicateMovieClip(newname, depth)

Here's what each word in the above line of code represents:

• myMovieClip
  This represents the path of the movie clip that we wish to duplicate. In our example, the movie clip's instance name was 'grass', and it was located in our main timeline; therefore, myMovieClip is replaced with _root.grass.
   

• duplicateMovieClip
  This word actually duplicates the movie clip with the following properties:

  • newname
    The duplicated movie clip's instance name is defined here. Because there will be numerous movie clips, we use a generic word plus a variable to distinguish this movie clip from others.
     

  • depth
    Depth specifies where the movie clip will be placed in relation to other movie clips. A higher depth means that the movie clip will be placed above another movie clip with a lower depth number.

Strange how three simple lines of code can be elaborated to fill up a few pages of text. I hope the above explanations helped you to understand how and why the grass movie gets duplicated.

Making the Grass Unique
When you have 300 pieces of grass being repeated in a small space, it becomes difficult to make it seem like each blade of grass is unique with its own special characteristics. Thanks to Flash's random function, it becomes possible. T

he first four lines in the onLoad section ensure that the grass is different each time it is looped:

this._x = Math.round(-10+Math.random()*350);
this._xscale = (50+Math.random()*350);
this._yscale = (50+Math.random()*150);
this._alpha = (10+Math.random()*90);

The lines are fairly self-explanatory. In the first line, I randomly place a grass movie clip in an area encompassing -10 pixels and 350 pixels. I go a little beyond the stage with -10 pixels to ensure continuity. When you look at a field, you see grass gradually appear; there is no fine line between where the field starts and the road/mud ends.

The _xscale and _yscale randomly scale the width and height of the movie clip to create the illusion of depth and varying sizes. The _alpha value makes each blade of grass have a different level of transparency. Because there are many individual blades of grass, having partially transparent blades of grass creates a nice blurred effect.

Moving and Looping the Grass
Moving and looping the grass is slightly more complicated than the remaining sections. Here are the lines of code that make the grass move:

x = (_root._xmouse+50)/rxn;
this._xscale = -x;

this._x -= x/10;
pos = this._x;
if (pos<-50) {
   this._x += Math.round(290+Math.random()*100);
}

In the first line, I declare a variable x that will scale the grass movie clip as the mouse cursor moves to the right. The second line ensures that the value of x is applied to the _xscale of the grass clip. Because I want the scaling to be opposite with that of the mouse motion, I add a negative in front of the x variable in the second line.

The code in bright blue involves the actual movement of the grass. The variable x makes yet another appearance. The position of the grass will be decremented by the value of x divided by 10. It is being decremented because the grass is moving left. Remember, in the co-ordinate plane, the further you move left on the x-axis, the less the number actually becomes.

The rxn variable in pink color is a value generated randomly from the last line of the onLoad action. That value specifies how quickly the value of x will react to mouse movements. The higher the value of rxn, the more sluggish the movement will be. The lesser the value of rxn, the more nimble the movement will be.

Once the grass moves outside of the stage area, it becomes useless. Well, useless until we make it appear again. Notice the if statement in blue. If the blade of grass moves 50 pixels beyond the left edge of the stage, it will randomly be brought back at a location on the right to create a seamless, never-ending field of grass!

download fla

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!

Need help?

Ask on the forums!

• Previous Article
• Next Article

 

---

Previous Page

Discuss on kirupaforum.com