Creating graphic effects using the new Deco scripts in Flash Professional CS5

The Deco tool introduced in Flash CS4 Professional has been updated in Flash Professional CS5 with new graphics effects. The tool is based on the Flash procedural modeling engine, which is a library that processes algorithms using the Flash JavaScript API (JSAPI). The algorithms are built into structured files that the engine can interpret. In Flash CS5, Adobe has added a number of new scripts to the Deco tool to help you create new and attention-grabbing effects.

This article introduces these effects and showcases interesting uses for some of them using three examples:

• Microbes
• Angelic Flame
• Crystalline Flying Object

You can find the new Deco effects in the Drawing Effect list of the Deco tool (see Figure 1). The Vine Fill, Grid Fill, and Symmetry Brush effects were all included with Flash CS4; see my previous article for more details on those effects. Grid Fill has been updated in Flash CS5 to accept four different tile symbols and arrange them in one of a few different patterns.

The following effects were introduced in Flash CS5:

• 3D Brush sprays symbols onto the Stage like a spray brush, but adjusts the scale of the symbols to make them appear larger at the bottom of the Stage and smaller at the top. This can be used to create 3D landscape effects.
• Building Brush creates a varied set of skyscraper buildings.
• Decorated Brush is a drawing brush that paints various premade black-and-white shapes onto the Stage.
• Fire Animation creates a frame-by-frame vector animation of a moving flame.
• Flame Brush is similar to the Fire Animation but paints static vectors of flame shapes to the Stage.
• Flower Brush is similar to the Decorated Brush, except the Flower Brush paints colored vector flower shapes to the Stage.
• Lightning Brush creates forked lightning shapes on the Stage. An animation option in the Property inspector allows you to animate the brush stroke over frames.
• Particle System is an animated effect that creates a shower of particles using either built in shapes or custom symbols.
• Smoke Animation is a companion effect to the Fire Animation. It creates a frame-by-frame vector animation of puffs of smoke.
• Tree Brush creates various branching tree shapes as the brush is painting on the Stage.

Initially some of the effects may seem limited in use, but I quickly found that using them, I could rapidly create interesting shapes to use in animations. The following examples use one or more of the new Deco effects in conjunction with the templates in Flash Professional CS5 to create some interesting starter animations in just a few minutes.

The Building Brush can provide some interesting starting shapes when the default building types are broken apart. In this example, I used the Building Brush together with the Symmetry Brush to create circular shapes that look like tiny bacteria with hairs around the outside (see Figure 2).

Once I have an interesting shape to work with I can use some of the new templates that come with Flash CS5 to add some random motion to the shapes. To use the template, I simply open the template files I want to use and then cut and paste the sample code into the file I'm working on (see Figure 3).

After varying the shape of the microbes, I added some filters to make them all blend into the background. Finally, I added some static vector shapes on top of them to make it appear like a view through a microscope lens (see Figure 4).

• View animation (+)

The Tree Brush creates and amazing variety of branching forms. While it does draw excellent trees, there are a variety of other artistic uses for the Tree Brush as well. In the Angelic Flame example, I used the Tree Brush to create complex wing-like shapes by building up a series of brush strokes with slightly different shades of one color (see Figure 5).

Then I added the Fire Animation in place of the body. I copied and pasted the animated fire in reverse on the Timeline to make a smooth animation (see Figure 6).

By adding some blur filters to the original Deco shapes, the finished artwork has an interesting depth. I also added a blur filter to the Flame Animation to make it look more natural (see Figure 7).

• View animation (+)

The Crystalline Flying Object example is similar to the Microbes, except I used the Lightning Brush as the starter graphic instead of the Building Brush (see Figure 8).

To make a space setting, I used the random function of the Spray Brush to create a star field in the background (see Figure 9). To make the entire scene appear to move through space, I over-sprayed the star field across the pasteboard and then added a motion tween.

Finally, to make the crystal object spin, I wrote a few lines of ActionScript to run on the enterFrame event (see Figure 10).

Lastly, as with the other animations, I used filters to enhance the effect. In this example, I applied a glow filter to the spiral shape (see Figure 11).

• View animation (+)

Where to go from here

Clearly, there are tons of interesting things you can do with the Deco tool and the new effects. This article has highlighted just a few graphic examples. You can use the Deco tool to quickly generate generic shapes for games, animations, or whatever you can think of. In addition, the Deco scripts included with Flash can be opened, copied, and modified if you'd like to try making your own Deco effects. See my companion article, Deco tool and Spray Brush for creating complex, geometric patterns in Flash, for details on where to find the scripts and how they are processed by Flash.