Controlling Color

Choosing colors in Flash is a matter of personal choice. You can use any color or color combination you want. In the following sections you'll learn how to create and save color swatches to easily create customized color palettes for movies. This will help you ensure a color theme is maintained throughout a Flash Movie or an entire site. You'll also see how to create and control gradients.

Creating Solid and Gradient Swatches

In Hour 2, "Drawing and Painting Original Art in Flash," anytime you wanted to color a line or fill, you selected the swatch of your choice from the Fill Color or Stroke controls in the Tools panel or Properties panel. Clicking the fill color exposes all the swatches that are currently available. By default, only 216 "web-safe" colors are available. If your computer's display can show only 256 colors (that is, "8 bit"), it is recommended that you use only colors within the web-safe selection of 216 colors. The remaining 40 colors are used in the browser's buttons and menus for different platforms and may not display as expected. Most likely, your users will not be limited to 256 colors, so this topic might be best for a history book. You can create any color you want.

Creating a custom color swatch involves two basic steps: using the Color Mixer panel to pick a color and then saving it as a swatch. This process is easy, but it's still worth stepping through carefully the first time. In the following task, you'll create a custom color by using both the Color Mixer panel and the Swatches panel.

Try It Yourself: Create a Custom Color and Swatch

In this task you'll look at several ways to create colors and then save them as swatches for use later. Here are the steps to follow:

1.	Make sure both the Color Mixer panel and the Swatches panel are visible.
2.	In the Color Mixer panel, click the color picker, shown in Figure 5.1, and drag as you move through all the colors. Although this choice of colors isn't infinite, there are many more than 216 variations. Figure 5.1. Selecting a color from the Color Mixer panel requires that you click the color picker square.
3.	You should notice as you move through the color picker that the numbers in the RGB fields (for red, green, and blue) change. Colors are mixed from 256 shades of the colors red, green, and blue, with numeric values 0 to 255. These numeric values can be particularly useful. For example, a company that wants its logo colors to remain consistent can provide specific RGB values.
4.	Another way to select a color is to sample it from somewhere else, even from outside Flash. For example, to use the exact shade of blue used on the Sams website, point your web browser to www.samspublishing.com and resize the Flash application so that you can see both at the same time.
5.	In the Mixer panel or Tools panel, click and hold the fill color. As you drag, move to the website in the background (see Figure 5.2). The current fill color changes to exactly the same color when you let go. Figure 5.2. Sampling a color from outside Flash is possible. On the left side of the screen, a web page is positioned for sampling.
6.	Now that you've created a new color, you could use it immediately by selecting the Brush tool and trying it out. Instead of trying it now, save it as a swatch so you can easily select it later, without using the Color Mixer panel. In the Color Mixer panel's options menu select Add Swatch . This adds the current color to the bottom of the Swatches panel. Another way to add a swatch is by enlarging the Swatches panel and then clicking underneath all the existing swatches. By the Way: The Panel Options Menu Remember that each panel has a subtle options menu available at the top right of its title bar.
7.	Scroll to the last color in the Swatches panel to find the new color. You can also find the color anytime you click to select a color for your fill color or stroke color (see Figure 5.3). Figure 5.3. After a swatch is added, it appears almost everywhere as a fill color, a stroke color, and a text color.

You've seen a couple ways to select colors and one way to save a swatch. Even though we added a swatch for a custom color selected from the Web, it's also convenient to save any color even one for which there is already a swatch. For example, if you're using the same orange color repeatedly, you don't have to remember it's the one in the 18th column and 7th row of the Color Swatches panel. Just save a swatch and it will be one of the few swatches in the last row. I often create a whole row of black swatches (21 across) just so I can easily see where my custom swatches begin.

In the preceding task you sampled a color and added it to the swatches. You can also enter the exact RGB if you know it. Alternatively, you can use HSB (for hue, saturation, brightness) if you change the setting in the color Mixer panel's options menu. Also, the Hex value always appears under the color picker. In addition, that same editable Hex field appears in the color swatches that pop up next to the fill color or stroke color (in the Tools panel or Properties panel).

Finally, notice that for any color setting, there's an option for the percentage of alpha. The lower this percentage, the more transparent the color will be. This is convenient; however recall from Hour 4 that you can also simply apply the Alpha color effect on a symbol instance. That's not the same thing unless the symbol is all one color. But I'm pointing this out because the exact appearance of a color changes when you modify the alpha. If the color is in your client's corporate logo, you probably don't want to change its alpha.

By the Way: Color Systems

There are several ways to describe color. Your monitor has three color guns that project red, green, and blue, respectively. Using RGB to describe a color tells each gun how much of its color to project. With 256 shades of color for each gun (0 255), practically any color can be created by mixing the three guns (16.7 million colors or so). Even though RGB may be the most intuitive color system, other systems exist that are not better or worse. Consider that the range of 0 255 used in RGB means nine characters are necessary (three for each color because the number 255 has three digits).

The Hex system was developed to describe RGB by using only six characters. Hex uses only six characters by extending the base 10 numbering system (which has only 10 characters, 0 9) to a base 16 system (0 9 plus A, B, C, D, E, and F). The result is that red, green, and blue each get two characters. For example, FF0000 is pure red (the highest value for red, FF, and no green or blue). Magenta is FF00FF (a mix of red and blue). In Flash you'll see two designations of a value that is presented in Hex: the prefix 0x, as in 0xFF000, and the more standard prefix #, as in #FF0000. HTML also uses the Hex system to describe colors.

Still another system HSB uses the three factors Hue (think angle in a color wheel), Saturation (how much chroma the color has or how rich it is), and Brightness (or how much white as if you're adding white to a paint color).

There's no difference in the resulting color when you use any system: RGB, Hex, or HSB. For example, in the previous example, the blue I sampled had 0,0,102 (when expressed in RGB) which is identical to saying #000066 in Hex. It's almost like the difference between English and Spanish: You can say "red" or "rojo," and the result is the same. I find Flash's Color Mixer panel a nice way to get a feel for the differences. You can select a color, use the options menu to change the setting from RGB to HSB, and then view the results.

Even though the process you just learned for creating swatches is time-consuming at first, it can really help you down the line. For instance, although swatches are saved only with the current Flash file, after you've taken the time to create custom swatches, you can save them as a Flash Color Set file. From the Swatches panel's options menu, you select Save Colors. The file that you save can be used with other files or by other team members. To load colors that have been saved this way, you select Replace Colors from the Swatches panel's options menu. (Notice that the feature is called Replace, not Add so it will replace any custom colors you've already created.)

No doubt you've noticed that the fill color can be a gradient. You'll see both radial and linear gradients in the default color swatches any time you click to specify the fill color. In the following task, you'll learn how to create your own custom gradient.

Try It Yourself: Create a Custom Gradient

In this task you'll create a custom gradient. This task requires that the Mixer is fully expanded and that the Swatches panel is present. Follow these steps:

1.	Expand the Color Mixer panel and arrange the Swatches panel so that the two panels are not docked to each other. (If they're grouped together, just use the options menu in the Color Mixer and select "Group Color Mixer with, New panel group.") Click the bucket icon in the Color Mixer Panel in order to define a gradient for the fill portion. (You can actually set a gradient for both the fill and the stroke separately.)
2.	Select Linear from the Type drop-down list. Notice that the Color Mixer panel changes in several ways. A sample gradient appears in the color picker area; two little triangle arrows appear at each end of the gradient sample (which you'll see lets you edit the color at either end); and the Overflow drop-down menu appears from which you can set the gradient to appear once (called "extend"), "reflect" (meaning it goes from the first color to last color then back to the first, and so on), or "repeat" (meaning it goes from the first color to the last then first to last again, and so on). (See Figure 5.4.) Figure 5.4. Gradient overflow options are shown visually in the drop-down menu in the Color Mixer panel.
3.	Either arrow (indicating the end of a gradient range) can be edited. The one with a black triangle indicates that it's the one being edited currently. Click the one on the left, and the pointer head changes to black. Now edit this starting color by clicking to select a color of your choice in the Color Mixer panel's color picker, as shown in Figure 5.5. Be sure to move the brightness slider, or your color may remain black. Figure 5.5. With the left side of the gradient selected, you can use the Color Mixer panel to change the color.
4.	Select Radial Gradient from the Fill Style drop-down list, and you see the Color Mixer panel change again but only in that the gradient sample is oval.
5.	Click the pointer on the right side of the gradient and then select a bright blue color. Remember that simply clicking in the color picker only selects a hue; you probably need to raise the brightness (by clicking in the white-to-black vertical gradient). You should now have a radial blend that goes from yellow to blue.
6.	To add more colors to the gradient, click underneath the gradient definition bar in the Color Mixer panel (the short wide sample gradient). New pointers appear, and you can move them and edit their colors. To remove a color, drag the pointer down (not left or right).
7.	To save this gradient in your Swatches panel, either select Add Swatch in the Color Mixer panel's options menu or just click in the Swatches panel to the right of the gradients that are already saved.

Now that you have a custom gradient, you'll learn how it can be used in a movie.

Using and Transforming Gradients

Whether you use the default gradients or create your own (as you did in the previous task), there's more to using gradients than simply selecting one of your choice for the fill or stroke colors. The Gradient Transform tool gives you some powerful ways to edit the precise look of your gradients.

It's interesting that the Gradient Transform tool does nothing but edit gradients already applied to a fill or stroke on stage that is, it doesn't create anything. If you select the Gradient Transform tool, then select an existing gradient, you're given handles that let you adjust the attributes of a gradation. You can adjust the falloff rate, center point, rotation, and (in the case of radial gradients) the shape and focal point. Also, when you create fills that use a gradation such as when you use the Bucket tool you have an option called Lock Fill. While Lock Fill is selected all the shapes you fill are part of the same gradient. If that gradient goes from black to white, the transition is spread out through all the objects. If Lock Fill is not selected, each shape repeats a single gradient from black to white. In the following task you'll practice using the Gradient Transform Tool and the Lock Fill option.

Try It Yourself: Transform Attributes of Gradients Used in a Movie

In this task you'll explore using the Lock Fill option and the Gradient Transform tool to gain full control of gradients. Follow these steps:

1.	Select the Rectangle tool, make sure Object Drawing is deselected in the options area, select a solid fill color, and draw two squares close together. Deselect everything by pressing Esc.
2.	Select the Paint Bucket tool and a radial gradient from the fill color swatch (the white-to-black default is fine).
3.	Make sure the Lock Fill option is not selected, as shown in Figure 5.6. Click once in each square to fill it with the radial fill. Both squares have the entire radial effect from white to black. This is the normal mode. Notice that the radial gradient centers around where you clicked. Continue to click in different locations within each square to see how the center of the gradient appears where you click. Figure 5.6. Lock Fill is not selected.
4.	Click once near the edge of a square that borders the other square. Click Lock Fill. Now the last fill you made will define the start of all subsequent fills because Lock Fill has been turned on. (Although it's not required, I encounter fewer problems if I first fill one shape and then turn on Lock Fill before continuing.)
5.	Click the other square, and you should notice that the gradient continues from where it started in the first square that's the effect of Lock Fill. Also, if you click the first square again, the center point of the gradient remains locked.
6.	Now select the Gradient Transform tool to edit the fills you've made. With this tool selected, you can edit only fills that are already on the Stage.
7.	Click the fill of one of the squares, and several handles appear, as shown in Figure 5.7. You can now move the gradient's center. The handles on the edge let you change the shape of the radial gradient, the falloff rate, focal point, and the rotation. Figure 5.7. You can use the Gradient Transform tool on this gradient, which spans multiple shapes because Lock Fill was selected.
8.	You'll probably find these handles to be very intuitive, but you should experiment with them a little bit. Click and drag the Move handle to change the center point of the fill. (Notice that in Figure 5.8 there are six handles that all change your cursor.) Figure 5.8. The different features of the Gradient Transform tool have different cursors.
9.	Click and drag the Reshape handle to make the gradient an ellipse rather than a perfect circle. Notice in Figure 5.8 that the Reshape cursor is similar to the cursor you see when you scale an object.
10.	The Focal Point handle lets you change the symmetry of the radial gradient. The effect is similar to the Reshape handle, however the Focal Point identifies the hot spot within the entire shape. You can think of the Focal Point handle adjusting how oblong the gradient should appear.
11.	Use the Falloff handle to change the rate at which the gradient changes from white to black. A custom Falloff cursor is shown in Figure 5.8.
12.	Adjust the rotation of the reshaped gradient. You see the same Rotation cursor that is shown with the traditional rotation tool in Figure 5.8. Realize that with radial gradients, you have to reshape the fill before the rotation handle will provide any results.

You might think that we've spent an inordinate amount of time with gradations. However, it's really a quite powerful effect sort of the poor-man's 3D. Figures 5.9 and 5.10 show two simple examples (including a pseudo-sphere) that I created using gradients.

Figure 5.9. A simple filled circle becomes a sphere when you tweak a radial gradient.

Figure 5.10. A subtle gradient (with Overflow set to reflect) adds a subtle touch to this picture frame.

Setting Text

Back in hour 2 you learned the basics of placing text in your movies. Here you'll learn additional details to ensure text appears exactly as you intend especially when that text changes at runtime or includes special effects. Plus, I have a few incidental tricks to help make text appear exactly how you intend.

Static Text Layout

Any time you need text that's going to be locked down you should use the Static Text option (from the Text Type drop down in the Properties panel). When I say "locked down" I mean the text doesn't need to change at runtime. For example, if you want to display the time or a different message every day the user visits, you need to use Dynamic Text. If you want a field into which the user can type his name, you must use Input Text. That is, both Dynamic and Input can change at runtime; Input is changeable by the user. In other cases the text is locked down, so use Static text.

We'll get to Dynamic and Input text in a minute, but for now let me point out the ways to control static text. One of the main benefits of Static text is that the user doesn't need the font you use. However, you will need the fonts at the time you generate the .swf. This is important when working on a team when your colleague sends you a .fla that uses a font you don't have installed. You can make changes to any part of the file, except the text. And, as long as you send the file back to be published, everything should work just fine. When you open a .fla that contains fonts you don't have installed, Flash displays the "Missing Font Warning" dialog shown in Figure 5.11. Unless you want to globally substitute a particular font (that is, if you're planning to create the .swf on a machine that does have the missing fonts), simply select "Use Default."

Figure 5.11. Select "Use Default" on the Missing Font Warning dialog and you can send a .fla back to a teammate to publish with the necessary fonts.

Did you Know?: Using Find and Replace to Replace Fonts

Incidentally, you may want to globally replace every instance where you used a particular font. (And you don't like the idea of removing the font from your system, relaunching Flash, and using the Choose Substitute option in the Missing Font Warning.) You can use Flash's advanced Find-and-Replace panel. Just press Ctrl+F and what looks like a standard dialog appears. However, you can do fancy stuff such as limit your search to a particular font (from the second drop down, select Font then select the font you're looking for in the third drop down). It's pretty sweet. If you accidentally set one block of text to 12 point instead of 11 you can find it immediately using this tool.

There are a few more points I want to share about using Static text. First, be conscious of the Selectable option (in the Properties panel when a text block is selected) and only enable selectable text when it makes sense. That is, users probably don't need to select things like headlines or text that appears only briefly during an animation. I see a lot of cases where it looks like a mistake when text is selectable as well as cases where I want to select the text but can't.

I have another tip for making any color text look good on any background. Sometimes you'll notice, on a foreign film, they'll use white subtitles. That works great on a dark background but the same white is impossible to read on a white background. If you want to ensure text will stand out on any color background you can use the Glow Filter that's included in Flash Professional 8. For example, if your text is light, you can create a Glow in a dark color as shown in Figure 5.12. Just set the blur factors to something low, like 2. Interestingly, the low quality setting makes the text stand out more (the blur isn't as smooth, but that makes the text sharper).

Figure 5.12. The Glow Filter or Drop Shadow Filter can add the needed contrast to make light text stand out on a light background.

We're going to move on to Dynamic and Input text which are really everything Static text is plus more. That is, the tricks I showed for Static text apply to Dynamic and Input text. (The only exception is the way Flash automatically includes font outlines for Static text.)

Embedding Fonts for Dynamic Text

I've explained that Dynamic and Input text can change at runtime. Obviously, the user can change Input text by simply typing. But to see how to write the instructions to change Dynamic Text at runtime, you'll have to wait until Hours 15 and 16 before learning how to use ActionScript. Fonts become an issue with Dynamic or Input text when you consider the fact Flash doesn't know all the characters it needs to include when publishing a .swf (the way it does with Static text). When the movie runs on your user's machine Flash will find a substitute for any missing fonts. (This only happens with Static text if you select "Use device fonts" from the font rendering drop down in the Properties panel.) Because the exact characters appearing in a Dynamic or Input text field can change Flash, by default, embeds no fonts. So, this is a problem only when the end user doesn't have the particular font installed.

There are ways to reduce or prevent Flash from having to find a substitute font which is always different and often worse than your preferred font. You can select one of the Device Fonts listed at the top of the font drop down list: _sans, _serif, or _typewriter. These not only have little to no impact on file size, they force the Flash player to find a working substitute on the user's system, respectively: Arial (or Helvetica), Times, or Courier. The disadvantages of this approach are, one, it's not 100% foolproof (because a user could have removed the font though this is pretty unlikely because they're such common fonts) and two, you're limited to only three very basic fonts!

To ensure a font used in your Dynamic or Input text appears to the user exactly as it does on your machine (where that font is installed) you need to embed the necessary characters. I say "necessary characters" because you shouldn't embed more than you need as every added character adds to the file size. For example, if you're using Dynamic text to display a digital clock you only need the numerals 0 tHRough 9 plus : and A,M,P (for AM or PM). The way you select the characters to embed press the Embed button in the Properties panel which is only available with Dynamic or Input text that uses a font other than one of the three device fonts listed earlier. The Character Embedding dialog, shown in Figure 5.13, lets you select groups of glyphs (what I'd call characters). For example, you can embed just the uppercase alphabet (A through Z). Here's a huge tip: don't click the "All" option. If you want to include "all" characters you probably just need to select the Basic Latin choice (that's the same as upper and lower case, numerals, and all punctuation). Often you won't need all 52 punctuation marks. For the digital clock I mentioned you can select Numerals in the list above and then type AMP: into the "Include these characters" (which can be read "also include these characters" because they get added to the groups you've selected above).

Figure 5.13. You can selectively embed specific characters (glyphs) to ensure users will see text with a font installed on your machine.

There are other reasons why you may need to embed font characters. Embedding is also required when you want to:

• Rotate the text (or put text inside a Movie Clip that is rotated)

• Mask part or all of the text

• Use Filters on the text

You've already seen how to use the Transform tool to rotate objects. If that object is a block of Dynamic or Input text or a symbol instance which itself contains Dynamic or Input text, you'll need to embed the characters. In Hour 11 you'll see how a mask layer lets you hide and reveal parts of objects in other layers. Odd shaped masks won't work on Dynamic or Input text unless you embed the characters. Finally, if you plan on applying Filters to Dynamic or Input text (with Flash Professional 8), you need to embed the font.

If you're getting the feeling that it's just easier to always embed fonts when using Dynamic or Input text, I suppose that's true however, don't embed unless you have to! It always adds significantly to the final file size for your .swf (around 50K per font). Also, remember when you do need to embed, only embed the characters you're using.

Applied Examples Using Color Styles, Blends, and Filters

After you learned how to create symbols in the Library last hour, you learned about Color Styles, Blends, and Filters because they only work on instances of symbols. In this section you'll learn a variety of practical uses for these. I can't cover every combination because, besides the fact there are so many, the idea behind having so many options available is for you to explore and use for your own expressiveness.

Using Color Styles

There's not a whole lot to say about the Color Styles. The most common effects are tinting or changing the alpha of a clip. Compared to Blends and Filters, Color Styles may seem rudimentary. However, they're fairly powerful and besides they're all that's available in Flash Basic 8.

The first "effect" I'll show is really more of a trick: how to tint and set the alpha on a clip. That is, you can select either Tint or Alpha from the Color Style drop down menu (but not both). In order to set both in an intuitive manner, select Tint and then select the base color you want to use. Next, select Advanced and then press the Settings button where you can set the Alpha percentage. When the advanced settings dialog appears it will match the tint you previously set.

Here's a real effect, drop shadow. However, let me warn you that you can do this much more effectively and easily using the Drop Shadow Filter if you have Flash Professional 8. You can also use the following technique if you want a drop shadow to appear for users with the Flash Player 7.

Try It Yourself: Simple Drop Shadow on Text

You can use this trick for any symbol, but in this task I walk you through adding a shadow to text. Here are the steps.

1.	Create a text block in very large font say, 22 point. Leave the text black. Make sure the text is Static. Select the text object and convert it to a Movie Clip symbol (press F8) and name it Title.
2.	Select the instance of Title now on stage and copy. Then select Edit, Paste in Place (Ctrl+Shift+V). With the duplicate instance selected, use the Properties panel and select Alpha from the Color Styles. Set the percentage down to about 40% or so (you can change it later).
3.	Because the semi-transparent duplicate is both on top of and aligned exactly with the original, do the following to move it to the back. Select Modify, Arrange, Send to Back. Then nudge the shadow down to the right by pressing the down arrow 3 times and the right arrow 3 times. That's it!

Why did we put the text inside a Movie Clip first? Check it out: if you want to edit the wording on your text you can simply go inside the symbol and edit the contents. The change is propagated to each instance on stage. Incidentally, you can do this poor-man's drop shadow with any symbol regardless of whether it contains text.

Practical Uses for Blends

The key to understanding the Flash Professional 8 feature Blends is to remember there are usually two players: the overlaying instance (the one with a blend applied to it) and all the objects underneath (which gets composited with the overlay). Also, realize you can nest the blends by applying a blend on one symbol instance residing inside another instance. You should also feel free to explore the different blends. When you find one that works well for a particular effect be sure to take time to study why it worked. That is, it doesn't do you any good to simply memorize the technical effect for each blend if you can't use them in a practical manner.

Perhaps the most powerful blend is Layer. When a Movie Clip instance on which you want to apply an alpha contains multiple overlapping objects, Layer is a lifesaver. For example, I created a Flower Movie Clip (shown in Figure 5.14) by repeatedly duplicating an instance of just the petal and rotating it. (In fact, I set the registration point to the corner of the petal then used the Transform panel by typing in 30 degrees and pressing the "Copy and apply transform" button 12 times.) When I applied the Alpha Color Style on the flower instance, the portions of contained petals that were overlapping had a different alpha amount (as shown on the left of Figure 5.14). I simply left the alpha setting as is, and changed the Blend to Layer and it came out as expected.

Figure 5.14. The overlapping petals inside a flower clip with an alpha Color Style has an unexpected look (left) but improves when the Blend is also set to Layer (right).

Another useful Blend is Hard Light (as well as the similar Overlay). The basic orientation is to apply the Hard Light or Overlay blend to a clip containing a gradient. This effect is nice because you can add a highlight or sheen that doesn't permanently change an imported raster graphic. (After all, you could create the same effect using Photoshop before you import an image but that wouldn't be editable once inside Flash.) In addition, when you learn how to animate starting in Hour 7, you can animate the highlight making an otherwise static image almost come to life.

Try It Yourself: Use the Hard Light or Overlay Blend to Add a Highlight

1.	Import a photograph, say, of a sports car. Select the Rectangle tool and ensure Object Drawing is turned on. Draw a filled rectangle the same size and location as the photograph.
2.	Open the Mixer Panel and then select the rectangle. Make sure the Fill color is active in the Mixer panel and then select Radial from the Type drop-down. Now edit the gradient so that it starts at white (probably already set) and ends at a 0% alpha gray. Just click the ending triangle on the right and then select a gray color. Then, set the alpha to 0.
3.	Use the Gradient Transform tool to change the center point and falloff of the gradient. I made the falloff very sharp and positioned the center on top of the car headlight.
4.	The highlight looks pretty bad because it goes from white to gray and finally to clear. Wouldn't it be cool if the white would stay but the gray blended into the car's color? That's what Hard Light (or Overlay) can do. Select the drawn rectangle and convert it to a Movie Clip (press F8). Select the newly created instance and use the Properties panel to choose Hard Light from the Blend drop down. You can see what Overlay looks like it should be more subtle so the highlight will include more of the car's color.

This technique works best when you keep the effect subtle. By the way, there's a similar technique to make a ribbon-like sheen. Instead of the radial gradient, make a multi-step gradient (or one that repeats). It's probably best for something like the picture frame shown earlier in Figure 5.10 not necessarily a car however.

The highlight effect just shown is much more interesting when you add a little bit of motion that is, when you animate it. The following "practical" use for the Invert blend really requires animation for you to see anything. But, it's still worth looking at now.

Basically, you can get a lot of mileage by applying the Invert blend to a black rectangle (the same size as the stage) covering your entire stage. To see the effect, draw a bunch of shapes on to the stage. Then, make sure Object Drawing is turned on when you draw a black filled rectangle the same size as the stage. Convert the rectangle to a Movie Clip and set the Blend to Invert. Then, to simulate how the effect can be animated, select the clip and then alternate between cut (Ctrl+X) and undo (Ctrl+Z). So just imagine that a ball animates across the screen and when it hits a window this inverted blinking happens. It's pretty effective despite the simplicity.

There are so many more practical and gratuitous situations for the Blends. Hopefully this section has given you a couple starter effects that you can expand upon.

Practical Uses for Filters

A lot of the Flash Professional 8's Filters are effective on their own. For example, just add a Drop Shadow filter to a clip and it immediately appears to float over the stage. I've got one simple and one advanced example to give you a taste for using Filters for practical situations.

You might laugh when you see how easy you can use Filters to desaturate a photograph so it looks black and white. (But, then again, if you ever tried this in earlier versions of Flash you'll be blown away!) One sentence task: Import a photograph, convert it to a Movie Clip symbol, use the Filters panel to select Adjust Color, then move the Saturation slider all the way to the left (-100). It's easy, too, to make a photo look old-fashioned with a sepia-tone effect. Just bump up the Saturation a little and use the Hue slider to pick a yellow tinge.

If the desaturation trick was too easy, the following effect is more involved. Basically, it's a combination of a few things you've already done this hour: old-school drop shadow and the Hard Light Blend, all on top of the Bevel Filter. Basically, it adds some realism to the plastic-looking effect you get with a plain Bevel Filter.

Try It Yourself: Combining Techniques to Improve the Bevel Filter

There's a definite trend to make icons have a soft 3D plastic looking character. Even the Flash application icon has this look. It's easy to create by combining a few features.

1.	Use the Rectangle tool to draw a square filled with a solid dark pale red color (I used #AC6560) and no stroke. Select the Free Transform tool then click the Distort option. To distort it so it looks like it's facing the left, hold shift and drag the top right corner handle up. Then select the Rotate and Skew option and rotate it clockwise just a few degrees so it looks like Figure 5.15. Figure 5.15. This unassuming distorted rectangle will become quite sophisticated after we're done with it.
2.	Select the distorted rectangle and convert it to a Movie Clip and name it Rectangle Middle. From the Filters panel, select Bevel. Crank up the Blur to 18; the strength to 150%. Leave the highlight color white but change the shadow color to the same color as the rectangle's fill (or a tad darker). Click the Shadow color chip and then the eye dropper cursor will let you select the rectangle you drew. Step back and see how nice the bevel looks. There's nothing wrong with it but it looks like a computer drew it.
3.	To add more character we'll use two techniques you've already learned about. First, let's add a subtle highlight using the Overlay blend on a duplicate of the rectangle. Copy the instance of Rectangle Middle and copy it. Select Edit, Paste in Place, then select Modify, Break Apart. Without deselecting, convert this shape to a Movie Clip (press F8) and name it Rectangle Top.
4.	Double-click to enter the Rectangle Top symbol. Change the fill color to a radial gradient in the same manner you did in the task "Use the Hard Light or Overlay Blend to add a Highlight." This time, make the gradient go from a bright red to a very dark red, almost black. Position the hot portion of this gradient near the top left of the rectangle. But, this time, make the falloff more gradual so that the gradient covers the entire shape as Figure 5.16 shows. Figure 5.16. The gradual falloff for this gradient will add some dimension when you use it with the Overlay blend.
5.	Go back up to your main scene and select the Rectangle Top instance (not containing a gradient). Change its Blend to Overlay.
6.	It should look pretty good, but a drop shadow will add the final touch. You're welcome to try the Drop Shadow filter (on the Rectangle Middle instance) but you'll get more control over the shape and location of the shadow if you make another instance. Open the Library and drag another instance of Rectangle Middle onto the stage. Using the Filters panel, select Drop Shadow. Set the Blur to 16 and the strength to 50%. Then, click Hide object. Now, rotate and skew the instance to make it look the shape a shadow might actually look. You will probably need to reposition it so the bottom left corner of the shadow aligns with the bottom left corner of the two other instances already on stage. I find it easiest to adjust the shape and location while it's on top of the other instances, but when you're done select Modify, Arrange, Send to Back. Figure 5.17 shows the finished layout. Figure 5.17. To produce the finished look on the right, there are three pieces shown separately on the left.