| 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 ActionScript 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 ActionScript 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
|
