Suessian Twists Particle Animation and the Methods Behind It

Glowing lights fly up into the air and leave behind trails that look like colorful twisted stalactites. The effect looks like something in the style of Dr. Seuss, or perhaps like something out of the movie Avatar. Click the image to open the applet in a new window:

Download

Seussian Twists Comments

We present here an artistic example of a particle animation which is based upon the code we have used for several other particle examples here at Flash and Math. The effect we create here looks somewhat like colorful stalactites twisting up into the air, and reminds us a bit of the style of Dr. Seuss (hence the name Seussian Twists).

The particles being animated leave behind a trail that is formed by bitmap drawing, a method we explained in our simple tutorial Fading Trail Effect for Flash AS3 Particle Animations a Simple Example. However this time we are doing something a little differently. We want each particle to have two parts: one that looks like a glowing light, which will not be drawn to the displayed bitmap, and another part which is an ellipse filled in with a color gradient, which will be drawn to the displayed bitmap.

To achieve this, we have rewritten our basic particle display class so that the animation can take place on two separate layers. In our earlier examples, the display class was an extension of the Sprite class. Here, the display is actually not a display object at all, but rather represents a pair of Sprites, stored as the drawingLayer and nonDrawingLayer.

The nonDrawingLayer is added to the stage, and contains particles which look like glowing lights. Meanwhile on the drawingLayer (which is not added to the stage), we are animating some particles which are in the shape of ellipses, filled in with a radial gradient (for more information on properly creating radial gradients, see our tutorial Programmatic Gradient Fills and Effects in AS3 and Flash). The drawingLayer is drawn to a bitmap on every frame, and thus leaves behind a trail of ellipses.

There is another interesting aspect to this animation worth mentioning. To make the drawn trails fade out slowly, we are applying a ColorTransform which slowly decreases the alpha value of the bitmap (again we encourage you to visit our Fading Trail Effect for Flash AS3 Particle Animations a Simple Example tutorial for a complete description of this technique). However, we wanted to achieve a fade out effect that was so slow as to be almost imperceptible. If the ColorTransform were applied on every frame, the fade out would happen too quickly. Thus we use a counter to wait several frames before applying the ColorTransform.

The code used here is based on our basic particle animation code that we have used in other examples. There are still some leftover methods and parameters in the basic classes that are not being used here, but we decided to leave them in because they may allow for some experimentation with the code. We hope you enjoy this latest example!

Acknowledgment: I must acknowledge some influence from Keith Peters. His piece entitled "Carrots," which is displayed along other beautiful works at his ArtFromCode site, provided some inspiration for the stacked ellipses I'm using here.

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.