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
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 origin—point 0,0—for 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.
Use the Line tool (keyboard shortcut: N), the Pen tool (keyboard shortcut: P), or the Pencil tool (keyboard shortcut: Y) with shift-constraint (explained in detail later in this recipe).
Often the simplest way to draw a straight line is to use the Line tool. You can do so by first selecting the Line tool from the Tools panel (Window → Tools).With the Line tool selected, drag the mouse on the stage to create a line. Pressing the mouse button creates the starting point, and releasing the mouse button creates the ending point. When using the Line tool, Flash connects the points with a straight line, and applies the active stroke attributes to the line.
You can control the appearance of the stroke, including its color, height, style, end caps, and join types. You can select the Line tool and preset these attributes in the Property inspector before drawing the line on the stage. Alternatively, you can modify an existing line’s attributes by selecting the line with the Selection tool and using the Property inspector.
You can create a multisegment line by clicking the mouse close to the end of the previous line segment. Provided the mouse is close enough to an existing segment, Flash automatically joins the line segments into a single path.
Therefore, to create a path comprising a sequence of straight line segments, do the following:
Select the Line tool (N) from the Tools panel.
Press the mouse button on the stage to create a starting point.
Drag the mouse to another location.
Release the mouse button.
Without moving the mouse, click and drag to the next point’s location, and then release the mouse button.
Repeat step 5 as necessary.
To close the path, drag the mouse back to the first point in the path before releasing the mouse button.
It is much easier to connect multiple line segments when the View → Snap To Objects option is toggled on. For maximum tolerance, under Edit → Preferences → Drawing, set the Connect Lines option to Can Be Distant. Note that the Connect Lines setting takes effect only when snapping is toggled on. When Flash snaps to an existing line, a large circle beside the cursor indicates the snap. This circle also appears when the line is drawn at an angle in a 90° increment relative to the x and y axes.
To begin a new line, unconnected to an existing line, start the new line far enough away from any existing line so that it doesn’t snap to the line. You can append a new segment to an existing line by clicking close enough to one of its end points and dragging to a new location. Likewise, you can create a closed shape by dragging a new line between a line’s two end points.
You may want your lines to be constrained to increments of 45° angles relative to the x and y axes. You can force Flash to draw only at these angles by holding down the Shift key as you draw. This technique is called shift-constraint, and it affects most of Flash’s drawing tools in one way or another.
Instead of using the Line tool, you can use the Pen tool (P) to draw a straight line or a connected series of line segments. Clicking and releasing on the stage with the Pen tool creates a point. Each subsequent time you click, a new point is added, and Flash draws a line connecting the new point and the preceding point. In that way, the Pen tool is frequently more convenient for drawing a path comprised of line segments, and the Line tool is more convenient for drawing a single line segment. To use the Pen tool to draw a straight line or a series of connected line segments, follow these steps:
Select the Pen tool from the Tools panel.
Click at the starting point and release the mouse button.
Move the mouse (don’t drag it) to a new location.
Click again to set the ending point.
Repeat steps 1 to 3 as needed.
To close the path, click again on the first point in the path. To leave a path unclosed, double-click when adding the last point. After closing a shape or double-clicking with the Pen tool, clicking the mouse on the stage again starts a new path.
When you click with the Pen tool, a point is added corresponding to the tip of the Pen tool. If you prefer, you can toggle on a precise cursor with the Pen tool, which replaces the Pen icon with a crosshair. This setting can be found in Edit → Preferences → Drawing in the Show Precise Cursors checkbox. Another useful preference in the same dialog box is Show Pen Preview, which displays the line that will be created when you click the mouse.
As with the Line tool, you can use shift-constraint to draw lines at 45° increments using the Pen tool. To do so, hold down the Shift key while selecting the points of the line. Flash will automatically snap the end point to the nearest 45° increment relative to the x and y axes.
The Pen tool differs from the Line tool in that it is capable of creating curved lines as well as straight line segments. In addition, Flash highlights points and lines drawn with the Pen tool. Drawing curves and the highlighting are discussed in more detail in Recipe 1.14.
You can also draw straight lines at 90° increments using the Pencil tool (Y) if you use shift-constraint. Using the Pencil tool to draw straight lines can be convenient if you are already using the tool to draw other lines, curves, and shapes, and you don’t want to have to change between drawing tools just to draw a straight line. The obvious caveat is that the lines must be at 90° increments relative to the x and y axes.
Get Flash 8 Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
