Recipe 4.1 Drawing a Line

4.1.1 Problem

You want to draw a line using ActionScript.

4.1.2 Solution

Use the lineStyle( ) method to specify the thickness, color, and transparency of the line. Then use the lineTo( ) method to draw a line from the current pen position to a destination point.

4.1.3 Discussion

Before you can draw anything using ActionScript, you need to tell Flash what kind of line style to use. The line style consists of the line's thickness, color, and alpha value (opacity), and you can set these values using the lineStyle( ) method on the movie clip in which you wish to draw. The line's thickness should be specified in pixels, but any value less than 1 draws lines with hairline thickness. Color values should be specified as numbers, as explained in the Introduction to Chapter 3. The alpha value should be anywhere from 0 (completely transparent) to 100 (completely opaque).

// Set a 1-pixel, blue, completely opaque line style.
myMovieClip_mc.lineStyle(1, 0x0000FF, 100);

The most basic type of drawing that you can do with ActionScript is drawing a straight line. Flash uses the current pen position as the starting point, so you need to provide only the coordinates of the destination point. Use the MovieClip.lineTo( ) method to create a line from the current pen position to the specified destination point:

// Draws a line from the current pen position to (100,100) within the coordinate
// system of myMovieClip_mc.
myMovieClip_mc.lineTo(100, 100);

When you use ActionScript methods to draw, all the lines and fills are drawn within the movie clip from which the methods are invoked. For example, in the preceding code, the line is drawn within myMovieClip_mc. Additionally, the line style must be defined for each movie clip. If you define a line style for myMovieClip_mc, but then you try to use the lineTo( ) method with another movie clip instance, Flash does not draw anything.

As mentioned previously, when you use the Drawing API methods such as lineTo( ), Flash draws the line beginning at the current pen position. If you have not otherwise moved the pen (by calling a lineTo( ), curveTo( ), or moveTo( ) method), the pen is positioned at the origin of the movie clip's coordinate system, point (0,0). The origin is the clip's registration point, which resides at the clip's center by default. You can move the pen without drawing a line by using the moveTo( ) method. The moveTo( ) method simply relocates the pen to the coordinate you specify.

// Move the pen in myMovieClip_mc to (300,30).
myMovieClip_mc.moveTo(300, 30);

The moveTo( ) method is important in situations in which you want to begin drawing from a point other than the movie clip's center or draw lines or shapes without necessarily connecting all the lines:

// Create an empty movie clip to act as the drawing canvas.
_root.createEmptyMovieClip("myMovieClip_mc", 1);

// Set a 1-pixel, black, completely opaque line style.
myMovieClip_mc.lineStyle(1, 0x000000, 100);

// Draw a dashed line using a series of lines 
and spaces.
myMovieClip_mc.moveTo( 0, 0);
myMovieClip_mc.lineTo(10, 0);
myMovieClip_mc.moveTo(15, 0);
myMovieClip_mc.lineTo(25, 0);
myMovieClip_mc.moveTo(30, 0);
myMovieClip_mc.lineTo(40, 0);
myMovieClip_mc.moveTo(45, 0);
myMovieClip_mc.lineTo(55, 0);

4.1.4 See Also

Recipe 7.17