Recipe 4.6 Drawing an Ellipse

4.6.1 Problem

You want to draw an ellipse (oval) at runtime.

4.6.2 Solution

Create a custom MovieClip.drawEllipse( ) method using the Drawing API and invoke it on a movie clip.

4.6.3 Discussion

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:

The radius of the ellipse in the x direction (major axis).

The radius of the ellipse in the y direction (minor axis).

x

The x coordinate of the center of the ellipse.

y

The y coordinate of the center of the ellipse.

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 to xRadius and another that
var rx, ry, ax, ay;
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);
this.curveTo(rx, ry, ax, ay);
}
}```

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) {
// Call drawEllipse(  ) with the same radius for both x and y.
}```

Recipe 4.5  Preface  Part I: Local Recipes  Chapter 1. ActionScript Basics  Chapter 2. Runtime Environment  Chapter 3. Color  Chapter 4. Drawing and Masking  Introduction  Recipe 4.1 Drawing a Line  Recipe 4.2 Drawing a Curve  Recipe 4.3 Drawing a Rectangle  Recipe 4.4 Drawing a Rounded Rectangle  Recipe 4.5 Drawing a Circle  Recipe 4.6 Drawing an Ellipse  Recipe 4.7 Drawing a Triangle  Recipe 4.8 Drawing Regular Polygons  Recipe 4.9 Filling a Shape with a Solid or Translucent Color  Recipe 4.10 Filling a Shape with a Gradient  Recipe 4.11 Filling a Shape with a Complex Gradient  Recipe 4.12 Scripting Masks  Chapter 5. Numbers and Math  Chapter 6. Arrays  Chapter 7. Movie Clips  Chapter 8. Text  Chapter 9. Strings  Chapter 10. Dates and Times  Chapter 11. Forms  Chapter 12. Objects and Custom Components  Chapter 13. Programming Sound  Part II: Remote Recipes  Part III: Applications  Appendix A. Unicode Escape Sequences for Latin 1 Characters  Colophon