PL  |  NL  |  FR  |  ES  |  PT  |  IT  |  DE  |  DK  |  NO  |  SE  |  FI  |  GR  |  JP  |  CN  |  KR  |  RU  |  AE

  Report this article

More information

Controlling the Color of a Flash Movie Clip with Sliders

Backward Movie Clip

How to select an item on the screen

Stretching and Shrinking Movie Clips

Conditional Statements in ActionScript

Creating Flash Buttons

Bouncing Ball Script

ActionScript: Creating Reusable Code

3D Scaling with ActionScript

The Dot Syntax

Movie Clip Scripts

Decoding an RGB Value

ActionScript: Generalizing a Function to Enhance Reusability

Scaling a Flash Movie

Clips Controlling Other Clips

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

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

yRadius
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.

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
   // corresponds to yRadius.
   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);
   }
   }

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 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.
   this.drawEllipse (radius, radius, x, y);
   }