Water effect
[ July 13, 2003 ] by Tonu Paldra, alias Tonypa
TonyPa explains an interesting animated water effect that can be used in games.


Download the source code of this prototype

I made this simple effect of flowing water and while its nothing too hard I thought someone might find this useful.

First thing you need, is some bitmaps of tiled water. They have to tile up or your water will have lines inside and that doesnt look good. Its best to draw bitmap yourself, but if you really cant, try http://www.telefragged.com/wally/madewithwally/liquids.htm
Remember to ask permission from author, if you use graphics from there.

Now make your tiling water bitmap 128x128 pixels and save it.
Make new Flash movie, import water bitmap. Select bitmap and convert it to movie clip. Name this movie clip as "water_base" in the library. Bitmap should be centered inside this movie clip.

Get two instances of this water_base movie clip and align them horizontally to the center. Align one mc on bottom edge and other on top edge. Convert both of them into new movie clip. Name this movie clip as "water_two" in the library.

Make third movie clip and name this "water_all". This will be our main movie, where all the flowing actions will happen. Edit this movie clip. Make 4 layers naming from top to bottom as "mask", "water1", "water2" and "back".

First lets add back as this is easiest part. Draw rectangle on layer "back". Size 128x128 pixels, paint it some blue and delete stroke. Align rectangle to the center. Thats done, copy/paste the rectangle onto "mask layer". Right click on mask layer and check Mask. Put layers water1 and water2 below mask layer to be masked.

Drag instance of "water_base" movie clip to water2 layer. Align it to center. Set instances alpha to 40%. Almost done, only the flow is left.

Drag instance of "water_two" movie clip to water1 layer above water2. Set instances alpha to 30%. Align it to center horisontally, but set it vertically in a way that half of it covers other rectangles and other half stays above.

Now some actionscript. Dont run away, only 6 lines. Click on instance of water_two movie clip, open actions panel and write:

onClipEvent (enterFrame) {

	setProperty ("", _y, _y+4);
	
	if (_y>60) {
		setProperty ("", _y, _y-128);
	}
	
}

What it does, is to move water_two movie clip in each frame down on screen until its y coordinate reaches 60, then movie clip is reset to original position. Number 4 represents the speed at which water flows, change it to make water flow faster or slower.

Note that if your bitmap is not 128 pixels high, you should other numbers then 60 and 128.
Test the movie. Thats all.



 
 
Name: Tonu Paldra, alias Tonypa
Location: Estonia
Age: 34
Flash experience: Discovered Flash4 in the year 2000 and fell in love with it. Abandoned Flash4, when they ended Flash4 help forum in Flashkit. Been playing with Flash only in spare time, thinking its great hobby
Job: Magazine designer
Website: http://www.tonypa.pri.ee/
 
 
| Homepage | News | Games | Articles | Multiplayer Central | Reviews | Spotlight | Forums | Info | Links | Contact us | Advertise | Credits |

| www.smartfoxserver.com | www.gotoandplay.biz | www.openspace-engine.com |

gotoAndPlay() v 3.0.0 -- (c)2003-2008 gotoAndPlay() Team -- P.IVA 03121770048