shiva1 by shivakantmanch

VIEWS: 2 PAGES: 23

									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 use of the Deco tool and Spray Brush

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).
Figure 1. Using the Spray Brush

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).




Figure 2. Selecting your drawing effect from the pop-up menu
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).




Figure 3. Generating the default grid

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.




Figure 4. Working with the Symmetry Brush

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.
Figure 5. A vine pattern filling the Stage

Using custom symbols and advanced options

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).
      View Larger (+)

Figure 6. Rising bubble animation (click to view animation)

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. // randomize bubble animation:
   12. // go to a random frame between 1 and 80
   13. gotoAndPlay(Math.round(Math.random()*80));
   14. Close the Actions panel and click Scene 1 at the top the document to go back to
       the main Stage.
   15. 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:
   9.      var rotationNumber:Number = 0;
   10.     tile_mc.addEventListener(MouseEvent.MOUSE_OVER, startFlip);
   11.     function startFlip(evt:MouseEvent){
   12.        tile_mc.addEventListener(Event.ENTER_FRAME, flipIt);
   13.     }
   14.     function flipIt(evt:Event):void{
   15.        if(rotationNumber < 10){
   16.           tile_mc.rotationY += 18;
   17.           rotationNumber++;
   18.        } else {
   19.           tile_mc.removeEventListener(Event.ENTER_FRAME, flipIt);
   20.           rotationNumber = 0;
   21.        }
   22.     }

         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.

   23. Click Scene 1 at the top of the document to go back to the main Stage.
   24. 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).
           o   View Larger (+)

       Figure 19. Animated tiles responding to the mouse (click to view animation)

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.

Interesting effects in less than five minutes

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."
      View Larger (+)

Figure 24. Galaxy effect (click to view animation)
      View Larger (+)

Figure 25. Particle effect (click to view animation)

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).
      View Larger (+)

More about the procedural modeling engine

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

								
To top