Programming ActionScript 3.0 > Overview of ActionScript Programming > Display Programming > Basics for working with the core display classes > Drawing vector graphics

Drawing vector graphics

Each Shape, Sprite, and MovieClip object has a graphics property. The graphics property for each of these objects is a Graphics object, and the Graphics class includes properties and methods for drawing and manipulating lines, fills, and shapes.

For example, the following code draws an orange circle in a Shape object:

import flash.display.*;
var circle:Shape = new Shape()
var xPos:Number = 100;
var yPos:Number = 100;
var radius:Number = 50;
circle.graphics.beginFill(0xFF8800);
circle.graphics.drawCircle(xPos, yPos, radius);
this.addChild(circle);

The Graphics class includes the following methods for easily drawing simple shapes: drawCircle(), drawEllipse(), drawRect(), drawRoundRect(), and drawRoundRectComplex(). Before calling drawing methods, define the line style, fill, or both by calling the linestyle(), lineGradientStyle(), beginFill(), beginGradientFill(), or beginBitmapFill() method.

Use the Sprite class if you want to create a graphical object that is also a display object container (to contain other display objects) but that does not require a timeline.

For example, the following Sprite object has a circle drawn with its graphics property, and it has a TextField object in its child list:

var mySprite:Sprite = new Sprite();
mySprite.graphics.beginFill(0xFFCC00);
mySprite.graphics.drawCircle(30, 30, 30);
var label:TextField = new TextField();
label.text = "hello";
label.x = 20;
label.y = 20;
mySprite.addChild(label);
this.addChild(mySprite);

The graphics layer for a Sprite or MovieClip object always appears in back of the child display objects of the Sprite or MovieClip. Also, the graphics layer does not appear in the child list of the Sprite or MovieClip.

Flex 2.01