Creating Graphics in Flash
This chapter is from the book
This chapter is from the book
This chapter is from the book
IN THIS CHAPTER
-
The Tools
-
Creating Custom Colors and Gradients
-
Tips for Creating Graphics in Flash
-
Graphic Techniques
-
Importing Bitmap Graphics
-
Working with Bitmaps
Flash has a unique drawing style associated with it. If you are familiar with other drawing applications, such as Adobe Illustrator and Macromedia FreeHand, you'll find definite similarities and some unexpected differences. Flash offers several drawing tools for creating the graphics for your Flash projects that may seem familiar to you based on some of those programs. Flash differs from those other applications by the way it handles graphics. Flash will join two items of the same color value if the two graphics intersect. The line or stroke of an item is also considered a separate element. As you will see in this chapter, these differences can be problematic, but they can also work in your favor. It's just a matter of getting used to them.
The Tools
As just mentioned, the drawing and handling of graphics in Flash takes a little getting used to, and that's what this portion of the chapter is for. It exposes you to the tools in Flash 2004; even though they may look very similar to those in other programs, there are some differences.
All the tools will be reviewed in this chapter, so let's start taking a look at them. Figure 3.1 shows the Flash 2004 toolbar and highlights each tool found in this powerful toolset.
The Arrow Tool
Shortcut: PC and Mac–V
The Arrow tool is Flash's selection tool. If you want to move an item, select and drag it with this tool. Of course, you can always use the arrow keys on your keyboard to move the item for more precise placement.
)
Figure
3.1 The Flash 2004 tools.
Toward the end of the chapter, when we get into actually creating artwork in Flash, you'll see how this tool can also be an aid in drawing. The Arrow tool does have one option: Snap to Objects.
Use Snap to Objects to have artwork snap to the grid. This option will also cause objects to snap to one another when you're placing the graphics, depending on how close the objects are horizontally and vertically.
The Subselection Tool
Shortcut: PC and Mac–A
The Arrow tool has a counterpart—the Subselection tool (also known as the white arrow). Remember that Flash is vector-based, so the main job of the Subselection tool is to select actual vector points of an item. This tool has no options. Again, we'll discuss this tool later in the chapter as we begin creating and working with our own artwork.
The Line Tool
Shortcut: PC and Mac–N
When drawing with the Line tool, you can create straight lines in any direction from the starting point. To start drawing a line, choose the Line tool in the Tools panel, click anywhere on the stage, drag the line toward the desired endpoint, and release the mouse. The Line tool has no options. However, the size and style of the stroke will determine the appearance of the line. You can change the stroke's properties in the Properties Inspector when the Line tool is selected in the Tools panel.
You can draw several line segments to make a shape, as shown in Figure 3.2.
)
Figure
3.2 The Line tool can be used to draw a triangle by connecting three different
lines. The Properties Inspector offers options for changing the line's
appearance.
To change the appearance of the stroke, you can select a color and size from the Properties Inspector. You also have a choice of styles—solid, dashed, dotted, ragged, stipple, and hatched—as well as options to customize each of these styles. Simply click the Custom button in the Properties Inspector with a drawing tool selected. Here's an explanation of each style option:
NOTE
Flash does not offer a way to save custom style settings. Also, all units for spacing and sizing options are in points. You can access the Stroke Style dialog box by clicking the Custom button in the Properties Inspector. When you click the button, the dialog box will appear, as shown in Figure 3.3.
Hairline. This stroke style draws one-pixel-wide strokes and remains one pixel, regardless of magnification or zoom. Often, when a document gets scaled, the vector lines will scale with it to preserve the proportions of the artwork. This is not an option in the dialog box but is available through the drop-down menu in the Properties Inspector.
Solid. This option is for drawing solid lines and strokes. The only adjustable attributes are the thickness, color, and sharp corners of the stroke.
Dashed. This choice generates a stroke with dashed breaks within the line. To change the length of the dash and the gap space between dashes, enter numeric values in the respective text fields in the Stroke Style dialog box. Color, thickness, and sharp corners are also adjustable attributes.
Dotted. Choose the dotted style if the desired effect is to have a stroke with evenly spaced dots along the line. This style has an option for changing the distance between the dots. Color, thickness, and sharp corners are also adjustable attributes.
Ragged. The ragged style creates random wavy lines with dotted separations. The Stroke Style dialog box offers options to change the pattern, wave height, and wave length. Color, thickness, and sharp corners are also adjustable attributes. Use a combination of all these styles for unlimited possibilities.
Stipple. This choice creates a stroke style to resemble that of an artist's hand- stippling technique. Dot size, dot variation, and density are options for changing the appearance of the stippling effect. Color, thickness, and sharp corners are also adjustable attributes.
Hatched. The hatched line style resembles an artist's hatched-line technique. The thickness attribute determines the thickness of the hatch line, which is independent of the global thickness setting. You also have options for spacing, jiggle, rotate, curve, and the length of the hatched lines. Of course, there are additional choices for global thickness, color, and sharp corners.
){kind=small}
Figure
3.3 The Stroke Style dialog box.
The Ink Bottle Tool
Shortcut: PC and Mac–S
The Ink Bottle tool is designed to change the color, style, and thickness of strokes. If you use the Eyedropper tool to sample the stroke appearance of any art in Flash, after the sample has been made, the Eyedropper tool will automatically take on all the characteristics of the sampled stroke. The Ink Bottle does not have any options, but you can choose the color, thickness, and style of the stroke using the Properties Inspector in conjunction with one of the vector drawing tools.
The Eyedropper Tool
Shortcut: PC and Mac–I
Use the Eyedropper (or Dropper) tool to select color values on the screen. If you are drawing a new object and prefer for the fill or stroke color to appear the same as any other value on the screen, simply use the Eyedropper tool to sample that color value. When you click the color value, it's automatically stored in the appropriate Ink Well tool in the Tools panel. If you choose a stroke color, all attributes of that stroke (including size, color, and style) will be sampled. If you are using the Eyedropper tool from the Tools panel, you are limited to sampling within the confines of the stage. If you are using the Dropper tool built into the Swatches panel, you can sample a color from any source on the computer screen.
The Pencil Tool
Shortcut: PC and Mac–Y
When drawing with the Pencil tool, you'll notice it uses a stroke color opposed to a fill color. You can change its stroke appearance by choosing a stroke style in the Properties Inspector. The Pencil tool has some interesting options that can aid in the final outcome of a drawing. These options are detailed in the following list and displayed in Figure 3.4:
-
Straighten. Choose this option if your goal is to draw a perfect circle, oval, square, rectangle, or arc. The sensitivity of how Flash determines a shape is set in the Preferences dialog box. You can access these preferences by choosing Edit, Preferences. For more information on preferences, refer to Chapter 2, "Getting Started with Flash MX 2004 Professional." Check out Figure 3.5 to see an example of drawing with Straighten turned on.
Smooth. Generally this option will smooth out any curvy lines.
Ink. This choice is for freehand drawing without Flash making adjustments to the lines.
)
Figure
3.4 Pencil tool options.
)
Figure
3.5 A circle drawn with each style.
TIP
When you're drawing with the Ink option selected, it may look as if some modification is happening to your lines when the mouse is released. Flash isn't making any adjustments to the curviness or straightness of the line; rather, it's antialiasing the edges of the line.
After the line has been drawn, you may feel that it needs to be smoother or straighter. This may aid in the visual appearance of the stroke, and you might actually reduce file size by reducing the complexity of the stroke. To make a line straighter, follow these steps:
-
Click the line with the Arrow tool. The line will be selected.
-
With the line selected, in the Options portion of the toolbar, as shown in Figure 3.6, choose the Straighten button.
-
Click the Straighten button as many times as needed to get the desired effect.
)
Figure
3.6 The Arrow tool's options.
The same method will work when smoothing a line.
The Rectangle Tool
Shortcut: PC and Mac–R
The Rectangle tool is used to create squares and rectangles. To create a perfect square, hold down the Shift key to constrain the drawn object's proportions to that of a square. One option the Rectangle tool has involves setting the corner radius to make rounded edges. If you click the Round Radius button in the Options section of the toolbar (or double-click the Rectangle tool in the toolbar), a dialog box will appear. In the text field, type in a numeric value between 0 and 999 that represents the corner radius.
TIP
Sometimes it is difficult to gage how much roundness you will want to put on your rectangle's corners in a numeric form, so while drawing the rectangle you can press and hold down the down-arrow key to increase the roundness, and press and hold down the up-arrow key to decrease the roundness.
Drawing and Coloring Rectangle Shapes
Here are the steps to follow to draw and color a rectangle shape:
-
Choose the Rectangle tool from the Tools panel.
-
In the Color portion of the Tools panel (or the Properties Inspector), choose a stroke color. If no stroke is desired, choose the first box in the top-right corner of the swatches, as shown in Figure 3.7.
-
If you would prefer to use a custom color, something other than a Web-safe color, click the button to the right of the No Stroke button to bring up the Color Picker. Inside the Color Picker are many different ways to view color in terms of organization.
-
Choose a fill color. All the same techniques in terms of color selection used for the stroke apply to the fill as well.
-
To create rounded edges, click the Round Rectangle Radius button in the Options section of the Tools panel.
-
Place the cursor in the stage; then click and drag until the rectangle is the desired size. If the goal is to create a perfect square, hold down the Shift key.
)
Figure
3.7 Choosing the No Stroke option.
NOTE
If you choose Snap to Objects from the options when you draw a rectangle, you'll notice it is easier to have a perfect square because your cursor will snap to a large circle around your cursor, as shown in Figure 3.8.
)
Figure
3.8 Drawing a square with Snap to Objects selected.
CAUTION
The higher the value entered in the Round Rectangle Radius dialog box, the more rounded the corners become. Avoid very large numbers, especially for smaller rectangles. If you do use a large number, you run the risk of turning your rectangle into a circle.
When using the Rectangle tool, you may notice some unusual behavior when it comes to moving objects. This is discussed in detail in the "Tips for Creating Graphics in Flash" section, later in this chapter.
The Oval Tool
Shortcut: PC and Mac–O
The Oval tool is used to create circles and ovals. To create a perfect circle, hold down the Shift key. This will constrain the drawn object's proportions to that of a circle. If Snap to Objects is selected in the options when you're drawing an oval, the shape will snap to a perfect circle when dragged at a 45-degree angle.
The Paint Bucket Tool
Shortcut: PC and Mac–K
The Paint Bucket is used to fill an item with a color or gradient. To choose a color or gradient, click the Fill Color tool of the fill swatch in the Tools panel or in the Properties Inspector.
After you select the fill color, move the Paint Bucket tool over an object and click it to change its fill color to the new fill color.
In the Options area of the Tools panel, notice that the Paint Bucket tool has a Gap Size option as displayed in Figure 3.9.
)
Figure
3.9 The Paint Bucket options.
Select the first choice, Don't Close Gaps, if there are certain areas in your artwork that shouldn't be filled.
The Close Small Gaps, Close Medium Gaps, and Close Large Gaps options all work in the same way. If you have complex drawings that need to be filled, you may want to choose one of these options. If you have Close Large Gaps selected and it doesn't seem to be working, either the gap is too large or there are too many gaps in your art.
The last option in the Tools panel is Lock Fill, which allows you to apply a gradient or bitmap fill consistently across multiple items.
Using Lock Fill to Apply a Gradient Across Multiple Objects
Here are the steps to follow to use Lock Fill to apply a gradient across multiple objects:
Draw four squares on the stage and align them using the Align panel. Space them out so that the entire stage is being used, edge to edge.
Choose the Paint Bucket tool in the Tools panel and be sure to choose the rainbow linear gradient in the fill swatch.
Click the Lock Fill button in the Options portion of the Tools panel.
Fill the first square, then the second, third, and fourth. You'll notice that the gradient is being applied as if the four squares are one continuous shape.
To see the different squares, fill each one with a gradient without the Lock Fill option selected.
-To apply a gradient across multiple items without using Lock Fill, simply choose all the items by drawing an invisible marquee with the Arrow tool or by Shift-clicking each object. Then click one of the items. You'll notice the gradient has applied color across more than one item. The effect, however, looks a bit different when compared to the Lock Fill effect.
If you want to fill the squares with a bitmap, choose File, Import, Import to Stage and search for the image on your computer. When the image is in Flash, highlight it and choose Modify, Break Apart. (For more information on importing bitmap graphics, see the section "Color Mixer", later in this chapter.)
The PolyStar Tool
Shortcut: None
New to the toolbar is the PolyStar tool. This tool is used to draw multisided polygons or multipoint stars. To select this tool, you click and hold down on the Rectangle tool in the toolbar. Then a submenu will appear as shown in Figure 3.10. 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, there is only one option in the Options section of the toolbar, the Snap to Object button, which works very similarly here as it does with the Rectangle and Oval tool. You can change the polystar characteristics in the Properties Inspector using the Options button. This will bring up the Tool Settings dialog box (see Figure 3.11) where you can choose either polygon or star, the number of sides (or points when drawing a star), and the star point size (which only affects stars).
NOTE
The maximum value of sides is 32, and the minimum is 3. And the maximum value for point size is 1, with a minimum value of 0.
)
Figure
3.10 Choose the PolyStar tool to draw multisided objects as well as stars
on the stage.
)
Figure
3.11 In the Tool Settings dialog box, you can choose settings for the PolyStar
tool.
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. Holding down the Shift key while drawing polystars will slow down the rotation and make it easier to control.
The Fill Transform Tool
Shortcut: PC and Mac–F
The Fill Transform tool is designed to change the appearance of an applied gradient or bitmap fill. This tool enables you to make adjustments to the direction, size, center point, and rotation of the gradient or bitmap fill.
Depending on the type of fill—radial gradient, linear gradient, or bitmap fill—the type of alterations that can be performed vary slightly. After you get some practice using the Fill Transform tool, it will be something you'll use quite often. In the next exercise, you learn how to go about modifying a radial gradient. These same principles apply to transforming a linear gradient. You'll save the bitmap fill for later in the chapter in the "Importing Bitmap Graphics" section.
Working with the Fill Transform Tool
Here are the steps to modify a radial gradient:
-
Draw a circle using the Oval tool (remember, to draw a perfect circle, hold down the Shift key on your keyboard). When choosing a fill color for the circle, choose one of the default radial gradients.
-
With the circle on the stage, select the Fill Transform tool in the toolbar. Notice that your cursor has changed into a arrow pointer with a small gradient icon to the bottom right.
-
Click in the center of the circle. This will activate the bounding transform handles, shown in Figure 3.12.
-
The top square handle will skew the gradient. Therefore, drag the skew handle out just a few pixels.
-
The center handle will change the radius of the gradient (radial gradient only). Drag this center handle out about 40 pixels.
-
The bottom handle will change the rotation of the gradient. There is no need at this point to rotate the gradient.
-
Drag the center circle handle toward the top-left corner of your shape. This will change the center point of the gradient.
-
Click outside the gradient bounding box to deactivate it. Our circle now looks like a 3D sphere.
)
Figure
3.12 Fill Transform bounding handles.
NOTE
Be sure to check out the instructional QuickTime movie on how to transform fills, located on this book's companion Web site, http://www.samspublishing.com.
The Brush Tool
Shortcut: PC and Mac–B
The Brush tool is a painting tool in Flash that offers several options for painting. It's important to note that the Brush tool uses a fill, as opposed to a stroke, like the other tools we've just looked at. The Brush tool can use solid colors, gradients, and even bitmaps to paint. The options in the Tools panel for the Brush tool are shown in Figure 3.13. The following list details these options:
)
Figure
3.13 The different brush modes for the Brush tool.
Paint Normal. Use this option to paint the fill color anywhere you drag the Brush tool.
Paint Fills. This option allows you to paint only fill colors (although it really should be called Preserve Strokes). Paint Fills can be a bit confusing, because it will paint empty parts of the stage. However, what it won't do is alter any stroke colors.
Paint Behind. Choose this option if you only want to paint an area underneath artwork already placed on the stage.
Paint Selection. This option allows the Brush tool to paint only in areas that have been selected.
Paint Inside. This option allows the brush to paint only in the interior section of the artwork. It will not paint or alter stroke colors. When using this option, be sure to start in the interior of the item; otherwise, the Brush tool will think the stage is the item to paint inside.
You can also change the size of the brush by using the Brush Size drop-down menu, shown in Figure 3.14. When choosing a brush size, be aware that brush sizes are always relative to the magnification of the document. For example, if you have a document magnified at 400%, and you select a certain brush size and then zoom out of the document to 100%, that same brush will appear smaller at the 100% document size than it did at 400% magnification.
)
Figure
3.14 The Brush Size drop-down menu.
In the Brush Shape drop-down menu, shown in Figure 3.15, you can select a brush shape or style. It consists of squares, ovals, rectangles, and many different angle brushes. When selecting a brush shape, keep in mind that the size of the brush will also play a big role in the final appearance of the brush mark.
)
Figure
3.15 The Brush Shape drop-down menu.
The last option for the Brush tool is Lock Fill. We discussed this option in detail in the section "The Paint Bucket Tool," earlier in this chapter. This instance of Lock Fill works the same way. Of course, to get certain effects, you will need to use this option with a combination of brush modes.
Finally, note that the Brush tool offers a Pressure option when a Wacom tablet is used. See the Wacom Technology Company's Web page at http://www.wacom.com for more information. A Wacom tablet is a pressure-sensitive drawing pad that gives the mouse a behavior like a traditional art pad and pencil.
The Eraser Tool
Shortcut: PC and Mac–E
The Eraser tool, used for erasing shapes on the stage, has a few options of its own:
Erase Normal. This option is the standard way of erasing content. It works exactly as you would expect: If you move the eraser over a fill or stroke color, it will be erased.
Erase Fills. This option only erases the fill color of objects, without harming the stroke color.
Erase Lines. Erase Lines only erases stroke colors and does not alter fills.
Erase Selected Fills. This option only erases items with fills that have been selected. Any fills not selected will not be harmed.
Erase Inside. Erase Inside only erases the interior color of the object in which you start erasing initially. This option will not erase anything outside the interior parameter of that object.
The Eraser's Faucet Option
Personally, I think the Faucet tool is great. The Faucet tool literally washes the color out of a fill or stroke when you click on it.
Finally, you can choose an eraser size and shape, such as a circle or square (similar to the Brush tool).
The Pen Tool
Shortcut: PC and Mac–P
The Pen tool allows you to define straight lines and smooth curves. To draw with the Pen tool, move the mouse and click successively. Each new point will connect with the previous point to create a line segment. To create a curved line segment, use your mouse to drag the point in the direction you want the curve. The length of the tangent will determine the arc of the curve.
The Pen tool has some preferences that need to be set in the Preferences dialog box. To access this dialog box, choose Edit, Preferences. Inside this dialog box, select the Editing tab. Here are the options you'll find:
Show Pen Preview. This option offers a preview of what the line segment will look like when an anchor is placed. If you're new to the Pen tool, this is a great option to check because it helps beginners get more comfortable with the behavior of the Pen tool.
Show Solid Points. With this option selected, the selected vector points will appear hollow, and the unselected points will appear solid. By default, this option is not selected, giving the opposite appearance (solid indicates selected points and hollow refers to unselected points).
Show Precise. There are two different views for the Pen tool. When using the Pen tool, you can either view the standard pen icon or choose Precise, which will display crosshairs. Checking this box will only change the default appearance of the Pen tool to Precise. This option is pretty useless, given that you can toggle between the two different views using the Caps Lock key.
The Pen tool also has several different options in terms of changing, adding, deleting, and transforming points. When these options are available, there is a slight difference in the appearance of the Pen tool's icon. The following list explains these differences:
Cursor 1. This cursor icon displays a small minus sign (-). This means that if you were to click a vector point, it would be deleted.
Cursor 2. This cursor icon displays a caret sign (^), which means that if you click a vector point, it will turn into a right angle.
Cursor 3. This cursor icon (+) adds a vector point to the existing line segment.
Cursor 4. This cursor displays a small x. This icon indicates there's no line segment present to edit. To avoid seeing this icon, be sure to have the mouse positioned directly over a line segment.
Cursor 5. When the Pen tool is over the first vector point placed, you'll see the small "o" icon, indicating that this will close the path or shape.
Cursor 6. When the Shift key is held down, the cursor icon changes into an arrow with a solid box. This indicates that you are moving the mouse over a line.
Cursor 7. When the Shift key is held down, the cursor icon changes into an arrow with a hollow box. This indicates that you are moving the mouse over a vector point.
After drawing a path with the Pen tool, you can edit the path using any of the pen icon cursor changes just explained, or you can use the Subselection tool. The Subselection tool allows you to change selected vector points and tangent lines. Remember that tangent lines change the degrees of the arc and the direction of the curve. Figure 3.16 shows an example of tangent handles.
The Free Transform Tool
Shortcut: PC and Mac–Q
This tool has several options for distorting, skewing, scaling, and rotating items in Flash.
With an item selected on the stage, choose the Free Transform tool in the Tools panel. Notice the bounding box around the item. If there isn't an item selected on the stage when the Free Transform tool is chosen, you will not see this bounding box. However, if you click an item with this tool selected, the bounding box will appear around that object.
The handles on the bounding box allow you to make all sorts of modifications to the object. The handles in the corner scale down the item, and holding down the Shift key will constrain the item's proportions. Just outside the corners, you can rotate the item. Using the handles on the side will scale it horizontally and vertically. Moving the cursor between handles will allow you to skew and distort the item.
)
Figure
3.16 Tangent handles.
The Free Transform tool also has several options in the Tools panel (see Figure 3.17). These options are discussed in the following list:
)
Figure
3.17 The Free Transform options.
Snap to Objects. This option will assist you when you scale the item either vertically or horizontally, but want to maintain the other scaling.
Rotate and Skew. This option rotates the item around the center point using the corner handles. Notice that you can move the center point to change the axis of rotation. It also allows you to skew the item using the handles on the sides.
Scale. This option automatically constrains the proportions of the item when you're using the corner handles. You can also scale the object horizontally and vertically.
Distort. This option moves the corner or edge points to distort the item by realigning the adjoining edges. If you drag a corner handle and hold down the Shift key on your keyboard, the edge will taper. Tapering moves the opposing corner in the opposite direction at an equal distance.
Envelope. This option offers the ultimate control in transforming an item. You adjust the points, and tangent handles modify the item. This option works with one or more selected items.
CAUTION
The final two options of the Free Transform tool—Distort and Envelope—only work with primitive items. If the artwork is a symbol, a grouped object, a video object, or text, it will be deactivated. In order to use these options, you must break apart the artwork by choosing Modify, Break Apart.
To flip an item horizontally or vertically, it's best to use the options under the Modify menu. To flip an object, be sure it's selected and then choose Modify, Transform, Flip Horizontal or Vertical.
The Text Tool
Shortcut: PC and Mac–T
Using text in Flash is in some cases as simple as using text in a word processing application. In other cases, it's about as difficult to use as HTML text. Remember, in order for text to be displayed on an end user's machine, the proper font must be present on that user's system. We're going to take a look at some obstacles to using text and how to remedy any potential problems. We are also going to review the editing features Flash has to offer.
Text can be used for many different tasks in Flash—from something as basic as having a word spelled out on a page, all the way to being a container for variable information. This is why our discussion of the Text tool is broken into sections. Let's start at the editing features.
Text Tool Editing Features
Select the Text tool in the Tools panel. The Text tool has no options. However, if you take a look at the Properties Inspector, you'll see that it's loaded with goodies for changing the appearance of your text, as shown in Figure 3.18.
){kind=small}
Figure
3.18 Text tool's properties.
The most obvious option in the Properties Inspector is the one for changing the typeface. In the drop-down menu, you'll see a list of the available fonts installed on your system. Along with this option is the ability to change the font size. To change the font's point size, either type in a value or use the slider to increase or decrease the size. To change the color of the text, use the Text (fill) color tool to the right of the Font Size field. Of course, you also have keyboard options for making the text bold (Ctrl/Cmd+Shift+B) and italic (Ctrl/Cmd+Shift+I).
To begin typing in Flash, choose the Text tool and click where you want the text to appear on the stage. As you type, the text box will resize to accommodate all the text.
The other option, when the Text tool is first selected, is to click and drag a bounding text box on the stage. This will create a text block that will not permit any text to resize its dimensions. As you type, the text will automatically wrap and make breaks whenever and wherever necessary to fit inside the defined text box. You can always resize the text box by grabbing the handle in the top-right corner and dragging to the new desired size (see Figure 3.19).
CAUTION
You must use the text tool to resize the text field; if you use the Free Transform tool, it will not only resize the text field, but also stretch the text inside it.
Tracking and kerning options are also available (see Figure 3.20). What you may find tricky, however, is the fact that both options are accessed under the same slider. To adjust the tracking of the text, make sure either the entire word is highlighted in black or the text has been selected with the Arrow tool and a blue box is visible around the type.
You can type in a value, where positive numbers increase the space between the letters and negative values decrease the space. When this is done on an individual basis, such as to adjust the space between the letters A and V instead of a whole word, it's known as kerning.
)
Figure
3.19 Resizing a text box.
)
Figure
3.20 Adjusting the tracking.
To adjust the kerning between two characters, highlight both characters and use the same text box or slider to input a positive or negative value; the results are shown in Figure 3.21. Many times when you're typing this value, it is beneficial to have the Auto Kern check box selected. This gives you a good chance of returning some acceptable results—and at the very least, it offers a good starting place.
)
Figure
3.21 Adjusting the kerning.
Here are some important shortcuts for adjusting the kerning and/or tracking:
Decrease spacing by half a pixel. Cmd+Option+left arrow (Mac) and Ctrl+Alt+left arrow (Windows)
Decrease spacing by two pixels. Cmd+Shift+Option+left arrow (Mac) and Ctrl+Shift+Alt+left arrow (Windows)
Increase spacing by half a pixel. Cmd+Option+right arrow (Mac) and Ctrl+Alt+right arrow (Windows)
Increase spacing by two pixels. Cmd+Shift+Option+right arrow (Mac) and Ctrl+Shift+Alt+right arrow (Windows)
The Properties Inspector also has options for using subscripts and superscripts. You use subscripts to type something like "H20," where the small character is just below the baseline, and you use superscripts for something like "Macromedia," where the small character is flush with the tops of the ascenders (like the line on a lowercase d).
Setting Alignment and Margins
With the Text tool selected, inside the Properties Inspector, just to the right of the Italic button is another button that enables you to change the direction of the text. The three choices are Horizontal (default left to right), Vertical Left to Right and Vertical Right to Left. Also available is the Rotate option, to rotate the text after the direction has been changed from horizontal. Depending on the direction of the text, the next four buttons provide options for justifying the text.
The alignment options include top/left justification, center, right justification, and full justification. These options predetermine the text if a justification option is chosen before the text is entered. If the text has already been entered, highlight the desired text block and then apply the desired justification.
Click the Format button for the following additional formatting options (see Figure 3.22):
)
Figure
3.22 Format options.
Indent. Enter a value in points to determine how much the first line of every paragraph should be indented. This option only works with predefined text blocks.
Line Spacing. This option controls the space between lines in text blocks in points (this is known as leading). Positive numbers increase the amount of space between lines; negative numbers decrease the space.
Left Margin. This option creates a margin or space on the left side of a text block in points.
Right Margin. This option creates a margin or space on the right side of a text block in points.
Device and Embedded Fonts
In Flash you can use device fonts. If you decide to use a device font, you can save a good amount of file size in your final SWF file. Included in the file when Use Device Fonts is enabled are items such as the name of the typeface, the family of the type, and some other information to help Flash Player evaluate whether the end user has the font. To enable Use Device Fonts, make sure the text field is set to Static and, in the Properties Inspector, check the Use Device Fonts box.
If the end user does not have the typeface installed on his or her system, the Flash Player will know to replace it with a serif or sans-serif typeface. Device fonts are best used with smaller text and very common typefaces. If the text is large, the best bet is to break apart the text so that it becomes a shape.
Another option at the bottom portion of the Properties Inspector includes making the text selectable and creating hyperlinks. Sometimes in Flash you may want important information on a Web site to be selectable so that the end user can copy that information. You may also want some text to be hyperlinked to additional HTML documents. You can create a hyperlink by typing in a link in the Hyperlink text box at the bottom of the Properties Inspector.
Alias Text
A new feature for text fields in Flash MX 2004 is the Alias Text button found in the Properties Inspector when the Text tool is selected. This new feature allows text at smaller sizes to become more readable and is available in static, dynamic, and input text fields for the Flash 7 Player, but only in static text fields for earlier player versions.
This feature will affect text at all sizes, but is most effective at sizes 12 and smaller.
So far, all we have explored is static text. You'll notice a couple of other choices in the drop-down menu toward the top-right corner of the Properties Inspector. These choices—Dynamic and Input Text—are discussed in great detail in Chapter 17, "Working with Text."
The Zoom Tool
Shortcut: PC and Mac–Z,M
The Zoom tool allows you to zoom in to a subject as much as 2000%. This helps when you're performing precise work. When you click the Zoom tool, it always zooms in twice as much as the current magnification. To zoom out, hold down the Option (Mac) or Alt (Windows) key and click the mouse.
Double-clicking the Zoom tool will reset the magnification to 100%. Here are some keyboard shortcuts you may want to keep in mind:
To zoom in, use Cmd (Mac) or Ctrl (Windows) with the plus key.
To zoom out, hold down Cmd (Mac) or Ctrl (Windows) and the hyphen key (-) at the same time.
Remember, there is also the Zoom drop-down menu docked just above the timeline.
The Hand Tool
Shortcut: PC and Mac–H
The Hand tool is used to move around the stage. When zoomed in to a particular part of a Flash movie, you may find it difficult to navigate to different areas of the movie. This is where the Hand tool comes in, well, handy. You can literally move the stage: Just click with the Hand tool and drag until you see the desired location in which you want to work.
Also, if you double-click the Hand tool in the toolbar, the stage will size to its maximum size while still completely visible, and it will also become centered.
TIP
The spacebar acts as a toggle to turn the Hand tool on no matter what tool you are currently using.
The Lasso Tool
Shortcut: PC and Mac–L
The Lasso tool is a selection tool, and it makes the most sense to use this tool with bitmaps (which we discuss later in this chapter). Use the Lasso tool just as you would any drawing tool. To make a clean, precise selection, try to close the path the lasso makes. Otherwise, the results can be less than predictable. The Lasso tool has some options at the bottom of the Tools panel. The first is the Magic Wand tool; its settings are shown in Figure 3.23. The Magic Wand tool selects an area or value of pixels based on its set tolerance. You can set the tolerance by clicking the button to the right of the Magic Wand tool. The higher the tolerance, the more values the selection will consider to be the same.
){kind=small}
Figure
3.23 The Magic Wand settings.
The Smoothing option is for determining how smooth the selected edge should become. Here are the choices:
Smooth. Rounds the selection edges.
Pixels. The selection is wrapped around the rectangular edge of similar color pixels.
Rough. The selection becomes even more angular than with the Pixels option.
Normal. Creates a selection that is a bit softer than Pixels but not as soft as the Smooth option.
The last option is the Polygon Lasso tool. Use this tool for angular or geometric type shapes. See Figure 3.24 for the Lasso's options.
)
Figure
3.24 The Lasso tool's options.