Font editor in flash

nic_mulvaney's picture

I've been messing about the past few days and have come up with this...

http://www.gizma.com/newprojects/outlines/outline9_content.html

You might need a fast machine. It's not really trying to be an editor, i just wanted to see if it was all possible.

If you have any ideas of what i could do with this, let me know.

Its good fun to set overlay on, press a key, then click degenerate and then the key again, keep on going for a mess.

lemme know what you think.
(oh remember to click the flash movie to focus beefore typing)

John Hudson's picture

You should probably pick a base font other than Georgia. The latter is covered by Microsoft's EULA, which prohibits decompiling. Perhaps use one of the recent Bitstream open source fonts?

nic_mulvaney's picture

How do i obtain the Bitstream fonts? are they available?

down's picture

That is pretty cool. Maybe make a fill button to view solid characters?

hrant's picture

Hey, nice! This is the future, actually - I mean SW that runs remotely. BTW, there's also a pretty advanced Flash bitmap font (I guess pixelfont) editor - I forget the URL.

Two things:
1) The Overlay On/Off doesn't seem to do anything.
2) I can't get other chars to show up. When I hit a key there seems to be a lot of activity (HD churning), but the display just goes blank (except for the guides), and I can't even get back to the "A" (without a Reload).

> Georgia ... is covered by Microsoft's EULA, which prohibits decompiling.

I wonder what "decompiling" really is, though. What Nic is doing here seems to be equivalent to nothing more than something like a "convert to outlines" in Illustrator - there's no actual font action [that I can see]. Oh, but I guess you mean the initial conversion to XML... I get it.

The good news is that MS isn't extremely strict about this stuff - you can't even save anything at all out in this instance, right?

In the future though if it this is going to actually generate new fonts, including a public-domain font instead is indeed a good idea. Nic, the nice Bitstream people can help you out there.

hhp

eomine's picture

> Two things:

It works fine here (Mozilla, Pentium2). The overlay,
and the typing. Ah, it's pretty interesting, indeed!

down's picture

Yeah, I had no problem with the overlay either...

How does the degenerate function work? Is it just moving the points to a random location in a certain radius?

hrant's picture

> It works fine here

> I had no problem with the overlay either

Huh, I'm on Explorer6/Flash7/WinXP - not exactly a fringe system...

BTW, I tried again:
1) Still no overlay.
2) I got a second letter this time, but not a third.

hhp

nic_mulvaney's picture

Ok i've made some changes.

try it again
http://www.gizma.com/newprojects/outlines/outline9_content.html
(clear your cache)

Managed to fill the characters properly and it should work a bit more reliable now.

The degenerate function just adds a random number between -10 and 10 to each point.

The Overlay function - when you type, and it is ticked, you should see the last character you typed in the background.

Hrant, i'll talk more about the beziers after my dinner. Back soon.

nic

brightwhite's picture

Hey, that's very cool. What do you think the eventual purpose would be? Would a person be able to save the file to a local FFIL or something? That might be a cool way to generate custom faces.

nic_mulvaney's picture

TTX can convert a ttx file (which i can output using flash/php or flash/asp) into a ttf file. As this is command line in theory it could be run on a server.

It would be useful to have an open source font for this. I will email Bitstream, In the meantime if anyone wants to donate a font for this exercise, let me know.

hrant's picture

Works like a charm now.

I'm liking this.
And I'm thinking that at the very least it could be a great -if casual- evaluation tool: something a typophile could use to compare glyphs and check out their details in his favorite fonts; like compare vertical alignments, stroke thicknesses, etc. (and the overlay is great for this). There would have to be a way for a user to load up a font from a local drive though.

Also, I'd add a way to slide the overlay around without moving the other layer. Plus allow overlays across different fonts (like for comparing two weights of a design). And provide a way to add custom alignment lines.

hhp

nic_mulvaney's picture

Yes, this would be a good tool for critique. say you upload your new font, and somebody says "what about making the descender like this..." cue the tool..

I've speeded up editing dramatically now. It's actually now plausable to do something real with it.

I'll try looking into uploading and saving.

Thanks for the requests Hrant, i'll get cracking on some of them.

I'm also gonna look into ways of formatting the points for creative effects, while i was making this i came across loads of bugs that actually looked quite interesting..

here are a few
http://www.gizma.com/newprojects/outlines/mishaps/
some have my input drawing and some are purely the code messing up

down's picture

The fact that you see bugs in those pics amazes me. But I was noticing that some point seemed to have a snap effect when I was playing around with them. Does that have anything to do with this?

>Yes, this would be a good tool for critique. say you upload your new font, and somebody says "what about making the descender like this..." cue the tool..

On this note, would there be sessions that multiple people could log into and manipulate a font? Collabrative font would be taken to new heights. :-)

nic_mulvaney's picture

Ahh yes, a collabrative font. Everybody pushing and pulling the same typeface. That could be interesting.

I suppose other obvious features i should make are, zoom and snap to editable grid.

The thing is, i could easily get very carried away (eg, kerning). I need an aim for the project. A collaborative font could possibly be the answer.

hrant's picture

Director Shockwave does indeed allow multiple remote users to interact
in a movie (try that with HTML! :-) and I assume Flash does too.

> I need an aim for the project.

I think a full-featured "type evaluator" is your best focus - an editor will become too challenging too quickly (unless the real aim is to learn the process). An evaluator might include collaboration too - like in annotating glyph features with mini chat sessions or something.

So you'd really need some means of setting text too, not just glyph zooms. In terms of resolution issues with this, remember that you can print outline fonts from Flash very easily.

hhp

down's picture

If the evaluator is the project, maybe being able to make red drawing marks to show others in the session what you're talking about could add a dynamic. I know from what I've learned in the past two days of reading this board, I find that a better understanding comes when people highlight their critiques in a visual (usually with what looks like the spray paint option in MSPaint for some reason).

I'm not sure if what Hrant meant by "setting text" is the idea of locking a character as unchangeable, but if not, that might be a nice function. (And if it is, forgive me, I'm a beginner trying to get up on the lingo.)

Oh, and an undo function would be good, I know that I screwed some things up mighty-drastic a couple times fooling around, and could never get them quite back to the way they were.

As for the new layout, it is much easier to navigate and use. Keep up the wicked work Nic.

hrant's picture

By "setting text" I meant being able to see some words set in the font, since each letterform in a typeface has to work harmoniously with the others. In fact many people would say that such "macro" evaluation comes first - the problem here being that the screen doesn't have nearly enough resolution to predict the "texture" that a font will make when set as extended text in print. But that doesn't make it all pointless.

hhp

down's picture

Sorry to pester, but is that a standard term in the industry?

oculasm's picture

on the collaborative font side that Myke mentioned, I once saw somthing very similar to the alphabet synthesis machine by Golan Levin,

http://alphabet.tmema.org/#implementation

where you were told which letter of the alphabet you were working on and you placed your choice of pixels for that letter.

it was also similar to http://artcontext.net/glyphiti/docs/about.html
but you could only choose a few pixels from each letter - true distributed font collaboration, albiet on the bitmap scale.

nic_mulvaney's picture

Have made a few changes..

I have moved the project to:
http://type.gizma.com/

Let me know any feedback. I am still to implement zoom, undo and an area to set text.

twardoch's picture

Nic,

the Bitstream fonts are available for free. The Bitstream press release says: "The Bitstream Vera fonts will be available for free copying and redistribution and can be modified as long as the font name is changed." The fonts are available here: http://www.gnome.org/fonts/

In addition, the Ghostscript group has a large set of completely free fonts donated by URW++ that are available under the GNU license: http://www.ghostscript.com/article/44.html

Finally, there is a collaborative project called Free UCS fonts. Its aim is to create free Unicode fonts (based on the Ghostscript fonts but greatly extended). It's hosted at Savannah: http://savannah.nongnu.org/projects/freefont/

Since Savannah has been hacked recently, the project is offline now but should be up again soon.

Great tool!

Adam

nic_mulvaney's picture

Thanks for the tip Adam,
I've implemented 'Vera' and it works very well.

Also put a little character map viewer on aswell.

rcapeto's picture

And isn

hrant's picture

Nic, this is getting good!

Question: Are you determining the vertical guidelines from parameters in the font, or manually?

BTW, there was a guy (I should really remember exactly who it was, but all that comes to mind is that he was Latino - sorry) who was working on a PDF template that you would plug a font into and you could read off a bunch of useful attributes, like set-widths, vertical overshoots, etc. Can anybody find that stuff in the archives? The reason is that Nic might benefit by colaborating with whoever that was.

> is that a standard term in the industry

You mean "setting text"? Yes, it always means using a font to lay out some text.

> I guess it would be less bothersome if the face were very different from Verdana.

Less bothersome to us, but probably more bothersome to your typical user, who appreciates the "convenience"? :-/

hhp

nic_mulvaney's picture

The guidelines are determined by the font, but in this case, the descender is actually slightly lower than most of the real descenders.

I have been working on a save function, but this could really do with an 'Insert Point' feature which is virtually impossible in flash. I'll see what i can do.

eomine's picture

> [...] Can anybody find that stuff in the archives?

Yup.

nic_mulvaney's picture

Thanks for the link. What i am looking for most is a way to get ttf/opentype from a users computer into this.

TTX files can be too large (often 3MB+), I now have my own non-xml font format for this tool, which is a lot smaller. I'm sure i can work it out.

"..this could really do with an 'Insert Point' feature which is virtually impossible in flash."

Reverse that. I think i've worked it out in my head, but i've spent all day in bed feeling ill. When i recover i will get on the case to see if it works.

Main features to add:
-Setting tool
-Zoom
-Annotation
-Save

hrant's picture

Thanks Eduardo! (And sorry Hector...)

Nic, what about uploading a normal font file and doing the TTX conversion internally? At least in that way chances are less people will end up with an "unauthorized decompiled" version of a font on their drive.

BTW, of those features to add, to me Save is the least useful. Except of course as a way to save just the annotations (which would also take up a lot less space). Maybe this can be done with references to chars, without actually storing the glyph data? That's for cases where no outlines changes are made though.

hhp

twardoch's picture

Nic,

The Letterror folks who created TTX are working on another project called RoboFab. It basically is a high-level XML/Python-based system for creating fonts. It has its own XML-based font format (UFO) that stores glyphs in so-called GLIF files (also XML). The great advantage of it is that it has a much simpler structure, and that UFO is capable of storing both PostScript and TrueType data. I'd encourage you to use UFO as your intermediate format.

They have a handy concept of Python-based "pens", i.e. converters from UFO to other formats. Maybe you could try to hack a UFO-to-Flash pen, that would make them probably very happy.

Best: contact Just van Rossum (just at leterror dot com) and Erik van Blokland (erik at letterror dot com).

Adam

twardoch's picture

Nic,

The Letterror folks who created TTX are working on another project called RoboFab. It basically is a high-level XML/Python-based system for creating fonts. It has its own XML-based font format (UFO) that stores glyphs in so-called GLIF files (also XML). The great advantage of it is that it has a much simpler structure, and that UFO is capable of storing both PostScript and TrueType data. I'd encourage you to use UFO as your intermediate format.

They have a handy concept of Python-based "pens", i.e. converters from UFO to other formats. Maybe you could try to hack a UFO-to-Flash pen, that would make them probably very happy.

Best: contact Just van Rossum (just at leterror dot com) and Erik van Blokland (erik at letterror dot com).

http://www.letterror.com/code/robofab/index.html

Adam

Joe Pemberton's picture

Nic, this is fun. I bet Macromedia would be interested to see it.

(The name Vera is worth noting. Alphabetically it falls right above Verdana. Intentional? Highly likely. Subversive? Maybe. I guess it would be less bothersome if the face were very different from Verdana.)

Syndicate content Syndicate content