Drawing an Ellipse using ActionScript

by Elis Frugalo.

Share
|
Homepage | Submit your article | Contact | TOS
More articles on flash  

You are here: Categories » Computers and technology » Flash

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);
   }
 
Leave a comment or ask a question
Total comments: 0

Flash Disclaimer

  • The e-articles directory is not responsible for any and all copyright infringements by writers and authors. If you suspect the information contained by this page for any copyright infringements, please contact us to investigate the issue
Transforming the Current Color of a Flash Movie Clip - You want to modify a movie clip's color relative to the current color transformation, instead of relative to the author-time color values. Use the getTransform( ) and setTransform( ) method (more...)
ActionScript: Repeating an Operation Many Times - You want to perform a task multiple times within a single frame. Use a loop to perform the same task multiple times within a single frame. For example, you can use a for statement: (more...)
Avoiding Conflicting Variables in ActionScript - You want to make sure that variables within a function do not interfere with variables in other functions or within the timeline in which the function is defined. Use the var keyword to declare loc (more...)
How to Exit a Function in ActionScript - You want to exit a function. Functions terminate automatically after the last statement within the function executes. Use a return statement to exit a function before reaching its end. The (more...)
Move Clip Rotation - A property like _x and _y is the movie clip property _rotation. The _rotation property accepts a value in degrees. A circle is divided into 360 degrees. The values used by _rotation range f (more...)
Targeting Flash Movie Clips - The simplest way to target a movie clip is to use its name, followed by a dot, followed by the command you want to send. However, there are plenty of other ways to target a movie clip as we (more...)
Using Mathematical Operators in ActionScript - You want to modify something over time, such as the rotation or position of a movie clip. Use the compound assignment operators to change a variable or property in increments. Or, if increm (more...)
How to build an animated button using Flash - Time: 15 Minutes. Difficulty Level: Intermediate Requirements: Flash 8 Assumed Knowledge: Basic action (more...)
Enhancing Standalone Projector - You want to create an enhanced Standalone Projector with features such as borderless playback, custom titles, no Flash menus, and so on. Use a third-party tool such as SWF Studio or SWFKit to c (more...)
Creating Flash Buttons - Buttons are one of the three main types of symbols that you use in Flash. The others are movie clips and graphics. Making a New Button There are many ways to create a button. One (more...)

 
free content
    Copyright © 2006 - 2012 e-articles.info.
The texts, articles and tutorials in the directory are property of their respective owners and authors.