Fun Things to Do with Movie Clips in Flash MX

Flash MX introduces the ability to draw strokes, curves, shapes, and fills in a movie clip using the Drawing API, a collection of methods for drawing at runtime. The Drawing API methods are documented in the Language Reference, under the following entries:

  MovieClip.beginFill()

  MovieClip.beginGradientFill()

  MovieClip.clear( )

  MovieClip.curveTo()

  MovieClip.endFill()

  MovieClip.lineStyle()

  MovieClip.lineTo()

  MovieClip.moveTo()

The Drawing API uses the concept of a drawing pen (or simply pen) to refer to the current drawing position, similar to the drawing pen used in old line plotters. Initially, the drawing pen resides at the registration point of a movie clip. Using the drawing methods, we can:

• Move the pen without drawing any lines or fills, via MovieClip.moveTo()
  
• Draw a straight line from the pen’s current position to a specific point, via MovieClip.lineTo() 
  
• Draw a curved line from the pen’s current position to a specific point, via MovieClip.curveTo() 
  
• Draw a shape, via MovieClip.beginFill() and MovieClip.endFill() or MovieClip. beginGradientFill() and MovieClip.endFill().

Before, during, or after drawing, we can specify the characteristics of the drawing stroke used in any drawing operation, via MovieClip.lineStyle(). To remove a drawing, we use MovieClip.clear().

Notice that the Drawing API does not include methods for drawing shapes such as a triangle, rectangle, or circle. We must draw these using the primitive drawing methods, as demonstrated under MovieClip.beginFill() in the Language Reference.

Detailed coverage of the drawing methods is left to the Language Reference. For now, let’s take a look at a couple of examples showing the general use of the Drawing API.

Example 13-5 creates a 100-pixel–long, 2-pixel–thick, straight line extending to the right from the current clip’s registration point.

Example 13-5. Drawing a straight line

// Set stroke to 2-point
this.lineStyle(2);
// Draw the line
this.lineTo(100,0);

Example 13-6 creates a 200-pixel–wide, red square centered on the current clip’s registration point.

Example 13-6. Drawing a square

// Set stroke to 3-point
this.lineStyle(3);
// Move the pen to 100 pixels left and above the registration point
this.moveTo(-100,-100);
// Start our red square shape this.beginFill(0xFF0000);
// Draw the lines of our square
this.lineTo(100, -100);
this.lineTo(100, 100);
this.lineTo(-100, 100);
this.lineTo(-100, -100);
// Close our red square shape
this.endFill();

For a variety of interesting applications of the Drawing API (including drawing arcs, polygons, dashed lines, stars, and wedges), see:

http://www.formequalsfunction.com/downloads/
drawmethods.html