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
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...)
Bouncing Ball Script - Start a new Flash movie. Create a movie clip that has a ball graphic inside it. You can name the instance of the movie clip, myClip, but our code will not depend on the name of the clip. (more...)
ActionScript: Creating Reusable Code - You want to perform a series of actions at various times without duplicating code unnecessarily throughout your movie. Create a function and then call (i.e., invoke) it by name whenever you (more...)
3D Scaling with ActionScript - Although Flash is not capable of real 3D graphics, the kind seen in popular computer games, you can create the illusion of 3D by using scaling. Scaling an object is a great way to give your (more...)
The Dot Syntax - Something else that you will be seeing a lot of as you learn ActionScript is dot syntax. Dot syntax is a way of grouping objects and functions that is used in many object-oriented programming (more...)
Movie Clip Scripts - Movie clip scripts, like button scripts, use handlers. Instead of using the on keyword that button scripts use, we will use the onClipEvent keyword. Here is an example of a movie clip script: (more...)
Decoding an RGB Value - You want to extract the red, green, and blue components from an RGB value returned by Color.getRGB( ). Use the bitshift right and bitwise AND operators. You can extract the red, gre (more...)
ActionScript: Generalizing a Function to Enhance Reusability - You want to perform slight variations of an action without having to duplicate multiple lines of code to accommodate the minor differences. Add parameters to your function to make it flexib (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.