How to Draw Shapes

[ LiB ]

How to Draw Shapes

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.

Figure 7.2. A red triangle drawn with a script

graphic/07fig02.gif


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.

Figure 7.3. Step-by-step images showing how lines connect to each other

graphic/07fig03.gif


[ LiB ]


Game Development with ActionScript
Game Development with ActionScript
ISBN: 1592001106
EAN: 2147483647
Year: 2004
Pages: 162
Authors: Lewis Moronta

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net