Wednesday, June 16, 2010

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.


wbhist said...

Flash has since advanced to Adobe Flash 9 and 10. I've noticed, however, that color encoding in Flash 9 seems to be based on Rec.601 SD (presumably Flash 8, as well) while Flash 10's appears based on Rec.709 HD. I've noticed this on YouTube in optimum (854 x 480) display mode - and YouTube goes by Flash. On my computer, Internet Explorer uses the Flash 9 version, while Firefox uses Flash 10.

Kecske said...

@wbhist Funnily enough, I noticed that for the first time a couple of days ago when I was uploading a file of the 1981 BBC 9 O'Clock News titles to YouTube. Whilst the original .swf file is the correct shade of maroon when viewed in the Flash 8 player, when uploaded as an .flv to YouTube it beccomes quite different when viewed with the Flash 10.1 player - even though the thumbnail image has the correct shade.

wbhist said...

This color encoding difference is why I haven't updated Flash since getting Flash 10 in Firefox - as I worry about losing the Flash 9 settings in Internet Explorer. I've actually seen some pages which had color bars encoded in Rec.601 and decoded in Rec.709 - and vice versa.

Kecske said...

When I used to do a lot of work in Flash, I used to use a Firefox plug-in called "Flash Plugin Switcher" that allowed you to have numerous versions of the Flash plug-in installed simultaneously and switch between them using an icon at the bottom right corner of the main Firefox window. Sadly, it seems this has not been updated for some time.

Eckhard M. said...

May interesting for you: Flash export for Inkscape via PDF format:

Kecske said...

Many thanks for the link - I found it very interesting indeed!