22 December 2008

Create a water ripple mouse follow

In this tutorial you will learn how to create a water ripple effect that follows the mouse cursor.

Move the mouse over the flash movie below to see the effect:


Flash 8, Flash CS3 or Flash CS4.

Note: The screenshot in this tutorial is made in Flash CS3. It works exactly the same in Flash 8 or Flash CS4. This tutorial is ActionScript 2. The ActionScript 3 version will be posted later.

Step 1 - Install the effect component

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

Drag the component into the library

Step 2 - Create a Image MovieClip

Import an image [press Ctrl-R] or “File” -> “Import” -> “Import on Stage…”.

Import image

Select this Image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “image”.

Name the Movieclip

Set the instance name of the Movieclip. Use “image_mc”. Its important to set an instance name here, because otherwise the component will not find the Movieclip.

Set instance name

Step 3 - Apply the effect to a Movieclip and set parameter

Drag the component onto the Movieclip. The component snapps automatically.

Drag component onto Movieclip

Open the component inspector panel Windows -> “Component Inspector”. Here you can set the parameters for the effect. Just play around with it a little bit. Set the “Cursor sensitive” option to “Yes” to make the water effect follow the mouse.

Set parameter inside the component inspector

Note: These settings are only applied to this one instance of the effect component. If you draw the component on another Movieclip (somewhere else inside the .fla or in a new project) you have to set the settings again.

Step 4 - Export

Export the Movie Command -> “Test Movie” or [press Ctrl-ENTER] and see the result. If you’re not satisfied, go back and change the settings in the component inspector panel.


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 or Flash CS3) but not inside the browser.

You can also download the Water Ripple Component here.

No comments:

Post a Comment

Follow on Buzz