| MovieClip.moveTo( ) Method | Flash 6 |
| moves the drawing pen to a new position without drawing a line |
The new horizontal position of the pen, as a floating-point number. Measured relative to mc's registration point.
The new vertical position of the pen, as a floating-point number. Measured relative to mc's registration point.
Conceptually, lines and curves are drawn in Flash by a theoretical "drawing pen." For all new movie clips, the pen starts out at position (0,0)—the clip's registration point—which is typically at its center and is represented by a crosshair in the movie clip's Library symbol. As lines and curves are drawn (via lineTo( ) and curveTo( )), the pen moves around the movie clip's coordinate space, resting at the end point of the last line or curve drawn. The pen's current position always indicates the starting point of the next line or curve to be drawn.
The moveTo( ) method lets us arbitrarily set the starting point of a line or curve by "picking up" the drawing pen and moving it to a new position without drawing a line to the specified point.
For example, suppose we want to draw a single straight line from (100,100) to (200,200) in a new movie clip. We must first move the pen from (0,0) to (100,100) and then draw a line from there to (200,200), as follows:
this.createEmptyMovieClip("drawing_mc", 1); // Create a clip to draw in
drawing_mc.lineStyle(1); // Set the stroke to 1 point, black
drawing_mc.moveTo(100, 100); // Move the pen without drawing a line
drawing_mc.lineTo(200, 200); // Draw the line (this also moves the pen)
When the clear( ) method is invoked to erase all drawings in a clip, the pen position reverts to (0,0). If either of moveTo( )'s arguments is missing, the operation fails silently.
Though Flash does not provide built-in access to the current pen position, the moveTo( ), lineTo( ), curveTo( ), and clear( ) methods can be modified to store the pen's horizontal and vertical position in properties, as shown in Example 18-3. Before replacing each built-in method, we store the old version in a property, such as origLineTo. This is considered a best practice, in case you want to restore the default functionality, although we don't do so here.
MovieClip.prototype.origLineTo = MovieClip.prototype.lineTo;
MovieClip.prototype.lineTo = function (x, y) {
this.penx = x;
this.peny = y;
this.origLineTo(x, y);
};
MovieClip.prototype.origMoveTo = MovieClip.prototype.moveTo;
MovieClip.prototype.moveTo = function (x, y) {
this.penx = x;
this.peny = y;
this.origMoveTo(x, y);
};
MovieClip.prototype.origCurveTo = MovieClip.prototype.curveTo;
MovieClip.prototype.curveTo = function (controlX, controlY, anchorX, anchorY) {
this.penx = anchorX;
this.peny = anchorY;
this.origCurveTo(controlX, controlY, anchorX, anchorY);
};
MovieClip.prototype.origClear = MovieClip.prototype.clear;
MovieClip.prototype.clear = function () {
this.penx = 0;
this.peny = 0;
this.origClear();
};
// Usage:
this.createEmptyMovieClip("drawing_mc", 1);
drawing_mc.lineStyle(1, 0xFF0000);
drawing_mc.lineTo(50, 100);
trace(drawing_mc.penx); // Displays: 50
drawing_mc.moveTo(-20, 150);
trace(drawing_mc.penx); // Displays: -20
drawing_mc.curveTo(200, 200, 70, 300);
trace(drawing_mc.peny); // Displays: 300
MovieClip.beginFill( ), MovieClip.beginGradientFill( ), MovieClip.clear( ), MovieClip.curveTo( ), MovieClip.endFill( ), MovieClip.lineStyle( ), MovieClip.lineTo( )
