Macromedia Flash MX dynamic drawing basics

New to Macromedia Flash MX is the ability to draw lines, curves and area fills using ActionScript. The code for drawing all three is very compact and simple, as you will see below.

Lines

One of the new drawing commands, lineTo(), draws a straight line in a movie clip instance. This command must be used in conjunction with the lineStyle() command, which sets the attributes of the line. To draw a line in ActionScript, you need the following lines of code in your movie:

instance.lineStyle(thickness, rgb, alpha);
instance.lineTo(x, y);

Parameters for both commands are described in the following tables:

Notice that no starting x or y coordinates are needed as the line is drawn from the current drawing position within the movie clip instance. This means that each subsequent line will be drawn from the end of the previous line. This can cause some confusion at first if you are trying to draw lines that are not connected. However, not to worry…you may move the drawing position by using the moveTo() command:

instance.moveTo(x, y);

Curves

Also new is the curveTo() command, which draws a curve in a movie clip instance. Like lineTo(), this command must be used in concert with the lineStyle() command. To draw a curve in ActionScript, you need the following lines of code in your movie:

instance.lineStyle(thickness, rgb, alpha);
instance.curveTo(control x, control y, x, y);

The curveTo() parameters are described in the following table:

What separates curves from lines is the need for control points. Control points allow you define the amount of curvature in the curved line drawn on screen, and are similar to the control points that you may have seen in vector-based illustration programs. When a curve is drawn, the curve starts out heading towards the control point, curves away before reaching it, and ends at the end point. The best way to see how this works is to experiment with different values and make note of the effect.

Curves, like lines, are drawn from the current drawing position in the movie clip instance—making it necessary to use the moveTo() command to draw unconnected curves.

Filled polygons

Two new commands, beginFill() and endFill(), when used in combination with the lineTo(), curveTo(), and lineStyle() commands allow you to fill areas bounded by lines and curves with solid colors. To draw a fill in ActionScript, you need the following lines of code in your movie:

instance.lineStyle(thickness, rgb, alpha);

instance.endFill();

The beginFill() parameters are described in the following table:

When drawing solid fills, be aware that using the moveTo() command will erase areas of the fill. It is best to begin fills after moveTo() commands and end fills before moveTo() commands. Also note that fills will close if the lines drawn between the beginFill() and endFill() commands do not form a closed polygon.

Clearing the drawing

Macromedia Flash MX includes a new command for clearing the lines, curves and fills created by the methods above. To clear a movie clip instance of all dynamically drawn objects, use the following line of code:

instance.clear();

This command is very helpful when lines, curves or fills have to be modified or redrawn. This line of code will be used each time we render our 3D objects. Notice that the clear() command clears the movie clip of all color, alpha, line thickness, and drawing position information as well as the drawing itself.

In the next section we’ll analyze the code for 3D ActionScript.