Deco tool and Spray Brush for creating complex, geometric patterns in Flash

Two new decorative drawing tools in Adobe Flash CS4 Professional use the procedural modeling engine built into Creative Suite 4 to draw shapes. This article discusses the Deco tool and Spray Brush tool, and showcases some interesting examples of each.

The procedural modeling engine is a library in Flash that processes algorithms using the Flash JavaScript API (JSAPI). The algorithms are built into structured files that the engine can interpret.

Basic working knowledge of the Flash interface, use of symbols, and basic Timeline animation. No ActionScript knowledge is required; the code samples included in the article can be pasted into your file, and the sample files include the completed FLA files. If you are already familiar with the basic functions of the Deco tool, you may want to skip the first section on its basic use.

The Deco tool and Spray Brush can be accessed from the standard Tools panel in Flash. The basic workflow for any of these new tools is to select the tool from the toolbar, and then click the Stage to start drawing the pattern. Additionally, with a few changes to the options, you can create custom patterns very quickly.

The Deco tool contains three effects: Vine Fill, Grid Fill, and Symmetry Brush. Together with the Spray Brush, they make up the four new tools that were created to use the procedural engine for CS4. Since they all use the same engine, they have similar capabilities and UI, which appears in the vertical Property inspector when each tool is selected.

As the tool and effect are changed, the Property inspector changes to reflect the available options for that effect. They each share some similar UI: the Edit symbol button for replacing the default symbol with a library symbol, a color picker for changing the color of the default shape(s), and a check box for resetting the default shape. Below these common options are the advanced options, which I will discuss in detail in the next section.

Basic Spray Brush

To use the Spray Brush, select it from the toolbar: click and hold the regular Brush tool until the brush selection menu pops up, and then click the Spray Brush. Draw on the Stage as you would with the regular Brush, and a spray of small circular particles appears as a Group. Next, try changing the color of the brush by clicking the color picker on the Property inspector and selecting a new color, and then drawing some more on the Stage (see Figure 1).

Switching between the drawings effects in the Deco tool

When the Deco tool is selected, the Effects drop down allows you to select between the three effects: Vine Fill, Grid Fill, and Symmetry Brush (see Figure 2).

Basic Grid Fill

To use the Grid Fill, select the Deco tool and then select the Grid Fill effect in the Property inspector. Click the color picker to select a color for the grid, and then click anywhere on the Stage. A grid is drawn with the default settings (see Figure 3).

Basic Symmetry Brush

The use the Symmetry Brush, select the Deco tool, and then select the Symmetry Brush effect from the pop-up in the Property inspector. A set of handles will appear on the Stage at an angle. These handles let you add more shapes to the symmetry or rotate the entire group.

With the Symmetry Brush effect selected, click the color picker and select a color for the symmetry. Next, click anywhere on the Stage (not on the symmetry handles) and a default shape will be added to the symmetry. Next, drag the shorter of the two handles by clicking and dragging the small circle at the end of the handle. Dragging the handles back and forth will add and subtract the shapes from the symmetry. Next, drag the longer handle in the same way to see the entire symmetry rotate (see Figure 4). You can continue adding new shapes into the symmetry by clicking the Stage.

Once you select another tool, the symmetry will be converted to a Group of shapes, and it can not be edited again using the symmetry handles.

Basic Vine Fill

To use the Vine Fill, select the Deco tool and then select the Vine Fill effect from the pop-up menu in the Property inspector. Click the color pickers to select a color for the Leaf and Flower, and then click anywhere on the Stage. A vine pattern fills the area you click until it reaches the boundary (see Figure 5). Clicking a shape on Stage will fill just that shape with a vine pattern.

The greatest feature of these new tools is the ability to swap a custom symbol from the library for the default shape that each tool draws. The advanced options for each tool let you define further how each pattern is drawn. Following is an example for a few of the new tools using custom symbols and the advanced options to complete a task quickly that would otherwise take more time to design or use of lengthy ActionScript code.

Advanced Spray Brush

The Spray Brush is a tool that is common to many drawing tools, so many users will be familiar with its common uses. One interesting difference with the Flash Spray Brush is that since you can substitute a movie clip with an animation inside for the default shape, you can create animated spray patterns in addition to static ones. In this example I'll show you how to create some random bubbles that float upwards (see Figure 6).

First, to create the animated bubble movie clip:

1. Open a new document in Flash CS4 Professional and set the Stage color to blue.
2. Select the Oval tool and draw a circle at the bottom of the Stage (see Figure 7). I've embellished mine with a small white dot to indicate a reflection. For this I just used the regular Brush tool set to white and clicked once on corner of the bubble shape.
   Figure 7. Drawing the original bubble
3. With the selection tool, select the circle and convert it to a movie clip called Bubble (see Figure 8).
   Figure 8. Converting the bubble to a symbol
4. Double-click the Bubble movie clip to edit it in place.
5. With the Selection tool, select the circle shape.
6. Right-click the circle shape and select Create Shape Tween (see Figure 9).
   Figure 9. Creating a shape tween on the bubble
7. In the Timeline, select frame 100 and press F6 to insert a keyframe (see Figure 10).
   Figure 10. Inserting a keyframe
8. With frame 100 selected, select the bubble shape and move it up off the top of the Stage to create a tween of the bubble floating up out of view (see Figure 11).
   Figure 11. Animating the bubble up out of the frame
9. Select frame 1 in the Timeline and press F9 to open the Actions panel.
10. Add the following frame script to frame 1:

11. Close the Actions panel and click Scene 1 at the top the document to go back to the main Stage.
12. Delete the Bubble movie clip from the Stage.

Next, to use the animated bubble clip as the custom spray brush:

1. Select the Spray Brush from the toolbar.
2. In the Property inspector, click Edit under the Symbol settings for the Spray Brush.
3. A Swap Symbol dialog box will appear listing the library items available for use. Select the Bubble movie clip and click OK (see Figure 12).
   Figure 12. Selecting the bubble movie clip as the new symbol for the Spray Brush
4. In the Property inspector, make sure Random scaling, Rotate symbol and Random rotation are unchecked, and then adjust the brush width to 99 and the height to 150.
5. With the Spray Brush, click and quickly drag the mouse just under the bottom of the Stage to spray a line of the Bubble clips (see Figure 13).
   Figure 13. Spraying a line of bubbles below the Stage
6. Save and Test the movie.

You should see a bunch of bubbles floating up and randomly replacing themselves on Stage. You could enhance the effect by changing the Alpha setting on the bubble shapes to appear more transparent.

Advanced Grid Fill

The Grid Fill effect can be used for a number of interesting tiling tasks. In this example you'll create a 3D tiled background that might be used in a UI or video game.

First, to create the movie clip to use as the custom symbol for the fill:

1. Open new document in Flash CS4 and set the Stage color to dark gray.
2. Select the Rectangle tool and draw a small square on the Stage with a dark fill and a bright stroke (see Figure 14).
   Figure 14. Creating a shape for the Grid Fill effect
3. With the selection tool, select the square and convert it to a movie clip called Tile (see Figure 15).
   Figure 15. Converting the shape to a movie clip
4. Double-click the Tile movie clip to edit it in place.
5. Select the square shape on Stage and convert it to a movie clip called InsideTile (see Figure 16).
   Figure 16. Converting the inner shape to a movie clip
6. Select the InsideTile movie clip on the Stage and give it the instance name tile_mc (see Figure 17). This is the movie clip you'll be using inside the main Tile clip to attach some ActionScript.
   Figure 17. Naming the instance
7. Select the first frame in the Timeline and press F9 to open the Actions panel.
8. Add the following ActionScript to the frame script:

This code snippet creates a counter called rotationNumber and then uses the counter to flip the tile_mc 180 degrees when the mouse moves over it.

9. Click Scene 1 at the top of the document to go back to the main Stage.
10. Delete the Tile movie clip from the Stage.

Now, to use the Tile movie clip as the fill for the Grid Fill effect:

1. Select the Deco tool.
2. In the Property inspector, select the Grid Fill from the Drawing Effects pop-up menu.
3. In the Property inspector, click the Edit button and choose the Tile symbol from the Swap Symbol dialog and click OK.
4. In the Advanced Options in the Property inspector, change the vertical and horizontal spacing to 2 pixels each.
5. Click the Stage to apply the Grid Fill effect (see Figure 18).
   Figure 18. Tile applied as a Grid Fill effect
6. Save and test the movie. Move the mouse all around the Stage to flip the tiles (see Figure 19).

As you mouse over the tiled background, you should see the tiles flipping in 3D. You can modify the ActionScript snippet in the Tile movie clip to have the tile flip in a different direction, or at a different speed.

It's possible that you could achieve the exact same effect with even fewer lines of code by creating the 3D rotation as a tween on Stage instead of in ActionScript. Then the only code you would need is to listen for the mouseover event and tell the Timeline to play.

Advanced Symmetry Brush

The Symmetry Brush has a variety of translations in the Advanced Options pop-up menu, which make it useful for many tasks. One common task is creating a clock face with 12 hands. Ordinarily this would involve manually drawing the hands on Stage and using the Align panel, or using code with some trigonometry to lay out the hands around a center point. With the Symmetry Brush it is easy to create a custom clock face in just a few steps.

First, to create the movie clip to use as the custom clock hands:

1. Open a new document in Flash CS4.
2. Select the Rectangle tool and draw a small rectangle on the Stage about the size you want each clock hand to be. Edit it to appear how you want each hand to appear (see Figure 20).
   Figure 20. Creating the basic clock shape
3. With the selection tool, select the clock hand and convert it to a movie clip called ClockHand.
4. Delete the movie clip from the Stage.

Next, to use the clock hand movie clip as the custom symbol for the Symmetry Brush:

1. Select the Deco tool.
2. In the Property inspector, select the Symmetry Brush from the Drawing Effects pop-up menu.
3. In the Property inspector click the Edit button and select the ClockHand symbol.
4. Click near the top of the Stage, just above the Symmetry Brush handle with the rotate symbol, to add the first eight hands (see Figure 21).
   Figure 21. Adding the clock hand symbol
5. Click and drag the Symmetry handles with the plus sign to add more clock hands to the symmetry until there are 12 hands (see Figure 22).
   Figure 22. Using the Symmetry Brush handles to create 12 clock hands
6. When you are done editing your symmetry, switch to the Selection tool, and the symmetry becomes its own group (see Figure 23). Now there should be a group of 12 clock hands on the Stage ready to make into a clock.
   Figure 23. Completed symmetry group

Although these designs aren't anything you couldn't do in Flash before, the significant advantage to using the Deco tool is the speed with which you can draw these types of patterns. Without having to align lots of symbols or snapping to grids, you can use the Deco tool can draw out complex patterns very quickly.

When the decorative effects and custom symbols are combined with the other drawing features in Flash CS4, you can quickly create some interesting effects that would otherwise take a long time to create manually or with ActionScript. Here are a few examples of some effects created in less than five minutes using the Deco tool effects with other features like inverse kinematics (IK), filters, and 3D. The completed sample file is included for each example.

Particle and galaxy effects

In these examples (see Figures 24 and 25), a small, animated particle has been sprayed on the Stage and then modified with 3D or filters to look "spacey."

Spyrographic effects

In this example, some rectangular patterns have been given a simple animation and then used as the custom symbol for the Symmetry Brush effect. Afterwards, some filters were applied make the overall pattern glow (see Figure 26).

The procedural modeling engine in Flash CS4 Professional was created to accept XML and JavaScript as the description for each Deco tool effect, as well as the Spray Brush. The files are loaded into Flash from an external directory to allow for future extensibility. If you are curious about the scripts that make up the models for the Deco effects, you can see the files that are included with CS4 in the install directory:

C:\Program Files\Adobe\Adobe Flash CS4\en\First Run\ProcScripts

The procedural modeling engine is also coded to search for scripts in the user directory for Flash in a UserScripts folder:

\\UserDir\Local Settings\Application Data\Adobe\Flash 10\en\Configuration\ProcScripts\UserScripts

The folder is not created by default, but if it exists with Deco models in it, they will automatically be loaded into the Effects pop-up menu in the Property inspector of the Deco tool. By copying one of the included scripts into a newly created UserScripts directory and renaming it, you can see how the new item will appear in the Deco tool Property inspector.

Read Drawing patterns with the Decorative drawing tools in the Flash documentation to find out more about the drawing tools. For more advanced information, read Creating animation in ActionScript 3.0 to learn how to programmatically create motion effects to move, resize, transition, and fade movie clips easily in your Flash projects.