When Flash MX was introduced, several new features were added to both the authoring enviroment and to ActionScript. My favorite group of new methods added were the drawing methods added to the MovieClip class, also referred to as the Drawing API. This tutorial will try to help you in understanding and using these methods.

When Flash MX was introduced, several new features were added to both the authoring enviroment and to ActionScript. My favorite group of new methods added were the drawing methods added to the MovieClip class, also referred to as the Drawing API. These methods allow you to dynamically draw shapes on the stage of the Flash Player at runtime. Now, you may be thinking one of a few things now: "Neat. I can draw a square with ActionScript. Wow." or, "when would I ever use this?", or if you're like me, "SWEET! Now what can I do with this?" If you were thinking one of the first two things I just mentioned, keep reading, and I'll show you what you can do with this, and why you would want to use it. If you're excited about this and what to see just what you can do, I'll show you what I've already done with it. There are some pretty basic concepts here, but you'll be able to do some amazing things once you get them down.

First, some basics - The Drawing API consists of eight methods:

lineStyle()
moveTo()
lineTo()
curveTo()
beginFill()
beginGradientFill()
endFill()
clear()
Each of these methods allows you to dynamically draw a shape on the stage using a MovieClip. The easiest way to visualize how this thing works is to imagine yourself at a desk with a pen and a piece of paper. The first thing you'll do is pick what pen you want to use. You'll then decide where you want to start drawing at, and move your pen to that spot. You then decide where you want your lines to end, and draw them to that point. If you want to start a new line, you'll move your pen to that spot, and start again.

The Drawing API works in a similar method. First, you already have your paper, the stage. To draw, you'll also need a "pen". This is a MovieClip. You can use a MovieClip already placed on the stage, or, you can create one dynamically using createEmptyMovieClip. You then need to decide what type of "pen" you want. This is done by using the lineStyle() method. lineStyle() allows you to specify the line thickness, color, and alpha value of the line. You then move the "pen" to the position you'd like to start drawing from using moveTo(), and then draw your line using either lineTo() or curveTo(). If you would like to fill this shape, you would use either beginFill() or beginGradientFill(), combined with endFill(). To wipe the slate clean and erase your drawings, the clear() method is called.

But enough talk, on to the coding -
First, a quick example of this thing in action. The code below draws a simple black box on the stage, with no fill, followed by a solid black box, with a red border. To view this in action, open a new .FLA, and paste the code below into the first frame.

Download the source files for this tutorial - drawingAPI.zip

example1.fla




The code above produces the following: