| Drawing Circles & Ellipses |
| Return to the Tutorials page |
| |
|
Goal: Create a straight line and a curve using ActionScript 3.0.
Goal: Create two shapes - a circle and an ellipse using ActionScript 3.0.
Imported classes: flash.display.Sprite and flash.display.Shape
Methods: drawCircle(), drawEllipse(),
beginFill(), endFill() and addChild()
Flash version: Flash 9 Professional
Download final version
The ActionScript 3.0 Foundation Elements can be found in the Members' Section.
In this tutorial we will create two shapes: a circle and an ellipse.
|
Open Flash 9 and select a new Flash file (ActionScript 3.0). Name it CircleEllipse and save it inside the FlasherAS3_PartI
folder.
In the Document Class box of the Properties panel, type CircleEllipse. This is a reference to our AS file which will contain
the lesson's code.
Save the changes.
Open a new ActionScript file. Name it CircleEllipse and save it inside the Code folder.
You now have eight separate files on your computer:
In the FlasherAS3_PartI folder - LineAndCurve.fla, Triangles.fla, RectanglesSquare.fla and CircleEllipse.fla.
In the Code subfolder - LineCurve.as, Triangles.as, RectanglesSquare.as and CircleEllipse.as.
Keep both CircleEllipse files open as we will be working with both of them simultaneously.
|
|
Return to CircleEllipse.fla and set the Classpath to the Code subfolder inside the FlasherAS3_PartI folder. Save your
changes.
|
|
Return to CircleEllipse.as and type in the following code:
Line 01: package
Line 02: {
Line 03: public class CircleEllipse extends Sprite
Line 04: {
Line 05: public function CircleEllipse()
Line 06: {
Line 07: }
Line 08: }
Line 09: }
Save your changes.
|
|
This tutorial will require the Sprite and Shape classes so let's import them now.
Place your cursor at the end of line 2 and press Return/Enter.
On line 3 type: import flash.display.Sprite;
Press Return/Enter.
On line 4 type: import flash.display.Shape;
Press Return/Enter to add a blank line on line 5.
Place your cursor at the end of line 9 and press Return/Enter.
All of our circle & ellipse code will be placed between the constructor function's opening & closing curly braces.
Save the changes. The set up is done; let's create a circle and an ellipse!
|
|
Drawing a circle has never been simpler thanks to the drawCircle() method. This built-in method automatically
creates a circle after receiving the following information:
- The horizontal and vertical location of the circle's center (relative to the registration point of the parent object).
- The circle's radius amount.
Sounds simple enough. Let's draw a circle!
Declare the variable (circle), set the data type to Shape and then instantiate (create) a new Shape object.
On line 10 type: var circle:Shape = new Shape();
Press Return/Enter. Using the beginFill() method, set the fill color to green (#00FF00).
NOTE: In previous tutorials we have included the alpha (transparency) and set it to 1. The default setting is 1 which makes it
fully visible. If the fill color was to be set to 50% semi-transparent then we would set the alpha specifically to .5. However, since the
fill color of all shapes created throughout the rest of this series is fully visible, we can leave this setting off. By default it will be fully
visible.
On line 11 type: circle.graphics.beginFill(0x00FF00);
Press Return/Enter. Utilize the drawCircle() method to set the circle's x to 150,
y to 150, and the radius to 50.
On line 12 type: circle.graphics.drawCircle(150, 150, 50);
Press Return/Enter. Using the endFill() method, close the fill color.
On line 13 type: circle.graphics.endFill();
Press Return/Enter. Using the addChild() method, place the circle on the stage.
On line 14 type: addChild(circle);
Your code should look like this: [ view code ]
Save the changes, test the movie and you will see a green circle on the stage.
Easy! Let's try an ellipse next...
|
|
Creating an ellipse follows very similar steps. The drawEllipse() method is a built-in method that automatically
creates an ellipse after receiving the following information:
- The horizontal and vertical location of the ellipse's center (relative to the registration point of the parent object).
- The ellipse's width.
- The ellipse's height.
Place your cursor at the end of line 14 and press Return/Enter twice. Now let's draw an ellipse!
Declare the variable (ellipse), set the data type to Shape and then instantiate (create) a new Shape object.
On line 16 type: var ellipse:Shape = new Shape();
Press Return/Enter. Using the beginFill() method, set the fill color to yellow (#FFFF00).
On line 17 type: ellipse.graphics.beginFill(0xFFFF00);
Press Return/Enter. Utilize the drawEllipse() method to set the x to 300, y to 175,
the width to 85 and the height to 175.
On line 18 type: ellipse.graphics.drawEllipse(300, 175, 85, 175);
Press Return/Enter. Using the endFill() method, close the fill color.
On line 19 type: ellipse.graphics.endFill();
Press Return/Enter. Using the addChild() method, place the ellipse on the stage.
On line 20 type: addChild(ellipse);
Your code should look like this: [ view code ]
Save the changes, test the movie and you will see a yellow ellipse on the stage near the green circle.
To change the shape of the ellipse simply change the width and/or height!
|
|
Note that in this tutorial neither shape was given a stroke. To add a stroke, simply add the
lineStyle() method.
Now that we have a reasonable understanding of how to place dynamic objects (shapes) on the stage, it's time to look at the containers to put them in
(i.e. Sprites & Movie Clips).
Why? Because the containers are what we will be animating across the stage and using as interactive buttons to trigger actions on the stage. And that's
where it gets really interesting! First up, learn about Sprites! [ Creating & Understanding Sprites tutorial ]
|
