|
Flash design tutorial ZONE
Create a Polygon or Star
Earlier in this chapter it was mentioned that the Polystar tool was used for making polygons as
well as stars. Polygons are multisided shapes. Therefore, one of the properties of a polygon or
a star is the number of sides to the shape.
When the Polystar tool is selected in the Toolbar, the Properties Inspector offers an additional
Options button that allows you to set the type of polygon/star and the number of sides of the shape.
To create a star shape or set the properties of a polygon, click the Options button to access
the Tool Settings dialog box for your shape. Here you can pick the style (polygon or star) as well
as the number of sides. If you are creating a star, you can also type in the size of the points on the
star. A high number makes the points on the star dull, and a low number makes the points on the
star sharp. The star in the following illustration has a point size of 0.5 pixels.

Set the Fill and Stroke Color of a Shape
To set a fill or stroke color for the shape you are about to create, use the Properties Inspector’s
Fill and/or Stroke Color palettes. Alternately, you can access the same palettes in the Colors
section of the Toolbar. To assign a color, simply click the color swatch and, in the pop-up color
palette, click a color, as shown in the next illustration. When you draw the shape, it appears with
the color you selected.

The current colors represented in the Fill and Stroke Color swatches become the current
colors in the Toolbar. So, you can also select the current fill or stroke color from the
Toolbar. In fact, all color panels within Flash will represent the currently selected
colors. This includes the Color Mixer and the Color Swatches panels. The color panels
are discussed in Chapter 5.
If you do not want a stroke color or a fill color on the shape you are creating, click the No
Color button as shown in the previous illustration. The No Color button appears as a white
swatch with a red diagonal line through it. In the pop-up color palettes, it is located at the top
right. The No Color icon is also located in the Toolbar, at the bottom of the Colors section.
Did you pick ugly fill and stroke colors, and you long to change to good old black and
white? You can do so with the click of a button. Clicking the Black And White button in
the Toolbar to the left of the No Color swatch will return the fill and stroke colors to
black and white.
Draw Lines, Brushstrokes, and Curves
In addition to the tools covered in the last section, the Flash Toolbar provides you with one tool
for drawing lines and three tools for drawing lines, curves, and brushstrokes.
The Line tool enables you to create the simplest geometric shape, the straight line. You use
the Pencil tool to create lines, curves, or shapes. This tool has extensive modifiers that give you
the ability to create anything from a freeform line to a recognizable geometric shape, such as
a circle, rectangle, or triangle. You use the Brush tool to add calligraphic splashes of color to
your movies, or you can use this tool to create a more fluid line or shape. To create a line, path,
or shape with point-to-point control and precision, you can use the Pen tool. Next, we’ll learn
how to use each of these tools.
Draw with the Line Tool
The Line tool is used to create straight lines that go from point A to point B. To create a straight
line, select the Line tool, adjust the line style, and select a stroke color and a stroke height in the
Properties Inspector, as outlined previously.
Click and drag on the stage in any direction to create the line. Hold down shift
while dragging to constrain the line to 45-degree increments, as shown in this
illustration. Keep in mind that a line has only a stroke color and no fill, so any color
in the Fill swatch will be disregarded when you draw the line. 
You can also use the Ink Bottle tool from the Toolbar to modify the color of a line,
whether the line was created as a merge drawing or an object drawing. The ins and outs
of this tool are discussed later in this chapter in the section “Use the Ink Bottle Tool.”
Freeform Draw with the Pencil Tool
The Pencil tool has a freehand feel to it and works much like a real
pencil. To draw a line or a shape with the Pencil tool, click the tool
in the Toolbar and just start drawing. You can create a line with this
tool as well as a closed shape. This illustration was created with the
Pencil tool.
If you are drawing with a mouse and not a drawing tablet, it may feel as if you have little
control over the Pencil tool. You can actually set the Pencil tool’s modifiers to allow you a little
more precision with the tool. Modifiers are additional settings available on some tools that allow
you to further customize an object or the tool itself.
If you’re used to working with Bezier curves in a drawing application and prefer the
precision associated with them, the Pencil tool will feel like a very strange alternative. For
those of you not accustomed to working with Bezier curves, you probably are wondering what
they are. Bezier curves are curves drawn with mathematical precision and are used in graphics
applications like Adobe Illustrator and Macromedia FreeHand. They allow users to draw
perfectly smooth lines by defining a series of points and then clicking and dragging these points
to define the length and the angle of the curves in between these points. The Pen tool works in
a similar manner to these other graphics applications.
In the Properties Inspector, stroke hinting, caps, and joins can be set for lines drawn with the
Pen tool just as they can be for any stroke object created with the Line, Rectangle, Polystar, and
Oval tools.
Use a Pencil Modifier
There are three different Pencil modifiers that give you varying degrees
of assistance while you are creating a freeform shape with this tool. These
modifiers, shown here, are contextual and become available if the Pencil tool in
the Toolbar is selected.

To select a Pencil modifier, click the Modifier icon in the Options section
to display the Modifier pop-up menu. To select the desired modifier, click the appropriate button.
You have three Pencil modes to choose from:
■ Straighten Choose this mode to create a line made up of straight-line segments and
interconnecting paths.
■ Smooth Choose this mode when you want to draw smooth-flowing curved lines.
■ Ink Choose this mode when you want to create a freeform line with no assistance from
Flash. You might prefer this mode if you are an accomplished artist working with a digital
tablet or if your movie calls for an irregular line.
Shapes and lines can also be modified with the Selection tool. When a merged or
drawing object is selected, the Options section of the Toolbar offers the Straighten,
Smooth, and Ink modifiers as options. It also contains a Snap To Objects button, which,
if you activate it, will force the snapping of objects to one another. To use the modifiers
with the Selection tool, click an object you want to modify with the Selection tool and
then click the modifier as many times as it takes to reshape the object or line. Figure below shows sample lines created with the Pencil tool in each mode. As you can see, the
images reflect the properties of each of the modifiers. To change a line with a modifier after you
create it, click the line segment (or double-click the line segment to grab the entire line). Then
click the appropriate mode. Each time you click, the modification to the line will be augmented.

To quickly create a geometric shape with the Pencil tool, use the tool to sketch
something resembling what you want and then click the Straighten mode until the
shape transforms into what you want it to look like. Draw a shape resembling an
oval, a rectangle, or a polygon, and Flash will transform your creation into its proper
geometric shape.
Draw with the Pen Tool
The Pen tool in Flash works much as similar tools work in other drawing applications. So, if
you’re accustomed to the quirks of a Pen tool, you’ll get a feel for the Flash Pen tool in no time.
If you’ve never worked with a Pen tool, using the Flash Pen tool will probably seem a little
frustrating at first. If you fall into this category, you will probably want to rely on the Pencil tool
and its modifiers for more control over lines and curves.
You use the Pen tool to create lines, strokes, point-to-point paths, and Bezier curve paths. In
other words, it’s kind of like the Pencil tool in that the lines yield a similar result. It’s different
from the Pencil tool in that it requires more skill to draw precise objects.
With the Pen tool, objects are formed by clicking from point to point instead of just drawing
as if the tool was a real pencil. In effect, it’s like manipulating a string (the line) between two
knitting needles (the points connecting the lines). Sound confusing? We’ll try to clear it up for
you in the next section. After that, the best thing to do is practice drawing with it. Learning how
to draw with the Pen tool is a little like learning to ride a bike. With perseverance, you will get
the feel for it.
Make Open and Closed Paths with the Pen Tool
An open path is a series of line segments that remain a line and don’t close. In
other words, the first point you create never meets the last point, as shown here.

In contrast, a closed path is a series of line segments where the first point meets the last point
and they close to create a shape.
To create an open path with the Pen tool, select the tool and select a line style and stroke, as
outlined earlier in this chapter. Click the spot on the stage where you want the line segment to
begin, and Flash will create a single corner point. Click the next point, moving in the direction of
the path you want to create, and click again and again until your path is complete.
To end the path, double-click the last point. Alternatively, you can ctrl-click in Windows/
opt-click on the Mac anywhere on the stage to end the path. To exit the Pen tool and return to the
Selection tool, click the Selection tool or press v to access it. If you don’t end the path, the tool
will keep drawing, which can be a little irritating, especially if your path looks perfect as is.
To constrain a line segment to 45-degree increments, hold down SHIFT while clicking
from point to point.
To create a closed path, begin drawing the same as you would for an open path,
but then click the first point you created. Flash will close the stroke and apply the
currently selected color. Note that a little white circle appears at the bottom right of
the Pen tool when you position your mouse over a point that can close the path into
a shape, as shown here.

Make a Curved Path
Creating a curved path with the Pen tool involves the same technique as creating a straight path,
with a slight variation. To create a curved path instead of a straight path, you click and drag the
end point instead of just clicking. This will create a curve point. As you drag, Flash creates a pair
of tangential handles that define the shape of the curve. As mentioned earlier, the handles are
almost like knitting needles that help guide the curve, and the curve becomes the yarn between
them. The tips of the knitting needles would be the equivalent of the points on the path. The
end of the knitting needle is the handle you drag to manipulate the needles, or curve handles, as
they are called. The difference between the Pen tool’s curve handles and a knitting needle is that
the Pen tool’s handles point in the same direction as the curve, as shown in Figure 3-3. So, you
drag a handle in the direction you want your curve to go. The other difference is that it would be
pretty hard to knit a sweater in Flash.
To create a curve segment, select the Pen tool and then set the properties of the tool in the
Properties Inspector.
On the stage, click a line segment and drag the pointer in the direction you want the curve to
go, release the mouse, position your pointer where you want the next point to be, and repeat the
process. The direction and the distance you drag on the end of the handle determine the slope and
length of the handles. Continue this process until you have created the curved path you want.
Double-click the last point to end an open curved path. To close a curved path, click the end
point on which you want to close the path. In other words, you end a curved path the same way
you end a point-to-point straight path.
When the curve segment is the approximate shape you desire, release the pointer. You can
now go back and adjust the curve if need be. You can modify each point along the path with the
Subselection tool (the white arrow) to the right of the Selection tool, or you can add points to the
path or delete unneeded points with the Pen tool.

When you draw with the Pen tool, you can combine curve points and corner points, as
shown next.

To combine straight, point-to-point paths with curved paths, simply use the rules outlined previously, only combine them. In the previous illustration, the path was created by making a three-point path that creates two nearly perpendicular straight lines. After the fourth point was clicked, the mouse was dragged to the upper right of the stage, thus creating a curve that slants to the left. Note also that the handle is dragged in the opposite direction of the curve, but the angle of the curve is the same as the angle of the handle. Don’t worry if you mess up your curve. Flash makes it easy to fix mistakes. In fact, paths are so easy to fix that you shouldn’t ever expect them to look perfect when you first draw them. In the next section you’ll learn how to quickly fix your path so it will look just right.
This book probably makes the process of drawing curves sound easy, but it’s not. Don’t be frustrated if drawing curves seems difficult at first. It takes a long time to get a feel for it, and some designers never do. Take heart, because you still have the Pencil and Line tools to fall back on.
Modify Paths
Once you have created a path with the Pen tool, you can easily modify it by manipulating the points that make up the path. You can add or delete points, convert corner points to curve points and vice versa, or move points to modify a path. By default, Flash displays selected corner points as hollow squares and selected curve points as hollow circles.
There are several tools you can use to change the way your path looks:
■ To move a point along a path, select the Subselection tool (the white arrow to the right of
the Selection tool) and position the pointer over the point you want to move. When the
pointer displays a white rectangle at the bottom right, as shown next, click the point you
want to move and drag it to a new position. When you release the mouse, Flash readjusts
the shape of the path to reflect the point’s new position.
■ To nudge a point, again use the Subselection tool and
position the pointer over the point you want to move until
the pointer displays a white rectangle at the bottom right.
Then click the point. Use the keyboard’s arrow keys to
nudge the point in the desired direction. To nudge more
than one point, select the first point with the Subselection
tool and add points to the selection by clicking them while
holding down shift. Alternatively, you can drag a marquee around the points you want
to select with the Subselection tool. Use the arrow keys to nudge the selection of points
to a new location.

If you position your Subselection tool pointer over a point and a black rectangle appears in the bottom-right corner of the white arrow, nudging or dragging will move the entire path. The white rectangle indicates that you have selected a point on a path, whereas the black rectangle indicates that you have selected the entire path.
■ To add a point to a path, click the path with the Pen tool. Then position your
pointer over the path. As you approach the path, the Pen cursor appears with
a plus sign (+), as shown in the illustration at right. Click to add a point to
the path.

■ To delete a corner point from a path, select the path with the Pen tool and
move toward the corner point you want to delete. As you approach the
point, the Pen cursor displays a minus (−) sign at the bottom right, as shown
next. Click the point to delete it.

■ To delete a curve point from a path, select the curve with the Pen
tool and move toward the curve point you want to delete. As you
approach the point, the Pen cursor displays a white arrow at the
bottom right, as shown in the illustration at right. Double-click
the point to delete it. (The first click converts the point to a corner
point; the second click deletes it.) Alternatively, you can delete
any point from a path by first selecting it with the Subselection
tool and then pressing delete.

■ To convert a corner point to a curve point, select the point you want to convert with the
Subselection tool and then drag while holding down alt (Windows)/opt (Mac). As you
drag, Flash creates a pair of tangential handles that define the shape of the curve point.
When you release the mouse button, Flash redraws the path.
To practice using the Pen tool, try tracing over freeform images you have created with
the Pencil tool.
|