Archive for the ‘vector graphics’ Category

Getting good vector shapes out of Flash embeds

Saturday, February 27th, 2010

A recent project I’ve been working on utilizes a couple faces from M+, a beautiful FOSS font set. There are several ways to embed fonts in Flash, and I prefer using the [Embed] meta-tag, which plays nice with the majority of the IDEs out there. However, a straight-up font embed tag wasn’t working well at all for me. The text that appeared onscreen was broken and misshapen in places.

It turns out that mxmlc, the Flash compiler, employs several “font managers” for taking embedded font files and “transcoding” them into Flash fonts. The primary manager relies on a Java library called Batik to convert the letterforms of the font file into Flash-friendly curves. I’m not sure why this was the case, but Batik was flummoxed by some of the faces in M+, specifically with the capital ‘O’ letterform.

I mean, you could trace a big O by hand if you wanted to. It’s cake. I can’t imagine why M+’s ‘O’ is so difficult to process, but if it can happen with this font, it could happen to any font.

I only managed to get good shaped text with one font manager- the one that also handles transcoding OpenType fonts and such, which uses the new Compact Font Format (CFF) system in Flash 10. (To learn more about this subject, here’s a post about the new CFF embedding system.)

It might seem subtle, but when you compare the text side by side, I think you’ll agree that all this CFF stuff I had to do was worth it. Below is the same SWF, one with M+ text imported with Batik, the other with CFF. (more…)