Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > Working with filters using ActionScript > Creating gradient glows

Creating gradient glows

The GradientGlowFilter class lets you create a gradient glow effect for a variety of objects in Flash. A gradient glow is a realistic-looking glow with a color gradient that you can specify. You can apply a gradient glow around the inner or outer edge of an object or on top of an object.

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 then applies a gradient glow filter to the shape. Clicking the square on the Stage increases the filter's strength, whereas moving the mouse pointer horizontally or vertically modifies the amount of blurring along the x-axis or y-axis.

To apply a gradient glow filter:

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

   import flash.filters.GradientGlowFilter;
   // create a new shapeClip instance
   var shapeClip:MovieClip = this.createEmptyMovieClip("shapeClip", 10);
   // use 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
   shapeClip._x = 100;
   shapeClip._y = 100;
   // define a gradient glow
   var gradientGlow:GradientGlowFilter = new GradientGlowFilter(0, 45, [0x000000, 0xFF0000], [0, 1], [0, 255], 10, 10, 2, 3, "outer");
   
   // define a mouse listener, listen for two events
   var mouseListener:Object = new Object();
   mouseListener.onMouseDown = function():Void {
       gradientGlow.strength++;
       shapeClip.filters = [gradientGlow];
   };
   mouseListener.onMouseMove = function():Void {
       gradientGlow.blurX = (_xmouse / Stage.width) * 255;
       gradientGlow.blurY = (_ymouse / Stage.height) * 255;
       shapeClip.filters = [gradientGlow];
   };
   Mouse.addListener(mouseListener);
   

   The previous code is split into three sections. The first section of code uses the Drawing API to create a square and positions the shape on the Stage. The second section of code defines a new gradient glow filter instance, which creates a glow from red to black. The third section of code defines a mouse listener, which listens for two mouse event handlers. The first event handler is onMouseDown, which causes the strength of the gradient glow to increase. The second event handler is onMouseMove, which is called whenever the mouse pointer moves within the SWF file. The further the mouse pointer moves from the upper-left corner of the Flash document, the stronger the glow effect that is applied.

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

   As you move your mouse pointer around the Stage, the gradient glow filter's blur increases and decreases strength. Click the left mouse button to increase the glow's strength.

Flash CS3