Newest Articles

8 Ball Pool
Photo Reel
Image Color Tinting using Actionscript
3d Rotating Image Cube
Image Slider with Easing
Catapult Game


Popular Articles

True Fullscreen Flash Mode
8 Ball Pool
FLV Player
Image Slider
Mp3 Player with XML Playlist
Album Slide


Random Articles

iPod Style Wheel Slider
Glowing Orb
Motion along a Path
Show the Current Frames Per Second
Paddle Ball
Image Slider with Easing


Links

Foundation-Flash
Tutorial4Me
MickM
TutorialQuest
Tutorialsphere.com - Free Online Tutorials
Newgrounds
TWiT
Link to SwfSpot
Swf Spot



rss feed

Moving Clouds and Waving Grass

Moving Clouds and Waving Grass
AddThis Social Bookmark Button
Description: Add puffy clouds and wavy grass to your movies
Author: John Bezanis
Added: May 23rd 2007
Version: Flash 8
Total Views: 29806
Views in the Past 7 Days: 262


This movie contains two symbols, clouds and grass. The clouds move at a constant speed and are generated dynamically. Each time a cloud moves past the screen to the left, a new cloud is created with a random shape and color. The grass is plotted at certain coordinates when the movie starts. Each blade of grass is set to a random color. At the start of each frame, the grass waves according to an x position where the blades of grass are attracted to. The code for the clouds and grass can be accessed by opening their movie clip in the library.
Code for the clouds:
  1. //Number of clouds
  2. clouds=6;
  3. //These are just general boundaries.
  4. //To use exact boundaries, create a mask in the parent level of the size desired
  5. //Height of the sky
  6. skyheight=Stage.height;
  7. //Width of the sky
  8. skywidth=Stage.width;
  9. //Max size of a cloud
  10. cloudsize=300;
  11. //Amount of blur applied to the shapes to make them cloud-like
  12. blursize=40;
  13. //Clouds move at a random speed. this is the minimum speed
  14. cloudminspeed=.5;
  15. //Variance in speed from cloud to cloud
  16. cloudspeedvariance=1;
  17. //Create the clouds
  18. for(c=1;c<=clouds;c++){
  19. //create an empty movie clip to hold the cloud
  20.   this.createEmptyMovieClip("cloud"+c,this.getNextHighestDepth());
  21. //generate a cloud. Pass in the instance name of the newly created cloud
  22.   shapecloud("cloud"+c);
  23. //Set the x position to a random position within the boundaries
  24.   eval("cloud"+c)._x=Math.random()*skywidth-eval("cloud"+c)._x/2;
  25. //Set the y position to a random position within the boundaries
  26.   eval("cloud"+c)._y=Math.random()*(skyheight)-eval("cloud"+c)._height;
  27. }
  28. //Run at the start of each frame
  29. onEnterFrame=function(){
  30. //Run for each cloud
  31.   for(c=1;c<=clouds;c++){
  32. //Move the cloud to the left according to its speed
  33.     eval("cloud"+c)._x-=eval("cloud"+c).cloudspeed;
  34. //If the cloud is past the stage to the left, reset it to the right. Create a new shape and color  
  35.     if(eval("cloud"+c)._x+(eval("cloud"+c)._width/2)+cloudsize<0){
  36. //Reset the x position
  37.       eval("cloud"+c)._x=skywidth;
  38. //Reshape and recolor the cloud
  39.       shapecloud("cloud"+c);
  40.     }
  41.   }
  42. }
  43. //This function creates the shape and color of a cloud
  44. function shapecloud(cloudid){
  45. //Clear the current contents of the cloud
  46.   eval(cloudid).clear();
  47. //Set the new shade between 224 and 255. This number is used for the red, green, and blue, to create a grayscale color
  48.   cloudcolor=Math.round(Math.random()*31)+224;
  49. //Use no line
  50.   eval(cloudid).lineStyle(undefined, (cloudcolor+cloudcolor*0x100+cloudcolor*0x10000), 100, false, "none", "none", "none", 1);
  51. //Set the fill color. cloudcolor is used 3 times, for red, green, and blue
  52.   eval(cloudid).beginFill((cloudcolor+cloudcolor*0x100+cloudcolor*0x10000));
  53. //Set a starting coordinate for the cloud 
  54.   eval(cloudid).moveTo(Math.random()*cloudsize,Math.random()*cloudsize);
  55. //Draw an invisible line to another point the combined lines form shapes, which are the clouds.
  56. //They don't look much like clouds until the blur is applied
  57.   eval(cloudid).lineTo(Math.random()*cloudsize,Math.random()*cloudsize);
  58.   eval(cloudid).lineTo(Math.random()*cloudsize,Math.random()*cloudsize);
  59.   eval(cloudid).lineTo(Math.random()*cloudsize,Math.random()*cloudsize);
  60.   eval(cloudid).lineTo(Math.random()*cloudsize,Math.random()*cloudsize);
  61.   eval(cloudid).lineTo(Math.random()*cloudsize,Math.random()*cloudsize);
  62. //Apply a blur to the shape
  63.   eval(cloudid).filters = [new flash.filters.BlurFilter(blursize,blursize,2)];
  64. //Set a new cloud speed
  65.   eval(cloudid).cloudspeed=Math.random()*cloudspeedvariance+cloudminspeed; 
  66. }
Code for the grass:
  1. //Height of each blade of grass
  2. grassheight=35;
  3. //Average space in between each blade of grass
  4. grassspacing=5;
  5. //Maximum sway of each blade of grass
  6. maxsway=20;
  7. //Number of blades of grass along the x axis
  8. xplots=30;
  9. //Number of blades of grass along the y axis
  10. yplots=20;
  11. //The wind has an x position and the grass is attracted to the position
  12. windxpos=0;
  13. //Velocity of the wind left and right
  14. windspeed=0;
  15. //Gives the grass a bent effect. The grass bends 1/4 of the way up
  16. grasscontrol=grassheight/4;
  17. //Array containing the info for each blade of grass
  18. grasscoords=[];
  19. //These loops go through the field, planting each blade of grass
  20. for (xpos=0; xpos<xplots; xpos++) {
  21.   for (ypos=0; ypos<yplots; ypos++) {
  22.     //x position, y position, sway, and color
  23.     grasscoords.push([xpos*grassspacing+Math.random()*grassspacing,ypos*grassspacing+Math.random()*grassspacing,0,Math.round(Math.random()*128)*65536+Math.round(Math.random()*76+146)*256]);
  24.   }
  25. }
  26. //Run on each frame
  27. onEnterFrame=function(){
  28. //Clear all of the grass so it can be redrawn with different sway
  29.   this.clear();
  30. //Change the speed of the wind
  31.   windspeed=Math.max(-50,Math.min(50,windspeed+Math.random()*40-20));
  32. //Move the position the blades are attracted according to the windxpos
  33.   windxpos+=windspeed;
  34. //If the windxpos moves too far to the left, reverse its speed
  35.   if(windxpos<-100){
  36.     windxpos=-100;
  37.     windspeed*=-1;
  38.   }
  39. //If the windxpos moves too far to the right, reverse its speed
  40.   else if(windxpos>grassspacing*xplots+100){
  41.     windxpos=grassspacing*xplots+100;
  42.     windspeed*=-1;
  43.   }
  44. //handle the redraw for each blade of grass
  45.   for(coord=0;coord<grasscoords.length;coord++){
  46. //Set the line style. 0 means use hairline width and grasscoords[coord][3] is the color    
  47.     this.lineStyle(0, grasscoords[coord][3], 100, false, "normal", "none", "none", 1);
  48. //Adjust the sway according to the grass's current sway and the windxpos
  49.     grasscoords[coord][2]=Math.max(-maxsway,Math.min(maxsway,grasscoords[coord][2]+Math.max(-maxsway,Math.min(maxsway,(windxpos-grasscoords[coord][0])/100))))+(Math.random()*3-1.5);
  50. //Move to the base of the blade of grass
  51.     this.moveTo(grasscoords[coord][0],grasscoords[coord][1]);
  52. //Draw a curved line to the new top of the blade of grass
  53.     this.curveTo(grasscoords[coord][0],grasscoords[coord][1]-grasscontrol,grasscoords[coord][0]+grasscoords[coord][2],grasscoords[coord][1]-grassheight+Math.abs(grasscoords[coord][2]/2));
  54.   }
  55. }

Download the source file below:

Download Source File
Questions and Suggestions
hi guys
June 11th 2007 16:06PM   -   ebay
Totaly Bounceeeeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrrrrrrrrr............
June 29th 2007 05:06AM   -   Dharam
I have a great code for rain (or snow) that i modified to make it blow left (in the wind). 1. Make a line like this: / (W:2.5) (H:4.3) 2. Convert it to a movie clip. Call it rain and give it a linkage identifier of rain. 3. Delete the movie clip on the stage and add this script to the first keyframe: init = function () { width = 1000; // pixels height = 400; // pixels max_snowsize = 10; // pixels snowflakes = 1000 // quantity for (i=0; i<snowflakes; i++) { t = attachMovie("rain", "rain"+i, i); t._alpha = 20+Math.random()*60; t._x = -(width/2)+Math.random()*(1.5*width); t._y = -(height/2)+Math.random()*(1.5*height); t._xscale = t._yscale=50+Math.random()*(max_snowsize*10); t.k = 1+Math.random()*2; t.wind = -1.5-1; t.onEnterFrame = mover; } }; mover = function() { this._y += this.k; this._x += this.wind; if (this._y>height+10) { this._y = -20; } if (this._x>width+20) { this._x = -(width/2)+Math.random()*(1.5*width); this._y = -20; } else if (this._x<-20) { this._x = -(width/2)+Math.random()*(1.5*width); this._y = -20; } } init(); That's it! PS. This works best with a high frame rate.
July 22nd 2007 17:07PM   -   ME!
//Number of blades of grass along the y axis yplots=20; skyheight=Stage.height;
August 18th 2007 13:08PM   -   claud
Awesome thnx but could you make so it acts BELOW other layers cuz Im Using it for a project but the clouds go Over my other layers
November 8th 2007 12:11PM   -   leo
Leo, you could create a movie clip at the layer (level) you want, and then place the clouds into that layer.
November 11th 2007 19:11PM   -   John
How to create Free loader In Flash ? (Tell Clearly Pls)
November 18th 2007 11:11AM   -   SURESH.V
I want to use hit test to make my character not move when it rich the walls
December 5th 2007 08:12AM   -   Ephenia
Awesome code guys! I was wondering if it was possibly to generate random clouds from a particular symbol created previously? Thanks!
February 13th 2008 07:02AM   -   Claudio Bueno
i'm doing a project. how am i able to make a TREE sway, rather grass? ...i'm trying to give it a windy effect that's why. can i get some help? i'm doing the seasons and i've got the rain, and snow, all i need is wind.
February 18th 2008 12:02PM   -   molly
plz i need help i have to the the same thing on the grace but with a flame
April 8th 2008 05:04AM   -   ahmed
Hi this is a nice scipt. I have tried it with a bigger fiel, i made changing as below : Xplots=80; Yplots=80; but everything runs extremly slow then, is it bec the calculation of each grass takes to much time? is there a way to run ist faster? Jason
September 1st 2008 07:09AM   -   Jason
Add a Question or Suggestion
name:
website (optional):
captcha type the characters into the box
message (5000 characters or less):