The BitmapData class in ActionScript 3 has a curious function named perlinNoise.  This method will produce a pseudo-random image that works great for creating various effects for water, fire and clouds.  I'm more of a results-oriented guy, so I won't go into the history of the technique, but if you are curious you can find more about it here.  Below you can see the end result of what we'll be doing in this tutorial.



To begin, I downloaded a public domain image of a beach scene and cropped the image down to a more appropriate size.  You can save mine from below or you can use any image you like. 



Once you have selected an image, bring it into Flash and place it on the stage.  Go ahead and create a new layer for the ActionScript and open up the Actions panel.  We are now going to create a couple of variables that we'll need to create our effect; all we need is a BitmapData object and a Bitmap.

var bmpData:BitmapData;
var bmp:Bitmap;


First we'll go ahead and create the BitmapData object and pass in the size of the image.  In my case, the image is 427 pixels wide and 152 pixels high.

bmpData = new BitmapData(427, 152);


Next we are ready to set up the Perlin noise using the BitmapData object's method perlinNoise. 

bmpData.perlinNoise(427, 152, 4, 10, true, false,
          BitmapDataChannel.BLUE | BitmapDataChannel.GREEN, false);


I'm going to quickly go over the parameters, but if you want more information, you can view the detailed documentation for this method here.  The first two parameters, baseX and baseY, are essentially the size of the image you want to generate noise for; since my image is 427x152 I'm passing in 427 for baseX and 152 for baseY.  The next parameter affects the detail of the image, I'm using 4 for mine.  Next is the randomSeed for which I'm passing in 10; changing this number will alter the resulting image.  After that we have a couple of Boolean values which, for the purposes of this tutorial, don't have a dramatic impact.  The next parameter indicates color options, it defaults to 7, but you can use the BitmapDataChannel constants as well.  The last two parameters are a Boolean for whether or not you want a grayscale image and an array of offset points which we will touch on later.  Note that the last three parameters are optional and have default values.

Now that we've generated our Perlin noise image, let's create the Bitmap image using that BitmapData and see what we've got!

bmp = new Bitmap(bmpData);
addChild(bmp);




Ooo, pretty, eh?  If you used the same parameters as me, then you should have something similar to the above.  Next up, we're going to get this thing scrolling and turn down the alpha to get the effect we want!