Creating Water Ripple Effect Using Blend
This tutorial is For Flash 8 and above only.

I went into an office-supply store today and noticed a nice screensaver showing swimming fishes and water droplets. Here's an attempt to recreate it. This requries Flash8 because some of its new features, namely MovieClip Blend mode. Blend mode is accessible via the Property window:


Creating the Ripple Shape

Create a new Flash project.  Create a new symbol, name it Ring and on it, draw this kind of ring. You can make the hole by first drawing the big circle then a small circle on the same layer with a different color, like this.

Then select the circle in the middle and delete it. Mine has the dimension of about 200x200.

Then fill this ring with gradient. Make it something like below. Note the Alpha for the rims are set to 0 so that they gradually blend into the background.

Animating the Ripple

Create a new symbol, name it Droplet. Insert an instance of Ring movie clip into Droplet's timeline.

Add a keyframe on frame 60 or so and tween the frames in between.

Scale the Droplet instance in frame 1 to a very small size.

Enlarge the Droplet in frame 60 (or whatever is the last frame you set earlier), to about twice the size and change the Alpha to a low number (even 0).

Create a new layer then insert another instance of Droplet into frame 2 and repeat the same process, except you want to make the size of the Droplet on the last frame slightly smaller that the other one.

Here's frame 2:

Here's last frame:

Adding the Ripple Into The Scene

Go back to the main timeline of Scene 1. Import the image you want to use and put it on the scene. Create a new layer above the image and insert an instance of Droplet into the scene, name the instance Droplet.

Change the Droplet blend mode to Overlay.

Add this code to make the droplet appear randomly. This code creates a new Droplet every 20 frames and put it on random location within the movie stage.

  if (iLoopCounter==undefined || iLoopCounter<500)
    // This array holds the Droplet movie clips
    if (movieClips==undefined)
      movieClips=new Array();

    if (iLoopCounter==undefined)
    // Randomize the Droplet every 20 frames
    if (iLoopCounter%20==0)
      // Create maxmum of 3 Droplet instances.  We will rotate these movies and
      // put them on random locations.
      if (movieClips.length<3)
          Droplet.duplicateMovieClip("Droplet"+iLoopCounter, iLoopCounter);
      for (var i=0; i<movieClips.length; i++)
        // When a Droplet has finished playing, move it to another location to
        // provide randomness.
        if (movieClips[i]._currentframe==1 || 

Download Example FLA (this is the FLA for the second example above - you can squish the Droplet to get the effect shown in the first example).

You can add variations by for example, doing Scale and Skew on the Droplet movie clip instance like the first movie you see above.

Some warnings: these Blending and trasparency takes up processor time, use them when necessary but preferably sparingly.