1. Code
  2. Effects

Creating Ripples in the Medici Fountain


You have to admit, when you use a product named Flash there is a tendency to get flashy and overdo it. The thing is the true art of the Flash designer lies not in producing overwhelming in-your-face presentations or effects. The true art lies in dialing the Flashiness Meter way back and realizing it is the art of subtlety that is important. Not the Flash.

Which brings us to the subject of this Beginner-level tutorial… doing water.

Before we get going let’s be perfectly clear with each other. There are several dozen ways to do what I am going to talk about in this tutorial. In fact, I fully expect to see the comments box at the end of this piece become populated with a number of posts telling me, essentially, That ain’t the way I would do it. It most likely isn’t and I have no problem with that and expect it. In fact this tutorial is based upon an example Lee Brimelow, a Flash Platform Evangelist for Adobe first showed me a couple of years ago.

Lee and I both share a remarkably similar outlook when it comes to working with ActionScript. Instead of staring at a blank Actions panel, we both think it is important that you, as a beginner, grab a code sample (much like we offer here) and start playing with it. This way you learn what a lot of things do. Academics call this process, "scaffolding", which is a fancy term for learning a basic skill and building your knowledge from it.

As I said,though, this is a beginner level tutorial designed to demonstrate some very interesting ActionScript that uses Displacement maps, filters and Perlin Noise to create water ripples. The whole point of this exercise, in fact, is to present some otherwise complex code and show you where you can have some fun with it. When code starts becoming fun, you are well on your way to full OOP glory. In fact, my associate here at Activetuts+, Cadin Batrack does just that with many of the techniques presented here in his tutorial Create a Static Distortion Effect Using the Displacement Map Filter.

Now that we understand each other, let’s get subtle and make some ripples.

Step 1: Develop a Plan of Attack

The image we will be using is a shot I took of the Medici Fountain in the Jardin du Luxembourg in Paris, France. The plan is to put that pool of water into motion using Flash.

Why do we need a plan of attack? Flash doesn’t do water ripples. In this particular approach, you simply can’t select the water area using a selection tool in Flash and, using ActionScript, say, Jiggle this selection around.

For Flash to jiggle a selection around you need to stick the image in a BitMapData object, shift the pixels in that object around using the DisplacementMapFilter and then apply some Perlin Noise to the filter to create the ripples. Before you do that you need to take a trip to Photoshop or Fireworks.

Step 2: Mask out the Water

This can be done in either Fireworks or Photoshop. The key is to duplicate the image and either mask out or remove the water in the masking layer. Save the file as either a .png or .psd image and quit. As you may have surmised the bottom, unmasked, layer is critical to the success of this project.

Step 3: New Document

Create a new Flash ActionScript 3 Document. Add two new layers named "Mask" and "actions". Rename Layer 1 to "Image" and lock the "actions" layer. At this point I am going to do a bit of a branch because importing Photoshop and Fireworks images into Flash are two separate techniques.

Step 4: Import the Photoshop Image

When the Import dialog box opens, select the Fountain layer and select Create movie clip for this layer. Don’t bother with the instance name we’ll do that once the layers hit the stage. When the file imports you will see the Mask layer is a bitmap and the Fountain layer is now a movieclip.

Step 5: Import the Fireworks CS4 Image

When the Import dialog box opens be sure that Import as Flattened Bitmap is not selected.

Fireworks imports a .png that is nothing more than a placeholder. If you open the Firework Objects folder you will see the document is in its own folder- usually "Page One" - because Fireworks allows you to have multiple pages in one document. If you open that folder you will see the two bitmaps and a movieclip. Open the movieclip and set up the layers using the instructions from Step 3. Convert the Fountain layer to a movieclip.

Step 6: Fountain

Select the Fountain movieclip on the timeline and give it the instance name of "photo". Lock all three layers and save the file.

Step 7: Wiring it up

The code you are about to write is fairly simple. As I said earlier you can’t tell Flash to take a selection and make it jiggle. In the case of this code we are going to jiggle the the pixels in the fountain movieclip. This requires you to :

  1. Create a virtual bitmap that holds the pixels to be jiggled.
  2. Set the jiggle parameters using a DisplacementMapFilter.
  3. Create some variables that provide the jiggle.
  4. Apply the perlinNoise method to the fountain image to jiggle the pixels using the DisplacementMapFilter every time the playhead loops through the frame.

If you are subtle, the jiggling looks like running water rather than a tsunami or a tar pit..

Let’s get started:

Step 8: Code

Enter the following code:

We start by creating a BitmapData object that matches the size of the image to be manipulated. Remember, Flash is not exactly the brightest candle on the tree. It needs to be told what to do. In this case you are telling it to create a collection of pixels matching the dimensions of the image and stick them in an object named "bmd".

Now that it has this "bmd thing" it needs to be told what to do with the pixels in the object. The next line does just that.
The DisplacementMapFilter uses the greyscale values of an RGB channel, including alpha, and uses them to distort an image (in this case a bunch of Bitmapdata pixels) based upon the values kicked out of the filter’s paramters. The parameters are as follows:

  • mapBitmap: In this case the bmd’s pixels will be used.
  • mapPoint: This is the alignment point- 0,0 - for the placement of the bmd object.
  • componentX: How far will the channel’s pixels be shifted along the X axis. In this case, they aren’t. You can also specify a Channel such as RED instead of a numeric value.
  • componentY: The channel will be moved down 2 pixels on the Y axis. The really neat thing about these X and Y values is they can actually be used for different channels of the bmd object. For instance you could have the red channel control the X axis displacement and the blue channel control the Y axis displacement.
  • scaleX: We are going to scale the pixels along the X axis by 10%. Just keep in mind that the bigger the number, the bigger the displacement which sort of explains the Tsunami and Tar Pit references earlier.
  • scaleY: The pixels will be scaled by 60% on the Y axis.

There are three other parameters you can add but aren’t needed here. They are:

  • mode: These are strings that determine how pixels that go off of the edge are handled. Wrap pulls in pixels from the opposite side of the image, Clamp repeats pixels at the edge. Ignore simple uses the source pixel color and Color uses the color and alpha values specified.
  • Color: Use this when you need to specify a mode. This one specifies the color, expressed as a number, to be used for pixels that go off the edge.
  • Alpha: Used when you use a mode and the number - between 0.0 and 1.0 - is used to determine the transparency of the pixels that go off the edge.

Step 9: Variables

Create the variables to be used in creating the ripple effect:

Step 10: Create the Event

We need this to make the water jiggle. This occurs thanks to the Displacment filter altering the values in its Point() parameter at the same rate as your movie. In my case the frame rate is set to 30 fps meaning the values will change 30 times per second.

Step 11: LoopIt

Write the loopIt function:

The first two lines set the values used by Point() parameter in the DisplacementMapFilter, as the playhead loops the x and y values increment. The values I chose were the result of a lot of testing until I achieved the effect I wanted.

The third line applies the perlinNoise method to the bitmap object created in line 1 of the code. Let’s go through the parameters:

The first two numbers are the baseX and baseY values - 400, 5 - which determine the frequency of the noise on the x and y axes. The lower the number the more detailed the noise will be. As a rule of thumb the baseX number can be set to match the width of the image. I found 800 to be a bit much so I dialed it down to 400. The difference in detail was negligible.

The third number, 3, is the numOctave parameter. The higher the number the more detailed will be the random noise. The downside is a hit on processing power and a potential speed decrease in the effect. This wasn’t destined for the web so 3 seems to work just fine. Using a value of 1 really didn’t move the pixels all that much. The next number,2, is the randomSeed parameter.

The two Boolean values are are the stitch and fractalNoise parameters. A true value for stitch smooths the edges of any tiling that may occur - not needed here. The fractalNoise value determines whether the noise will be fractal noise (true) or turbulence (false). The false value - turbulence - is suited for water effects such as ripples or fire.

The next value, 2, is the channelOptions parameter. This value determines in which of the four color channels the noise will be applied.

The Boolean value, false, is the greyScale parameter. Had I used false the color channel specified in the channelOptions parameter would be used to generate the noise. Using true tells Flash that I want to use the greyscale .

The final parameter,perlinOffset, is the array of Points to be used to offset the noise in each octave of the effect.

The final line - photo.filters = [dmf]; - applies the displacement filter, with the Perlin Noise, to the image in the photo instance.

Step 12: Finish up

Save the movie and test it.


In this beginner-level tutorial I walked you through the use of ActionScript to create rippling water in a fountain in Paris. As you can see there wasn't all that much code involved and much of it was fairly uncomplicated.

What is really important to you, as you start exploring ActionScript and Flash is to clearly understand that most code values are either numbers or Boolean values. What you need to do is to be unafraid to play "What if ... " games. These are the games where you wonder,"What if I changed this number, what would happen?" In fact, feel free to play around with all the numbers in the DisplacemantmapFilter and perlinNoise(). You can get some rather fascinating affects ranging from the oooze of a Tar Pit to the water looking like there is an earthquake under way.

Have some fun!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.