The Fountain Effect

A fountain effect based on the custom AS3 classes first presented in our tutorials Rain Animation with Splashing Raindrops - AS3 Flash CS4 Effect and Lorenz Attractor in Bubble Form.



Following up on our previous postings Rain Animation with Splashing Raindrops and Lorenz Attractor in Bubble Form, we present here another use of the same basic particle animation code. An interactive fountain is built from the RainDisplay and LineRaindrop classes that were the foundation for our animated raindrop and dripping paint examples. The fountain illustrates the versatility of the code as well as how a different choice of filters can create a much different character to the animation.

A more extensive discussion of the code can be found in our Rain Animation with Splashing Raindrops post, where we first presented the RainDisplay and LineRaindrop classes.

The fountain is created by placing raindrops at the bottom of the stage with an upward velocity (with some randomization), which then fly up into the air and are subject to gravitational acceleration. The raindrops are given initial colors which range from a light gray to white. Instead of erasing the raindrops and drawing them again on each frame, filters are used on the previous frame before drawing the next frame. A ColorTransform is used which simultaneously shifts the color of the picture towards a blue tint while fading out the alpha channel, and a subsequent BlurFilter is used to create additional fading and blurring.

The ColorTransform is built by selecting a target color that white raindrops should shift towards. After selecting this color in the code, some calculations are done to build a ColorTransformwhich over the course of about 33 frames will change white to this target color. This creates an effect of previous frames slowly changing color.

The BlurFilter creates additional visual interest. The effect is somewhat that of water vaporizing in the air as the fountain droplets descend. We encourage you to have fun by experimenting with different initial colors for the raindrops and different filters. Change the filter parameters, and try using the filters in different orders. Also note that different methods for coloring the raindrops have been commented out in the code so that you can easily make changes.

This example also illustrates the use of a few mouse listeners to create interactivity with the display. We use roll out and roll over listeners to replace the mouse cursor with our own custom cursor while the mouse is over the fountain display, and we also have the fountain turn on and off in response to mouse down and up events.

Since the visible cursor might interfere with the look of the fountain, we have made it visible only when the mouse is in motion. When the mouse comes to rest, some code in the continuously called onEnter function causes the alpha value for the cursor to gradually approach zero.

Back to Flash CS4 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.