Posts Tagged TextLine

Difference between TextField and TextBloc (or TextLine)

Ok I have been writing a lot about TLF Framework lately and it is definitely not my favorite topic but I thought people should be aware of this. So here you go : using the new text engine will actually give you better looking text! When I say text engine, I mean using TextBloc and TextLine. Here is a little example I made to show the difference. On the left it is a good old TextField, in the middle we have the new TLFTextField and on the right I am using TextBloc / TextLine (TextBloc for now on).

This movie requires Flash Player 9

As you can see there is nearly no difference between using a TextField and a TLFTextField, the actual code is also the same, the difference is that you need to use a DF4 exported font (some new none-sense setting in Flash CS5). On the other hand, when using TextBloc, it does look better, I agree it is subtle, but it is better. I am writing this post because I was arguing with a colleague that there was no difference, but he showed it to me, I hope this does the same to you.
 

Using TextBloc

Now when using TextBloc, a lot changed from using the good old TextField. First, you need to use the class ElementFormat instead of TextFormat. Here is an example on how to do so:

var font:AvantGardeGothicStdBook = new AvantGardeGothicStdBook(); //this is a font embedded in a swc
var fontDesc:FontDescription = new FontDescription(font.fontName);
fontDesc.fontLookup = FontLookup.EMBEDDED_CFF;
 
var style:ElementFormat = new ElementFormat();
style.fontDescription = fontDesc;
style.fontSize = 32;
style.color = 0xf9827f;

 

When you want to display a single line of text, it is fairly easy to do so. Here is how to do it:

var element:TextElement = new TextElement("TEXTLINE!!!!", style); // we defined style earlier
var textBlock:TextBlock = new TextBlock();			
textBlock.content = element;
var textline:TextLine = textBlock.createTextLine(null, 200);
textline.x = 430;
textline.y = 36;
addChild(textline);

 

The things get more complicated when you want to display a paragraph:

var elementPar:TextElement = new TextElement("This is what some normal text in a textline paragraph looks like. The difference is subtle but there is one with the textline stuff.", stylePar);
var textBlockPar:TextBlock = new TextBlock();
textBlockPar.content = elementPar;
var paragraph:Sprite = new Sprite();
var line:TextLine = textBlockPar.createTextLine(null, 200);
var currentY:Number = 0;
while(line){
	line.y = currentY;
	currentY += line.height;
	paragraph.addChild(line);
	line = textBlockPar.createTextLine (line, 200);
}
paragraph.x = 430;
paragraph.y = 63;
addChild(paragraph);

 

So what now? Should we all start using TextBloc? I don’t know and to be frank it seems like even Adobe doesn’t know. But if you want better looking text, maybe you should.

, , , , , , , ,

No Comments


New Text Layout Framework, same font problems

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