With Macromedia’s new flash technology, developers now have the ability that few have utilized, or even know about; it’s called “Drawing API” (Application Programming Interface) and it could be a good sized part of our favorite software’s future.

What “drawing API” does is allows the developer to actually make dynamic lines, curves, colors, text & motion at run-time with only actionscript. It runs on a totally different framework than the timeline-based environment inherent to flash. Virtual layers and their visibility will be the concept as opposed to frame-by-frame animation.

All you need to create a fully functional flash movie is an empty movie clip, which can be generated through actionscript. This renders the need for external symbols unnecessary.


One of the remarkable attributes of drawing API is that it creates files that are extremely small due to it only being actionscript. Some of the deepest projects that can be done such as games and actual programs within flash won’t be more then a few kilobytes.

It also runs more efficiently on weaker processors than having PNG’s, JPG’s and GIF’s shooting all over the place or having a lot of multiple movie clips running at once. Your application will not only run better on a wider range of processors but it will also load amazingly fast due to the fact that it’s only code and doesn’t have the payload of images.

Using this Fast-loading and increased-performance, drawing API could be the solution to developers who need to make quick loading, powerful applications for the clients.

Methods that spine Drawing API:

createEmptyMovieClip: to create a blank movie clip

lineStyle: to define the stroke of a drawn 0bject

beginFill: to define the fill of a drawn 0bject

endFill: to close a drawn 0bject and apply the fill set in beginFill

moveTo: to move the “pointer” or drawing tool to a new location

lineTo: to draw a line from the starting point to ending point

curveTo: to draw a curve from the starting point to ending point

It’s all really simple once understood, the drawing methods are movie clip methods and so the drawing occurs within the movie clip. Simply select a line style (the equal to your pen tool) by specifying the line thickness, RGB, and alpha. Then define the point at which the line starts by using the moveTo () method and choose the endpoint of the line by using the lineTo () method.

Both methods take an X & Y coordinate for parameters. Flash will take care of putting the lines between the dots.

Dynamically created movie clips:

When we only had flash 5, art needed to be created and stored in the library or imported before being used on stage. With flash MX an empty movie clip can be generated dynamically using the createEmptyMovieClip() method, which is similar to the attachMovie() method. It generates the movie clip as the spawn or child of the movie clip it is called from, giving this new child a registration in the top left corner of its parent or (0,0).

Example: Creating basic shapes, prelude to a purely scripted interface:

Add this bit of code to your first frame.

// Functions for basic shapes

function square(myClip, mode, x, y, w, h, primaryColor, secondaryColor) {

with (myClip) {

if (mode == "f") {


} else if (mode == "h") {

lineStyle(0, primaryColor);

} else if (mode == "fs") {

lineStyle(1, secondaryColor);



moveTo(x, y);

lineTo(x+w, y);

lineTo(x+w, y+h);

lineTo(x, y+h);

lineTo(x, y);

if (mode == "f" || mode == "fs") {





Now make a second frame and place this code in it.

//Colors of the main Background

square(this, "fs", -1, -1, 550, 342, 0x000000, 0x999999);

square(this, "fs", 0, 340, 550, 160, 0xBAA78F, 0x999999);

with (this) {

// vertical comands

lineStyle(0, 0x999999);

moveTo(50, 0);

lineTo(50, 400);

moveTo(50, 0);

lineTo(50, 0);

// horizontal comands

lineStyle(0, 0x999999);

moveTo(50, 0);

lineTo(50, 0);

lineStyle(0, 0xCCBFAC);

moveTo(0, 341);

lineTo(550, 341);

lineStyle(0, 0x999999);

moveTo(0, 399);

lineTo(550, 399);


Now to create text fields from actionscript place this code below the above code on the second layer.

// creating a dynamic text field

lTextSize = 40;

var labelText = new Array();

// to make more text fields in different locations just copy and paste the array below this comment and change the coordinates to positions desired.

labelText[0] = new Array("textarea_txt", "This is dynamically generated text..", 7, 15, 300);

for (var i = 0; i<labelText.length; i++) {

this.createTextField(labelText[i][0], myDepth, labelText[i][2], labelText[i][3], labelText[i][4], lTextSize);

with (this[labelText[i][0]]) {

selectable = false;

text = labelText[i][1];





Make a third frame and add a stop();

Test scene… The FLA file is downloadable.

You can make many different applications using flash’s drawing API for example motions graphics, interface design for websites with extremely low digits in kilobytes. Drawing API can also be used for cellular phones and pocket PCs to name a few.

About the Author, Jozias Dawson

Jozias Dawson (www.otradesign.com) currently works as a freelance artist, web developer, audio engineer and is also exploring the fine art of cooking. Spending a good portion of his life in Oregon he now lives in San Diego, California with his lovely wife.

In his spare time he can be found playing Tom Clancy games, trying to be a photographer, reading, learning new software, and experimenting to shape and sharpen his thoughts through a healthy diet of vegetables and fish.

All rights reserved © 2000 - 2014 Favourite Website Awards (FWA) -  Terms & Conditions -  Privacy statement -  Advertise -  About FWA -  Contact