Drawing a star: A basic example

Our first example is simply the one given in the help file, with some suggestions for exploration of the details. In the command,

drawPath(commands, data, winding)

  • data is a Vector.<Number> object with representing x and y coordinates of points to define the path to be drawn. Note that this is a single Vector so the entries alternate representing x values and y values. For example, [x1,y1,x2,y2,x3,y3] describes the path from (x1,y1) to (x2,y2) to (x3,y3).
  • commands is a Vector.<int> object with each entry corresponding to the drawing command for a particular point on the path to be drawn. The values must be one of the following:
0 = Do nothing.
1 = Perform a moveTo command with the point in data corresponding to this entry.
2 = Perform a lineTo command with the point in data corresponding to this entry.
3 = Perform a curveTo command with the point in data corresponding to this entry. Note that four values x1,y1,x2,y2 of data are used for a curveTo command since (x1,y1) serves the roll of a control point while (x2,y2) is the "destination point." See the help file for curveTo for more discussion (with pictures!) on this.
4 = Perform what is called a "wide moveTo" command. This takes four values x1,y1,x2,y2 from data and ignores the first two, moving to (x2,y2). The rationale is that this allows you to consistently use four numbers (=two points) for moveTo, lineTo and curveTo commands.
5 = Perform what is called a "wide lineTo" command. This takes four values x1,y1,x2,y2 from data and ignores the first two, moving to (x2,y2). The rationale is that this allows you to consistently use four numbers (=two points) for moveTo, lineTo and curveTo commands.
We should note that any fill method will automatically fill in an implicit final lineTo command back to the starting point, but if there is a visible lineStyle set for the drawing path, you will notice that the final line is not explicitly drawn. We illustrate this below.
  • winding is string that is either "evenOdd" (the default) or "nonZero." This impacts the way overlapping regions are filled. We will see an example but you can look at the help file information if you would like the technical description, including pictures to explain the difference.

The basic example

This example is the one provided with the online help for the drawPath method:

The code

Open a new Flash file and enter the following code in the Actions panel. Experiment with commenting/uncommenting lines as suggested in the code to see in action some of the issues mentioned above.

var star_commands:Vector.<int> = new Vector.<int>(5, true);

star_commands[0] = 1; // moveTo

star_commands[1] = 2; // lineTo

star_commands[2] = 2; // lineTo

star_commands[3] = 2; // lineTo

star_commands[4] = 2; // lineTo

 

var star_coord:Vector.<Number> = new Vector.<Number>(10, true);

star_coord[0] = 66; // first x

star_coord[1] = 10; // first y

star_coord[2] = 23; // second x

star_coord[3] = 127; // second y

star_coord[4] = 122; // third x

star_coord[5] = 50; // third y

star_coord[6] = 10; // fourth x

star_coord[7] = 49; // fourth x

star_coord[8] = 109; // fifth x

star_coord[9] = 127; // fifth x

 

// Try the applet with the following line "uncommented".

//graphics.lineStyle(2,0);

graphics.beginFill(0x0099FF);

 

// Only "uncomment" one of the following lines at a time.

//graphics.drawPath(star_commands, star_coord, "evenOdd");

graphics.drawPath(star_commands, star_coord, "nonZero");

Download

Download the source code (fla) for this applet or all three fla files (compressed) for this tutorial at the following links.

The next page gives a more robust example with which to experiment.

Back to Basic Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.