How to Draw a Line

[ LiB ]

In this section, you're going to learn how to create lines procedurally with ActionScript. Why is it important to learn how to do this when you can just draw lines beforehand with the Line tool? Well, you need to learn how to draw lines dynamically because you want more control over your animations. Everything from advanced screen transitions to the simple hands on an analog clock to a drawing program requires you to program dynamic lines. Think about it, even some advanced patterns and shapes that can take humans tedious days to put together can take a computer less than a second to produce. Once your scripts have control over the objects in your program, you can really make them come alive !

Before you ask Flash to draw a line, you must define the line's width, color , and sometimes even its opacity. This is considered the style of the line. The following command is used to set up and/or change a line style:

 lineStyle(lineWidth, color, alpha); 

This command prepares subsequent ActionScript drawing commands with these settings. All of the following lines will be drawn with these settings until another lineStyle command is called.

Once you learn this command, you're almost ready to start drawing some lines. Before you can actually draw the line, you should know that Flash draws lines from the position of its "virtual pen." Luckily, this "pen" can be repositioned. And when your program is first run, the position of this pen is not definedyou must define it before you draw anything. The command that you need to use to define the point you want to draw from is the moveTo command which is prototyped like so:

 moveTo( x, y ); 

This line simply tells ActionScript to move and continue from this new position.

The next command is the actual line-drawing command itself, which looks like this:

 lineTo( x, y); 

The following listing demonstrates all the discussed commands. Take a look.

 // Game Development with ActionScript // 2003 (c) Lewis Moronta // Drawing with a Script, Chapter 7 // This program demonstrates how to // draw a line in ActionScript with // built in drawing commands. // Setup the line style for the // following commands. lineStyle( 5, 0x000000, 100); // Initialize the initial starting point. moveTo( 10, 10); // Draw the line to the final point. lineTo( 310, 190); 

Notice that there are only three commands in this listing. Let's see what's happening in the first one:

 // Setup the line style for the // following commands. lineStyle( 5, 0x000000, 100); 

I assigned the line a thickness of 5, as you can see from the first parameter. The second parameter needs a little explanation. The notation 0x indicates that the number is a hexadecimal number. Hexadecimal numbers are base 16 as opposed to our regular number system, which is base 10. The hexadecimal system goes from 0 to the letter F. In other words, a sample count would be:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

where A through F represent numbers from 10 to 15.

The color is encoded in hexadecimal format because you can easily separate the red, green, and blue components cleanly within the number places. Allow me to demonstrate . The following line is a sample number for demonstration purposes only (there are no Rs or Gs in the number system):

0xRRGGBB

Any value written within the RR place in the sample number will represent the amount of red in the final color. Anything, including zero, within the GG place would mix in green. And of course, anything within the BB place would represent the blue in the system. If all these areas are blank, or zero, this would cause Flash to output the color black. Black is what is achieved by 0x000000.

NOTE

TIP

Don't focus on the color system too much.You will eventually catch on as you see more examples of it. Go ahead and open GDA_PROG7.1.fla and play with the color in the lineStyle method. See if you can generate a completely red, green, or blue line. Once you achieve that effect, see if you can mix some colorstry to get yellow.

The last parameter is optional. It tells Flash to draw the line with a certain level of transparency. 100 percent would make it completely opaque and 0 percent would make it completely transparent (invisible).

The following line tells Flash the point at which it should start drawing from.

 // Initialize the initial starting point. moveTo( 10, 10); 

The moveTo method was set to the coordinates (10, 10). This is near the top left corner. You can easily tell because the topmost left viewable pixel on the corner is (0, 0). Whenever you want to tell Flash a new position, use this command.

Next, we call lineTo () to complete the line:

 // Draw the line to the final point. lineTo( 310, 190); 

When I created the scene, I prepared the layers and the movie's dimensions. I set the dimensions to 320x200. This means that the line will be drawn very close to the bottom rightmost edge.

In the end, what do you get? You get a movie that displays a line from (10, 10) to (310, 190) just like in Figure 7.1.

Figure 7.1. A line drawn from (10, 10)(310, 190)

[ LiB ]