Graphic Effects Learning Guide for Flash: Tiles and patterns

Like gradients, patterns can be used to add interest to otherwise flat graphic shapes. Adobe Flash Professional CS5 provides a handful of options for creating patterns, including the new enhancements to the Deco tool.

A tile is a bitmap, symbol, or shape applied as a repeating graphic element to form a pattern effect. You can think of repeating graphics like tiles on a floor forming a pattern in a room. In Flash Professional, you can apply bitmaps as tiled fills using the Color panel. You can also apply movie clip symbols as tiled patterns using the Spray Brush and Deco tools.

Bitmaps can be used to fill shapes with repeating patterns. You can use the Color panel or the Graphics object in ActionScript to draw bitmaps inside the fills and strokes in your drawing objects. The bitmaps are applied to the shape as a repeating pattern which can be manipulated with the Gradient Transform tool to create a geometric grid pattern.

To create a shape containing a bitmap fill:

1. Create a bitmap graphic in Adobe Fireworks or a similar graphics editing program.
2. Size the graphic to approximately 120 pixels (or less) in width and height.
3. Save the file in the PNG, JPEG, or GIF format.
4. Create a new FLA file in Flash named bitmapfill.fla.
5. Draw a shape on the Stage using the Rectangle tool (R) or another shape tool.
6. Select the shape and open the Color panel (Window > Color).
7. Make sure the fill color swatch is selected in the Color panel and change the fill option from Solid color to Bitmap fill (see Figure 1).

8. Click the Import button in the Bitmap fill options and import your bitmap. Notice that the bitmap is imported to the Library panel and displayed in a grid inside the fill area of your shape.
9. Select the Gradient Transform tool (F) and then click on one of the tiles in the pattern. Notice that transformation handles appear over the single tile graphic (see Figure 2). Rotate, scale, and skew the tile until you've achieved the desired effect.
10. Save the file.

You can apply a bitmap fill to the stroke of the shape as well. If you need to change the effect, use the Gradient Transform tool to remove the effect by changing the fill option setting in the Color panel.

For more information on working with the Color panel, see the Color panel section of the Flash Professional online help. For more information on drawing bitmap fills using ActionScript, see the Graphics class in the ActionScript 3 Reference for the Flash Platform.

The Spray Brush and Deco tools can be used to create a wide range of pattern effects utilizing the procedural modeling engine that was first available in Flash CS4 Professional. The procedural modeling engine is a Flash JavaScript (JSFL) library that processes geometric algorithms to generate patterns. JSFL is used by Adobe and third-party developers to create custom tools in Flash.

Spray brush

The Spray Brush tool (B) can be used to spray a random pattern of shapes as you draw with the brush on the Stage. The Spray Brush tool is grouped with the Brush tool in the Tools panel (see Figure 3). Configure the drawing options in the Properties panel while the Spray Brush tool is selected. Click and paint with the brush on the Stage to see the effect.

For more information on configuring the Spray Brush tool, see Apply patterns with the Spray Brush tool in the Flash Professional online help or the Spray Brush tool section in the Flash glossary.

Deco tool

The Deco tool (U) can be used to create geometric graphic effects and special effects such as lighting, smoke, and fire. You can access the Deco tool in the Tools panel and use the Drawing Effect menu in the Properties panel to choose from a range of different effects (see Figure 4).

Flash Professional CS5 expands the capabilities of the Deco tool by adding a new range of effects. You can easily generate unique graphics such as buildings, trees, flowers, fire, smoke, and lighting. You can also create symmetrical geometric patterns as a shortcut for creating complex repeating patterns of shapes.

The following links (from the Flash Professional online help) provide more information about each effect:

• Vine Fill effect
• Grid Fill effect
• Symmetry Brush effect
• 3D Brush effect
• Building Brush effect
• Decorated Brush effect
• Fire Animation effect
• Flame Brush effect
• Flower Brush effect
• Lightning Brush effect
• Particle System effect
• Smoke Animation effect
• Tree Brush effect

To use the Deco tool, select the drawing effect and options in the Properties panel and then click (or click and drag) the tool on the Stage to create the pattern effect.

Either use the default settings for the Spray Brush and Deco tools or create your own movie clip symbols to use as tiles in the pattern. By using your own custom symbols, you can create infinite variations in the range of effects.

The following tools and effects support custom symbols:

• Spray Brush tool
• Deco tool (Vine Fill, Grid Fill, Symmetry Brush, 3D Brush, Particle System)

To select a custom symbol, click the Edit button next to the <no symbol> field in the Properties panel while the Deco tool is selected (see Figure 5).

After you add your custom symbols, you can edit the effect using the options in the Properties panel and then apply the effect using the Deco tool on the Stage.

For more information on using custom symbols, see the Using custom symbols and advanced options section of Jonathan Duran's article on using the Deco tool and Spray Brush for creating complex, geometric patterns in Flash.

You can animate Deco tool patterns by converting them to a symbol and then animating them as you would any other graphic. Add blur effects and filters as well as tweens to enhance the effects. In the case of the Fire Animation, Smoke Animation, and Particle System effects, the Deco tool dynamically generates the animation.

Read Creating graphic effects using the new Deco script in Flash Professional CS5 by Jonathan Duran to see samples of the effects features in action.

This section of the Graphic Effects Learning Guide overviews the decorative drawing tools in Flash Professional and options for creating pattern effects. Besides reading Deco tool and Spray Brush for creating complex, geometric patterns in Flash to learn more about the basics of using the Spray Brush and Deco tools, check out these demos on Adobe TV demonstrating the decorative drawing tools:

• Using the decorative drawing tools (5:36)
• Flash Downunder: The Deco Tool (8:10)
• Flash Downunder: The Bone tool and the Deco tool (22:00)