One of our Flash and Math visitors requested that we create a waterfall effect. The effect can be obtained by modifying our earlier particle tutorial: A Dynamic Interactive Fountain - Flash CS4 AS3 Flash Particle Effect. Click on the image below to open the Flash movie in a new window:
- Download the source files: waterfall.zip
The Custom Waterfall AS3 Class
To make the effect as easy to use and as easy to customize as possible, we created a custom AS3 Waterfall class. You can change properties of your waterfall by manipulating simple parameters. You can also make the background of your waterfall transparent and place it over an image of your choice.
The Waterfall class extends the Sprite class. Thus, a Waterfall is an interactive display object which can be added to the stage. To create a waterfall, you simply invoke the constructor with the 'new' keyword:
var waterfall:Waterfall = new Waterfall(200,300,false);
The code above creates a waterfall display of width 200 and height 300 (those are the dimensions of the display area, not necessarily the water itself). If the third parameter "true" is set to 'true', the waterfall will have a transparent background. This allows you to place graphics behind the waterfall if you wish. If this transparency parameter is set to "false", the waterfall will have a black background.
In the applet presented above, we have showcased some of the possibilities for the Waterfall class with some radio buttons that allow you to see some examples with different parameter settings. Many more looks for the waterfall are possible; experiment to see what you like the best.
The Waterfall class uses the same technique as our A Dynamic Interactive Fountain - Flash CS4 AS3 Flash Particle Effect. We changed the location from which the particles emit, spread them out horizontally to achieve a wide waterfall. We have also changed the filters somewhat to achieve a more dense water display. Also, to suggest a larger vertical distance, we have lessened the gravity parameter to produce a slower fall.