FontReader, convert TrueType fonts in graphics with Flex

« senocular.com TransformTool modification | FlashDevelop 3, unsorted plugins »

Alessandro Crugnola on July 23, 2007 in actionscript , flex

In 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:
www.sephiroth.it/test/flex/2/fontreader/bin/FontRenderer.html

sources can be downloaded here: www.sephiroth.it/file_detail.php?id=159

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

18 comments

Ben | June 23, 2010 2:27 AM

Protip: TTF curves are already quadratic beziers. Open QuadraticBezierSegment.as and add:

override public function walk(walker:IPathWalker, position:Point)
     :void 
{
     walker.curveTo( $x1, $y1, $x2, $y2 );
}

Sorry for being 'that guy' :-)

DELL | March 31, 2009 12:07 PM

:D OK got it. But after scaling, things got zagged. :) Not able to recognize the character. There wld be something else. lets find out.

DELL | March 31, 2009 10:53 AM

/** *
@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.

Shawn Welch | October 23, 2008 4:18 PM

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.

Jp | October 4, 2007 6:11 PM

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

Mario | September 27, 2007 4:05 PM

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.

Alessandro Crugnola | September 25, 2007 11:56 PM

Here the FontRenderer source code. Sorry but I cannot include the points "render" engine because part of another project. BTW, see at the GlyphPathFactory.as class to see how the path should be created once the FontRenderer class has parsed a font file. www.sephiroth.it/test/flex/2/fontreader/FontRenderer.zip

Dan | September 25, 2007 7:13 PM

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.

Alessandro Crugnola | September 24, 2007 7:38 PM

@Mario
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

Mario | September 24, 2007 7:27 PM

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.

Mario | August 12, 2007 9:18 PM

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?

Danilo | August 6, 2007 5:40 PM

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 :)

design4use | July 24, 2007 7:33 PM

wow great job, can't wait to see how you converted the java code to as3...:-)

Alessandro Crugnola | July 24, 2007 4:07 PM

Little addition.. glyphs are now editable using control handles. Luke, remeber to clean the cache first :)

keith | July 23, 2007 5:25 PM

Thats awsome!!

Alessandro Crugnola | July 23, 2007 4:32 PM

Don't worry, I will as soon as possibile.

xero / fontvir.us | July 23, 2007 4:00 PM

sweetness! please share...

Hilary Bridel | July 23, 2007 11:53 AM

Wow, that's brilliant Alessandro! What are the chances of seeing the AS3 code?

Menu:

Latest tutorials

Sponsor

Follow Me

Forum's topics

Latest Files

Archives

Top Rated

Categories

Photo Gallery

FontReader, convert TrueType fonts in graphics with Flex