Object Oriented Vancouver

July 15, 2005

Extending the ActionScript 2.0 Drawing API

Filed under: Flash, Object Oriented Design — kevinw @ 10:03 am

In my spare time I’ve been working on a project for PolymerCode. I’ve been building a Rich Internet Application in Flash MX 2004 with ActionScript 2.0. I’ll post some more details about it when it’s closer to completion.

In the first weeks of development I’ve already encountered a number of shortcomings of the ActionScript 2.0 API. One thing that I’ve found annoying is the richness of the designer tools available, compared to the tools available via the ActionScript API. For example, to draw a dashed line with the drawing tools, you simply draw a line, and set the line type to dashed. In ActionScript there is the MovieClip.lineTo() which does not support dashed line types.

Convinced there was a better solution, I asked the all-knowing Google the way to enlightenment. Lucky for me, someone wrote a solution. Ric Ewing wrote Advanced drawing methods in Macromedia Flash MX. Unfortunately, he and his colleagues at Macromedia wrote the solutions back in 2002, in ActionScript 1.0. To use it I’ve had to update it to ActionScript 2.0. Much of the code is the same, with only a couple of tweaks.

Since Ric offered up this code for use, I think it’s only right that I do the same. I have provided the code in two flavours. One is in the form of a helper class that any AS2.0 class can call to draw a shape on any MovieClip. The second is an extension to the MovieClip class. All of the examples below use the helper class. To use the MovieClip implementation simply subclass it, and write whatever code you need. The attach it to am item in your library selecting ‘linkage’ then checking ‘Export for ActionScript’, and typing your class into the “AS 2.0 Class” text box. I’ll post an example application of this implementation soon.

I offer the following code without warranty explicit or implied. They are presented as is, and in the words of Ric Ewing,

“Some are useful, others whimsical, but all of them are free to use as you see fit. They are free of charge or obligation. I have endeavoured to make these methods robust and useful, however I can make no guarantees about their suitability to your specific needs. I similarly make no guarantees that they are bug or problem free”

Feel free to download the source code for all the examples below.

As2_draw_methods.zip

You will need the latest Macromedia Flash Player to view the demos below.
Download it now
Draw.dashTo() is for drawing dashed lines with ActionScript 2. It is the method I use the most. I was surprised when I found out that the standard lineTo function didn’t support dashed lines.
Draw.arcTo() an ActionScript methog for drawing an elliptical arc. The arcTo syntax is very similar to the lineTo method.
Draw.oval() is used to draw circles and ovals simply with ActionScript. ActionScript has methods for drawing arcs. This method is meant to simplify the process.
Draw.polygon() draws equal-sided polygon shapes. Use this ActionScript method to draw equalateral triangles, sqaures, pentagons, hexagons, octogons and any other polygon. This method encapsulates the math involved in drawing these shapes, making it much easier to include these shapes in your applications.
Draw.roundedRectangle() draws rectangles with nice, rounded corners like those in the Macromedia Flash rectangle tool. Rounding corners is very common in application development. This method is intended to simplify the process in drawing them.
Draw.burst() is used to draw those oft-loved/loathed graphical elements… the Starburst. Loved by advertisers everywhere. Now you have a simple element to draw starbursts from ActionScript 2. At least creating them is no longer painful.
Draw.star() very similar to Draw.burst(). It draws straight edged stars with sharp lines instead of arcing lines of the starburst. You can change the number of points, both the inner and outer radii, and even rotate the star to get the look and position you like.
Draw.gear() draws gear shapes. OK, this is neat, but I doubt I’d ever use it. Ric Ewing implemented this method mostly as a way to illustrate how to reuse some of the code within the other methods shown here.