Drawing Shapes in ActionScript 3.0 Tutorial
28 Jul
ActionScript 3.0 has some great new functions to simplify drawing shapes. Previously in ActionScript 2.0 you had to specify each point in a shape and draw lines between them. Now, you can use drawCircle, drawEllipse, drawRect & drawRoundRect to speed up the process.
Lets take a look at how it is done:
package ca.flashdev.drawing {
import flash.display.Sprite;
public class DrawShapes extends Sprite {
function DrawShapes():void {
createCircle(50, 50, 25, 0x0099FF)
createEllipse(100, 25, 50, 100, 0x9933CC)
createRect(175, 25, 50, 100, 0xFFCC00)
createRoundRect(250, 25, 50, 100, 20, 20, 0xFF3366)
}
public function createCircle(x:Number,
y:Number,
radius:Number,
color:Number):void {
var circle:Sprite = new Sprite();
circle.graphics.beginFill(color);
circle.graphics.drawCircle(x, y, radius);
circle.graphics.endFill();
addChild(circle);
}
public function createEllipse(x:Number,
y:Number,
width:Number,
height:Number,
color:Number):void {
var ellipse:Sprite = new Sprite();
ellipse.graphics.beginFill(color);
ellipse.graphics.drawEllipse(x, y, width, height);
ellipse.graphics.endFill();
addChild(ellipse);
}
public function createRect(x:Number,
y:Number,
width:Number,
height:Number,
color:Number):void {
var rect:Sprite = new Sprite();
rect.graphics.beginFill(color);
rect.graphics.drawRect(x, y, width, height);
rect.graphics.endFill();
addChild(rect);
}
public function createRoundRect(x:Number,
y:Number,
width:Number,
height:Number,
ellipseWidth:Number,
ellipseHeight:Number,
color:Number):void {
var roundRect:Sprite = new Sprite();
roundRect.graphics.beginFill(color);
roundRect.graphics.drawRoundRect(x,
y,
width,
height,
ellipseWidth,
ellipseHeight);
roundRect.graphics.endFill();
addChild(roundRect);
}
}
}
Add this code to a new actionScript file and save it as DrawShapes.as in a folder structure of ca.flashdev.drawing.
Now create a new movie in Flash and open the Publish Settings (Ctrl+Shift+F12) window. Click on the Flash tab, then on the settings button. In the Document class: field insert ca.flashdev.drawing.DrawShapes. Test Movie (Ctrl+Enter) and voila, you have shapes.
You will notice I am extending the Sprite object. Here is an explanation of what a Sprite is:
“The Sprite class is a basic display list building block: a display list node that can display graphics and can also contain children.
A Sprite object is similar to a movie clip, but does not have a timeline. Sprite is an appropriate base class for objects that do not require timelines. For example, Sprite would be a logical base class for user interface (UI) components that typically do not use the timeline. The Sprite class is new in ActionScript 3.0. It provides an alternative to the functionality of the MovieClip class, which retains all the functionality of previous ActionScript releases to provide backward compatibility.”
- ActionScript 3.0 Language Reference
If you previously coded in AS2 you will also notice the addChild function. Depth management has changed in AS3. In AS2 we would have used getNextHighestDepth in the same function that we are creating our object with. Now in AS3 we use addChild after our object is created, to add our object to the next highest depth, or addChildAt to specify a specific depth.
Ric Ewing did some nice stuff you might want to look into as well (i’m sure he had some influence) – these are a little older but quite usefull still.
http://www.adobe.com/devnet/flash/articles/adv_draw_methods.html
I did this tute and for some reason nothing’s coming up at all. I was wondering why, after you create the DrawShapes.as and then create the new movie and tweak the publish settings, you only Test Movie but don’t publish it. I did publish it when I wasn’t getting any results, but it didn’t help.
My larger comment is that I’m trying to get a handle on AS3.0 after spending only six months or so on AS2.0 (I did take a course in Advanced AS2.0 last year). I’m trying to learn the new syntax rules, but pretty much all the online tutes I’ve done in AS3.0 don’t work at all, even like this one where all I’m doing is clipping and pasting code. It’s frustrating!
Nice tutorial on how to draw shapes through AS, neat stuff. Far more simple then particle effects, but definitely useful. Thanks for sharing.
I have all of the AS entered, it does not contain any errors, but am not getting anything when I try to start the movie.
Perhaps I don’t understand the folder structure? I created a folder named ca with a folder inside named flashdev with a folder named DrawShapes…
Maybe this is not what I am supposed to do??
Any help would be very useful.
hi flashers,
i got a problem and i dont knwo where it is, please help. i want to draw a circle from right to left but the cursor doesnt do it, it only does fron left to right , and whenever i go left, it pushes my drawing to the left(when mousedown is down).so i want to be able to draw from right to left.i need your help . this is my code:
package
{
import flash.events.MouseEvent;
import flash.display.Sprite;
import flash.geom.Point;
public class CircleDrawing extends Drawing
{
private var _hoehe:Number;
private var _breite:Number;
public function CircleDrawing(pointx:uint,pointy:uint,unique:Strin
g=null):void
{
super(pointx,pointy,unique);
}
override function zeichne(mousex:uint,mousey:uint,evt:MouseEvent):vo
id
{
selectstart.x=Math.min(mousex,selectstart.x);
selectstart.y=Math.min(mousey,selectstart.y);
_hoehe=Math.abs((mousey-selectstart.y));
_breite=Math.abs((mousex-selectstart.x));
points[0]=(new Point(_breite,_hoehe));
redraw();
}
override function finalize()
{
//redraw and put it
this.x=selectstart.x+canvas.width/2;
this.y=selectstart.y+canvas.height/2;
selectstart.x=-canvas.width/2;
selectstart.y=-canvas.height/2;
this.canvas.graphics.clear();
for(var i=0;i<Settings.toolinstances.length;i++)
{
Settings.toolinstances[i].setDeactivated();
}
Settings.toolinstances[0].activate();
this.redraw();
//update
_paket=createJSONPackage("create_drawing");
}
override function redraw()
{
this.canvas.graphics.clear();
canvas.graphics.lineStyle(2,_color);
canvas.graphics.drawEllipse(selectstart.x,selectstart.y,points[0].x,points[0].y);
}
override public function setClassName():String
{
return "CircleDrawing";
}
}}