Discover Master of Alchemy, our first iPad/iPhone and iPod touch game!

Follow Me


Forum's topics

Latest Files


Top Rated


Photo Gallery

Alessandro Crugnola on July 23, 2007 in actionscript , flex

FontReader, convert TrueType fonts in graphics with Flex

flex fontreaderIn the last period I was trying to find a way to convert a TrueType font character into graphics for a new Flex project.
First I found a way using TTX which can convert a font file into an XML with all the Glyph informations needed to recreate the font outline. But this process requires that all the .ttf files should be converted using TTX before thay can be used in Flash. So I investigated a bit more and I found a really useful and really well done java project: TypeCast.
So what I've done was just a porting of the available java code into Actionscript 3 and it works like a charm! It can read a .ttf file and extracts all the font informations, including all the glyph outlines.

You can see a demonstration of thie Flex application here:

sources can be downloaded here: 



Bookmark and Share


Tags: font , glyph , true type , ttx , typecast 


Protip: TTF curves are already quadratic beziers. Open and add:
override public function walk(walker:IPathWalker, position:Point)
     walker.curveTo( $x1, $y1, $x2, $y2 );
Sorry for being 'that guy' :-)
:D OK got it. But after scaling, things got zagged. :) Not able to recognize the character. There wld be something else. lets find out.
/** *
@param factor a 16.16 fixed value */
public function scale( factor:int ):void
for (var i:uint = 0; i {
GlyphPoint(_points[i]).x = ((GlyphPoint(_points[i]).x > 26;
GlyphPoint(_points[i]).y = ((GlyphPoint(_points[i]).y > 26;
_leftSideBearing = (( _leftSideBearing * factor) >> 6);
_advanceWidth = (_advanceWidth * factor) >> 6;
What does it mean by 16.16 (in comment) as I use it like scale(16) or scale(8)?
Its not working for me as points are converted into 0.
Hey, I am trying to get this to work. I have it all setup in Flex and can run it but I don't see any fonts in the list. What do I need to do??? Thank you.
I try looking at this code that could be a plus for me, but I understand nothing, thx for sharing, but could it be explain a little ? Thx
In case Dan is reading this ... if this is of interest, perhaps we can collaborate on some of this. I now have chunks of the editor working thanks to Allessandro. We just need to sort out how to make contact. Perhaps Allesandro can bridge the gap here. I don't mind being contacted by Dan.
Here the FontRenderer source code. Sorry but I cannot include the points "render" engine because part of another project. BTW, see at the class to see how the path should be created once the FontRenderer class has parsed a font file.
I've been keeping an eye on this page as well. Any code you can post would be awesome. Any code you can't is understandable.
Sorry, you're right. Anyway I can post the code from the parser, but not the vector renderer (because it's part of a commercial project).
If you want I can send you by mail
Waited ... waited ... waited ... And now I'm starting in on duplicating your effort. Looks like my initial estimate on this task was optimistic. Am about a fifth done at day 3. Still wading through porting over the font handling code, getting close on that. I suspect you had some nice components to leverage for the vector editing features. Seems like it will take some effort to duplicate that bit. Oh well.
Any chance of getting the sources to this soon? I've started down this path. Looks like about three days of slogging for the port?
Ciao Alessandro! Thanks for putting this online. I'm looking forward to see more from this experiment. finally no need to trace on graph paper font coordinates anymore :)
wow great job, can't wait to see how you converted the java code to as3...:-)
Little addition.. glyphs are now editable using control handles. Luke, remeber to clean the cache first :)
Thats awsome!!
Don't worry, I will as soon as possibile.
sweetness! please share...
Wow, that's brilliant Alessandro! What are the chances of seeing the AS3 code?

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Type the characters you see in the picture above.



TrackBack URL for this entry: