This chapter is from the book
This chapter is from the book
This chapter is from the book
Editing and Adjusting Shapes
As you've seen, drawing shapes, especially using a mouse, can be far from exact. The best strategy, especially if you are new to the Flash drawing environment, is to draw quick approximations of shapes and then perfect them through editing. Editing an existing shape is far easier than drawing it perfectly from scratch.
Using the Arrow and Subselection Tools
The Arrow and Subselection tools can be used to adjust shapes, as you've seen when working with paths. Simply click segments or points, and drag. Dragging an anchor point changes the anchor position and the size and shape of the adjoining segments. Dragging a segment changes the shape of the segment, while the anchor points on either side of it remain in place.
Straightening and Smoothing
You can also smooth and straighten irregular shapes and paths. For example, you may have drawn freeform curves with the Pencil tool, but some of your curves may appear straighter or flattened. To correct this, select a path or shape with the Arrow tool; then click either the Straighten or Smooth modifiers in the Toolbox. You can repeatedly click either modifier to produce greater changes. Not surprisingly, straight lines or shapes with straight sides are unaffected by the Straighten modifier. Ovals and perfect circles are likewise unaffected by the Smooth modifier, although curved paths can be changed somewhat.
Optimizing Curves
The more anchor points used in drawing curves, the greater the number of calculations that must be made to draw them. In extreme cases this can result in larger file sizes as well as slower rendering. Curves can be optimized to reduce the number of anchor points used to create them. This results in smoother, more refined curves. The goal is to use just as many anchor points as needed to create your desired shape, and no more.
To optimize your curves, select a shape and choose Modify, Optimize. The Optimize Curves dialog box, shown in Figure 3.12, contains a smoothing slider and options to use multiple passes and to show a totals message. Make your selections and click OK. Smoothing reduces the number of points that are used in a given shape. To dramatically reduce the number of points, choose the Multiple Passes option. This results in several smoothing passes being made, with points removed and the shape further refined in each pass until no further optimization is possible. The totals message compares the original number of curves with the optimized number of curves, detailing the extent of the optimization.
){kind=small}
Figure
3.12 Using the Optimize Curves dialog box, you can smooth curves.
Working with Strokes
A stroke refers to a line, or an outline of a shape. Strokes have three attributes: color, weight, and style. Stroke color can be set in three places: the Stroke box in the Toolbox, the Property Inspector, or in the Color Mixer. Stroke height and style can be set only in the Property Inspector. I typically use the Property Inspector so that I can set all the attributes at once; however, the Property Inspector allows you to choose only Web-safe colors.
A Web-safe color palette was developed four or five years ago in an attempt to ensure that color was displayed uniformly on computer displays. One of the many inconsistencies in Web-delivered content is that different operating systems and browsers display finite sets of colors. The kicker is that browsers and operating systems each have slightly different color palettes to work with. So, a Web-safe palette was developed to use just the 216 generic colors common to the two major browsers, Netscape and Internet Explorer, and the two major operating systems, Macintosh and Windows. These colors are available in the color swatches provided in Flash. However, computer displays have improved at displaying color, so the general consensus is that it is safe to venture beyond the Web-safe 216. After all, 216 colors make a very limited palette with which to design. The Color Mixer allows you to mix your own custom colors and change the alpha, or transparency, of colors.
The Property Inspector is used to assign and edit stroke attributes, including color. Follow these steps to create a stroke:
Select the drawing tool of your choice.
The context-sensitive Property Inspector displays the appropriate attributes—in this case, the stroke attributes, as shown in Figure 3.13.
){kind=small}
Figure
3.13 The Stroke attributes in the Property Inspector.
Click on the color swatch, and select a color from the pop-up swatches.
To set the stroke weight, either type a number in the stroke weight field or use the slider to select a number.
Stroke weights are multiples of .25, ranging from .25 to 10. The higher the number, the thicker the stroke.
-
Finally, set the stroke style. Next to the stroke weight field is a pop-up of common stroke styles, as shown in Figure 3.14. Hairline draws the thinnest stroke at .25 weight, regardless of any weight you may have specified. The other stroke styles can be any weight.
){kind=small}
Figure
3.14 You can use the Property Inspector to specify a stroke style.
You can also click the Custom button to create your own stroke style, as shown in Figure 3.15. As with broken-line styles, use custom strokes sparingly. Complicated lines, especially irregular ones, require complicated vector instructions and calculations, which will negatively impact file size and rendering.
CAUTION
Using any of the broken-line stroke styles will noticeably affect file size and rendering time. Use them sparingly.
){kind=small}
Figure
3.15 Using the custom Stroke Style dialog box, you can create your own stroke
styles.
To edit an existing stroke, first make sure nothing is selected on the Stage. The Ink Bottle tool, shown in Figure 3.16, allows you to edit strokes.
){kind=small}
Figure
3.16 Use the Ink Bottle tool to edit strokes.
Use the Property Inspector to specify stroke attributes, and then click with the Ink Bottle on a stroke to apply those attributes, as shown in Figure 3.17.
)
Figure
3.17 To edit a stroke, change the stroke attributes in the Property Inspector
and click a stroke with the Ink Bottle.