Creating color fills with ActionScript

After you learned how to draw lines and curves with ActionScript, let's see how to make shapes that will be filled with colors.

1. Open a new Flash document.Call the first layer actions. Click in the first keyframe of this layer and press F9 (PC) or ALT+F9 (Mac) to open up the Actions panel. Enter the following code:

_root.lineStyle(2, 0x003366, 100);
_root.moveTo(200, 100);
_root.lineTo(300, 100);
_root.lineTo(300, 200);
_root.lineTo(200, 200);
_root.lineTo(200, 100);

Test your movie and you will see a rectangle with a blue border drawn on stage.

2. Add the following code to the existing one (shown in bold):

_root.lineStyle(2, 0x003366, 100);
_root.moveTo(200, 100);
_root.beginFill(0xFF6600, 100);
_root.lineTo(300, 100);
_root.lineTo(300, 200);
_root.lineTo(200, 200);
_root.lineTo(200, 100);
_root.endFill();

Test your movie and you will see your rectangle filled with a nice hue of orange.

The first added line,

_root.beginFill(0xFF6600, 100);

begins the filling, and starts before the first line is drawn. That is important - you must always give Flash the command to start filling your drawing before any lineTo command. Why? Try the following: put the line with the beginFill command after the fourth line of code (shown below). Test the movie and see the result.

_root.lineStyle(2, 0x003366, 100);
_root.moveTo(200, 100);
_root.lineTo(300, 100);
_root.lineTo(300, 200);
_root.beginFill(0xFF6600, 100);
_root.lineTo(200, 200);
_root.lineTo(200, 100);
_root.endFill();

You will get garbage, not a nice drawing, as a result. You can return the line with the beginFill command at its proper place now. The first parameter of the beginFill command determines the color of the fill, the second one its alpha property (i.e. its transparency), with 0 being completely transparent, and 100 completely opaque.

The line

_root.endFill();

simple ends the filling. Notice that it is placed after the last line has been drawn. This command (or method, as it is called in programming languages) has no parameters - the parentheses are empty because it simply ends the fill. There is no need to say with which color the fill should end.

3. If you want, you can also make a shape with no border at all. Try this:

_root.beginFill(0xFFCC00, 100);
_root.moveTo(180, 20);
_root.lineTo(300, 20);
_root.lineTo(300, 120);
_root.lineTo(180, 120);
_root.lineTo(180, 20);
_root.endFill();

As you probably noticed, there is no lineStyle method in this case. That is possile when using fills to draw a shape. When there is no fill, you must use the lineStyle method.

4. You can fill the shapes drawn with the curveTo command also. Erase the former code (after saving it under a different name, so you can keep the rectangle example) and enter the following:

_root.lineStyle(8, 0xAA00AA, 100);
_root.moveTo(240, 100);
_root.beginFill(0xFF51A8, 100);
_root.curveTo(60, 0, 240, 300);
_root.curveTo(420, 0, 240, 100);
_root.endFill();

You should see a nice pink-filled heart appear! Since this isn't enough to impress your loved one, you must learn how to make gradient fills. ;-)

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!