Summary

In this tutorial you will learn how to create a water ripple on a specified point on a MovieClip, that can contain any kind of content (images, videos and text).

Here the final result:


Requirements

Flash 8, Flash CS3 or Flash CS4.
One images (in this case 550×400, image available in the tutorial zip file)

Note: The screenshots in this tutorial are made in Flash CS3. It works exactly the same in Flash 8 or Flash CS4. This tutorial is ActionScript 2 (please write a comment if you like to have the ActionScript 3 version).

Step 1 – Install the effect component

Download the Rain Drop Water Effect. Please follow the installation instructions and drag the component from the component panel into the library of your .fla file.

Drag component into library

Step 2 – Create target Movieclip

Import an image “File” -> “Import” -> “Import to Stage…”.

Import image on stage

Create a Movieclip by selecting the image, right click and select “Convert to Symbol”. Name it “image”.

Convert image in Movieclip

Name the Movieclip

Set the instance name of the Movieclip to “img”.

Set instance name of Movieclip

Step 3 – Add Create Drop ActionScript

Rename the layer with the image Movieclip to “image”. Create a new layer and name it “script”. Right Click in the first frame of the “script” layer and select “Actions”.

Open ActionScript window

The ActionScript window opens. Copy and past the following code.

var ff_component:MovieClip = this.attachMovie("RainDropEffectAS2", "RainDropEffectAS2", 1);
ff_component.init(img, 3, 0, false, false);
ff_component.createDrop(200, 200);

ActionScript window with code

Line 1 attaches the component on stage. Line 2 initializes the component (you can find the complete api for the effect here). Line 3 finally creates a drop on the given position.

In this case on x-position 200 and y-position 200. Please use the coordinates you like to have. Note that the first parameter (x-position) must not be bigger then the width of the target Movieclip and the second parameter (y-position) must not be bigger then the height of the target Movieclip.

Download

Click here to download the .fla of this tutorial. Note: The .fla includes the trial version of the effect component, which will only work in the Flash IDE (Flash 8, Flash CS3 or Flash CS4) but not inside the browser.

You can also download the Rain Drop Water Effect here.

Here you can find a video tutorial of how to implement a different effect.

  • Share/Bookmark