Macromedia Flash Mx 1002004 Actionscript Training From The Source [Electronic resources] نسخه متنی

Using Actionscript to Draw Lines Dynamically

Using ActionScript, you can dynamically draw lines in a movie as it playsa capability that comes with a number of drawing methods available to the Movie Clip class.

Using these drawing methods, you can:

Draw a line from the current drawing position to a point you specify

Move the current drawing position without drawing

Specify the line style for a timeline

Fill a shape with a color

Fill a shape with a gradient

Curve a line between two points

Clear a timeline of drawn lines and gradients

In this section, we'll show you how to draw lines, move the drawing position, set the line style, and clear a movie clip instance. In the next section, we'll briefly touch on using flat and gradient fills. Although we won't cover the curveTo() method (which allows you to dynamically draw curved lines), you should understand enough about Flash drawing fundamentals by the end of the lesson that you'll be able to implement it in your own drawing applications.

Using lineStyle()

Before drawing any lines in a timeline, you must set the line style for that timeline. Flash uses this setting to determine line thickness, color, and alpha.

Here's the syntax:

path.lineStyle(thickness, color, alpha)

thickness must be a value between 0 and 255 (with a thickness of 0 representing a hairline). color must be a hex color value. alpha represents the transparency level for a line, where 0 is transparent and 100 is opaque. Look at the following example:

_root.myClip_mc.lineStyle(10, 0x009900, 100);

This line of ActionScript sets the line style in myClip_mc so that all lines drawn will be green and opaque, and have a thickness of 10.

Using moveTo()

All movie clip instances have a drawing position that indicates the coordinate at which a line would startin other words, the beginning point of a line. (You use lineTo() to draw the line, as described in the next section.) When a movie clip instance is created, the drawing position is set as x = 0 and y = 0; however, you can move the drawing position at any time using moveTo(). When a line is drawn, the drawing position is updated to the endpoint of the drawn line.

The following is the syntax for using moveTo():

path.moveTo(x, y);

All you need to do is specify the x and y positions of your drawing position. For example:

_root.myClip_mc.lineStyle(10,0x009900,100);
_root.myClip_mc.moveTo(100,100);

This ActionScript sets the line style and then moves the drawing position.

Using lineTo()

The lineTo() drawing method of the Movie Clip class simply draws a line of the destination timeline's lineStyle format from the drawing position to the end position specified in the method.

Following is the syntax for lineTo():

myClip_mc.lineTo(x,y);

The x and y parameters specify the end point of the line to be drawn.

NOTE

After the line is drawn, the moveTo() position is updated to the end point of the line.

The following example shows how you would use the methods we've described to draw a line:

_root.createEmptyMovieClip("canvas_mc",1);
_root.canvas_mc.lineStyle(2,0x009900,100);
_root.canvas_mc.moveTo(100,100);
_root.canvas_mc.lineTo(200,150);

This ActionScript draws a line between the points (100,100) and (200,150).