In this tutorial we're going to make a field of grass that sways gently in the breeze. I found a similar grass field tutorial at Kirupa. His tutorial didn't quite create the look of a static grass field that I wanted, so I modified it a lot and came up with this. So most of the credit goes to him.
Here's an example of the finished Flash file, complete with oh-so-pretty hills, sky and sun:
The great thing about this method is that it uses actionscript to produce animations. This whole file is less than 2KB! On top of this, it is easily customized to your particular needs. OK off we go...
Step 1: Create a new Flash document with whatever dimensions you want. The default is fine.
Step 2: Using the pen tool, (shortcut letter P) draw a blade of grass. The fewer the curves (i.e. the simpler) the better. After you've drawn one grass blade that you're happy with, select it, then click Modify > Optimize. Use maximum smoothing and multiple passes. This will help make animating your grass a little easier on the computer's processor. Don't make more than one blade of grass - that's the computer's job. Give the grass blade its own layer.
Step 3: Double-click the grass that you've just created and hit F8, or Insert > Convert to symbol. Select "Movie Clip" as the type and click OK. Now, select the grass again and give it an instance name of "grass". (This option is in the Properties menu)
Step 4: Now, on a new layer (Insert > Layer) create a rectangle and place it off to the right side of the stage. Make sure it is selected, then click F8 and make it a movie clip. Give it a name like "limit" and an instance name of "right".
Step 5: Copy this rectangle and place it on the left side of the stage, just off the edge. Give this copy an instance name of "left". These two rectangles will act as barriers for the virtual wind - causing it to bounce back and forth between them. Create these two barriers on their own layers, as always. So far, your stage should look something like this:
Step 6: Still paying attention? Good. Now we want to create some wind to move our grass. On a new layer, create another rectangle a little taller than the height of your grass. Place it so it overlaps the right side barrier you just created. Make this a movie clip and name it "wind". Give it an instance name of "wind" as well.
Step 7: Let's give this wind some movement using Actionscript. Make sure that the Actions menu is open (F9 or Window > Actions) and it's in expert mode. Select the wind rectangle and add the following code in the actions area:
| onClipEvent(enterFrame) {
if (hit == 'left') { _x = _x+(1+Math.random()*30); } if (hit == 'right') { _x = _x-(1+Math.random()*25); } if (this, hitTest(_root.left)) { hit = 'left'; } if (this, hitTest(_root.right)) { hit = 'right'; } } |
But wait a minute! The wind is still visible. No biggie - all you have to do is click it, then select Color > Alpha> 0% in the Properties window.
Now, every time the wind hits one of these barriers, it will ricochet off and head toward the other one. As it passes through the grass, the grass will move. How, you ask? Keep reading I say.
Step 8: Now we're going to assign our little grass blade some movement characteristics. Make sure that the Actions menu is open (F9 or Window > Actions) and it's in expert mode. Select the grass and add the following code in the actions area:
| onClipEvent (load) {
this._x = Math.round(-10 + Math.random()* 560); this._xscale = (50+Math.random()*350); this._yscale = (5+Math.random()*100); this._alpha = (10+Math.random()*90); } onClipEvent (enterFrame) { if (_root.grass, hitTest(_root.wind)) { this._xscale = ((_root.wind._x+30) - this._yscale)/5; } else { this._xscale = ((_root.wind._x-5) - this._yscale)/5; } } |
All the code is explained in the attached .FLA file.
Step 9: Great. Now your grass will know what to do when the "wind" hits it. But right now, if you run your movie (you can only view it by compiling it (Ctrl + Enter)) you'll only see one lonely blade of grass. To make a field, simply add this code in the first frame (you should need only one frame for this entire movie):
| for (i=0; i<300; i++) {
_root.grass.duplicateMovieClip("movie"+i,i); } |
You've just created 300 blades of grass - enough for a great looking field. Keep the number lower if you want to give people with slower computers a chance to see the animation at a decent speed.
There you have it. Check out the .FLA source code to learn how to tweak the settings. You can change the number of grass blades, the speed of the wind, the movement of the grass, etc. Good luck.
Source file: download.
More Flash & Swish: 
