Applying Flash filters
Animating filter effects with motion tweens
Understanding differences between color properties and color filters
Working with blends
Working with layers as guides
Adding masks
Setting up elements for animation with Distribute to Layers
This chapter introduces you to some of the key tools in the Flash authoring environment that support expressiveness — another term for creative options for designers. If you've worked with other graphics programs, you'll appreciate the creative potential of filters and the Blends menu built into the Properties panel. If you've never used a filter or heard of a blend mode, you'll be relieved to discover how easy it is to apply these features and amazed at how much they can do to enhance your projects.
I also explain how layers can do more than just hold the content of your Flash movie, and show you how to turn normal layers into guides or masks.
Filters offer shortcuts for adding visual polish to your Flash designs. Instead of manually editing shapes to create drop shadows or adjusting gradient fills to create bevels, you can simply apply a live filter and use the built-in settings to adjust the final effect. Filters are rendered on-the-fly, and although they change the appearance of your symbol instances, they do not result in any additional symbols being generated and added to the library. In addition, filters do not interfere with the "editability" of your content — you can always modify the original text or symbol instance without "breaking" the filter effect. Filters can be layered in any order, and you can make modifications to the individual filter settings at any time. You can also add or control filters at runtime with ActionScript, but for now I'll focus on applying filters in the authoring environment — which doesn't require any code! Filters are rendered as you add or adjust them so you can always see just what you'll get when the final movie is published.
As shown in Figure 11.1, filters are now in their own section of the CS5 vertical Properties panel. To apply a filter, follow these steps:
Select an item on the Stage that is compatible with filters — a Movie clip instance, Button symbol instance, or text field.
Open the Properties panel, and scroll down or resize the panel until you can see the Filters section (click the arrow on the left to twirl the Filters live list open if it isn't open already).
Click the small Add Filter page icon (shown in Figure 11.2) on the far left side of the row of control buttons at the bottom of the Filters section. This opens the Filters menu (shown in Figure 11.1).
After a filter is selected from the drop-down menu, it appears in the live list in the Filters panel and you see the filter effect (with default settings) applied to your selected item.
As shown in Figure 11.2, the settings for each applied filter are accessible in twirl-down sections of the live Filters list. You can keep all the twirl-down sections open so filter settings are visible (by scrolling or expanding the Properties panel), but it's easier to manage the list if you collapse the filter settings and only open them one at a time when you need to modify a setting. The settings vary for each filter, but after you become familiar with the options, you'll find it easy to adjust individual filters. To remove a filter at any time, simply select the name of the filter in the live list and click the trash can (–) icon at the bottom of the panel section.
Note
All blue numeric values for filter properties are hot text fields that can be adjusted by clicking and dragging or by double-clicking and then typing new values.
Tip
Applied filters can be temporarily toggled off (and back on) to preview different filter combinations by clicking the eye icon at the bottom of the panel section.
Figure 11.2. Individual settings for applied filters can be adjusted at any time by selecting a filter in the live list. Controls for filters have been improved in CS5, and they are easily accessible in the Properties panel.
Some filter effects have unique controls, but most are created with different combinations of a series of basic settings. The default filter settings are a good starting point, and in some cases they might even give you the result you want, although most likely you'll need to modify the settings to achieve a satisfactory final effect.
It would be an overwhelming task to document every combination of settings on every filter, but an overview of the main settings will provide you with enough guidance for experimentation:
Blur X, Blur Y: Sets the distance that the edge of a shape extends horizontally (X) and vertically (Y) to create a graduated or softened edge for shadow, blur, bevel, and glow effects. This has the same effect as the distance setting in the Soften Fill Edges dialog box for shapes. The default blur distance is 5 and the range is from 0 to 100. By default, the lock icon is turned on to constrain the X and Y settings to the same value, creating a symmetrical, graduated effect. If you prefer to make the X and Y settings independent of each other, toggle the constrain option off by clicking the lock icon.
Strength: Sets the opacity of the rendered effect. The default setting is 100. The range is from 0 to 1,000. However, for all practical purposes, the effective range for most filters is from 0 (invisible) to 100 (solid center area with normal falloff in graduated area). Increasing the strength of a filter beyond 100 percent adds opacity to the stepped (or softened) areas of the shape. The opacity is increased incrementally from the most solid area to the least solid area of the stepped edge.
Warning
At the maximum Strength setting of 1,000 percent, all the steps within the blur distance of a filter are rendered at 100 percent opacity, which usually counteracts the visual impact of the filter. The result is an expanded solid shape with a slightly jagged edge, rather than a nice-looking shadow or bevel.
Quality: Sets the fidelity or smoothness of the rendered effect. This setting has a major impact on the performance of the published movie. By default, Quality is set to Low. As the quality is increased to Medium or High, gradients are rendered more smoothly and the steps in blurs are softened, but the performance of the final movie is reduced. Your Flash movies perform better if you can achieve the visual effect you need by making adjustments to the Color and/or Blur settings rather than increasing the Quality setting.
Tip
To make a Glow or Drop Shadow look less harsh, adjust the color to be a closer match to the background color rather than reduce strength or increase quality. Color settings have the least impact on the performance of the final movie.
Angle: Sets the direction of offset to be applied with the Distance setting. If Distance is set to 0, changing the Angle (or degree of offset) has no visible effect. The default is a 45-degree angle and the range is 0 to 360 degrees. The higher the Distance setting, the more obvious the offset direction or angle will be.
Distance: Sets the pixel value for the distance between the center point of the original item and the center point of the rendered filter (gradient). The default setting is 5 and the range is from −32 to 32 pixels. If the distance setting is 0, the rendered gradient and the original item are center aligned.
Warning
If the Distance setting is 0 and the Blur setting is less than 5, it can be hard to see a filter effect if it is rendered outside (or behind) the original item.
Color: Click color chips to access currently loaded swatches and set colors used to render Drop Shadow or Glow effects. The default solid color for Drop Shadow is Black (#000000); the default solid color for Glow is Red (#FF0000). The solid color that is set with the color chip automatically fades from solid to transparent to create a soft glow or shadow effect. The Bevel filter requires both a Shadow and a Highlight color — by default, these are set to black (#000000) and white (#FFFFFF), respectively. The Gradient Bevel and Gradient Glow filters make it possible to add multiple colors to rendered gradient effects. Click the color anchors on the gradient strip to access currently loaded swatches and set control points in the gradient.
Note
The opacity of the center color anchor for gradient bevels and the left (outer) color anchor for gradient glows are fixed in position and set to 0 percent alpha. The color of these pointers can be changed, but the alpha level and anchor position can be changed only on the other anchors (or new anchors added to the gradient strip).
In addition to the adjustable settings, there are some check box options that expand the visual possibilities for filters:
Knockout: Converts the original shape into a transparent area, while leaving the rendered effect visible in any area that was not cut out by the original shape.
Filter types: For Blur and Drop Shadow filters, this is a check box to switch the rendered gradient from outside to inside the boundary of the original shape. For the multicolor gradient filters (Bevel, Gradient Glow, and Gradient Bevel), the options are listed in a drop-down menu that enables the filter to be set to render inside (Inner), outside (Outer), or inside and outside (Full) the boundaries of the original item.
Warning
The Bevel filter works best when left at the default Inside setting. Outside and Full bevels require some adjustment to create a realistic, dimensional result rather than a messy, doubled-up drop-shadow effect.
Tip
Inner Gradient Glow effects are easier to create with a custom gradient fill instead of applying the Gradient Glow filter with the Inner setting. A gradient fill is also less demanding at runtime than a Gradient Glow filter.
Hide object: This option is the secret to creating sophisticated drop shadows (as I describe later in this chapter). When Hide object is enabled, the original object disappears, but the drop shadow is preserved.
Note
Although Hide object and Knockout both convert the original shape into a transparent area, they do not have exactly the same result. The Hide object option preserves the entire gradient area rendered by a filter effect, and the Knockout option creates a "cutout" effect when combined with filters that are not set to render inside the boundaries of the original shape. Although Hide object can be selected when the Knockout option is also selected, there is no visible difference to the rendered graphic. If you decide to use the Knockout option, it is best to uncheck the Hide object option to avoid rendering redundant filters at runtime.
The filter settings described thus far relate to the various gradient-based filters. You will notice that the Adjust Color filter settings are unique. The values available with the Adjust Color filter settings for adjusting various color qualities will be familiar to anyone who has worked in image-editing programs like Photoshop or Fireworks. Flash updates the selected item on the Stage as you make color adjustments, so it is easy to experiment with the filter settings. However, it is important to know when to apply the Adjust Color filter and when to use the color controls available from the Properties panel.
Note
I discuss the differences between the Adjust Color filter and the Color Effect settings in the Properties panel later in this chapter.
One limitation of the Drop Shadow filter is that it does not have a built-in skew setting. The workaround for creating a drop shadow with more depth illustrates how you can use the Hide object option and the Transform panel to enhance shadows created with the Drop Shadow filter. Here are the steps:
Place a text field, Movie clip, or Button instance on the Stage.
Create a new layer below the original content layer. Click the Insert Layer icon in the Timeline (or choose Insert
Copy the item from Step 1 to the new layer. To do this, select the keyframe where the item exists and hold the Option key while dragging the keyframe content to the new layer, or select the item and use the copy command (Ctrl+C/
Lock the original content layer.
Select the duplicate item on the lower layer and use the Transform panel to apply a stretch and skew. As shown in Figure 11.3, I set the vertical scale to 130 percent and the horizontal skew to −45 degrees.
Open the Filters panel or activate the Filters tab in the Properties panel.
Click the plus symbol and select Drop Shadow from the Filters list. In the Drop Shadow settings, select the Hide object check box. Otherwise, the default settings are a good place to start.
As shown in Figure 11.4, the default settings can be modified to create a softer shadow. In our example, the shadow Color was changed to medium gray (#666666), the Strength was set to 50 percent, and the Quality was set to Medium.
Note
I've included the finished file shown in Figure 11.4 on the CD-ROM so you can see how the shadow animates along with the original character.
CharacterAnim_Shadow.flaandCharacterAnim_shadow.swfare both in theDropShadowsubfolder of thech11folder on the CD-ROM.
Multiple filters added to one item are rendered in the order they appear in the live list, from top to bottom. Changing the order of filters by dragging a filter name up or down in the live list changes the final result of the combined effect, but the settings for each filter are preserved and editable.
If you have created a special combination of filters or found a custom filter setting that you want to reuse, the Presets option makes it easy to save and access your own list of filter effects.
To save a filter setting or filter combo to the Presets menu, follow these steps:
Select the item that has the filters and settings applied that you want to save.
Note
All filters in the live list for the selected item will be saved with the preset, including any filters that are toggled off. When the custom filter is applied from the Presets menu to another item, the settings will be identical.
In the Filters section of the Properties panel, click the multi-page icon to open the filter Presets menu (as shown in Figure 11.5). From the Presets menu, select Save As.
Type a name for your custom filter settings or filter combo (as shown in Figure 11.6) and click OK.
Figure 11.6. You can name and save custom settings for a specific filter or a combination of filters in the Presets menu for reuse.
The named preset is added to the bottom of the Presets menu, along with any other saved Presets (in alphabetical order), shown in Figure 11.7, and can be applied to other items.
Warning
When a preset is applied to an item, any other filters that have been applied to that item are cleared and replaced with the filters (and settings) that were saved with the preset. To see the live filter list for the applied preset, you may have to deselect and then reselect the item to which it was applied — forcing the panel to update.
After a preset is applied to an item, the settings can be modified on that item without corrupting the saved preset. Unfortunately, the Presets list doesn't have a centralized edit option, but you can select the Rename or Delete option from the Preset menu to load your list of currently saved presets into dialog boxes that enable you to rename an item or remove an item from the list. If you want to share your filter presets with other people, all you have to do is provide them with the XML file that is saved for each preset in the Flash Configuration folder. The standard file paths for saved filter presets are as follows:
After the XML files are copied into the same location on other people's computers, the presets appear in their Presets menu when they start Flash CS5. Filter swapping is an easy way to share creative resources and to keep effects consistent for projects that rely on filters for a specific look.
Although you may occasionally find it helpful to combine filters, it is best to try and achieve the result you want by first adjusting the settings of a single filter and/or modifying the symbol instance by using the Color Effect settings in the Properties panel or the Transform tools. As with any intensive effect rendered at runtime, multiple filters have a negative impact on the performance of the published Flash movie.
The Flash engineers have done a great deal of work to make it as easy as possible to combine filters with motion tweens for animated effects. The result is a very intuitive system that works behind the scenes to support tweens while preserving editable filter settings.
Note
Filters are not necessarily incompatible with shape tweens, but because filters can only be applied to symbols or text fields and shape tweens can only be applied to primitive shapes, filters and shape tweens never get a chance to work together. The only workaround for this rule is to create a shape tween inside of a Movie clip and then apply a filter to the Movie clip. In this case, the final visual result is a combination of a shape tween and a filter, but they remain on separate timelines.
You can apply a filter to an item and then tween it, or you can select an item that has been tweened and add a filter to enhance the motion — in most cases, you'll get exactly the animated effect you were hoping for. The only time you'll need to know what is going on behind the scenes is when you don't get the result you want on the first try.
Here are some notes that should help you troubleshoot if things go wrong when you try to combine filters and motion tweens:
Filters "stick" to symbol instances, so if you insert a keyframe (with the same content as the initial keyframe) and set up a motion tween, the settings and the stacking order in the live list automatically match in the first keyframe and the last keyframe of the tween.
If you add a filter to a symbol in one keyframe of a tween, Flash automatically adds a matching filter with all the settings adjusted to create "no effect" to the symbol in the other keyframe. This is also called a "dummy filter" because it has no visible effect on the symbol, but it is required to support the tween.
If you remove a filter from a symbol in one keyframe of a tween, Flash automatically clears the matching filter from the other keyframe.
If you apply different filters (or different combinations of filters) on two different keyframes and then apply a tween, Flash analyzes the symbol with the most filters and applies dummy filters to the symbol in the other keyframe to support the tween. The visual difference between the two symbols is interpolated in the span of the tween.
You can modify filter settings to create a visual change from the first keyframe to the last keyframe in a motion tween. The differences are tweened evenly across the span unless you use the Motion Editor to adjust the interpolation.
The knockout and type of gradient (such as inner, outer, or full) filter settings do not interpolate properly as part of a tween if they are set differently on the beginning and end keyframes. If the filter options in the first keyframe and the end keyframe of a tween are inconsistent and cannot be interpolated properly, Flash applies the options set in the first keyframe to the frames in the span of the tween.
By default, the interpolation of any differences in filter settings from the first keyframe to the last frame matches the interpolation of the motion tween — that is, the filters change at the same rate as any other characteristics of the item that have been modified to create animation in the tween. The default Simple (Slow) easing setting applies equally to all changes in the characteristics of an item. As described in Chapter 11, if you need more precise control over the interpolation of different aspects of a tween, you can use the Motion Editor to add easing for tweened characteristics including Motion, Transformation, Color Effect, and/or Filters. As shown in Figure 11.8, the Motion Editor enables you to create a unique interpolation curve for each of the various properties that can be animated in a tween. You can set a unique curve to apply to all properties, or set unique curves for selected properties, leaving the default curve for others.
To access easing settings for filter properties in a tween:
Select a motion tween in the Timeline or select a tweened item on the Stage.
Click the Motion Editor tab (to the right of the Timeline tab in the Essentials CS5 workspace layout).
Scroll down until you see the filter properties that you want to modify or adjust in the tween. Note that each property in an applied filter has its own easing setting. The options available for easing depend on the eases you have loaded into the Easing section of the Motion Editor. By default, Simple (Slow) is loaded and available as a setting for all properties.
To add additional easing options, click the plus (+) icon in the Eases section of the Motion Editor. Select a preset easing curve from the drop-down menu (shown in Figure 11.9), or add your own custom curve — if you can think of any that aren't already in the list!
Tip
If you want a larger view of a specific easing curve, double-click any row to expand it. Double-click again to return it to normal height.
The Adjust Color filter loads a set of controls for making color adjustment to Movie clips, Button symbols, and text fields. The best way to explain these controls is to compare them to other Flash color settings. Some of these controls are unique and some replicate settings available in the Color panel (for raw shapes, shape primitives, and drawing objects) and/or in the Properties panel Color menu. These three different color control areas are shown in Figure 11.10, with an additional diagram (A1) to call out the features of the Color panel that overlap with slider settings for the Adjust Color filter.
The controls shown in Figure 11.10 enable various workflows for setting and adjusting color in the Flash authoring environment. In most cases, you start with the Color panel (or Swatches panel) to choose and/or modify fill and stroke colors for initial primitive shapes or drawing objects. After the raw graphics are converted into reusable symbols, the Color Effect settings available in the Properties panel and/or the Adjust Color filter can be applied to modify symbol instances without changing the original fill and stroke colors. The sliders and hot text values for adjusting color with either of these options are easy to use, and you will most likely achieve the result you want with just a little experimentation. However, there are important differences between the Color Effect properties and the Adjust Color filter settings, and the interaction of the different settings can become quite complex. To clarify the functions (and the advantages or limitations) of the various settings available with these two options, I have included a brief section for each.
Note
If you want to learn more about various color models and the differences between HSV/HSB (hue, saturation, value; or hue, saturation, brightness) and HSL (hue, saturation, lightness) color spaces, a good place to start is Wikipedia: http://en.wikipedia.org/wiki/HSB_color_space.
Figure 11.10. The options for adjusting color in Flash include the Color panel (A), the Color Effect menu (B), and the Adjust Color filter (C) — which enable instance-level color transformations similar to the raw color edits supported in the Color panel.
Figure 11.11 shows a sample of the range of color transformations that can be achieved with the hot text controls that load into the Filters section of the Properties panel when you apply the Adjust Color filter to Movie clip instances, Button instances, or text fields.
Note
The grayscale version of the sample color transformations shown in Figure 11.11 gives you a hint of what is possible with the Adjust Color filter, but the color version of this figure included in the color insert in this book is much more informative.
Note
I have included the source file with the various transformed Movie clip instances shown in Figure 11.11 on the CD-ROM. Open AdjustColorFilter.fla from the ColorEffectsvsFilters folder in the ch11 folder on the CD-ROM to see the samples in the Flash authoring environment. To see these same transformations applied to a sample bitmap, open AdjustColorFilter_bitmaps.fla from the same location.
Figure 11.11. The Adjust Color filter enables subtle color transformations of symbol instances and text fields.
Finally, you can make subtle adjustments (on an instance level) to Movie clips, Button symbols, and text fields, without having to go back to the Color panel and change the stroke and fill colors of the original symbol. Unlike the Color Effect options in the Properties panel, the Adjust Color filter makes it easy to combine different types of color transformation without manually adjusting individual RGB values. By default, all settings are loaded as "neutral" — values are set to 0 so that no color transformation is visible on the selected item when the filter is first applied. Color transformations are applied for instant visual feedback as the values are adjusted. Filters apply on an instance level, and settings can be modified at any time by selecting an instance and choosing Adjust Color from the live filter list in the Properties panel. The following values can be applied individually or in combination to Movie clips, Button symbols, and text fields:
Brightness: Alters the RGB values for the original color to make it appear lighter or darker without changing the hue. The range for filter Brightness is −100 to +100. The default or no change value is 0. The numeric value that appears in the Brightness field is added to the RGB values of the original color to create a new shade, within the minimum and maximum values of 0 and 255, respectively. For example, a red fill (255, 0, 0) set to +50 brightness transforms into light red (255, 50, 50). The same red fill (255, 0, 0) set to −50 brightness transforms into dark red (205, 0, 0). As shown in Figure 11.12, the results of changing Brightness with the Adjust Color filter are different than the results of changing Brightness with the Color Effect settings.
Note
Although the range for the Brightness filter and the Brightness Color Effect might seem the same at first glance, the significantly different results that these two options achieve are due to one being a relative (or percentage-based) setting and the other being an absolute (or decimal-based) setting. The Brightness filter is applied as an absolute numeric value, and the Color Effect Brightness property is applied as a relative percentage-based value. Regardless of the original color, setting Color Effect Brightness to 100% shifts the RGB values to white (255, 255, 255) and −100% Brightness shifts the RGB values to black (0,0,0). Any other Brightness setting is calculated as the percentage between these two extremes, and the RGB values are transformed accordingly.
Figure 11.12. Numeric settings applied with the Adjust Color filter Brightness result in less extreme value changes than Percentage settings applied with the Color Effect Brightness.
Note
I have included the source file for Figure 11.12 on the CD-ROM. The file is called Brightness_FiltersVsEffects.fla.
Contrast: At the minimum contrast setting of −100, all RGB values are forced to 64, 64, 64, making everything medium gray. The RGB values at the maximum contrast setting of 100 vary depending on the original colors, but they are forced closer to 0 or 255. The default or no change value is 0. The greater the numeric difference between RGB values, the greater the amount of contrast. In visual terms, light colors get lighter and dark colors get darker as contrast is increased, whereas all colors are brought closer to medium gray as contrast is decreased.
Saturation: Saturation can also be thought of as the intensity or purity of color. At the minimum saturation setting of −100, the image is rendered in grayscale with no color intensity, similar to the hues found closer to the bottom of the color selection field in the Color panel. At the maximum saturation setting of 100, the colors are as intense or as close to pure color as possible, similar to the hues found closer to the top of the color selection field in the Color panel.
Hue: The Hue slider has a different range than the other Adjust Color filter sliders. To span the full range of the 360-degree color wheel, the slider values are from −180 to 180. The default or no change value is 0. If you were looking at a real color wheel, reducing the hue value would be equivalent to moving counterclockwise around the wheel, and increasing the hue value would be equivalent to moving clockwise around the wheel. At either extreme (−180 or 180), the resulting color would be directly opposite the original color on the color wheel. The relationship of colors directly opposite on the color wheel is known as complementary.
Note
There are many books and online resources dedicated to color theory, and there are many different versions of the color wheel. A good explanation and an illustration of an RGB color wheel can be found at www.color-wheel-pro.com/color-theory-basics.html. Color Wheel Pro is one of many software programs available to help designers create successful color schemes by using color wheel relationships as a guideline.
Warning
Flash Filters (including the Adjust Color settings) are compatible only with Flash Player 8 and later. If you plan to publish content for earlier versions of the Flash Player, you are limited to using the Color Effect settings in the Properties panel to make adjustments to the appearance of symbol instances, or using the Color panel to modify the original stroke and fill colors in primitive shapes.
As I introduced in Chapter 6, "Symbols, Instances, and the Library," the Color Effect settings in the Properties panel provide some options for modifying the appearance of symbol instances without changing the original symbol stored in the library. After a Color Effect style is selected from the Color drop-down menu, the controls needed to apply the color adjustment appear in the Properties panel. By default, "neutral" settings (0 percent change) are loaded as a starting point. After the values for a property are modified, they are stored and loaded as the default when you select another instance. The Color Effect settings loaded in the Properties panel are simple and intuitive and enable you to make basic color adjustments by using familiar controls:
Brightness: The Brightness Color property has the same range as the Brightness setting in the Adjust Color filter (−100 to 100); however, as described previously, the Brightness property creates more drastic color transformations because it is applied as a relative or percentage-based value. At the minimum Brightness setting (−100), all RGB values are forced to black (0,0,0), and at the maximum Brightness setting (100), all RGB values are forced to white (255,255,255).
Tint: The color theory definition of a tint is a color produced by adding white to a pure color. The Tint property in Flash enables you to select any color (not just white) to "mix" with the original color. You can also select how much of the new color you want to mix with your original colors — from the lowest setting of 0 percent to the maximum setting of 100 percent. At the minimum setting, the original colors are unchanged. At the maximum setting, the new tint color completely replaces all the original colors. At the default setting of 50 percent, the rendered color values are an even mix of the original colors and the selected tint color.
Alpha: This setting controls how opaque the selected instance will be. The values that control alpha are counterintuitive (as they are in the Color panel). At the minimum alpha level of 0 percent, the item is transparent. At the maximum alpha level of 100 percent, the item is fully opaque or "solid."
The Advanced effect option shown in Figure 11.13 includes two columns of settings for Red, Green, and Blue color channels, plus the setting for Alpha. These settings are accessible when a symbol instance is selected on the Stage and the Advanced option is chosen from the Style drop-down menu in the Color Effect section of the Properties panel. Although these columns may seem redundant at first, they actually provide very different options for controlling the appearance of instance color. The important difference between these two types of controls is that the first column creates relative changes by applying percentage-based adjustments, and the second column creates absolute change by adding or subtracting integer values.
Figure 11.13. The default Advanced effect settings shown with the symbol instance testStar, with no effect applied
Tip
The most recent transformation that was applied to an item by using any of the other Color Effect styles is preserved if you decide to switch to the Advanced color effect style. The equivalent values are transferred to the RGB or Alpha values for the Advanced color effect. This is a helpful way to get started with more complex transformations instead of starting from scratch. For example, you could select a Tint setting and then switch to the Advanced color option to add an alpha setting that would be combined with the RGB values carried over from the original tint.
Other than playing with these settings, the easiest way to understand what some of the possible combinations produce is to dig out your calculator and find a chart of RGB color swatches (with decimal values rather than hex values). By taking the RGB values in your original instance, multiplying them by the percentage entered in the relative value field, and adding the value shown in the absolute color field, you arrive at the new RGB value that appears in the symbol instance when the effect is applied. If this sounds confusing, read on.
Note
Because color examples are not very helpful illustrated in black and white, I have included the relevant graphics in a Flash file that you can open for reference. Compare the Advanced Color Effect (relative) layer with the Advanced Color Effect (absolute) layer in colorEdits.fla in the ColorEffectsVsFilters folder in the ch11 folder on the CD-ROM.
The first column of values adjusts the color of the instance relative to the percentages of color (or alpha) present in the original with a range of −100 percent to 100 percent. The default, or "no effect," setting is 100 percent. With these controls, 100 percent red does not change everything to pure red or 255 red, but rather it displays 100 percent of the current percentage of red in the existing colors. For example, yellow (255, 255, 0) cannot be made more orange by increasing the amount of red because 255 × 100 percent is still 255 — the maximum amount of red. However, if you reduce the percentage of green to 45 percent of the original value, the ratio of red is increased, making the visible color shift to orange (255, [255 × 45 percent], 0 or 255, 102, 0).
This process of reducing the amount of the opposite (or complementary) color to alter the ratio of colors is called subtractive color adjustment, and it can be helpful to remember some basic color theory to predict how it will alter the appearance of your symbol instance. Because the color value changes that you make are applied to all the colors in your symbol, the overall effect can be more complex than just shifting one color in your palette. You will find, for example, that reducing the percentage of red and green to 0 for the testStar symbol instance (see the colorEdits.fla file on the CD-ROM) causes the gray and white areas to shift to blue, whereas the red and green areas shift to black, and the originally black areas remain unaltered.
Because the maximum value for relative Alpha is also 100 percent, this control cannot be used to increase the alpha setting of an instance. For example, a symbol that has an alpha fill of 50 percent cannot be made to appear more solid because 100 percent of 50 percent is still only 50 percent alpha.
The settings in the right column are referred to as absolute color controls because they add or subtract color in concrete amounts regardless of the color values in the symbol instance. The scale of absolute color is from −255 to 255, and the default or "no effect" setting is 0. When absolute color is applied to a symbol instance, it is possible to make more drastic global color changes than you can make with relative color adjustments.
The effect of absolute color value changes made with the Advanced color effect is similar to the effect of using the Tint color effect. What makes these controls more advanced is that not only can you add a tint by increasing the value of certain colors, but you can also add an inverse tint by using negative values. So, for example, you could add a red tint to all the colors present in the testStar symbol instance, with the exception of white and pure red (which already contain 255 red), by entering a value of 255 Red, or you could add a yellow tint to all colors containing blue by entering a value of −255 Blue; this makes pure blue (0, 0, 255) turn to black (0, 0, 0), and white (255, 255, 255) turn to pure yellow (255, 255, 0).
Note
You can see the original testStar symbol instance and several modified examples, including those described in this section, in the Advanced Color Effect (absolute) layer of colorEdit.fla in the ColorEffectsVsFilters folder in the ch11 folder on the CD-ROM.
Perhaps one of the most unique feats that absolute values can perform is to make a symbol instance that contains alpha fills or strokes appear less transparent. Because the alpha settings are absolute, it is possible to shift an item with an original alpha setting of less than 100 percent to any opacity level between invisible (−255) and completely solid (255).
If you've entered negative values in the relative alpha setting, you can even make an area with an alpha fill visible while solid areas are made invisible. Consider a shape that has an area of solid fill (100 percent or 255 alpha) and an area of transparent color (40 percent or 102 alpha). If this shape is converted into a symbol and then modified by using the Advanced color effect options, you could enter a relative alpha value of −100 percent and an absolute alpha value of 255. When these effect settings are applied, the solid fill in the symbol instance would be invisible with 0 percent alpha (255 × −100 percent + 255 = 0), whereas the originally transparent fill would be visible with 60 percent alpha (102 × −100 percent + 255 = 153). Compare the modified testStar instance shown in Figure 11.14 with the original instance shown in Figure 11.13.
The confusion that these settings sometimes cause has created debate about whether negative alpha settings can really be applied. As long as you can remember that outside of the absolute settings for the Advanced color effect, 0 percent alpha is invisible, whereas with the Advanced color effect settings, a 0 alpha setting is equal to no effect, you will be able to prove as I just did, that negative alpha effects can be used to invert alpha values, similar to the way that negative color effects can be used to invert color values.
If you use Photoshop or other image-editing applications, you may be familiar with using blend modes, although for many people this remains a somewhat mysterious tool. Blends are rendering tools that analyze the pixel values of overlapping images (the blend image and the underlying base images) to create a rendered image that is a mix of the two. The type of blend applied determines the formula used to generate the pixel values in the combined image. Blend modes can be applied to Movie clip and Button symbol instances in the authoring environment by using the Blending menu in the Properties panel (shown in Figure 11.15). The blend image interacts with any underlying images that it overlaps, even if they are not on the same layer.
Tip
The line breaks that separate the blend modes in the Blending menu may seem arbitrary, but they actually differentiate the blend modes into groups based on the type of effect they have on images. Keep this in mind while you read the descriptions of each blend mode in the next section; you will start to notice similarities in the modes that are grouped.
Predicting the exact outcome of various blend modes is tricky because blends use different formulas on a pixel-by-pixel basis to mix the blended image with underlying images, and the result depends on the pixel values of both the underlying images (or base color) and the overlapping image (or blend color). The most common advice for working with blends is to experiment until you get a result that you like — I encourage you to do exactly that! However, it is helpful to have some idea of how each blend works and what visual problems they can solve. Compare Figure 11.16, which shows two source bitmaps (left and center), overlapped with blending set to Layer or Normal (right), to Figure 11.17, which shows the results of Flash blend modes applied to mix the images in various ways.
Figure 11.15. The Blending menu is available in the Display section of the Properties panel when you select a Movie clip or Button instance.
Figure 11.16. A base image (left) and a blend image (center) overlapped with blend mode set to Normal or Layer create a standard layered graphic with no mixing of pixel values (right).
Note
You'll notice that I didn't include an image in Figure 11.17 to illustrate the Layer blend mode applied by itself. That is because the Layer blend mode has no effect, unless it is combined with a nested Erase or Alpha blend mode.
Figure 11.17. The 12 different effects that can be created by applying blending to layered images. The results vary depending on the images that are combined, but the formula used for each blend type is consistent. Unlike other blend modes, the Alpha and Erase blend modes require a nested structure with a Layer blend applied to the parent symbol instance.
The blend modes available in Flash include the following:
Normal: The default blend mode for new symbol instances. No interpolation is applied and pixel values are left unchanged.
Layer: Creates no visual effect on its own, but is required for Alpha and Erase blend modes to work.
Darken: Compares the brightness of the pixels in the base image with the pixels in the blend image. Pixels in the base image that are lighter than the blend image are replaced with pixels from the blend image. Pixels in the base image that are darker than the blend image are left unchanged.
Multiply: Multiplies the RGB values of the pixels in the base image with the pixels in the blend image. The resulting pixels are a darkened combination of both the base image and the blend image. Multiplying any color with black results in solid black; multiplying any color with white leaves the pixels unchanged.
Lighten: Compares the brightness of the pixels in the base image with the pixels in the blend image. Pixels in the base image that are darker than the blend image are replaced with pixels from the blend image. Pixels in the base image that are lighter than the blend image are left unchanged. The blend image always disappears when it's layered over white.
Screen: Analyzes the color values and multiplies the inverse of the blend and base colors. The resulting pixels are a lightened combination of both the base image and the blend image. Screening with black leaves the base image unchanged. Screening with white produces solid white. The blend image always disappears when it's layered over white.
Overlay: Pixels are screened or multiplied depending, on the pixel values in the base image. If the base color is lighter than mid-gray, the image is lightened (screened), and if the base color is darker than mid-gray, the image is darkened (multiplied). The blend image overlays the base image while preserving the highlights and shadows of the base image. The resulting image is an even blend of the base image and the blend image, usually with increased contrast in both images. Overlaying black results in a shaded version of the base image. Overlaying white results in a bleached version of the base image. The blend image disappears when it's layered over any pure color (black, white, pure red, pure green, and so on).
Hard light: Pixels are screened or multiplied, depending on the pixel values in the blend image. If the blend color is lighter than mid-gray, the image is lightened (screened). If the blend color is darker than mid-gray, the image is darkened (multiplied). The base image is mixed with the blend while preserving the highlights and shadows of the blend image. Overlaying pure black or pure white results in solid black or solid white, respectively.
Add: Adds the color values of the blend image to the color values of the base image. The result is a bleached-out combination of the two images. Adding pure white results in a solid white image; adding pure black has no effect on the base image.
Subtract: Subtracts the blend color value from the base color value. The result is a darkened combination of the two images. Subtracting pure white from any color results in a solid black image. Subtracting pure black has no effect on the base image.
Difference: Analyzes the color values in the base and the blend and subtracts the brighter values from the darker values. The result is a reversal of color values. Black blended with any color has no effect. White blended with any color inverts the color. The resulting image looks like a film negative of the combined images.
Invert: Inverts the base image in any areas overlapped by the blend image. The contents of the blend image have no bearing on the transformation of the base color values; the blend image acts merely as an "active area" for the inversion effect.
Alpha: Alpha blend mode can be used to apply the contents of a nested Movie clip with alpha areas as a mask for an image in a parent Movie clip with Layer blend mode applied.
Erase: Erase blend mode can be used to apply the contents of a nested Movie clip as an eraser to cut out an area of an image in a parent Movie clip with Layer blend mode applied.
Tip
Using a solid fill with Alpha set to 0 percent in an Alpha blend has the same effect as using a solid fill in an Erase blend.
That's a lot of visual calculation to try and imagine without actually using blends. The steps for applying the "basic blends" (all but Alpha and Erase) are straightforward:
Select a Movie clip or Button symbol instance that you want to use as a blend image to layer with underlying base images.
Tip
Images on layers above the layer with the blend symbol instance are not transformed by the blend mode. Don't forget that you can use the Modify
Open the Display section in the Properties panel, and from the Blending menu, select a blend type.
That's it! You can see how the blend image interacts with different base images by dragging it to overlap other images in your Flash authoring environment. Color effects and filters can be used in combination with blend modes to get different hybrid results. All these effect tools interact to transform graphics rendered in the authoring environment, but they remain editable and each can be adjusted independently on an instance level. You can apply multiple blend modes on the same layer, but only one blend mode to any single symbol instance. The only compound blend modes are Alpha and Erase, which must be applied on a symbol timeline and combined with a Layer blend mode on the parent symbol instance, as described in the next section.
Warning
The background color of your Flash movie interacts with blend modes too. This is helpful to remember if the blend image is larger than the base image and you start getting unexpected results in the overhang areas. Applying a Layer mask to the blend image so that it is trimmed to match the base image removes any unwanted overhang areas that are mixing with the background color.
Alpha and Erase blends are a great complement to Flash's standard masking tools, which can be counterintuitive at times. If you want to create a cutout in a shape by using a traditional mask, you actually have to create a shape on a mask layer that covers all the areas except the area you want to cut out. If you have been working in Flash for a while, this workflow is probably second nature, but when it comes to more subtle mask effects, like gradients or irregular shapes, it can be a headache to have to reverse-engineer a mask graphic. With Alpha blends, what you see is what you get — or rather, what you don't see is what you won't get! The steps for creating a compound blend are as follows:
Create a Movie clip with content that will function as the base image (or convert an existing graphic that you want to mask into a Movie clip).
Open the Movie clip in Edit mode to access the Movie clip timeline. To do this, double-click an instance on the Stage or the symbol name in the Library list.
Create a new layer on the Movie clip timeline above the existing content that will be the base image for the Alpha or Erase blend. To protect the base image(s), you may want to lock all layers but the new layer.
Note
The base image or color can be any graphic type — shape primitive, drawing object, bitmap, or symbol instance — as long as it is nested inside of a Movie clip or Button symbol. The blend image has to be a Movie clip or Button symbol instance.
In the new layer, create a graphic that will act as a mask. Blend masks are the opposite of normal Flash layer masks in that the content in the Alpha or Erase blend symbol instance defines an area to make invisible in the base image rather than an area to make visible.
Warning
Any content in a symbol instance with an Erase blend mode applied defines the area to be punched out of (or erased from) the underlying base image. The content of a symbol instance with an Alpha blend mode applied has no effect unless it contains areas with transparency; the amount of information erased from the base images will match the level of Alpha transparency in the blend symbol instance. A symbol instance with content set to 0 percent Alpha and applied as an Alpha blend has the same effect as an Erase blend.
Convert the content on the blend layer into a Movie clip or Button symbol.
Select the symbol instance and position it on the Stage (still on the base image Movie clip timeline) to overlap the base image so that it defines the area you want to Erase or Alpha out. Next, use the Blending menu in the Properties panel to apply an Alpha or Erase blend mode. The content of the blend image disappears, but don't panic — continue to the next step to complete the compound blend.
Return to the Main Timeline. (Double-click an empty area of the Stage or use the Scene button at the top of the Document window.)
Select the parent symbol instance (that contains your base image and the currently invisible blend image), and use the Blending menu to apply a Layer blend. If you opened the base symbol from the Library in Step 2, make sure that you have an instance dragged onto the Stage on the Main Timeline so you can apply the Layer blend mode to the instance.
Voila! You should see the content of your blend image punched out (Erase blend) or rubbed out (Alpha blend) of the base image; either the background color of the Flash movie or any underlying images on the Stage will be visible through the empty areas created in the base image.
Note
Open Erase_blend.fla from the Blending folder in the ch11 folder on the CD-ROM if you want to analyze an example of the nested symbol structure required to render Erase and Alpha blend modes successfully.
In addition to supporting a more intuitive workflow for creating masks and enabling Alpha-based masks, compound blends can be used to create animated transition effects. Continue to the next section if you want to try using an Alpha blend to create an animated color fade effect.
The following example uses an animated Alpha blend to selectively fade out a black-and-white image to reveal a color image. The trick for this effect is to use two instances of the same color image, with the Adjust Color filter applied to make one instance a grayscale version. There are a lot of steps, but the final file structure is straightforward and the effect is pretty cool, so let's get started:
Open a new Flash document.
Import a color bitmap and convert it to a Movie clip (or place an existing Movie clip instance on the Stage, preferably one with bright colors).
Place two instances of the Movie clip on the Stage so that they are layered and aligned — select both instances and use the Vertical Center and Horizontal Center align commands.
Select the topmost Movie clip instance and use the Adjust Color filter (in the Filters section of the Properties panel) to set the Saturation of the image to −100. This drains the color out so that it looks grayscale.
With the grayscale Movie clip instance still selected, use the Blending menu (in the Display section of the Properties panel) to apply Layer blend mode. You won't see any visible change yet.
Double-click the grayscale Movie clip instance to access the Movie clip timeline in Edit mode.
Create a new layer at the top of the layer stack in the Movie clip timeline. Lock the other layer(s) with the bitmap or graphics you plan to use as a base image.
Select the Oval tool (O) in the Tools panel and set the Fill color to use a default radial gradient. Use the Color panel to apply 0 percent Alpha to the left color anchor. This should create a circular gradient fill that has a transparent center that fades out to black. Set the stroke color to None.
Click and drag on the Stage to create a circle that covers only a small area in the center of the original image. In our file, the circle image was 100 × 100 pixels.
Select the new circle and convert it into a Movie clip named
alpha circle.Use the Blending menu to apply an Alpha blend mode to the
alpha circleMovie clip instance. The circle Movie clip disappears, but don't panic. As you can see by the filled keyframe on the layer, the content is still there and you can select it to see the selection outline for the invisible instance.Double-click the
alpha circleinstance to access the Movie clip timeline and insert frames (F5) to extend the span of the circle graphic to frame 20. Convert frame 20 into a keyframe (F6).Select the circle graphic in keyframe 20 and use the Transform panel or the Position and Size section of the Properties panel to increase the size of the circle so that it is larger than the bitmap base image. I scaled the circle up to 400 × 400 pixels.
Select keyframe 1 (still in the alpha circle timeline) and apply a shape tween. You should now be able to scrub the Movie clip timeline to see the small circle in frame 1 scaling up to the size of the larger circle in frame 20.
In order to see the Alpha blend applied as a mask, you have to return to the Main Timeline (click the Scene button). The grayscale bitmap image should now have an area in the center that is "erased" in a soft, gradient circle that allows some of the color image to show through.
The animated effect is visible only in the published SWF file or the Test Movie environment. Press Ctrl+Return/
Note
To see the final result of our example file, open anim_Alpha_blend.swf from the Blending folder in the ch11 folder on the CD-ROM. To analyze the file structure, open anim_Alpha_blend.fla from the same location.
You can always go back inside the nested symbols to modify the level of alpha in the blend image or change the style of fill from a radial gradient to a linear gradient or even a solid fill (with alpha set to less than 100 percent). The level of masking matches the level of alpha in the contents of the Alpha blend symbol instance. Alpha blends can be used to mask any type of image — even bitmaps or shape primitives. The only requirement is that the Alpha blend must be applied to a symbol instance and that symbol instance must be nested inside a Movie clip with a Layer blend applied. This is just one way of using a blend mode to create an interesting visual effect. There are many other possibilities, and when you understand the workflow for applying basic and compound blends, the rest is just a matter of experimentation!
Besides storing and organizing the contents of your Flash project, layers offer some special features that help you create more advanced animation. Standard layers can be locked, hidden, or displayed as outlines, but they can also be converted into guide layers or mask layers. You can use each of these layer types to accomplish specific authoring tasks.
Flash gives you the flexibility to quickly change the behavior of layers at any time in the authoring environment so that you can take advantage of the special characteristics of each of these layer types as needed.
With the layer buttons at the lower-left corner of the Timeline window, you have the option of creating standard layers and folder layers. If you have already created a standard layer, you can convert it into a guide, mask, or folder layer by using the contextual menu (opened by right-clicking or Ctrl+clicking the layer bar) or by changing settings in the Layer Properties dialog box (opened by double-clicking the layer icon or by choosing Modify
Flash automatically converts layers if you drag them into specific positions in the stacking order with other layer types. Although this sounds a bit cryptic, it will make sense as you read about each layer type and how it affects other layers. Each layer type has a unique icon, as shown in Figure 11.18.
Figure 11.18. A unique icon in the layer stack identifies each of the layer types. You can quickly assign or change the behavior of a layer by using the contextual menu.
Note
Motion guide layers (shown in Figure 11.18) are now considered a "classic" feature because motion guides are created automatically on the same layer as your tweened item when you use the new tweening workflow in Flash CS5. This is a wonderful improvement to Flash, and in most cases motion guide layers are not missed. If you want to learn more about classic motion guides and how to apply them, refer to the archived content from Flash CS3 Professional Bible (Wiley, 2007): "Chapter 13: Applying Layer Types." You can find it online at www.flashsupport.com/archive.
Guide layers are the only layer types (aside from classic motion guide layers) that are not exported with your final Flash movie (.swf). Guide layers are used primarily when you need to use an element as a reference in the authoring environment (.fla), but you don't want it to be part of the finished movie (.swf). To convert an existing layer into a guide layer, you can use the contextual menu and select Guide. Alternatively, you can open the Layer Properties dialog box (shown in Figure 11.19) by double-clicking the layer icon (or choosing Modify
Tip
As you are developing a project, it can be helpful to "turn off" certain layers while you're testing content on other layers. For example, by temporarily turning a layer that contains a large background graphic into a guide layer, the movie (.swf) renders more quickly for preview in the Test Movie environment. Remember to turn all layers that you want exported back into normal layers before publishing your final movie (.swf), either by unchecking Guide in the contextual menu or by selecting the Normal check box in the Layer Properties dialog box.
Figure 11.19. Use the Layer Properties dialog box to convert a standard layer into a guide layer, mask layer, or even a layer folder.
You can place bitmaps and video sequences in guide layers if you want to use them as references for drawings or animated sequences that are drawn in Flash; think of it as working with tracing paper to redraw images. The content on a guide layer adds to the file size of the Flash document (.fla), but it won't be included with or add to the file size of the exported movie (.swf). Guide layers are also useful when organizing layouts in Flash that require special alignment, such as a circular or diagonal arrangement of multiple elements.
To create a guide layer that serves as a reference for aligning a custom layout, follow these steps:
Add a new layer to your Flash document (.fla) and make it a guide layer. Use the contextual menu or the Layer properties dialog box to convert a standard layer into a guide layer.
Place an imported image on the guide layer for reference, or use the Flash drawing tools to create any guide image needed (such as a circle or a freeform line).
Drag the guide layer below your art layers in the stacking order, or add a new layer above the guide layer if you need a fresh layer for arranging artwork.
Make sure that Snap to Objects is active by toggling on the Magnet option in the Tools panel or choosing View
Note
The guide layer workflow is especially helpful if you are trying to match a layout or design comp that might have been given to you in another format. Unfortunately, the Snap to Objects feature works only if the content of your guide layer is in a vector format. If you are working with a .pdf or a bitmap in the guide layer, the Snap to Objects feature won't be any help for aligning items on other layers with the content of the guide layer: In this case, you will find standard workspace guides (dragged onto the Stage with rulers toggled on in the View menu) more helpful.
Use the Arrow tool to drag elements on the art layers into alignment with the reference on the guide layer (see Figure 11.20).
Figure 11.20. Use snapping to align the center point of elements on your art layers with a reference shape or line on your guide layer (in vector format).
When you test your movie (Ctrl+Enter/
Add to or modify the reference content on the original guide layer or add additional guide layers if needed.
In the real world, a mask is used to selectively obscure items beneath it. In Flash, a mask layer is used to define the visible area of layers nested beneath it. Multiple layers can be nested as masked layers beneath a single mask layer. As with guide layers, the content on mask layers is not visible in the final SWF because it is intended only to modify how content in nested masked layers is rendered.
Figure 11.21. The content of the guide layer is not visible when the movie is published or viewed in the Test Movie environment.
Note
The various examples discussed in this section can be found in the MaskLayers subfolder of the ch11 folder. You may find it helpful to examine the structure of these files to understand the many ways that mask layers can be applied.
Almost any symbol or filled shape (excluding strokes) may be used to create a mask. However, Flash ignores bitmaps, gradients, transparency, colors, and line styles in a mask layer. Masks may be animated or static. The only other limitations are that you cannot apply a mask to content in another mask layer, and mask layers cannot be placed within Button symbol timelines.
Warning
Although groups, text boxes, and Movie clips or Graphic symbols can all be used to define a mask, only one such item is recognized on a single mask layer. You can use multiple primitive shapes to define a mask, but they override all other items existing on the same mask layer.
Here's how to create the simplest form of mask:
Make sure that the content that will be visible through the mask is in place on its own layer, with visibility turned on. This becomes the masked layer.
Create a new layer stacked above the masked layer. This becomes the mask layer.
In the mask layer, create the "aperture" through which the contents of the masked layer are viewed. This aperture can be any filled item, text, or placed instance of a symbol that includes a filled item. (Of course, lines can be used as masks if they are first converted to fills with the Modify
Position your mask content over the content on the masked layer (see Figure 11.22) so that it covers the area that you want to be visible through the mask.
Right-click (or Ctrl+click) the layer bar of the mask layer to open the contextual menu (see Figure 11.23), and choose Mask from the menu (or use the Layer Properties dialog box to change the layer behavior from Normal to Mask).
The layer icons change to indicate that the masked layer is now subordinate to the mask layer and both layers are automatically locked to activate the mask. The contents of the masked layer are now visible only through the filled portion(s) of the mask layer, as shown in Figure 11.24.
To reposition, or otherwise modify, the mask layer, temporarily unlock it (see Figure 11.25).
To reactivate masking, lock the mask layer again (and confirm that the masked layer is also locked). The contextual menu for mask layers and masked layers includes Show Masking. This handy command locks the mask layer and all nested masked layers for you.
Warning
When you first start working with mask layers, it is easy to forget to lock both the mask layer and the masked layer to make the mask effect visible. If you are ever having trouble editing or viewing your masked effect, just remember that when the layers are unlocked, the mask art is visible and editable, and when the layers are locked, the final masked effect is "turned on."
Figure 11.22. Position the content on the upper layer to cover the area that you want visible in the lower layer(s) when the mask is applied.
Multiple filled shapes can also be grouped and used as a mask, as long as the mask layer doesn't also contain primitive ungrouped shapes. Grouped shapes on the same layer as ungrouped shapes are ignored when the mask is applied. If a mask is composed of multiple items, using a group makes it easier to position the mask, as shown in Figure 11.26.
As you are reminded in nearly every chapter of this book, working with symbols is working smart because doing so helps to reduce file size. Because symbols composed of filled shapes can be used as masks, there's no reason not to use a symbol from your Library to make a mask. (If you've already made a shape on your mask layer, go ahead and convert it into a symbol so that you can use it again without adding to the final file size.) Reusing symbol instances to define masks is especially logical if you are making multiple masks that all have the same basic shape. For example, if you need a rectangular or oval mask, you will often find a symbol in your Library that was created to define the active area of a button or some other basic element. It is smarter to modify an instance of an existing symbol so that it works as a mask rather than to add redundant elements that increase your file size.
Note
Although in theory you can use a Button symbol instance as mask artwork, note that a Button symbol instance placed into a mask layer no longer functions as a button. The result of this workflow is similar to selecting a Button symbol instance and assigning it Graphic symbol behavior in the Properties panel.
To illustrate the way that symbols can be reused as both graphic content and as mask elements, I have used instances of a symbol as static content on a masked layer and then motion tweened another instance of the same symbol on a mask layer to create an animated oval reveal. Figure 11.27 shows the symbol instance used on the mask layer (on the left), the symbol instances used on the art layer (in the center), and the final mask effect visible when both layers are locked (on the right).
Note
Open the symbolMask.fla example from the MaskLayers folder inside the ch11 folder on this book's CD-ROM to see the animated effect.
Not only can text be masked, but it can also be used to mask other graphics. To mask text, simply set up your mask and art layers, as described in the preceding section, with the text to be masked on the lower layer, and the filled item that you'll use for your aperture on the mask layer, as shown in Figure 11.28.
To use text as a mask, the layers should be set up as described previously. In this situation, the text (which goes on the mask layer) looks as though it were filled by whatever is placed on the lower layer. For this to be effective, a larger point size and fuller, bold letterforms are best, as shown in Figure 11.29.
Warning
Although you can type as much text as you want in a single text box to apply as a mask, you can have only one text box per mask layer. To use multiple text boxes as mask elements, add separate mask layers for each text box.
Because the edges of mask letterforms may be hard to discern if the image underneath is not a solid color, it can be helpful to add a drop shadow to make the mask letters more legible. However, a drop shadow or an outline added to the text on the mask layer would not be visible, so you must copy the text onto a normal layer stacked above the mask layer as follows:
To keep the text copy aligned with the text mask, use Copy (Ctrl+C/
After you have copied the text in the mask layer, lock both the mask layer and the masked layer to protect them while you are working on the normal layer. The solid copied text completely obscures the masked image below, but you can apply a filter and use the Knockout option to drop out the fill of the text characters so that the masked content on the other layers is visible.
Select the copied text, and then use the Filters section in the Properties panel to add a Drop Shadow filter. The settings that I applied to our example, including the Knockout option, are shown in Figure 11.30. You can adjust the intensity and color of the shadow and the position of the copied (knocked-out) text until you like the end result.
Tip
The Glow Filter works to define the text too, as long as you apply the Knockout option.
Of course, you can also animate content on masked layers separately from the content on mask layers. But the endless possibilities for layering masks and masked content starts to get confusing when the additional variable of animation is thrown in. To make the best use of these features, take the extra time to carefully consider the most efficient way to achieve the final effect that you want. First consider what you want to see on the Stage, and then plan any animation of visible elements. The next step should be adding a mask if needed, and finally adding animation to the mask itself. Try to create your effects with the fewest possible animated elements: You will waste less production time and end up with a more optimized file.
Tip
When working on multiple nested layers, it can be visually confusing to work on animation while all layers are displayed. Click the dot in the Eye toggle column to hide or show specific layers in the Timeline so that you can concentrate on only the elements that you are currently editing. Also, to avoid changing the wrong items, lock all layers that you are not currently modifying.
Keeping some basic principles in mind as you are working with multiple masks and animated elements will help you to follow the logic of masking in Flash:
The mask always goes above the item that it reveals.
Filled items on mask layers function as windows that reveal content on the masked layers nested beneath them.
The content on mask layers is visible in the authoring environment only if the mask layer is unlocked. For the applied mask to preview properly in the authoring environment, both the mask layer and the masked layer(s) must be locked.
Mask layers apply only to layers that are nested below them as masked layers. Normal layers or guide layers that may be lower in the layer stack (but not nested with the mask layer) are not affected by the mask.
Multiple layers can be nested below a single mask layer, but masks cannot be applied to other mask layers, and each mask layer can contain only one masking item (with the exception of multiple primitive shapes or drawing objects).
Content on mask layers is not visible in the final movie (.swf).
The Distribute to Layers command (Shift+Ctrl+D/Shift+
To apply Distribute to Layers:
Select the items that you want to have moved to discrete layers. These items can be symbols, groups, shapes, text blocks, and even bitmaps or video objects.
Choose Modify
When items have been distributed to new layers, you can delete any old layers that have been left empty and rename any new layers that Flash gave awkward names to.
The auto-created layers are stacked from top to bottom below the currently selected layer in the order that the selected items were created. So the most recently created item should be placed on a layer at the bottom of the stack, just above the layer that was formerly below the selected layer, and the item that was created before the others in the selection is placed at the top of the stack, just below the currently selected layer. If you are completely disoriented by now, have a look at Figure 11.31 to see a file with the layer order before applying Distribute to Layers to the selected items, and look at Figure 11.32 to see how the new layers are stacked and named.
Figure 11.31. A Flash document with the original layer structure for some bitmaps, symbols, shapes, and a broken-apart text block to be distributed to layers
Characters from a broken-apart text block are stacked in layers in the same order that the text block was created (from left to right, right to left, or top to bottom). Flash names auto-created layers with the following conventions:
A new layer made for any asset stored in the library (a symbol, bitmap, or video clip) is given the same name as the asset.
A new layer made for a character from a broken-apart text block is named with the text character or letter.
Warning
When you apply Distribute to Layers to text blocks that have not been broken apart, new layers are named with the entire text string. It is best to rename these layers because they usually are difficult to read and may even exceed the 64-character limit for layer names.
A new layer made for a shape (which is not stored in the library) is named in the same numeric sequence as other layers in the current document (Layer 1, Layer 2, and so on).
A new layer made for a named symbol instance is given the instance name rather than the stored symbol name.
Any layer can always be renamed after it has been created.
Filter options in the Properties panel include layering filters and saving presets, without any scripting or special timeline structures required.
The built-in filters are somewhat limited on their own. The good news is that filters can be combined with blend modes, properties, Transform tools, and tweens to expand their potential well beyond the default settings.
The options to copy and paste filters from one item to another or save filter settings as presets are time-savers if you want to reuse specific filter effects on multiple elements in your movie.
Filter properties are included in the Motion Editor for animated elements, making it easier to create or modify custom easing curves to adjust the progression of various properties individually in the same tween.
Understanding the unique powers of the Adjust Color filter and the Color Effect styles available in the Properties panel gives you many options for controlling the appearance of symbol instances, including the option of using negative values to invert the color or alpha of an element.
The Blend mode menu in the Properties panel brings some of the power of Photoshop into the Flash authoring environment: Graphics can be blended in subtle and interesting ways.
The three layer types available in the Flash authoring environment are Normal, Mask, and Guide. A unique layer icon identifies each layer type. Classic motion guides are also still available in Flash CS5, but in most cases you can use the auto-created motion guides created with the optimized motion tween workflow.
You can assign or modify layer types in the Layer Properties dialog box, which you open by double-clicking any layer icon.
When you select multiple items on the same layer and use the Distribute to Layers command, they can automatically be moved to new, auto-created layers.
You use guide layers to hold content that is needed only for reference in the authoring environment, or to speed up movie testing as you develop a project, by temporarily keeping the content on specific layers from being exported with the SWF.
You can mask any content that you create in a Flash document with a static or animated mask layer.
You can use filled shapes, text, and symbol instances to define the mask area (or window) on a mask layer, but this content is not visible in the final movie (.swf).