Flower Twist Particle Effect and the Methods Behind It

In our recent popular series of particle effects here at flashandmath, we have used vector-based particles. We now return to a pixel-based particle system that was used in our earlier very popular examples. Click the image to open the applet in a new window:

Download

  • Download all source fla and as files corresponding to this effect: FlowerTwist.zip

Below, we comment on the methods used to accomplish Flower Twist effect. Download the zip package linked above for the complete, well-commented, and easy to customize source code.

Flower Twist – Comments

In our recent popular series of particle effects here at flashandmath, we have used vector-based particles (sometimes drawn to a bitmap for a fading trail effect). We now return to a pixel-based particle system that was used in our earlier examples A Rotating Bitmap in 3D Explodes into Particles and 3D Particles Experiments in AS3 and Flash CS3. The basic particle code used in those examples has been very popular, and even has been used in (or has inspired) two remarkable websites: one website for the Singapore-based band Concave Scream, and another more recent interactive art exhibit The People’s Torah at the Contemporary Jewish Museum in San Francisco.

The code used here is similar to the code used in our earlier exploding bitmap experiment, A Rotating Bitmap in 3D Explodes into Particles. There we have discussed the methods in detail. In the FlowerTwist effect code, we have placed many comments within to make it more understandable. Also, we have updated the basic classes for Flash Player 10.

The motion of the particles here depends on the color of each particle; in particular the luminance (a measure of brightness) is used to control how far the particles fly in the z-direction when the bitmap explodes. Through some experimentation with various functions, we have found a very nice way of having the particles twist into a helical pattern as they explode into space.

Although the basic classes used here are somewhat complicated, they have been designed to be as reusable as possible. To produce different effects, try changing the equations which control the coordinates of the particles. We also encourage you to check out our examples posted at 3D Particles Experiments in AS3 and Flash CS3, where the particles were created from scratch rather than being based on a bitmap.

We should note that the number of particles used here is rather small compared to what others have been able to do with Flash. This is because in our code we are asking Flash to do quite a bit: z-sorting of particles (with a z-buffer method), constant updates of particle coordinates in 3D, interactive quaternion-based rotation, and bitmap filters. As a result the application can be rather CPU intensive, and we do not recommend using very large bitmaps with this code.

When the particles are flattened into a plane, the resulting picture has a low-resolution, pixilated quality, showing Moiré patterns. We have in mind a way to involve a 3D projected bitmap to remedy this issue, and this will be the subject of a future experiment.

Enjoy our Flower Twist!

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.