Chapter 1. Drawing in Flash

One of the hallmarks of Flash is the use of vector-based graphics; vector graphics can be scaled to any size without causing the pixelation or scrunched look associated with scaled bitmap graphics. Vector graphics are also compact, because they are described mathematically. For example, to render (draw) a circle, Flash needs to store only the circle's center point and radius; from this information, it figures out which pixels to draw on the screen. In contrast, bitmap (or raster) graphics describe every point in an image. To draw a bitmap graphic, Flash simply does what it's told, drawing each pixel in the original image to the screen. The file size for bitmap graphics is generally much larger than that of vector graphics, and bitmaps tend to look jagged or pixelated when scaled. Vector graphics are ideal for line art and curves, offering both high quality and small storage size; bitmaps are more appropriate for photographic images that can't be described easily with vectors. Although Flash can import and manipulate bitmaps, the drawing tools create vector graphics only. This chapter focuses on how to create your own graphics with Flash's vector drawing and manipulation tools.

Although Flash's drawing tools can create straight line segments, curves, and complex shapes, they differ somewhat from those in other vector drawing programs, such as Freehand and Adobe Illustrator. Flash uses a simpler system ( quadratic paths) for describing paths than these other programs (which use cubic paths).Basically, quadratic paths are adjusted with just one control handle and three data points, whereas cubic paths are adjusted with two control handles and four data points. The underlying math may be abstract, but the implications are not.

Flash's quadratic paths are not capable of quite the same level of precision as the paths you can create in most other vector programs. In practical terms, Flash does not represent paths drawn with a freehand tool as faithfully. The loss in fidelity is counterbalanced by the savings in file size and Flash's ability to simplify paths via shape recognition and line smoothing, both of which make drawing easier and help minimize file size. Whether to automatically apply smoothing, along with other options, can be specified under Edit Preferences Drawing. Many Flash designers find that shape recognition and smoothing enable them to create art much more quickly than in other vector drawing programs. And in spite of the intrinsic limitations of Flash's paths, it does have tools, such as the Pen and Subselection tools, which enable you to create paths with nearly the same precision as those drawn in vector drawing programs that use the more elaborate cubic paths.

Another implication of Flash's unique drawing system is that strokes and fills are treated as separate elements. In most vector drawing programs, the stroke and the fill are optional attributes of a path; you can even remove both and the path will remain. In Flash, strokes are fused to their own paths, and fills are bound by their own paths. If you delete a stroke, you also delete its underlying path. When you draw a rectangle with both a stroke and a fill, Flash effectively creates two separate paths: a stroke-path combination and a fill-path combination (their respective paths initially coincide).Throughout this book, we'll use the term line to describe a stroke-path combination, and fill to describe a fill-path combination.

A quirky (but ultimately empowering) consequence of this system is that in the default drawing mode (shape drawing versus object drawing), overlapping lines and shapes slice each other into separate, discrete lines and shapes, and/or combine to create new lines or shapes. These slicing and combining behaviors are activated when you deselect an element drawn or dragged over an existing element. Table 1-1 summarizes the behaviors of overlapping elements.

Table 1-1. Behavior of overlapping vector elements, by path type and color

Path type	Result
Lines, any color	Intersecting lines slice each other into segments; that is, two simple lines that intersect result in four line segments, each extending from the point of intersection.
Shapes (without lines), same color	Shapes merge into one insoluble shape (union).
Shapes (without lines), different color	The overlapping shape removes the pixels of the underlying shape (punch).
Combination of line(s) and shape(s)	Lines slice each other and divide shapes into pieces.

One of the benefits of describing graphics mathematically is that you can position, scale, and manipulate them with numeric precision, a process that makes more sense when you understand Flash's coordinate system. Visual elements placed on Flash's main timeline are positioned relative to the upper-left corner of the stage: the stage's upper-left corner is the originpoint 0,0for Flash's coordinate system. Horizontal (x) values increase to the right, so that positive x values are to the right of the left edge of the stage. Unlike the Cartesian coordinate system you learned in school, vertical (y) values increase downward, so that positive numbers appear below the top of the stage.

Coordinates are measured in pixels. Thus, an element positioned at point 200,100 is 200 pixels from the left edge of the stage and 100 pixels from the top of the stage. Negative x values denote positions offstage to the left. Likewise, negative y values denote positions above the top of the stage. Values larger than the stage's width or height also denote offstage positions. Elements positioned offstage are not visible within the movie.

You can easily reposition, resize, and distort existing vectors; doing so is a matter of changing the location of some or all of the vectors' points on the stage. You can apply or remove fills and strokes at any time. You can even edit points within a line or change stroke attributes such as thickness and color. You can edit shapes as well, including position, reshaping, or fill attributes, such as whether to use a solid color, gradient, or even bitmap. This chapter's recipes explain how to perform common operations and how to set and manipulate these properties to create attractive and useful graphics. You should follow along in Flash to get the most out of the recipes. If you want to start over, just double-click the Eraser tool in the Tools panel, which clears the drawing canvas.