Import Scalable Vector Graphics
Let µSprite generate ActionScript 3 code from SVG paths, lines and solid fills
A great benefit of importing SVG into µSprite is to get text imported as shapes. You can not work with text and fonts in µSprite because any font you might want to use would have to be embedded into µSprite beforehand. But you can also import other artwork that you may have in SVG so you can improve upon it or animate it with µSprite or directly manipulate it in ActionScript. Some compatibility improvements have been implemented in µSprite to allow bitmaps and photos that have been converted into vector drawings to be imported from the delineate front-end for autotrace in color and potrace in monochrome (these are all open source tools). However the current level of compatibility and robustness is very limited and it would be nice to get a complete rewrite done also to take advantage of the AS3 XML improvements.
The SVG import in µSprite is based on the drawsvg_mm AS1 code which was based on drawsvg. The code was written by many good software developers but needed a good deal of rewriting to convert from the AS1 prototype based coding style to the AS3 class based one. Errors may unwittingly have been introduced so look out for tell-tell signs like NaN and Infinity values in the generated code.
How to import SVG
Lets assume that you want to create a nice logo with some text on it (like the png at the top of this page except nicer and in AS3) and that you have access to a PC with Adobe Illustrator CS2. It is important to ensure that the SVG is compatible with the µSprite SVG importer as it only implements paths, lines and solid fills. If you do not have Illustrator CS2 then read this any way, hopefully you should be able to find similar steps in your tool, so you can get usable results. Further down on this page you can also find some SVG scripts that you can start with.
First you create a new drawing, choose 300x300 pixels so it will import easily into µSprite where you can reposition and resize it. Click on the Text tool, choose a cool font and enter your logo text in the drawing area. Adjust the font size. When you are done, click on the Selection tool and select the text field.
Now to make the SVG compatible with µSprite you have to perform a couple of steps: First on the Type menu select Create Outlines. Second on the Object menu under Compound Path select Release. This may cause the text to look a bit scrambled in Illustrator.
Next Select Save As... and select Save As Type SVG then click Save. You are now presented with a SVG Options dialog. Select for example SVG Basic 1.1 and click Show SVG Code. Select all and copy the SVG XML from the launched web browser.
Lauch µSprite and switch to the SVG tab. Click in the script field and paste the SVG XML. The conversion leaves an intermediate AS3 code representation in the script field and segment by segment adds the SVG shapes to the drawing. If you want to try importing multiple times, then use the Delete button with Segment or All selected on the Shape tab or use remove from the Scene before pasting the SVG XML again.
Refining the SVG import
The tolerance level you can select on the page determines the algorithm and the precision of the curves that are generated from the SVG. If you set Tolerance to zero then Timothee Groleau's midpoint method is used. It generates four stroke points for each bezier curve and is therefore very precise but generates a lot of AS3 code.
Tolerances larger than zero uses Robert Penner's recursive midpoint approximation, where 1 is very accurate and 25 less so. The fewer points the faster the import. It also becomes easier to work with the segments in µSprite and most importantly the size of the final AS3 code is reduced. So it can be worthwhile experimenting with the Tolerance setting until you obtain a visually pleasing approximation with as few points and curves as possible.
In Illustrator you can also use the Simplify option that you find under Path on the Object menu. With this tool you can reduce both the number of points and segments in the graphic before you generate any SVG XML. It is easiest to preview what you are doing if you do this after you created the outlines but before you released the compound paths.
To finish the logo, you can choose Apply changes to All on the general tab and select a pleasing color on the Fill tab. You can adjust the size with the scale command on the General tab, and drag the text with the blue stroke points as needed. Then for example try adding a rounded rectangle. It is easiest to do this by selecting Apply changes to Segment, then click to create the rectangle in an empty area and drag the blue and red control points to cover the text. Drag the green control point to resize the rounded corners. Since the rectangle is created with the same fill as the text, the text will be carved out.
Then apply Bevel on the filter tab. Since text often contains thin lines adjust the bevel distance to about 1 to 1.5. To get a bit of extra shadow you can change the Bevel to Full. Or apply a drop shadow filter for example with a distance of 2 and an alpha of 0.5. That is it, give it a base name and grab the ActionScript 3 code from the script window and paste it into your project.
On the SVG pane there is also a Split shape button. With it selected each path is imported as a separate shape. This allows you to animate each path independently for example to create an exploding or self assembling logo. You can try this with the first example below. After importing you can change the selected shape on the scene pane.
SVG Examples
Below is a small sample with the actual symbols used on the Ok and Cancel buttons in µSprite. They are rather small so after pasting them into the script field on SVG tab, zoom by changing a maximum grid control from 300 to 20.
The next sample is useful if you do not have access to Illustrator but want to try the SVG import described above anyway. It consists of a graphic rendered with the overly elaborate font used in the top logo on this page. After an SVG import the control points are hidden so you can see what you imported. It can take a little while to import so µSprite shows the progress as the import is going on.
You should have no problem finding free SVG artwork on the internet. But as mentioned you will have to convert to paths to get usable results.