Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

Flash Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Using Filters

Last updated Aug 22, 2003.

If you’re looking for more up-to-date information on this topic, please visit our Flash article, podcast, and store pages.

For years, developers and designers have been hounding Macromedia to include filter support in Flash because filters make it so easy to add drop shadows and other visual effects. Well, the Flash community can finally call off the dogs. I am delighted to tell you that Flash 8 now supports filters.

Before There Were Filters

In the past, it was a royal pain to add simple effects such as drop shadows. The only way to do it was to import a bitmap, which meant increased file sizes and limited editing abilities. The following image shows a drop shadow added to a bitmap in Fireworks:

Figure 01

Figure 1

In the past, you would have had to import this image into Flash, adding an extra 4K to your Flash movie. In Flash 8, however, any text or movie clip can have filters applied. The Property Inspector now supports an extra Filters tab, which you can see in the following image.

Figure 02

Figure 2

As you can see in the above image, Drop Shadow is now one of the visual filter effects you can add. The following image shows the same text with the same filter properties as the bitmap image in a Flash image.

Figure 03

Figure 3

Now, the image is both a vector image and you have eliminated the extra burden of importing graphics. The total file is now only 786 bytes.

As you might expect, you can access the new filters through ActionScript. The following example takes the text above and animates the shadow. 

import flash.filters.DropShadowFilter;
var newNumber:Number = 0
function myTimer():Void {
  newNumber = ++newNumber;
  var distance:Number = 20;
  var angleInDegrees:Number = newNumber;
  var color:Number = 0x000000;
  var alpha:Number = .8;
  var blurX:Number = 16;
  var blurY:Number = 16;
  var strength:Number = 1;
  var quality:Number = 3;
  var inner:Boolean = false;
  var knockout:Boolean = false;
  var hideObject:Boolean = false;
  var filter:DropShadowFilter = new DropShadowFilter(
   distance,
   angleInDegrees,
   color,
   alpha,
   blurX,
   blurY,
   strength,
   quality,
   inner,
   knockout,
   hideObject);
  var filterArray:Array = new Array();
  filterArray.push(filter);
  txt.filters = filterArray;
}
var intervalID:Number = setInterval(myTimer, 25);

The ActionScript allows the shadow to move around the text. To duplicate this with bitmap images would add nearly 1.5MB to the final Flash movie. The ActionScript has increased the final movie to 1Kb. That is a file saving in excess of 1,000%.

Exploring Filters in Flash 8

You will not find a massive collection of filters in Flash 8. What you will find are the core filters essential for most drawing. The included filters are:

  • Drop Shadow
  • Blur
  • Glow
  • Bevel
  • Gradient Glow
  • Gradient Bevel
  • Adjust Color

You can include one or more filters on any one movie clip. Each filter comes with its own set of parameters, which can be adjusted directly in the Flash 8 Authoring tool in the Properties Inspector or programmatically through ActionScript.

Drop Shadow

The Drop Shadow filter, which has always been one of my favorites, allows you to control the following parameters:

  • distance: pixel distance for drop shadow (floating point)
  • angle: angle in degrees of shadow (floating point) (file format is radians) (0 to 360 range)
  • color: 0x00RRGGBB - color
  • alpha: alpha percentage for our drop shadow color (0.0 to 1.0 range)
  • blurX: amount to blur in the x direction (floating point value) (0 to 255.0)
  • blurY: amount to blur in the y direction (floating point value) (0 to 255.0)
  • strength: punch strength of the shadow (0.0 to 255.0 while 1.0 is normal value)
  • quality: how many times to perform the blur (3 is approximate to Gaussian blur) (0 to 15 range)
  • inner: true/false - is this an inner shadow
  • knockout: true/false - is this a knockout shadow

This is what the filter looks like on the sample text:

Figure 04

Figure 4

Blur

Blue softens your image's edges. The Blur filter comes with the following parameters you can control:

  • blurX: amount to blur in the x direction (floating point value) (0 to 255.0)
  • blurY: amount to blur in the y direction (floating point value) (0 to 255.0)
  • quality: how many times to perform the blur (3 is approximate to Gaussian blur) (0-15)

This is what the filter looks like on the sample text:

Figure 05

Figure 5

Glow

You can now add a glow to your movie clips. The Glow filter comes with the following parameters you can control:

  • color: 0x00RRGGBB - color
  • alpha: alpha percentage for color (0.0 to 1.0 range)
  • blurX: amount to blur in the x direction (floating point value) (0 to 255.0)
  • blurY: amount to blur in the y direction (floating point value) (0 to 255.0)
  • strength: punch strength of the glow (0.0 to 255.0 while 1.0 is normal value)
  • quality: how many times to perform the blur (3 is approximate to Gaussian blur) (0 to 15 range)
  • inner: true/false - is this an inner glow
  • knockout: true/false - is this an knockout glow

This is what the filter looks like on the sample text:

Figure 06

Figure 6

Bevel

You can now also add bevels—like those used on a lot of buttons—to your Flash movies. The Bevel filter comes with the following parameters you can control:

  • distance: pixel distance for bevel (floating point)
  • angle: angle in degrees of bevel (floating point) (file format is radians) (0 to 360 range)
  • highlightColor: 0x00RRGGBB - 1st color
  • highlightAlpha: alpha percentage for highlightColor (0.0 to 1.0 range)
  • shadowColor: 0x00RRGGBB - 2nd color
  • shadowAlpha: alpha percentage for shadowColor (0.0 to 1.0 range)
  • blurX: amount to blur in the x direction (floating point value) (0 to 255.0)
  • blurY: amount to blur in the y direction (floating point value) (0 to 255.0)
  • strength: punch strength of the bevel (0.0 to 255.0 while 1.0 is normal value)
  • quality: how many times to perform the blur (3 is approximate to Gaussian blur) (0 to 15 range)
  • type: "inner", "outer" or "full"
  • knockout: true/false - is this a knockout bevel

This is what the filter looks like on the sample text:

Figure 07

Figure 7

Gradient Glow

Gradient Glow applies a glow that uses a gradient within it. The Gradient Glow filter comes with the following parameters you can control:

  • color: 0x00RRGGBB - color
  • alpha: alpha percentage for color (0.0 to 1.0 range)
  • blurX: amount to blur in the x direction (floating point value) (0 to 255.0)
  • blurY: amount to blur in the y direction (floating point value) (0 to 255.0)
  • strength: punch strength of the glow (0.0 to 255.0 while 1.0 is normal value)
  • quality: how many times to perform the blur (3 is approximate to Gaussian blur) (0 to 15 range)
  • inner: true/false - is this an inner glow
  • knockout: true/false - is this an knockout glow
  • ratios: an array of ratios to define a gradient. Same format as for gradient fill drawing API.

This is what the filter looks like on the sample text:

Figure 08

Figure 8

Gradient Bevel

The Gradient Bevel filter applies a bevel that uses a gradient within it. The Gradient Bevel filter comes with the following parameters you can control:

  • distance: pixel distance for bevel (floating point)
  • angle: angle in degrees of bevel (floating point) (file format is radians) (0 to 360 range)
  • highlightColor: 0x00RRGGBB - 1st color
  • highlightAlpha: alpha percentage for highlightColor (0.0 to 1.0 range)
  • shadowColor: 0x00RRGGBB - 2nd color
  • shadowAlpha: alpha percentage for shadowColor (0.0 to 1.0 range)
  • blurX: amount to blur in the x direction (floating point value) (0 to 255.0)
  • blurY: amount to blur in the y direction (floating point value) (0 to 255.0)
  • strength: punch strength of the bevel (0.0 to 255.0 while 1.0 is normal value)
  • quality: how many times to perform the blur (3 is approximate to Gaussian blur) (0 to 15 range)
  • type: "inner," "outer," or "full"
  • knockout: true/false - is this a knockout bevel
  • ratios: an array of ratios to define a gradient. Same format as for gradient fill drawing API.

This is what the filter looks like on the sample text:

Figure 09

Figure 9

Adjust Color

You can exert precise color control over your movies with the Adjust Color filter. The Adjust Color filter comes with the following parameters you can control:

  • mapImage: an BitmapData object containing the displacement map data.
  • mapPt: a flash.geom.Point value that contains the offset of the upper left corner of our MovieClip to the upper left corner of our map image.
  • componentX: one of the following values - "R," "G," "B," or "A" - describes which color channel to use in the map image to displace x result
  • componentY: one of the following values - "R," "G," "B," "A" - describes which color channel to use in the map image to displace x result
  • scaleX: multiplier to use to scale displacement result from map calculation
  • scaleY: multiplier to use to scale displacement result from map calculation
  • mode: one of the following values:
    • "wrap" - wrap our displacement value to other side of source image
    • "clamp" - clamp our displacement value to edge of source image
    • "color" - if displacement value is outside image, substitute (defaultColor, defaultValue) value
    • "ignore" - if displacement value is outside of range, ignore displacement and use source pixel
  • color: if mode is "color," what color to use for out of bounds displacements
  • alpha: if mode is "color," what alpha to use for out of bounds displacements (range 0.0-1.0)

This is what the filter looks like on the sample text:

Figure 10

Figure 10

Summary

I've only just touched on what you can do with filters in this section of the guide. There is plenty of room for you to experiment with this cool and space-saving feature.

Save To Your Account