[ LiB ] |
Lines are the basis to almost every computer-aided design. So that you can get an idea of how to create some shapes, I have written another short demo that draws a triangle for you. Check out the following listing.
// Game Development with ActionScript // 2003 (c) Lewis Moronta // Drawing with a Script, Chapter 7 // This program demonstrates how to // draw and connect lines to create // shapes with built in ActionScript // Commands. // Setup the line style for the // following commands. lineStyle( 3, 0xFF0000); // Initialize the initial starting point. moveTo( 160, 20); // Connect the lines by subsequent commands lineTo( 80, 170); lineTo( 240, 170); lineTo( 160, 20);
If you run this program (GDA_PROG7.2.fla) from the CD and you test the movie, you'll see a red triangle on the stage. See Figure 7.2.
Let's step through it to see what's happening. Observe the first method. It's used differently here:
// Setup the line style for the // following commands. lineStyle( 3, 0xFF0000);
The first thing you should notice is that I dropped the final parameter. As I said before, it is optional. If you want your line always to be 100 percent opaque , you could just omit the third parameter.
As you move on to examine the next line, you'll notice that I chose a center point from which to start drawing this triangle:
// Initialize the initial starting point. moveTo( 160, 20);
As you move on to the next three lines, you'll see that the next line command will draw from this last line:
// Connect the lines by subsequent commands lineTo( 80, 170); lineTo( 240, 170); lineTo( 160, 20);
The first lineTo command draws a line from (160, 20) to (80, 170). This causes Flash to draw a line slanting down to the right.
The next lineTo method takes off from the last point at which the last lineTo or moveTo command was called. So, in other words, the next line will be drawn from (80, 170) to (240, 170).
After the line is drawn, all you need is to close the shape. How? Easyall you have to do is draw another line to the same starting point where the moveTo command was set. This point was (160, 20).
Figure 7.3 shows a breakdown of what's happening behind the scenes.
[ LiB ] |