Recipe 7.12. Filling a Shape with a Solid or Translucent Color

Problem

You want to draw a shape and fill it with a solid or translucent color at runtime.

Solution

Use the Graphics.beginFill( ) and Graphics.endFill( ) methods to initiate and close a shape drawn at runtime.

Discussion

To draw a filled shape, call beginFill( ) prior to any other drawing methods. Invoke endFill( ) after calling other drawing methods to create the shape.

You cannot apply a fill to an existing shape drawn at authoring time or runtime. Before drawing the shape you want filled, you must first invoke the beginFill( ) method.

This example creates a solid green square:

sampleSprite.graphics.lineStyle(  );
sampleSprite.graphics.beginFill(0x00FF00);
sampleSprite.graphics.lineTo(100, 0);
sampleSprite.graphics.lineTo(100, 100);
sampleSprite.graphics.lineTo(0, 100);
sampleSprite.graphics.lineTo(0, 0);
sampleSprite.graphics.endFill(  );

The MovieClip.beginFill( ) method accepts two parameters:

fillColor: The RGB value to use for the fill.
alpha: The value between 0 (transparent) and 1 (opaque) that controls the opacity. The default is 1.

To create a translucent, filled shape, specify an alpha less than 1. If alpha is 0, the shape appears unfilled. However, setting the alpha to 0 is often appropriate. For example, you may want to create a draggable movie clip within which parts are transparent. Setting the fill alphas for those parts to 0 can help to accomplish that.

The endFill( ) method does not require any parameters. It simply ends the fill initiated with beginFill( ), beginGradientFill( ), or beginBitmapFill( ). To avoid unexpected results, ensure that the pen returns to the starting point to complete the shape before invoking endFill( ).