In a recent AS3 project, I needed to do draw some shapes using the the Flash AS3 graphics class. Following is a sample how I drew a circle using the graphics class, also how I made it a button and added EventListeners for Mouse Hover and Roll out states.
Just open your Actions Panel on frame 1 of your AS3 movie and paste the following code:
var circle:Sprite = new Sprite();
function createCircle(x:Number,y:Number,radius:Number, color:Number):void {
circle.graphics.beginFill(color);
circle.graphics.drawCircle(x, y, radius);
circle.graphics.endFill();
//Add to the stage
addChild(circle);
//enable drawn circle as button
circle.buttonMode = true;
//Add EventListeners for Mouse Hover and Roll out states
circle.addEventListener (MouseEvent.MOUSE_OVER, AddBox);
circle.addEventListener (MouseEvent.MOUSE_OUT, RemoveBox);
}
function AddBox (mouseEvent : MouseEvent):void {
trace("Mouse hovered");
}
function RemoveBox (mouseEvent : MouseEvent):void {
trace("Mouse rolled out");
}
//create circle, provide x, y, radius size and colour avlues
createCircle(300, 200, 5, 0xFF0099);
//If you need to remove the drawn circle, you can clear it by this
//circle.graphics.clear();
Please note that Flash 10 supports an expanded set of display classes for programmatically drawing shapes in ActionScript. With the new graphics classes, you now have two approaches for scripting shapes:
- A basic point-by-point set of commands for drawing a line along a shape and filling that shape
- A newer, “advanced” set of drawing commands that accept Vector objects (typed arrays) of drawing properties as parameters
If you’re interested in quickly scripting a simple shape with a limited number of coordinates, use the basic drawing commands of the flash.display.Graphics class as shown in the above example. For more complex shapes, where you need to change the points, fill, or stroke properties of a shape quickly, then use the more advanced graphics data classes and commands.
Hope that helps.
Cheers!
