Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > Working with filters using ActionScript > About the gradient bevel filter > Applying a gradient bevel filter

Applying a gradient bevel filter

The GradientBevelFilter class lets you apply a gradient bevel effect to objects in Flash. A gradient bevel is a beveled edge that's enhanced with gradient color on the outside, inside, or top of an object. Beveled edges bring a three-dimensional look to objects, and can have colorful results as shown in the following figure.

For more information on this filter, see GradientBevelFilter (flash.filters.GradientBevelFilter) in the ActionScript 2.0 Language Reference.

The following procedure uses the Drawing API to draw a square on the Stage, and applies a gradient bevel filter to the shape.

To use the gradient bevel filter:

1. Create a new Flash document and save it as gradientbevel.fla.
2. Add the following ActionScript to Frame 1 of the Timeline:

   import flash.filters.GradientBevelFilter;
   var shapeClip:MovieClip = this.createEmptyMovieClip("shape_mc", 1);
   with (shapeClip) {
       beginFill(0xFF0000, 100);
       moveTo(0, 0);
       lineTo(200, 0);
       lineTo(200, 200);
       lineTo(0, 200);
       lineTo(0, 0);
       endFill();
   }
   shapeClip._x = (Stage.width - shapeClip._width) / 2;
   shapeClip._y = (Stage.height - shapeClip._height) / 2;
   var colors:Array = new Array(0xFFFFFF, 0xCCCCCC, 0x000000);
   var alphas:Array = new Array(1, 0, 1);
   var ratios:Array = new Array(0, 128, 255);
   var gradientBevel:GradientBevelFilter = new GradientBevelFilter(10, 45, colors, alphas, ratios, 4, 4, 5, 3);
   var mouseListener:Object = new Object();
   mouseListener.onMouseDown = function() {
       gradientBevel.strength++;
       shapeClip.filters = [gradientBevel];
   };
   mouseListener.onMouseMove = function() {
       gradientBevel.blurX = (_xmouse / Stage.width) * 255;
       gradientBevel.blurY = (_ymouse / Stage.height) * 255;
       shapeClip.filters = [gradientBevel];
   };
   Mouse.addListener(mouseListener);
   

   This code uses the Drawing API to draw a square on the Stage, which is placed at the center of the Stage. When you move the mouse pointer around the Stage, the amount of blurring along the x-axis and y-axis increases or decreases. When you move your pointer towards the left of the Stage, the amount of horizontal blurring decreases. When you move the pointer towards the right of the Stage, the blurring increases. Similarly, the higher the pointer is on the Stage, the smaller the amount of blurring that occurs along the y-axis.

3. Select Control > Test Movie to test the document and view the results.

Flash CS3