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.
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.
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.
Accessing Custom Colors Using the Color Picker
Here are the steps to follow to access custom colors using the Color Picker:
Open the fill swatch and choose the color wheel in the top-right corner of the palette. This will open the Color Picker dialog box. In Windows, the Color Picker dialog box looks like an overgrown Color Mixer panel. You have the color ramp, where you can select a custom color and even add that custom color to a custom swatch within the dialog box. The Mac, however, is quite different. (Notice on the Mac that if you move the dropper away from the color swatches, you can sample any color on your computer screen.) You can see the Mac RGB Color Picker in Figure 3.12.
By default, the RGB Color Picker will appear. In this dialog box, you can choose a color by moving the percentage sliders from left to right. Moving them to the right will increase the amounts of the corresponding colors to higher percentages.
Move the Red slider to 100%.
Move the Green slider to 0%
Move the Blue slider to 0%. Notice the color difference between the original color and the new color. The end result is a pure red. Oftentimes you'll need to refer to some numbers generated during content development so that you can match certain pieces or areas of artwork.
Figure 3.13 shows the Name Color Picker window on Macintosh.
Move the slider next to the color ramp to reveal a section of colors.
Choose the desired color. Notice that all these colors have a corresponding hexadecimal value. These hexadecimal values are Web-safe colors. A Web-safe color is a color commonly shared between a Macintosh and a Windows machine if you drop them down to their lowest 256, 8-bit color display. There are only 216 Web-safe colors.
Figure 3.14 shows the HSV Color Picker window on the Macintosh.
Enter a value for the hue in the Hue Angle field.
In the Saturation field, type in a percentage for saturation.
Type in a number to represent the brightness percentage of the desired color in the Value field. (Value behaves the same as brightness.)
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.
If you are new to Web development, be aware that even though 216 colors are commonly shared between the Mac and Windows operating systems, a Mac's colors are generally brighter, and the Windows colors are commonly darker. However, Using Web-safe colors seems to be less and less an issue with modern-day machines displaying well over a million colors.
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 animationsperhaps 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.
With all these options in the Color Mixer, you may find yourself with many custom colors. After you've added these colors to the Color Swatches panel, it maybe a good idea to save them as a 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.
Modifying a Gradient
Here are the steps to follow in order to modify a gradient:
Draw a circle with no stroke and a radial gradient selected for the fill.
To change the gradient's colors, highlight one of the makers in the gradient ramp located in the Color Mixer panel.
With the triangle selected, open the Ink Well tool above the ramp in the Color Mixer panel and choose a new color. Notice that the gradient is automatically updated.
Select the other marker and change its color as well.
To edit this gradient further, you can add even more color by adding additional markers to the gradient ramp. To create a new midrange color in the gradient, simply click in an empty area just underneath the gradient ramp. Notice the new marker with a midrange color.
Change the new marker's color by using the Ink Well tool in the Color Mixer panel.
You can add as many new markers as necessary to achieve the desired effect. To remove any unnecessary markers, click and drag them down and away from the color ramp.
Once the gradient is complete and you feel you might use the new gradient color later down the road, you may want to save it in your Color Swatches panel. Select the submenu in the Color Mixer panel and choose Add Swatch.
Be sure to check out the instructional QuickTime movie on how to create custom gradients located on this book's companion Web site, http://www.flashmxunleashed.com.
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 fillradial gradient, linear gradient, or a bitmap fillthe 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.
Working with the Transform Fill Tool
Here are the steps to follow for this exercise:
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 Transform Fill tool in the toolbar. Notice your cursor has changed into a white arrow with a small gradient icon to the bottom left.
Click in the center of the circle. This will activate the bounding transform handles, shown in Figure 3.18.
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 of the gradient bounding box to deactivate it. Notice our circle now looks like a 3-D sphere.
Figure 3.18 Transform Fill bounding handles.
Be sure to check out the instructional QuickTime movie on how to transform fills, located on this book's companion Web site, http://www.flashmxunleashed.com.
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 greatit'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.
The final two options of the Free Transform toolDistort and Envelopeonly 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, the artwork must be broken apart 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
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 Flashfrom 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 resultsand 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 "H20," 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 choicesDynamic and Input Textare 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.
The spacebar acts as a toggle to turn the Hand tool on no matter what tool you are currently using.