Inkscape to Flash 8

These days, if at all possible, I like to use Inkscape for creating vector artwork. At one time I used Macromedia Flash 8 for all my vector illustration work. But these days, if I have to create artwork in Flash it makes me feel like I'm being forced to write with my left hand.

There are also a number of things I can achieve easily in Inkscape that are harder to do in Flash. One recent example was when I was working on the animated menu for Simon Buckley's new website. I was given a signed off design as a bitmap illustration and was asked to turn the design into a vector animation in Macromedia Flash format.

Most of the design was very straightforward to achieve, but there was one part that was more fiddly. The name of the website was written in a font called Chalkdust, and it was fringed with a thick black outline. This is one of those things that looks simple to do until you actually try and do it in Flash.

The way I tackled getting an attractive vector outline for the Chalkdust text was to enter the Chalkdust text into Inkscape, turn the text into vector outlines and then use the Inkscape "Linked Offset" option to enable me to expand the text outline to the desired extent.

 Cleaning up Chalkdust in Inkscape

Chalkdust, like most typefaces, has very messy vector outlines with large amount of redundant nodes. This meant that the resulting expanded outline needed a lot of cleaning up and simplification - a job I could do very quickly with the node tool in Inkscape.

It's always worth making your vector outlines as clean as possible.  In the old days of dial-up modems this was because you hand to shave every last byte off of download times - I used to hand optimise everything I did in Flash to get Flash animations within bandwidth quotas set by customers. However these days it's because the more elegant your outline the better it looks (due to the vagaries of anti-aliasing routines) and the better it animates.

Cleaned up outline

The finished outline was soon cleaned up and ready for transferring from Inkscape 0.47 to Flash 8.

After some experimenting, I found that my favoured method of transferring vector Inkscape artwork into Macromedia Flash 8 is the Encapsulated Postscript or EPS format.


There is one important thing to be aware of when transferring between the two programs using this format. Take this Inkscape vector drawing as an example - it's 400 by 400 pixels in size.

400 x 400 pixel Inkscape drawing...

When imported into Macromedia Flash as an EPS it arrives as a vector drawing 320 by 320 pixels in size.

...becomes 320 x 320 pixel Flash drawing.

There is absolutely no way around this - Flash thinks EPS files should be 72dpi, Inkscape thinks EPS files should be 90dpi and neither program lets you do anything about it.

However, it's simple enough to use the Flash 8 Transform panel to scale all the EPS files you import into it by 125% to make up for the difference in dpi between the two packages.

Doing this becomes automatic after a while!

One final point to bear in mind with EPS transfers between Inkscape and Flash 8 - avoid gradient fills. These always seem to be imported as bitmaps in Flash 8. You will have to recreate any Inkscape fills again from scratch in Macromedia Flash so I never bother creating them in Inkscape in the first place.

The finished animated menu can be seen here. I've also written a blog post about my preferred method of getting my vector drawings from Flash 8 into Inkscape here.