Creating Graphics in Flash
In This Chapter
Colors and Gradients
Grouping and Drawing Objects
Importing and Working with Bitmaps
In the later part of this book we will go over how to manipulate objects on the stage using ActionScript, but before that can be done, you need to know how to create these objects on the stage. If you have used other drawing tools in the past, such as Freehand or Illustrator, you will be somewhat familiar with most of the tools that Flash offers for drawing. This chapter will go over each tool individually, including how they work and ways to speed up and refine the process. We will also go over how to import bitmaps to your Flash project and work with them.
As mentioned in the previous paragraph, many of the drawing tools found in Flash may be somewhat familiar, as you can see in Figure 3.1. As we move through the tools, special note will be made of options that are available to each specific tool, as well as shortcuts that can be used in conjunction with the tool.
As you can see from the preceding figure, the toolbar has four major sections:
Tools—This group is the set of tools that enable you to draw and manipulate shapes and objects on the stage.
View—This group assists you in controlling the view of the stage, including the stage position and magnification level.
Colors—This group helps you control both the color of the stroke (line) and fill of shapes.
Options—This group will change as you select different tools to reveal more options for those tools. Because technically this really is not a group, but more of a section, each set of options will be gone over with its associated tool.
Figure 3.1 The Flash 8 toolbar.
Now that you are familiar with the sections, let’s go over what is in each section, from bottom to top, starting with the colors section.
The Colors Section
As previously mentioned, this section of the toolbar is one of the many places where you can control the color of both the stroke and fill. Although colors and gradients will be discussed in more detail later in this chapter, it’s important that you understand how to use this section of the toolbar before you begin creating shapes.
In addition to the two-color drop downs for both stroke and fill, there are also three little buttons along the bottom of this section, as shown in Figure 3.1. Here is what they do:
Black and White—Instantly change the stroke color to white (#ffffff) and the fill color to black (#000000).
No Color—Set the selected color (either fill or stroke) to not be created when drawn.
Swap Colors—Swap the current colors of the fill and stroke.
Also, more options for choosing colors can be found by clicking the color wheel in the color drop-down of either the fill or the stroke. The color pop-up window will appear as shown in Figure 3.2.
Figure 3.2 In the color pop-up, you choose from an assortment of colors; you can change the lightness and darkness and even set RGB values.
When you select a fill or stroke color from the Colors section, you can either select any color or gradient from the color palette or type the color in #rrggbb form into the input box. You can also adjust the alpha of the color or turn off the color completely with the No Color button.
Figure 3.3 The stroke color section: Notice how gradients and alpha control are now available to both the fill and the stroke color section.
The View Section
This section in the toolbar contains tools to help control the view of the stage.
The Hand Tool
Shortcut: PC and Mac—H
Use the Hand tool to drag the entire stage around to be able to see certain sections more clearly, especially while you’re zoomed in. Also, holding down the Shift key while dragging the stage will make it so the stage can be dragged at only 45-degree angles from its original position.
The Zoom Tool (or Magnification Tool)
Shortcut: PC and Mac—Z or M
The Zoom tool controls the magnification at which you are viewing the stage. This tool is very helpful when you need to create very detailed drawings. It has two options in the options section of the toolbar, as you can see in Figure 3.4. The options switch the direction of magnification when you click the stage. Besides being able to click the stage and have the stage zoom in or out, you can also click and draw a rectangle around a particular section of the stage to zoom into.
Figure 3.4 The two options for the Zoom tool.
As with many things in Flash, there is more than one way to control the magnification level of the stage. Following is a short list of shortcuts:
(CTRL + - )—Zoom Out
(CTRL + +)—Zoom In
(CTRL + 1)—Zoom to 100%
(CTRL + 2)—Zoom in as far as possible while showing everything on the stage and center
(CTRL + 4)—Zoom to 400%
(CTRL + 8)—Zoom to 800%
The Tools Section
This section contains all the tools for drawing shapes, manipulating objects, and creating text on the stage. Make special note of the options for each tool that can be found in the Options section of the toolbar; as previously mentioned, these change with each tool. As we go through the tools, they will be covered from top to bottom, and left to right on the toolbar.
The Arrow Tool
Shortcut: PC and MAC—V
The Arrow tool is Flash’s basic selection tool. It can be used to select objects by clicking them or by clicking outside and dragging a rectangle around what you want to select. Remember, when selecting shapes on the stage, you must double-click to select both the fill and the stroke.
The Arrow tool has three options: the first is the Snap to Objects option. This option, when selected, helps snap objects to one another, depending on how close they get to each other. This option is helpful when you’re doing precise layouts. The other two options, which may appear grayed out, as in Figure 3.5, are for adjusting line segments on the stage and will not become active until a line is selected. Here are the other two options:
Smooth—This option smooths out ragged edges of the selected line each time it is selected.
Straighten—This option attempts to sharpen the curves of the selected line each time it is selected.
Figure 3.5 The options for the Arrow tool. If a line is selected on the stage, the bottom two options become available.
The Subselection Tool
Shortcut: PC and Mac—A
This works similarly to the Arrow tool, except the Subselection tool is designed to specifically select vector points. Unlike the Arrow tool, the Subselection tool has no options.
The Free Transform Tool
Shortcut: PC and Mac—Q
This tool is used to manipulate objects on the stage through the use of several small boxes, called handles, which appear around the object when it is selected with the Free Transform tool. It can be used to size, rotate, and skew the selected object by clicking and dragging.
The Free Transform tool has the following options:
Snap to Objects—This option, when selected, will snap the scaling handles to other objects on the stage.
Rotate and Skew—This option makes the corner handles become rotate handles, and the center handles become skewing handles.
Scale—This option turns all handles into sizing handles.
Distort—This option turns the corners into independent distortion handles where you can drag one corner at a time (or use the Shift key to control two adjacent points at the same time to make a tapering effect).
Envelope—This option creates more handles than the other options, including handles with the capability to curve segments of the selected object.
The Gradient Transform Tool
Shortcut: PC and MAC—F
The Gradient Transform tool is used to adjust gradients or bitmap fills in shapes on the stage. Depending on which kind of gradient the selection has, a different set of handles will appear to adjust such things as center point, size, and rotation of the gradient, as you can see in Figure 3.6. This tool has one option, Snap to Objects. When selected, this option allows the sizing handle to snap to other objects on the stage.
The Line Tool
Shortcut: PC and Mac—N
The Line tool is used to draw straight lines from point to point on the stage. Simply select the tool, click where you want the start point to be, and then drag and release where the end point should be.
Figure 3.6 Using the handles to adjust the gradient is an easy way to make precise gradient fills.
The Line tool has the following two options in the toolbar:
Snap to Objects—Similar to the Arrow tool, when selected, this option snaps the end point of the line to objects, depending on how close they are being drawn.
Object Drawing—This option, which is discussed in more detail later in this chapter, allows you to draw Drawing Objects directly on the stage (Shortcut: PC and Mac—J).
There are more options available for the Line tool in the Properties Inspector, as seen in Figure 3.7. The option available is actually the options for the stroke settings, which are used by the Line tool. The options available for the stroke settings are as follows:
Stroke Color—The color or gradient setting for the stroke. This is the same as in the Colors section of the toolbar.
Stroke Height—This is the weight of the stroke, which can range from .25 to 200, with 200 being thickest.
Stroke Style—This has several prebuilt styles for how the stroke can look. Following is a list of the prebuilt styles:
Hairline—The hairline stroke style will remain one pixel in size no matter how much it is scaled. This is the only stroke style that will not scale.
Solid—The default stroke style that has only size, color, and sharp corners as options.
Dashed—This stroke style creates a dashed line. You can change the length of the dash and gap between them in the Stroke Style pop-up by clicking the Custom button in the Properties Inspector. You can also adjust the other stroke attributes such as size, color, and sharp corners.
Dotted—This stroke style creates a line with evenly spaced dots along it. You can adjust the distance between the dots as well as the normal stroke attributes.
Ragged—This stroke style creates a line with "ragged" edges created by wavy lines and small dots. You can adjust the pattern of the wave as well as the wave’s length and height.
Stipple—This stroke style creates a line that resembles a ballpoint pen line. It is made up of tiny little dots, which can be adjusted in size, variation, and density.
Hatched—This stroke style creates a line made up of several short lines to resemble a hatched line. You can adjust thickness (which is different than the stroke size), space, jiggle, rotate, curve, and length, as well as the other normal stroke properties.
Custom—This enables you to create your own line styles in a small pop-up, as shown in Figure 3.8.
Cap—This option controls the ends of a line. You can set None to make the line flush with the end point, or you can set either Round or Square to extend the stroke height beyond the end point.
Stroke Hinting—When selected, this option makes subtle adjustments to the curve and line anchor points to help prevent blurring.
Scale—This controls how the stroke will act during scaling. It has these options:
Normal—Always scale the thickness of the line. This is the default choice.
None—Never scale the thickness of the line.
Vertical—Do not scale the thickness of the line when the line is vertically scaled.
Horizontal—Do not scale the thickness of the line when the line is horizontally scaled.
Join—The option controls the corners where lines intersect. You can set Normal, Miter, or Bevel (see Figure 3.9). When Miter is selected, you can set a Miter Limit to help prevent beveling. In a Miter Limit, lines that exceed the set value will be cut off instead of being sharpened to a point.
Figure 3.7 You can adjust stroke settings from the Properties Inspector.
Figure 3.8 In the Stroke Style pop-up, you can change most of the stroke properties and see a preview.
Figure 3.9 The three Join options for a line.
The Lasso Tool
Shortcut: PC and Mac—L
The Lasso tool is another selection tool that can be used to select more precisely than the Arrow tool. Simply draw a shape as you would with any other drawing tool; make sure you close the shape before releasing the mouse or odd selections may be made.
This tool does have a few options that can make it easier to make a desired selection starting with the Magic Wand. The Magic Wand will select areas based on where the tolerance level is set. To set this tolerance level, click the option to the right of the Magic Wand and you will see something similar to Figure 3.10. You will also be able to adjust the smoothing as well, which determines how smooth the selection should be. Here are those options:
Smooth—The selection will be rounded.
Pixels—The selection will wrap around pixel edges of similar color.
Rough—The selection will have more jagged edges than with the pixel selection.
Normal—This selection will have the smoothness between the smooth selection and the pixel selection.
The final option for the Lasso tool is the Polygon Mode option. This option, when selected, enables you to draw point-to-point lines to make selections in the shape of a polygon.
Figure 3.10 The options for the Magic Wand.
The Pen Tool
Shortcut: PC and Mac—P
The Pen tool is another drawing tool used to draw both straight and curved lines. Drawing with the Pen tool is a little different from using the Line tool. As you move and click the mouse, a new line will be drawn that is connected to the previous one. And to draw curved lines, drag the mouse cursor away from the selected point.
Although there is only one option for this tool, the Object Drawing option, its preferences can be found in the Preferences window by going to Edit, Preferences, Editing Tab (Shortcut Ctrl+U).
Also, after you have drawn the shape or line you desire, you can use the Subselection tool to control the curves by selecting the handles. If you need more handles, use the Pen tool again to add them anywhere along the lines.
Show Pen Preview—This option, when selected, will show a preview of the next stroke before it’s drawn, based on the mouse position.
Show Solid Points—This option, when selected, will show the reverse of the default settings in that selected points will appear hollow and unselected points will appear filled.
Show Precise Cursors—When selected, this option will show a crosshair cursor instead of a pen cursor. You can also switch between these two views by toggling the Caps Lock key.
Besides these options, special smaller icons also appear with the Pen tool while it is in use to help refine the drawing you are making. Following is a list of those special icons and how to use them:
(-)—Shown when a vector point can be deleted by clicking it.
(+)—Shown where a vector point can be added to an existing line.
(^)—Shown when a vector point can be converted to a right angle.
(o)—This icon appears when you hover over the initial point of the shape you are drawing, allowing you to completely close the shape if clicked.
(x)—Shown when there is no available line to edit.
(arrow with filled box)—Shown when the Shift key is down and the cursor is over a line.
(arrow with hollow box)—Shown when the Shift key is down and the cursor is over a vector point.
The Text Tool
Shortcut: PC and Mac—T
This tool is used to manually create text fields on the stage. Although text fields will be gone over in extensive detail in Chapter 15, "Working with Text," it is important to go over some of the major points of the Text tool here.
When you’re drawing a text field, click approximately where you want the top-left corner of the text field to be, and then drag down and to the right (doing the opposite will have unexpected results). After the text field is drawn, you can manually type text into the field and use some of the basic text options, such as color, bold, and italic, as found in the Properties Inspector (see Figure 3.11).
Figure 3.11 The Properties Inspector for the Text tool.
There are three basic types of text fields:
Static—This type of text field can be edited at authoring time only.
Dynamic—This type of text field can be edited at authoring time or at runtime by using either the text property or the var property.
Input—This type of text field, like the dynamic text field, can be edited either at authoring time or at runtime. The user can also type into this type of text field at runtime.
As previously mentioned, this tool is covered in more detail in Chapter 15.
The Oval Tool
Shortcut: PC and Mac—O
The Oval tool is used to draw circular shapes. This tool has two options; the first is the Object Drawing option, which is discussed later in more detail. The other option is the Snap to Objects option, which if selected, enables you to draw perfect circles if drawn at a 45-degree angle. You can also hold down the Shift key while drawing to accomplish the same task of drawing a perfect circle.
New to Flash 8 is yet another way to create ovals on the stage. Simply hold down the Alt key and click the stage to reveal the Oval Settings dialog box, as shown in Figure 3.12. With this, you can set the width, height, and whether to draw from the center of the point you clicked on or have that point be the upper-left coordinate of the oval.
Figure 3.12 The Oval Settings dialog box for creating ovals with numbers.
The Rectangle Tool
Shortcut: PC and Mac—R
The Rectangle tool is used to draw rectangular shapes. The Rectangle tool has three options; the first is the Object Drawing option. The second option is the Snap to Objects option, which when selected, enables you to draw perfect squares when drawing at 45-degree angles. Again, you can accomplish the same thing by holding down the Shift key when you draw a rectangle. The third option is the Round Rectangle Radius option. When this option is selected (or you double-click the Rectangle tool in the toolbar), the Rectangle Settings pop-up appears, allowing you to set the roundness of the corners of the rectangle between 0 and 999.
Like the Oval tool, you can now create rectangles on the stage without having to draw them by hand. Just hold down the Alt key and click the stage to reveal the Rectangle Settings dialog box, as shown in Figure 3.13. With this, you can set the width, height, corner radius, and whether to draw from the center of the point you clicked or have that point be the upper-left coordinate of the rectangle.
Figure 3.13 The Rectangle Settings dialog box for creating rectangles with numbers.
The PolyStar Tool
The PolyStar tool is used to draw multisided polygons or multipoint stars. To select this tool, click and hold down the Rectangle tool in the toolbar. A submenu appears, as shown in Figure 3.14. Select the PolyStar tool from there. There is no shortcut key for this tool on the Mac or the PC.
When you select the PolyStar tool, the same options for the Rectangle and Oval tools appear—Object Drawing and Snap to Objects. Also notice another option, called Options, in the Properties Inspector, as shown in Figure 3.15. Clicking this brings up the Tool Settings dialog box where you can choose either polygon or star, the number of sides (or points when drawing a star), and the star point size (which affects only stars).
Figure 3.14 Choose the PolyStar tool.
Figure 3.15 Click the Options button to open the Tool Settings dialog box.
Drawing polystars can be a bit tricky at first because unlike the other shape drawing tools, while you are drawing the size of the shape, you can also control the rotation of the shape.
The Pencil Tool
Shortcut: PC and Mac—Y
The Pencil tool is used to draw lines, but unlike the Line tool, which draws point to point, the Pencil tool can be used like a normal pencil. It does have some options to make drawing much easier, as you can see in Figure 3.16, as well as the Object Drawing option found in all the drawing tools.
Here is a list of those options and what they mean:
Straighten—This is the default setting of the Pencil tool and helps to draw perfect shapes such as rectangles or circles. You can adjust how well it recognizes shapes and specify smoothing options in the Preferences panel.
Smooth—This option attempts to smooth out ragged edges of the drawn line.
Ink—This option makes the Pencil tool act as close to a real pencil as possible and will not attempt to alter the drawn line.
Figure 3.16 The options for the Pencil tool.
Figure 3.17 You can see the difference in drawing a similar shape with each of the three pencil options.
The Brush Tool
Shortcut: PC and Mac—B
The Brush tool is used to paint the stage, much like a normal paintbrush would be used. Unlike the Pencil tool, the Brush tool’s color options are controlled with the fill settings. There are also several options for the Brush tool that make a difference in how the brush works, as well as the Object Drawing option. The first is the mode of the Brush tool, which has these options:
Paint Normal—The default option that will allow you to paint fill anywhere you use the brush.
Paint Fills—This option is similar to the Paint Normal option, except that it will not affect any line on the stage.
Paint Behind—This option paints behind any previously drawn shape or object on the stage.
Paint Selection—This option allows you to paint fill only in shapes that are selected.
Paint Inside—This option will paint fill only in the interior of the object where you begin to paint. For instance, if you start painting inside a rectangle, it will paint only within that rectangle; however, if you start painting outside the rectangle, it paints on the stage.
Other options that affect the fill being painted are the size of the brush (from approximately 2.5 pixels to 30 pixels wide) and the style of the brush, as shown in Figure 3.18.
Figure 3.18 The different choices of brush styles for the Brush tool.
The final option for the Brush tool is the Lock Fill option. This option, when selected, will make a gradient or bitmap fill (discussed later in this chapter) more consistent over several items.
The Ink Bottle Tool
Shortcut: PC and Mac—S
The Ink Bottle tool is designed to help make adjustments to line segments on the stage through stroke properties. Although it has no options in the options section of the toolbar, you can make stroke settings in the Properties Inspector. Then you can apply these settings by clicking line segments with the tip of the Ink Bottle.
The Paint Bucket Tool
Shortcut: PC and Mac—K
The Paint Bucket tool is used to change fill settings of shapes on the stage. Select the color or gradient you want to use and click the fill you want to change.
The Paint Bucket tool does have a couple options:
Gap Closing—This option has a drop–down, as you can see in Figure 3.19, which shows the different gap sizes to fill in shapes that do not have connecting line segments.
Lock Fill—This option will assist in making gradients consistent over different shapes.
Figure 3.19 The gap fill selections for the Paint Bucket tool.
The Eyedropper Tool
Shortcut: PC and Mac—I
The Eyedropper tool is used to snag properties of either strokes or fills. As you hover over a line or fill of a shape, a small icon will appear with an eyedropper to indicate which you are working with. When you’ve made your selection, the tool will automatically change to either the Paint Bucket (for fills) or the Ink Bottle tool (for strokes).
The Eraser Tool
Shortcut: PC and Mac—E
The Eraser tool is used to erase both fills and strokes. Besides the size and shape drop-down (see Figure 3.20), the Eraser tool has a couple more options, including how to erase the following:
Erase Normal—The default setting, which when selected will make the Eraser tool erase both lines and fills from the stage.
Erase Fills—While erasing with this option selected, lines will not be affected, only fills.
Erase Lines—The exact opposite of the previous option, this option affects only lines and will not erase fills.
Erase Selected Fills—With this option selected, the eraser will affect only the fills you have selected.
Erase Inside—This option will make the eraser erase fills only from a shape where you initially begin to erase from.
The final option of the Eraser tool is the Faucet option. This option, when selected, turns the Eraser tool into a one-click wonder. Just click the line or fill you want to get rid of, and the entire selection will be erased.
Figure 3.20 The different settings for how the Eraser tool will erase.