Drawing patterns with the Decorative drawing tools



The Decorative drawing tools let you turn graphic shapes that you create into complex, geometric patterns. The Decorative drawing tools use algorithmic calculations—known as procedural drawing. These calculations are applied to a movie clip or graphic symbol in the library that you create. In this way, you can create a complex pattern using any graphic shape or object. Use the Spray Brush or Fill tool to apply the patterns that you create. You can create kaleidoscopic effects using single or multiple symbols with the Deco Symmetry tool.

The following video tutorials demonstrate how to use the Decorative drawing tools:

Jonathan Duran has provided an in-depth article entitled Using the Deco tool and Spray Brush for creating complex, geometric patterns in Flash at www.adobe.com/devnet/flash/articles/deco_intro.html.

Apply patterns with the Spray Brush tool

The Spray Brush acts like a particle sprayer, letting you “brush” a pattern of shapes onto the Stage at one time. By default, the Spray Brush emits a spray of dot particles using the currently selected fill color. However, you can use the Spray Brush tool to apply a movie clip or graphic symbol as a pattern.

  1. Select the Spray Brush tool.
  2. In the Spray Brush tool Property inspector, select a fill color for the default spray of dots. Or, click Edit to select a custom symbol from the library.

    You can use any movie clip or graphic symbol in the library as a “particle.” These symbol-based particles give you a great deal of creative control over artwork you create in Flash.

  3. Click or drag on the Stage where you want the pattern to appear.

Spray Brush tool options

The Spray Brush tool options appear in the Property inspector when you select the Spray Brush from the Tools panel.

Edit
Opens the Select Symbol dialog box, from which you select a movie clip or graphic symbol to use as a spray brush particle. When a symbol in the library is selected, its name appears next to the edit button.

Color selector
Select a fill color for the default particle spray. The color selector is disabled when you use a symbol in the library as a spray particle.

Scale width
Scale the width of a symbol used as a spray particle. For example, a value of 10% makes the symbol 10% narrower. A value of 200% makes the symbol 200% wider.

Scale height
Scales the height of a symbol used as a spray particle. For example, a value of 10% makes the symbol 10% shorter. A value of 200% makes the symbol 200% taller.

Random scaling
Specifies that each symbol-based spray particle is placed on Stage at a random scale, altering the size of each particle. This option is disabled when using the default spray of dots.

Rotate symbol
Rotates the symbol-based spray particle around a center point.

Random rotation
Specifies that each symbol-based spray particle is placed on Stage at a random degree of rotation. This option is disabled when you use the default spray of dots.

The Deco Drawing tool

Use the Deco Drawing tool to apply an effect to a selected object on the Stage. Choose the effects from the Property inspector after you select the Deco Drawing tool.

Apply the Symmetry effect

Use the Symmetry effect to arrange symbols symmetrically around a central point. When you draw the symbols on the Stage, a set of handles appears. Use the handles to control the symmetry by increasing the number of symbols, adding symmetries, or editing and modifying the effect.

Use the Symmetry effect to create circular user interface elements (such as an analog clock face or dial gauge) and swirl patterns. The default symbol for the Symmetry effect is a black rectangle shape with no stroke that is 25 x 25 pixels.

  1. Select the Deco Drawing tool, and select Symmetry Brush from the Drawing Effect menu in the Property inspector.
  2. In the Deco Drawing tool Property inspector, select a fill color to use for the default rectangle shape. Or, click Edit to select a custom symbol from the library.

    You can use any movie clip or graphic symbol in the library with the Symmetry Brush effect. These symbol-based particles give you a great deal of creative control over artwork you create in Flash.

  3. The Symmetry Brush advanced options appear in the Property inspector when you select Symmetry Brush from the Drawing Effect pop-up menu in the Property inspector.
    Rotate Around Point
    Rotates the shapes in the symmetry around a fixed point that you designate. The default reference point is the center point of the symmetry. To rotate the object around its center point, drag in a circular motion.

    Reflect Across Line
    Flips the shapes an equal distance apart across an invisible line that you specify.

    Reflect Around Point
    Places two shapes an equal distance apart around a fixed point that you specify.

    Grid Translation
    Creates a grid using the shapes in the Symmetry effect you are drawing. Each click of the Deco Drawing tool on the Stage creates a grid of shapes. Adjust the height and width of the shapes using the x and y coordinates defined by the Symmetry Brush handles.

    Test Collisions
    Prevents shapes in the Symmetry effect you are drawing from colliding with one another, regardless of how you increase the number of instances within the Symmetry effect. Deselect this option to overlap the shapes in the Symmetry effect.

  4. Click the Stage where you want the Symmetry Brush artwork to appear.
  5. Use the Symmetry Brush handles to adjust the size of the symmetry and the number of symbol instances.

Apply the Grid Fill effect

The Grid Fill effect lets you fill the Stage, a symbol, or closed region with a symbol from the library. After the Grid Fill is drawn to the Stage, if the filled symbol is moved or resized, the Grid Fill will move or resize accordingly.

Use the Grid Fill effect to create a checkerboard, a tiled background, or area or shape with a custom pattern. The default symbol for the Symmetry effect is a black rectangle shape with no stroke that is 25 x 25 pixels.

  1. Select the Deco Drawing tool, and select Grid Fill from the Drawing Effect menu in the Property inspector.
  2. In the Deco Drawing tool Property inspector, select a fill color for the default rectangle shape. Or click Edit to select a custom symbol from the library.

    You can use any movie clip or graphic symbol in the library as a symbol with the Grid Fill effect.

  3. You can specify the horizontal and vertical spacing and the scale of the fill shape. Once the Grid Fill effect is applied, you cannot change the advanced options in the Property inspector afterwards to alter the fill pattern.
    Horizontal spacing
    Specifies the horizontal distance in pixels between shapes used in the Grid Fill.

    Vertical spacing
    Specifies the vertical distance in pixels between shapes used in the Grid Fill.

    Pattern scale
    Enlarges or shrinks an object horizontally (along the x axis), and vertically (along the y axis).

  4. Click the Stage or within the shape or symbol where you want the Grid Fill pattern to appear.

Apply the Vine Fill effect

The Vine Fill effect lets you fill the Stage, a symbol, or closed region with a vine pattern. You can substitute your own artwork for the leaves and flowers by selecting symbols from the library. The resulting pattern is contained in a movie clip that itself contains the symbols that make up the pattern.

  1. Select the Deco Drawing tool, and select Vine Fill from the Drawing Effect menu in the Property inspector.
  2. In the Deco Drawing tool Property inspector, select a fill color for the default flower and leaf shapes. Or, click Edit to select a custom symbol from the library to replace one or both of the default flower and leaf symbols.

    You can use any movie clip or graphic symbol in the library to replace the default flower and leaf symbols with the Vine Fill effect.

  3. You can specify the horizontal and vertical spacing and the scale of the fill shape. After you apply the Vine Fill effect, you cannot change the advanced options in the Property inspector afterward to alter the fill pattern.
    Branch angle
    Specifies the angle of the branch pattern.

    Branch color
    Specifies the color to use for the branch.

    Pattern scale
    Scaling an object enlarges or reduces it both horizontally (along the x axis), and vertically (along the y axis).

    Segment length
    Specifies the length of the segments between leaf and flower nodes.

    Animate pattern
    Specifies that each iteration of the effect is drawn to a new frame in the timeline. This option creates a frame-by-frame animated sequence of the flower pattern as it's drawn.

    Frame step
    Specifies how many frames to span per second of the effect being drawn.

  4. Click the Stage or within the shape or symbol where you want the Grid Fill pattern to appear.