AS3 Graphics Sprite Editor

Generates ActionScript 3 as you draw, draws as you code - now also open source haXe web script

µSprite is a vector graphics editor for ActionScript 3 and haXe. With it you can design graphics for buttons, icons, pointers, game elements and more for Flash 9 AS3 or haXe, Adobe AIR and Flex MXML projects. Sprites can be created in multiple layers and animated with timeline based tweens. µSprite generates ActionScript 3 or haXe code as you are drawing and designing. You can include the code as-is in your projects or enhance it further. With AS3 code your graphics can be resolution independent and might result in smaller, faster downloads than Flash applications with embedded bitmaps.

In µSprite you can draw with precise control over lines, curves, shapes, line styles, solid and gradient color fills. Most that you can do in ActionScript code with the flash.display Sprite/Shape/Graphics classes can be done interactively with µSprite. You can enhance the graphics with bevel, blur and drop shadow filters. A color wheel and palettes with hue, saturation, and brightness scales that remembers recently used colors helps you find matching colors.

µSprite supports roundtrip engineering of its generated AS3 code. That means that its native graphics file format is the AS3 code. So you can save generated ActionScript 3 code from a text editor and resume work later simply by pasting the code back into the µSprite script editor window. The script window has AS3 syntax highlighting and changes you make are immediately reflected on the graphics in the drawing area and vice versa.

µSprite does not use a conventional parser as that would be quite slow for interactive use. Instead it uses regular expression matching on the flash.display.Graphics class methods. This has the downside that many syntactic elements such as if statements are ignored. But the upside that you can write code in shorthand - for example paste/write:

In the shape script window to get a yellow circle in the drawing area and then try dragging the blue and red control points to see the AS3 code change as you do so. You can also add other graphics objects and see the code evolve. Working on the graphics especially dragging with the script window open does require a good deal of CPU power. Note that µSprite only preserves your manual changes if they are part of the implemented Graphics class API. If you make non-trivial code changes then keep a copy of both the generated code and your manually modified version.

Comparison

Most functionality in µSprite is similar to other vector drawing programs. It is simpler than most as the aim of µSprite is only to make it easy to create graphics with the flash.display.Graphics API. It is a small tool for the situations where you would rather do it in code or when the final size matters most. There are some things such as shape morphing that can not be done in ActionScript because Adobe has chosen that only their Flash authoring tool can create MorphShape objects. Nevertheless µSprite is also handy if you want to avoid file formats that can not be edited in a text editor such as fla files.

The only binary resource used in µSprite is the free Bitstream Vera Sans font, which has been converted to FlashType on a machine with Flash 8 to improve its appearance. Everything else in µSprite is AS3 code - the images on the buttons were drawn in µSprite and are compiled as static methods. The source code is in the Asset class in the source download. There you can also find the source code for the lightweight autotelicum user interface widgets.

The program classes and methods generated by µSprite are pure AS3 Flash. A simple drawing might result in a swf file starting at 7-800 bytes. A simple animated scene starts around 7-8Kb. The size of the swf files increases predictably as a function of the complexity of the scene and animation you create. No Flex classes are used because of the size of the resulting swf files, which is also the reason that the mxml sample is not included in compiled form. The two button sample compiles to a swf that is larger than µSprite itself. But you can spice a Flex application up with graphics created in µSprite as shown in the script samples.

Requirements

You do not need to understand ActionScript to create a Flash swf file from a class generated with µSprite - download the Adobe Flex 3 SDK and install it according to Adobe's instructions. To compile a generated class without animation open a command prompt and type: mxmlc generatedClass.as

If installing a Flex SDK which requires installation of Java is too much then try haXe instead. It is a much smaller and automated download. The haXe compiler is not written in Java so it is fast and frugal with its use of memory. It is available on Windows, Mac OS X and Linux. The haXe script language is very similar to AS3 but adds a better type system, typed arrays, iterators and it can be used for desktop, server and Flash or JavaScript clients.

In µSprite click on the Settings tab in a Script window to get haXe script generated. When you paste generated code back in µSprite then it does not matter whether it is in AS3 or haXe form. To compile haXe script into swf follow the examples and the readme in doc/samples/haxe.

To compile animated scenes you need the boostworthy animation library version 2.1 and if you animate color, matrix transforms or filter properties then you need the autotelicum TweenEx class. The µSprite source download contains these libraries. You can place generated AS3 files in the library directory where you unpacked it and compile without any further setup. If you set up a source path then you can compile from any directory, see the readme.txt in doc/samples. For haXe a pre-compiled animation library and haXe headers are included in the download.

A good editing environment is recommended to supplement µSprite. You can use any editor; Komodo Edit is the editor currently used to develop µSprite because of its web, macro and toolbox automation features. It works on Mac OS X, Linux and Windows - but it only has basic AS3/MXML syntax features. If you use Windows then you can complement with FlashDevelop and switch between the two depending on the task. If you use Windows then you may need a utility like ZipGenius to unpack the source tarball.