Create a custom `MovieClip.drawEllipse( )`

method
using the Drawing API and invoke it on
a movie clip.

You can create a method of the `MovieClip`

class
to draw an ellipse that is very similar to the ```
drawCircle(
)
```

method in Recipe 4.5. In
fact,
the `drawCircle( )`

method is merely a degenerate version of ```
drawEllipse(
)
```

, in which the radii in the x and y directions are the
same.

The custom `drawEllipse( )`

method accepts four
parameters:

Refer to Recipe 4.5 for those aspects
of the `drawEllipse( )`

method that are not
commented on here.

MovieClip.prototype.drawEllipse = function (xRadius, yRadius, x, y) { var angleDelta = Math.PI / 4; // While the circle has only one distance to the control point for each segment, // the ellipse has two distances: one that corresponds toand another that // corresponds to`xRadius`

. var xCtrlDist = xRadius/Math.cos(angleDelta/2); var yCtrlDist = yRadius/Math.cos(angleDelta/2); var rx, ry, ax, ay; this.moveTo(x + xRadius, y); for (var i = 0; i < 8; i++) { angle += angleDelta; rx = x + Math.cos(angle-(angleDelta/2))*(xCtrlDist); ry = y + Math.sin(angle-(angleDelta/2))*(yCtrlDist); ax = x + Math.cos(angle)*xRadius; ay = y + Math.sin(angle)*yRadius; this.curveTo(rx, ry, ax, ay); } }`yRadius`

Once you have defined and included the ```
drawEllipse(
)
```

method in your Flash document, you can draw an ellipse
rather easily. Use the `drawEllipse( )`

method the
same way you used the `drawCircle( )`

method in
Recipe 4.5 but provide both x and y
radii instead of just a single radius. Remember that you still need
to define the line style before you call the ```
drawEllipse(
)
```

method.

// Create an ellipse with minor and major axes of 100 and 200, respectively. this.createEmptyMovieClip("ellipse", 1); ellipse.lineStyle(1, 0x000000, 100); // Use a one-pixel, black, solid border ellipse.drawEllipse(100, 200);

Having defined `drawEllipse( )`

, we can rewrite
the `drawCircle( )`

method, as follows:

MovieClip.prototype.drawCircle = function (radius, x, y) { // Callwith the same radius for both x and y. this.drawEllipse (radius, radius, x, y); }`drawEllipse( )`

Start Free Trial

No credit card required