Posts Tagged Fonts

New Text Layout Framework, same font problems

Posted by zedia.net in ActionScript 3 on March 24th, 2011

I guess this has been said before, but I really feel like ranting. I will post a positive article later on about TLF, but for now I need to vent.

So I guess the problem come from the fact that I thought the new Text Layout Framework would solve all problems relating to fonts and Flash. But I guess that was hoping for too much. TLF does have a good side, it does make your text look better. I was skeptic at first, but it really does. The problem is, it has a lot of bad sides.

First problem is that it will add between 100k to 160k to your file size (pretty much forget about it for banners) and that is for every SWF that uses it. I don’t know about you but the sites I build usually contain at least 4 SWFs, so that’s nearly a megabyte just for the text engine, you’re not embedding the fonts yet or adding any content. There are ways to circumvent that but you still have to figure it out and it involves another workflow.

Secondly, there is not much documentation about it. I have been looking and it is pretty hard to figure out what is working or not. Seems like TLF changed since it was introduced, so some information is not relevant anymore. The other thing is that there are multiple ways to use it, you can use TextBlock and TextLine, you can use TLFTextField or you can use TextFlow. It gets pretty confusing at some point, cause you don’t solve the same problems the same ways with each of the three option I named before.

Lastly, it doesn’t work in every situation, I gave the banner example previously, but using the Text Layout Framework is also very expensive CPU wise. For example I was making this combobox which had an opened state with about a hundred items in it. Well it made the site become very slow. I was using TextLines and I had to revert to using good old TextFields. Which introduced a new problem, the font format that you use for TLF is not compatible with the old TextFields, so in this case I had to embed the same font twice, once DF3 and once DF4…

Which brings me to another point, which not necessarily negative, but the TLF does introduce new terminology and knowledge. WTF is DF3 or DF4 or embedCFF. So now your Flash baggage has to be bigger, what about when Molehill comes out, we will have to be interface experts, typography experts and 3D experts???

Well I promise next article will be positive.

, , , , , , , , , ,

2 Comments


Fonts are my bane; not anymore!

Posted by zedia.net in ActionScript 3 on January 14th, 2010

I hate managing fonts in Flash, I truly hate it. I don’t understand why it is not easier than this after all that time. How about underline; why can’t we still underline in the Flash IDE? That shouldn’t be voodoo magic, even Notepad has underline, ok, Notepad doesn’t have the underlining functionality, but Wordpad does.

Anyway, my biggest problem with fonts and Flash is not the underlining problem, but when you start using static and dynamic textfields with the same font family but with different font style. When you do that, your dynamic textfields will just not show and that is really annoying. A solution that works is if you put all textfields dynamic, but that’s even more annoying.

Now a really cool feature is that you can now embed fonts using the embed tag just like this:

[Embed(source="assets/fonts/GNL_____.PFB", fontName ="zedia GillSansLight", unicodeRange='U+0020-U+007A, U+00C0-U+00F6, U+2019', mimeType="application/x-font-truetype")]
private var GillSansLight2:Class;

Not sure that this will work when you compile using the Flash IDE, but when doing ActionScript projects or Flex projects this works just fine. This way you can embed ttf, otf and pfb fonts. I am not quite sure how to embed fonts on a Mac system, it will still work with those formats, but I know Macintosh has other formats. The thing that makes this work is that you can specify the font name. Be sure to specify a name that you know Flash wouldn’t specify. My coworker gave me the trick to add the name of the project in the font name that way it’s always going to be different than Flash. If you don’t make it different you will still run in the problem of your dynamic textfields not showing up.

Once you have embedded the font you need to register it in your application like this:

Font.registerFont(GillSansLight2);

This will make the font available anywhere in your application. All you need to do is create a TextFormat with that font and assign that TextFormat to your textfield:

var tf:TextFormat = new TextFormat("zedia GillSansLight");//this is what you put into fontName in the embed tag
myTextfield.embedFonts = true; //this line is also important
myTextfield.defaultTextFormat = tf; //always assign the default textformat before modifying the text property
myTextfiled.text = "lorem ipsum";

Now, using this technique you can choose exactly what character from the font you want to embed. In the previous example the unicodeRange represented those characters:

U+0020-U+007A = SPACE!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz
U+00C0-U+00F6 = ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö
U+2019 = ’

This is a pretty safe set, but you can always change it and optimize it.

Here is a good resource to do Unicode conversion:
http://rishida.net/scripts/uniview/conversion.php

, , , , , , , ,

12 Comments


Using embedded fonts in Flash CS3 using ActionScript 3

Posted by zedia.net in ActionScript 3 on December 9th, 2007

I just thought  I’d make a quick post about how to use embedded fonts in Flash CS3 using ActionScript 3 because I had to do that last week and I did really know how to do it. Well it starts just as you did in Flash 8, you right click in the library and you choose New Font… Then choose the font you want to embed and click Ok. Now you’ll have to right click on the new font in the library and choose linkage. In the pop window, click export for ActionScript and give it a class name. Once that is done you can use that font in any textfields you create  with ActionScript.

Here is code showing you how to do it:

1
2
3
4
5
6
7
8
9

var helve:Font = new Helve();
buttonLabel = new TextField();
txtFormat = new TextFormat();
txtFormat.font = helve.fontName;
txtFormat.color = 0x000000;
txtFormat.size = 14;
buttonLabel.embedFonts = true;
buttonLabel.text = "place label text here";
buttonLabel.setTextFormat(txtFormat);

My font class name in the library was Helve. I use the TextFormat object to set the font for the textfield, it’s that easy.

, ,

18 Comments