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.

Introducing The Blogroll

There are many designers, developers, and writers that I admire and respect. Some are on the blogroll. Others will be added down the road. For now, it's my pleasure to introduce a few gentlemen from the list.

David Carson
Carson's work is where my interests in design began. But I wouldn't realize it until years later when I purchased The End of Print. From this book, I realized that Carson was the designer behind the skate & grunge aesthetic of the late 80's and early 90's. And since then, I've collected all his books and continued to be inspired by his work.

Colin Moock
I first encountered Colin through his website, moock.org. I was trying to figure out some little tid-bit of code. After a strange animation of two washroom signs having sex, I found what I was looking for. And, as it turns out, so did thousands of other eager flash kids. And we still do.

John Iacoviello
John is fairly new to the list. But I have no doubt he's been rocking the Casbah longer than we've all known him. Since his iconic site debut on The Favorite Website Awards, John has left our chilly winters for the warm California sun. But I never would have known all this unless I had had the pleasure of working with some of his code.

Grant Skinner
I first encountered Grant through his work on, what I believe to be, the very first Flash components. But unfortunately, this incredible initiative was quickly overshadowed when Macromedia came out with their own. Nevertheless, Grant broke through and has gone on to win numerous awards and help many designers and developers bring their work to life. He taught me that, good things come to those who do good things - eventually.

Keith Peters
Keith's tireless efforts at bit101.com have been an enormous help to myself and many others for years. But I first placed a name to the code after reading a particularly personal post regarding his frustration over the ignorance of some HR departments. Glad to see those days are long gone. Through Keith and his books, we've all found new use and appreciation for the concepts that make animation and interaction fun.

Erik Natzke
I remember reading a little blurb about Erik many years ago. I identified with his sensibility when I read that he, too, dismantled many of his toys for the purpose of making other, more interesting, toys. And I think what makes his motion graphics or generative illustrations so interesting is that he hasn't stopped this process. It's not often that an artist appreciates the magic of code. I'm glad Erik is one of them.

Dan Frommer
Dan is probably the very first person I met online. We were both very young when I first stumbled upon his website, Fromedome's Page From Hell. Which, at the time, was the most radical departure from anything else I had seen. Dan taught me everything I needed to know in order to create great websites and get suspended from school. Check him out, he's a designer, writer and all around cool dude.

Ted Patrick
Ted is a platform evangelist at Adobe. Ted, like many others at Adobe (and previously Macromedia) have been a tremendous help to designs and developers looking to carve their path. But you've also got to love a guy that produces a library like FDOT. Anything that makes my day job a little easier (and ultimately affords me more time to play with shiny objects) holds a special place in my Actionscript Heart.