ASVDrawing Class

ActionScript Viewer version 3.1 has the ability to generate ActionScript from vector art in a swf. There are two different outputs; one is a list of lineTos an curveTos, and the other is a data array. This class manages the latter and provides a basis for some interesting extension possiblities. For example, see this and this. Generating code from art is a pretty handy tool, as anyone who has tried doing it by hand will agree. It allows art to be stored in SharedObjects and manipulated with ActionScript, as these examples show.

The class is very simple. The basic code is just a constructor and a MovieClip method to draw the data. The data format is explained below.

Methods

ASVDrawing constructor

new ASVDrawing([dataArray])

Creates a new instance of ASVDrawing class.

ASVDrawing.setData

myASVDrawing.setData(dataArray)

Pass a data array to an instance od ASVDrawing. You don't need to call this method if you passed data to the constructor.

ASVDrawing.linesToCurves

myASVDrawing.linesToCurves()

Converts all of the lineTo commands into curveTos. This is useful for distorting a shape because a staright line will not bend if you move its end points. This method modifies the data and is not reversable.

ASVDrawing.curvesToLines

myASVDrawing.curvesToLines()

Converts all of the curveTo commands into lineTos. I'm not sure how useful this is, but I included it to mirror linesToCurves. This method modifies the data and is not reversable.

MovieClip.draw

myMovieClip.draw(myASVDrawing)

Pass an instance of ASVDrawing for a movieClip to draw.

ASVDrawing data format

The format is essentially an array, where each element can be seen as a command. The basic commands all correspond to a method of the MovieClip drawing API. Each command is represented by an array of two elements. The first is a string, which is the name of the command. The second is an array of arguments. The supported commands are:

After a quick look at the code, you will see that it's a very simple matter to extend this command set.

Here is a simple example, which draws a triangle:

data = [['F',[0xFF0000]], // beginFill(0xFF0000)
['M',[20,50]], // moveTo (20,50)
['L',[80,90]], // lineTo (80,90)
['L',[20,90]], // lineTo (20,90)
['L',[20,50]] // lineTo (20,50)
];
myDrawing = new ASVDrawing(data);
this.createEmptyMovieClip("drawing_mc",1);
this.drawing_mc.draw(myDrawing);

For some simple extensions to this class, see linear transformations and non-linear transformations

download actionscript file


download FLA for this movie