Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > Working with filters using ActionScript > Using the bevel filter

Using the bevel filter

The BevelFilter class lets you add a bevel effect to a variety of objects in Flash. A bevel effect gives objects a three-dimensional look. You can customize the look of the bevel with different highlight and shadow colors, the amount of blur on the bevel, the angle of the bevel, the placement of the bevel, and a knockout effect.

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

The following procedure uses the Drawing API to create a square, and adds a bevel to the shape.

To use the bevel filter:

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

   import flash.filters.BevelFilter;
   // define a bevel filter
   var bevel:BevelFilter = new BevelFilter(4, 45, 0xFFFFFF, 1, 0xCC0000, 1, 10, 10, 2, 3);
   // create a new shapeClip instance
   var shapeClip:MovieClip = this.createEmptyMovieClip("shapeClip", 1);
   // use the Drawing API to create a shape
   with (shapeClip) {
       beginFill(0xFF0000, 100);
       moveTo(0, 0);
       lineTo(100, 0);
       lineTo(100, 100);
       lineTo(0, 100);
       lineTo(0, 0);
       endFill();
   }
   // position the shape on the Stage
   shapeClip._x = 100;
   shapeClip._y = 100;
   // click the mouse to increase the strength
   shapeClip.onPress = function():Void {
       bevel.strength += 2;
       shapeClip.filters = [bevel];
   };
   
   // define a listener to modify the filter when pointer moves
   var mouseListener:Object = new Object();
   mouseListener.onMouseMove = function():Void {
       bevel.distance = (_xmouse / Stage.width) * 10;
       bevel.blurX = (_ymouse / Stage.height) * 10;
       bevel.blurY = bevel.blurX;
       shapeClip.filters = [bevel];
   };
   Mouse.addListener(mouseListener);
   

   The first section of code defines a BevelFilter instance, and uses the Drawing API to draw a square on the Stage. When you click the square on the Stage, the current strength value of the bevel increments and gives the bevel a taller, sharper appearance. The second section of code defines a mouse listener, which modifies the bevel's distance and blurring based on the current position of the mouse pointer.

3. Select Control > Test Movie to test the Flash document.

   When you move the mouse pointer along the x-axis, the offset distance of the bevel increases or decreases. When you move the mouse pointer along the y-axis, the mouse pointer's current coordinates modifies the amount of horizontal and vertical blurring.

Flash CS3