ActionScript - Drawing Lines and Boxes

ActionScript3 (AS3) provides tools to draw on a canvas. Unfortunately, the documentation is far from complete ... this page will help. It took me several weeks of extreme frustration to figure this stuff out.

Overview | Graphis.lineStyle() | Drawing Boxes | The Problem | Placing Objects | New Drawing Classes


When it comes to drawing, there are 3 important methods - moveTo, lineTo, drawRect. In addition, you need to set the pen color and fill color.

These methods are implemented via the graphics property (an instance of the Graphics class) of the following objects.


lineStyle is used to draw lines and borders around boxes. If it is not set, then nothing will be drawn.

Drawing Boxes

Before drawing a box (rectangle), the code needs to set This example has a black border and a red fill.

The Problem

Besides the obvious problem that all this code is a pain in the neck, there is a serious problem that the sizes don't work out. In every other language I've used, the height and width will be what you requested ... not some other value. If this implementation was described in the help files, then I would call it a *feature* ... since it is not, I use much less polite terms. With lines, It would make sense if a 100 x 200 box with a 5 pixel border had a width of 100 or 110 ... but 105 makes no sense at all.

At any rate, the only way I've found to draw a box without a visible border is to

Using the code above In my opinion, Adobe should have included this information with the drawRect documentation.

Placing Objects

When you set the x/y properties of an object, you are specifying the location of the object's (0,0) point relative to the (0,0) point of the container.

For the stage, (0,0) is the upper left corner - in the IDE, this is the upper left corner of the white area - only the white area is displayed when the movie (form) is rendered.

For objects (MovieClips) drawn in the IDE, (0,0) is indicated by the plus sign. To change the location of the plus sign, open the MovieClip in design mode and reposition the sub-components as appropriate.

New Drawing Classes

Because this is so complicated, I created the following new classes to make things simpler.

Author: Robert Clemenzi -
URL: http:// / user / clemenzi / technical / Languages / ActionScript / Controls / Drawing_Boxes.html