Creating Shapes with AS3

Flash Game Design

Tutorials

Articles

This Flash tutorial to make basic shapes with Actionscipt 3.0

1. Draw a Rectangle

The code for creating each shape is the same apart from the line of code stating which particular shape to create. The 4th line in the example below is used to create a rectangle.

Code:

1
2
3

4

5
6

var rectangle:Shape = new Shape(); // Create an instance of the Shape class called "rectangle".
rectangle.graphics.beginFill(0x0099CC, 1); // Fill the "rectangle" with the color 0099CC
rectangle.graphics.lineStyle(2, 0x000000); // Assign a line thickness if 2 pixels and a color of 000000 (black) to the shape.
rectangle.graphics.drawRect(50, 150, 30,60); // Draw the rectangle, assigning it a x position, y position, width, and height.
rectangle.graphics.endFill(); // End the filling of the rectangle
addChild(rectangle); // Adds a child DisplayObject instance (rectangle) to this DisplayObjectContainer instance.

2. Draw a Rounded Rectangle

Here is the code to create a rounded rectangle. It's similar to the code for creating the normal rectangle, except a different function (line 4)is used with an extra parameter for the corner radius. The lineStyle function can be left out to create just the fill of a shape.

Code:

var roundedRectangle:Shape = new Shape(); //A different instance name has been used since rectangle has already been used in the previous example.
roundedRectangle.graphics.beginFill(0x009933); // Fill the "rectangle" with the color 009933
roundedRectangle.graphics.drawRoundRect(56, 250, 80, 80, 25); // Draw the rounded rectangle, assigning it a x position, y position, width, and height & radius.
roundedRectangle.graphics.endFill(); // End the filling of the rectangle
addChild(roundedRectangle); // Add a child

3. Draw a Circle

The following code will create a circle with a radius of 20 pixels

Code:

var circle:Shape = new Shape(); // The instance name circle is created
circle.graphics.beginFill(0x990000, 1); // Fill the circle with the color 990000
circle.graphics.lineStyle(2, 0x000000); // Give the ellipse a black, 2 pixels thick line
circle.graphics.drawCircle(80, 50, 20); // Draw the circle, assigning it a x position, y position, raidius.
circle.graphics.endFill(); // End the filling of the circle
addChild(circle); // Add a child

4. Draw an Ellipse

The following code will create an 30x100 (widthxheight) ellipse. The "begineFill" and "endFill" function have been left out to create an elliptical outline.

Code:

var ellipse:Shape = new Shape(); // The instance name ellipse is created
ellipse.graphics.lineStyle(5, 0x000000) // Give the ellipse a black, 5 pixels thick line
ellipse.graphics.drawEllipse(130,100, 30,60); // Draw the ellipse, assigning it a x position, y position, width and height.
addChild(ellipse); // Add a child