Creating Graphics in Flash

This chapter is from the book

Macromedia Flash MX Unleashed

Learn More Buy

This chapter is from the book

This chapter is from the book 

Macromedia Flash MX Unleashed

Learn More Buy

Creating Custom Colors and Gradients

Conveniently, Macromedia has incorporated the Web-safe color palette into the swatches in Flash. Oftentimes, however, you may need to use a color located on a different swatch, or you may want to create gradients using your own color choices.

Therefore, we'll take a look at a couple new panels in Flash. The first is the Color Swatches panel; the second is the Color Mixer panel. Each can be used to select different colors; however, the Mixer panel gives you precise control over certain color properties.

Color Swatches

In the Color Swatches panel, shown in Figure 3.10, you can sort colors, load different swatch sets, and even load bitmap graphics. To import different swatch sets, click in top-right corner of the Color Swatches panel to access the drop-down menu. Choose Add Colors, find a Flash color set file (typically located in your Flash MX program folder), and select it. This will add any additional swatch sets to the panel. However, if you choose Replace Swatches, all existing swatches will be replaced with the new loaded set.

Figure 3.10 The Color Swatches panel.

If you've added and arranged this panel in a way in which you feel very comfortable, consider making it the default. In the submenu, choose Save as Default so that every time you open Flash, these color swatches will be loaded in the panel.

However, if you feel like the swatch set that you've customized is good only for certain occasions, you can simply save that swatch set as a swatch. In the submenu, choose Save Colors, which will launch the Export Color Swatch window. Name the color set and save it in an easily accessible location, such as in the Flash program folder under First Run, Color Sets.

Color Mixer

The Color Mixer panel is a bit more robust in comparison to the Color Swatches panel. Notice how much the Color Mixer panel offers in Figure 3.11.

Figure 3.11 The Color Mixer panel.

The Color Swatches panel is best for accessing stored colors. The Color Mixer panel, on the other hand, is used in customizing colors and gradients. Once you've created these custom colors, you can store them in the Color Swatches panel. Therefore, these two panels work well together.

At first glance, you'll notice that the Color Mixer panel has a nice color ramp from which you can choose colors. As you take a closer look, you should also notice the many different ways to come up with certain colors.

By default, you can type in numbers for the red, green, and blue values. This can be useful, especially if you're working with a graphics application such as Fireworks or Photoshop to create artwork. If you need to match a certain color element in that graphic, you can get an RGB or HSB readout in the other program and type in those here in this swatch. You can easily change the RGB values to display hue, saturation, and brightness by choosing the appropriate option in the Color Mixer's submenu.

Figure 3.12 The RGB Color Picker on the Macintosh.

Figure 3.13 The Name Color Picker on the Macintosh.

Figure 3.14 The Hue, Saturation, and Value (HSV) Color Picker on the Macintosh.

The slider underneath the color wheel will adjust the value. Moving the crosshairs around in the color wheel will adjust the hue angle as well as the percentage of the saturation.

The Crayon Color Picker allows you to choose a color with a specific name. These colors are not necessarily Web-safe colors. The Crayon Color Picker offers an assortment of nicely organized, easy-to-find colors as shown in Figure 3.15.

Figure 3.15 The Crayon Color Picker on the Macintosh.

The CMYK section is a color mixer that uses the common four-color print process of cyan, magenta, yellow, and black. As mentioned earlier, Web-safe colors are becoming less of an issue. However, you could find yourself in a situation in which your company wants a CMYK color to be used throughout its Web site. Commonly, this happens with logos. To keep in line with company standards, you may choose to use the exact colors printed in the logo. Ultimately, this will result in a consistent look throughout the Web site. Refer to Figure 3.16 for the CMYK Color Picker.

Figure 3.16 The CMYK Color Picker on the Macintosh.

Changing a Color's Alpha

A great feature of Flash is the ability to change the alpha of a color. The Alpha setting controls how opaque or how transparent a color will be. The default is set to 100% but can be lowered all the way down to 0%. This can be useful in animations—perhaps you'd like for an object to fade in or out, or you may want an item to cross over another item, in which case you may want to see the item underneath.

To change a color's alpha, choose the desired color in the fill swatch. Next, use the slider to the right of the Alpha field to lower the percentage of the alpha. You may also type in a value in the Alpha field. The lower the alpha percentage, the more transparent the color will become.

Once the color has been set, you can use this new transparent color just as you would any other color. In fact, you can even save it in the swatch set.

Saving a Color to a Swatch

It's quite simple to save any custom color you've created or selected. With the custom color in the fill or stroke swatch selected, move your cursor into the Color Swatches panel. When your cursor is in an empty area of the swatch, notice that it turns into a Paint Bucket tool. Click an empty area and notice that the color has been added to fill the empty area with the selected fill color. You can also add a color by choosing a color in the Color Mixer panel, by activating the submenu and choosing Add Swatch.

Modifying and Creating a Gradients

The Color Mixer panel is an area where you can modify existing gradient colors by changing, adding, or deleting the colors that make up any given gradient. When you have a gradient selected in the fill swatch, notice the new options in the Color Mixer panel.

Notice in Figure 3.17 that the drop-down menu contains choices for a radial gradient and a linear gradient. Also, take note at the new color ramp for the gradient. Each triangle marker in the ramp is a color that will be represented in the gradient. If you're working with a simple two-color gradient (for example, from white to black), these two colors will gradually intersect one another.

Figure 3.17 The Color Mixer panel with a gradient as the active fill.

The Transform Fill Tool

The Transform Fill tool is designed to change the appearance of an applied gradient or bitmap fill. This tool gives you the ability 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 a bitmap fill—the type of alterations that can be performed vary slightly. After you get some practice using the Transform Fill 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. Note that you'll save the bitmap fill for later in the chapter in the "Import Bitmap" section.

Figure 3.18 Transform Fill bounding handles.

The Brush Tool

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. Notice the options in the Tools panel for the Brush tool, as shown in Figure 3.19. The following list details these options:

Figure 3.19 The different brush modes for the Brush tool.

• Paint Normal. Use this option to paint the fill color anywhere you move the Brush tool with the mouse button pressed.

• 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.20. When choosing a brush size, be aware that they are always relative to the magnification of the document. For example, if you have a document magnified at 400 percent, and you select a certain brush size and then zoom out of the document to 100 percent, that same brush will appear smaller at the 100-percent document size than it did at 400-percent magnification.

In the Brush Shape drop-down menu, shown in Figure 3.21, 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 the brush mark.

Figure 3.20 The Brush Size drop-down menu.

Figure 3.21 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 tradition art pad and pencil.

The Eraser Tool

The Eraser tool is, funny enough, used for erasing. It's a handy tip to keep in mind. If you double-click the Eraser tool in the Tools panel, you'll see that it does in fact have some options:

• 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 you start erasing in 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—it's just a poor naming choice by Macromedia. The Faucet tool literally sucks the color out of a fill or stroke.

Finally, you can choose an eraser size and shape, such as a circle or square.

The Pen Tool

The Pen tool was new to in version 5. This 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, when clicking the mouse 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 preference that needs 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 once an anchor is placed. If you're new to the Pen tool, you should note that this is a great option to have checked because it helps beginners get more comfortable with the behaviors of the Pen tool.

• Show Solid Points. With this option, the appearance of 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, seeing 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. Notice that 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. Notice that 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 Refer to Figure 3.22 to see an example of tangent handles.

Figure 3.22 Tangent handles.

The Free Transform Tool

The Free Transform tool is a new tool in Flash MX. 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, you'll notice 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. 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.

Notice that the Free Transform tool also has several options in the Tools panel (see Figure 3.23). These options are discussed in the following list:

Figure 3.23 The Free Transform options.

• Rotate. This option rotates the item around the center point. Notice that you can move the center point to change the axis of rotation.

• 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.

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

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 MX 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. You'll notice that 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.24.

Figure 3.24 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 Ink Well tool to the right of the Font Size field. Of course, you also have the 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 beaks 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.25).

Figure 3.25 Resizing a text box.

Tracking and kerning options are also available. See Figure 3.26. 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 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.26 Adjusting the tracking.

To adjust the kerning between two characters, have both characters highlighted and use the same text box or slider to input a positive or negative value, as shown in Figure 3.27. 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.27 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 a 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 such as "H₂0," where the small character is just below the baseline, and you use superscripts for something such as "Ti," where the small character is just above the baseline.

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 gives you the ability to change the direction of the text. The two choices are Vertical Left to Right and Vertical Right to Left. Also available is the Rotate option, to rotate the text once 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.28):

Figure 3.28 Format options.

• Indent. Enter a value 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 (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.

• Right Margin. This option creates a margin or space on the right side of a text block.

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 san serif typeface. Device fonts are best used with smaller text and very common typefaces. Device fonts will not antialias, so they tend to look better at smaller sizes. If the text is large, the best bet is to break apart the text so that it becomes a shape.

It also important to note that if you have a text block and you wish to scale, skew, distort, or apply any type of transformation, the editability of the text is preserved.

The final options in the bottom portion of the Properties Inspector include 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.

So far, all we have explored is static text. You'll notice in the drop-down menu toward the top-right corner of the Properties Inspector a couple of other choices. These choices—Dynamic and Input Text—are discussed in great detail in Chapter 9, "Animation Techniques and Digital Video."

The Zoom Tool

The Zoom tool allows you to zoom in to a subject as much as 2000 percent. This helps when you're performing precise work. When you click the Zoom tool, it always zooms in twice as much as the magnification you're currently at. 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 percent. 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 below the timeline.

The Hand Tool

The Hand tool is used to move around the stage. When zoomed in to a particular part of the 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.