Swish-Designs.co.uk where imagination is the creation

Welcome, Have a Nice Friday

Realistic Wave Rippling Effect - Swishmax

Learn how to create wave rippling effect.

First Of All

You will need the latest build of swishmax installed on your Computer for this to work.
open swishmax and set the canvas size to 400 x300 pixels and a frame rate of 25fps.
you will need the following two images that acompany this tutorial also, please right click on the two images and select save as, save them into you project folder.

 

Image_1.jpg

 

and also you will need the following image.

 

overlay.gif

 

Step.1

Import Image_1.jpg into the stage, and then import overlay.gif into the stage, in the same place as Image_1.jpg, making sure the overlay.gif is above the Image_1.jpg. see fig.1 below.

Fig.1

Step.2

You need to create a wave shape, so using the rectangle tool, draw out a slim rectangle approx 40 x 10 pixels, do not have a fill colour just an outline for now, when you have the rectangle select the Bezier tool and across the top line you need to place 4 vertex points, so right click on the top line and select insert vertex, evenly space these out until you have 4 showing, now do the same to the bottom line, now back to the top line still using the Bezier tool and in between the vertex anchor points right click and select quadratic you will need three on the top and three on the bottom pull the top left one up, the top middle down and the top left up, apply the same to the bottom, now fill the shape black see fig.2 below. PLEASE NOTE THIS IS A SCALED UP EXAMPLE SO YOU CAN EASILY SEE THE FUNCTIONS

Fig.2

Step.3

Now you have created your wave shape you need to copy and paste the shape until you have someting looking like fig.3 below.
WARNING DO NOT STARE AT THE IMAGE BELOW FOR TOO LONG.

Fig.3

When you have the shapes looking like fig.3 abovem, group all the seperate shapes together as a new shape and name it waves. now place in your project so they cover the water see fig.3a below.

Fig.3a

 

Once the wave shape is in place move it down underneath the Image_1.jpg shape in the outline panel, see fig.3b below.

Fig.3b

 

Step.4

Now you need to make a masked area for the waves, so using the bezier tool draw around the outline of the waters edge until you have a solid shape and name it display_mask see fig.4 below.

Fig.4

Now move the display_mask shape below the waves shape in the outline panel see fig.4a below.

Fig.4a

 

 

Step.5

Copy and paste in place the image_1.jpg and place the copy under the display_mask shape. your outline panel should now look like fig.5 below.

Fig.5

Step.6

Group image_1.jpg and the waves shape together as a sprite and name the sprite ripples. select the waves shape and click on add effect and then the move effect, this will place a move action on the timeline at the side of the waves shape drag this out to cover 200 frames instead of ten.
Once you have done that click on the move action you should see the anchor points are now red in colour, click on one of them and using the up arrow key press until the waves are level with the bottom of your image see fig.6 below.

Fig.6

Step.7

Now group together image_1.jpg and the waves shape as a sprite, make sure use check use bottom object as mask, name the sprite ripples, now group together the ripples sprite and the display_mask shape as a sprite and name effect your outline tree should look like fig.7 below.

Fig.7


thats it now press Ctrl+t to test your effect in the flash player, you should have something looking like the example below.

 

Thank you for reading i hope this tutorial has helped you in some way, If you have any question please feel free to join the forum and ask.