## With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

No credit card required

# 4.5. Drawing a Circle

## Problem

You want to draw a circle at runtime.

## Solution

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

## Discussion

You can create a circle in ActionScript with eight curves. Fewer curves results in a distorted circle and too many curves hinders performance. Let’s create a custom method of the `MovieClip` class for drawing circles. This method, `drawCircle( )`, allows for three parameters:

`radius`

`x`

The x coordinate of the circle’s center point. If `undefined`, the circle is centered at x = 0.

`y`

The y coordinate of the circle’s center point. If `undefined`, the circle is centered at y = 0.

Define the custom `drawCircle( )` method on `MovieClip.prototype` to make it available to all movie clip instances:

```MovieClip.prototype.drawCircle = function (radius, x, y) {
// The angle of each of the eight segments is 45 degrees (360 divided by 8), which
var angleDelta = Math.PI / 4;

// Find the distance from the circle's center to the control points for the curves.

// Initialize the angle to 0 and define local variables that are used for the
// control and ending points.
var angle = 0;
var rx, ry, ax, ay;

// Move to the starting point, one radius to the right of the circle's center.

// Repeat eight times to create eight segments.
for (var i = 0; i < 8; i++) {

// Increment the angle by `angleDelta` (π/4) to create the whole circle (2π).
angle += angleDelta;

// The control points are derived using sine and cosine.
rx = x + Math.cos(angle-(angleDelta/2))*(ctrlDist);
ry = y + Math.sin(angle-(angleDelta/2))*(ctrlDist);

// The anchor points (end points of the curve) can be found similarly to the
// control points.

// Draw the segment.
this.curveTo(rx, ry, ax, ay);
}
}```

How the `drawCircle( )` method functions is better understood with a little explanation.

The distance of the control point for each segment from the circle’s center is found using a trigonometric formula that states that the cosine of an angle is equal to the adjacent side over the hypotenuse. In the case of the circle, the angle that bisects a segment (thus also intersecting its control point) is π/8 (`angleDelta/2`). The distance to the control point from the center of the circle forms the hypotenuse of the right triangle, as you can see in Figure 4-3.

`var ctrlDist = radius/Math.cos(angleDelta/2);` Figure 4-3. Calculating a point approximating a circular path

Basic trigonometric formulas can be used to find the x and y coordinates along the circle’s circumference given the angle and the hypotenuse. For the control point, the hypotenuse value is `ctrlDist`, and the angle is `angle` - `angleDelta/2`, since this angle bisects the segment. The anchor point is found using the value of `angle`, which is calculated to be the angle that intersects the anchor point, and the circle’s radius (since the anchor point should always be on the circle’s circumference). Thus, it follows:

```rx = x + Math.cos(angle-(angleDelta/2))*(ctrlDist);
ry = y + Math.sin(angle-(angleDelta/2))*(ctrlDist);

Once you have defined the `drawCircle( )` method and included it in your Flash document, you can quickly draw a circle with just a few lines of code. Remember that you still need to define a line style before Flash will draw anything.

```// Create a movie clip instance in which you will draw the circle.
this.createEmptyMovieClip("circle_mc", 1);

// Define a 1-pixel, black, solid line style.
circle_mc.lineStyle(1, 0x000000, 100);

// Draw a circle of radius 100, centered at (50,75).
circle_mc.drawCircle(100, 50, 75);
// Draw a circle of radius 65, centered at (0,0).
circle_mc.drawCircle(65);```

You can fill a circle by invoking ```beginFill( ) ```or `beginGradientFill( )` before `drawCircle( ) `and invoking ```endFill( )``` after `drawCircle( )`:

```this.createEmptyMovieClip("circle_mc", 1);
circle_mc.lineStyle(1, 0x000000, 100);   // Use a 1-pixel, black, solid border.
circle_mc.beginFill(0x0000FF);           // Use a solid blue fill.
circle_mc.drawCircle(100);
circle_mc.endFill(  );```

## With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

No credit card required