Drawing Commands for Actionscript 2, 3, SVG & FXG

Each new version of Flash player has given developers an exponentially larger API to play with. From networking protocols to drawing commands, it’s increasingly difficult to keep track of exactly how much power we have at our fingertips. And this is probably why, when I decided to make Livebrush my first AS3 project, I completely overlooked the new drawing commands available as of Flash Player 10. In any case, I hope this post helps others to be more informed than I was originally.

Primer
This post is for beginner-to-intermediate Flash designers and developers. I’ll also note that SVG is not natively supported by Flash or Actionscript. I’m only demonstrating this relationship in respect to how I converted native drawing commands to SVG for the vector exporter in Livebrush.

The demo below illustrates drawing a shape using Actionscript 2, 3 and SVG. Use the tabs to select the type of code. And use the ‘Build’ button to step through the drawing, from start to finish, line by line. There will be more information on each type after the demo.



Actionscript 2
To draw using this method requires that you sequentially step through each drawing instruction (ex: moveTo, lineTo, curveTo). And it’s probably still the most common and useful method for many tasks. However, it’s weakness is in how the data and command functions are married. It becomes incredibly tedious to use this method when rendering and modifying complex objects.

Actionscript 3
The new drawing commands make complex drawings much easier to create and especially modify. This is achieved by isolating the data from the instructions. Furthermore, the drawing instructions are abstracted into numerical commands that you sequence in an array. By isolating the data, commands, and rendering process, the amount of code required to draw a complex object is significantly reduced. But what's with this new syntax?

var pathShape:GraphicsPath = new GraphicsPath(new Vector.<int>(), new Vector.<Number>());

First, understand that the Vector class is just another indexed Array. The main difference is that a Vector array contains values of one type (referred to as the base type). So this new syntax is used to specify that base type. In other words new Vector.<int>() means, create an array that will only contain values of type int.

SVG
Scalable Vector Graphics (SVG) is a xml-based markup language. I chose to export lines drawn in Livebrush to SVG because it’s a standardized format supported by all the major illustration tools. SVG is similar to the first method of drawing in Actionscript in that it combines the drawing commands with their corresponding instruction. However, besides syntax, it differs in how you can group instructions into objects that share similar styles and properties (ex: the <g> tag). Just remember you can’t natively import, export or render SVG using Actionscript.

The Future
For now, this is where Degrafa comes in handy. Degrafa is another xml-based language used to describe and render graphics in Flex. But it also offers many more powerful shortcuts. One of which is a soon-to-be-released importer/exporter mechanism for SVG data. Check it out.

FXG (via Adobe Open Source)

FXG 1.0 describes an XML-based graphics interchange format for the Flash Platform. FXG contains high-level graphical and text primitives that can be used to create, group, transform and visually modify basic vector and bitmap shapes. The FXG rendering model follows very closely the Flash Player 10 rendering model and exposes all graphics capabilities of the Flash platform as well as offering expandable support to accommodate future capabilities of the Flash Player.

Final Notes:
At the Adobe MAX 2009 Awards, they showed a sneak preview of Flash generating code that could be copy/pasted into HTML 5 for viewing with the new Canvas tag. In other words - watch out kids FXG is going to blow the lid off everything.

Check back soon for an exclusive post on the FXG format and how it relates to the drawing methods described in this post. Until then, you can check out Mike Chambers' post for the reasons why Adobe chose to create FXG as opposed to sticking with SVG.