Have you ever wanted to give your logo, website or image a rippling water effect? This type of effect can add a nice touch to any website associated with water. The effect is achieved using Flash 8′s Displacement Map Filter. Although the filter is comparatively difficult to use, we have made it easy for you by creating a special Ripple Effect component.  The component can also be used to create “Jelly” buttons such as the one below.

This component will work with SWiSH Max3 and SWiSH miniMax3 with build dates of 20091130 or later, and although the component is not included with the 20091130 build’s installer, it can be downloaded here. After downloading it, extract both files within the zip file to:

C:\Program Files\SWiSH Max3\Components\Effects\2D

Note that the exact location may be different depending on where you installed SWiSH Max3, or miniMax3. We intend including the component in future releases of Max3 and miniMax3.

To use the component, simply drag it onto the stage, expand it in the Outline panel. Replace the example_movie movie clip that is located inside the holder movie clip with your own item(s) that you wish to apply the effect to.

In this example the revised movie clip consists of the component button, “Button_glossy_pill” and a border shape so that the button is not positioned directly against the top left hand corner.

Once the contents of the holder movie clip have been modified,  press the Update mask and position button in the Parameters panel for Ripple. This will realign your movie elements within the holder movie clip so that they are aligned correctly with the top left hand corner. This is needed for the effect to work correctly. If you have the “Mask Autosize” checkbox set then the mask will automatically adjust its size to fit the items contained within the holder movie clip. Using the smallest possible mask size, will give the best CPU performance.

If you wish to space your movie so that the items do not align directly with the top left hand corner, (eg. you want a border around all of your objects) you can add an empty rectangle (no border, no fill) as the bottom layer in the holder movie clip. The example below demonstrates how a border can be added around the object(s) that you wish to apply the effect.

Compare the way this Jelly button behaves compared to the one at the top of this article. You should notice that mouse movements outside of the button cause it to ripple and behavior at the boundaries is slightly different.

Note: If you are using the Event function within the Component buttons to signal events, be aware that your Events function script must be placed in the scripting area for the movie clip holder. From there, objects in the parent movie clip of Ripple can be accessed via _parent._parent.

The parameters for the Ripple Effect component are described below:

In most cases, the parameters can be left in their default values.

Example

The example below shows how the effect can be applied to produce a simulated aquarium.

The artificial bubbles are defined in the “bubbles” movie clip and are also distorted by the ripple effect. A movie of a fish (as opposed to a static image) would give a better effect. The bubbles are based on a single bubble movie clip which is saved to the content library, then referenced multiple times within the bubbles movie clip. SWiSH miniMax3 users will be unable to edit / view items in the content library although the final movie should play ok.

For those that are interested, the script for the bubble movie clip is shown below:

onSelfEvent (load) {
 s = Math.randomRange(10,40);
 this._xscale = s;
 this._yscale = s;
 this._x = Math.randomRange(0,450);
 this._y = Math.randomRange(0,336);
 dy = s/10;
 i = 2;
}

onSelfEvent (enterFrame) {
 if (--i < 0) {
 this._y -= dy;
 if (this._y < -20)
 this._y = 400;
 i = 1;
 }
}

All of the examples are included in this zip file.

Enjoy!

Tags: components, Effects, Max3, miniMax3

This entry was posted on Tuesday, December 15th, 2009 at 8:49 am and is filed under Max3, components, miniMax3. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.