Beginner's Guide to Adobe Flash/Filters and Blend Modes/Adding Filters

Adding Filters

The Filters panel is nested alongside the Property inspector in the default Flash layout.

To add a filter, first select a MovieClip, text field, or button symbol. Next, either click on the Filters tab in the Property inspector, or open the filters panel. After a filter is selected, it will appear in a list on the left side of the filters panel, and you will see the filter effect applied to the selected item.

The settings for each filter are different, so it is best to try them out and see what each one does. It will be fairly simple to adjust each filter to your liking. If you would like to remove a filter, just select the name of the filter in the list and click the minus symbol at the top of the panel.

To select the individual settings for an applied filter at any time, simply select a single filter in the filter panel list. Be careful of using too many filters at once, though, as it has a tendency to make your project look tacky. You can also toggle these on and off to view different filter combinations. This is done by clicking the check mark or cross icon that appears next to the filter name.

It would be impossible to let you know all about every filter combination, but I can go over some of the main settings as a place to start your experimentation.

Blur X, Blur Y: This sets the distance that the edge of a shape will extend either horizontally (X) and vertically (Y).

Strength: This sets the opacity of the filter effect you are using. The default is 100, or 100 % opacity. You will usually want to change this to anywhere between 1 and 100 to achieve the desired opacity. If you wish to change the opacity of a filter past 100 percent, it will add opacity to the softened area of the shape. The maximum strength is 1,000 percent, but the result will be an expanded solid shape with a jagged edge, much like something rendered without anti-aliasing, so use this only if you have a good reason.

Quality: This sets the smoothness of the rendered filter. It also has an impact on the performance of the finished movie. Quality is low by default, and as the quality is increased, gradients are smoother, and the steps in blurs are softened. However, if performance is an issue, you should make adjustments in the color and blur settings instead.

Color: Click on color chips to access currently loaded swatches, and set the colors you will use for rendering Drop shadow and Glow effects. These colors can be picked on the color wheel, or by their specific hexidecimal number values. Drop shadow's default solid color is black. Glow's default solid color is red. The solid color set will fade from solid to transparent, making a soft glow or shadow effect, depending on the color choice. The Bevel filter requires a shadow and a highlight color, by default black and white. The Gradient bevel and glow make it possible to add multiple colors to gradients. If you click the color anchors on the gradient strip, you can change the colors being used in that particular gradient.

Angle: This sets the direction of offset that is applied with the Distance setting. For instance, if you set the distance to 0, the angle setting will have no visible effect. By default, this setting is at a 45 degree angle, and the range is at 0 to 360 degrees. You can change this setting either by entering numbers manually, or by clicking and dragging on the circle.

Distance: This sets how many pixels the distance is between the center of the item, and the center of the gradient.

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) will have no visible effect. The default is a 45-degree angle and the range is 0 to 360 degrees. You can change this setting by manually entering a number (decimals are allowed), or by dragging a small circle icon around a fixed 360-degree arc invoked by clicking the arrow (drop-down menu) icon next to the Angle value field. The higher the Distance setting, the more obvious the off- set 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 will be center-aligned.

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 ren- dered 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 ren- dered gradient from outside to inside the boundary of the original shape. For the multi- color 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.

Hide object: This option is the secret to creating sophisticated Drop shadows (as we describe later in this chapter). When Hide object is enabled, the original object disap- pears, but the drop-shadow is preserved.

The filter settings we have described thus far relate to the various gradient-based filters. The sliders 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 Photos hop 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.