Archive for April, 2011

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


Donut Charts in AS3

Most of what I write comes from goals that I must achieve through my work and when I search the web to figure out how to do those I find very little information. So usually once I have figured it out I write a post about it. I was looking to create some donut charts which are basically pie charts but with a mask on them to make a hole in the middle. All I could find on the web was solutions that you had to pay for, bundles of charts that looked really bad. So I thought it shouldn’t be that bad to just to them from scratch.

Well I actually didn’t do them from scratch, first I translated some old ActionScript 2 found here to make the donut mask and I used Lee Brimelow wedge class to create the subdivision of the chart. So here are four examples of what you can do with it:

 

This movie requires Flash Player 9

 

And here is the code used to create them:

var wedgeVector:Vector.<ChartWedgeInfo> = new Vector.<ChartWedgeInfo>();
wedgeVector.push(new ChartWedgeInfo(0.3, 0x70ddff));
wedgeVector.push(new ChartWedgeInfo(0.21, 0x56baec));
wedgeVector.push(new ChartWedgeInfo(0.3, 0x2b78d2));
 
_donut1 = new DonutChart(50, 20, 0x1e457a, wedgeVector);
_donut1.x = 60;
_donut1.y = 60;
addChild(_donut1);
 
var wedgeVector2:Vector.<ChartWedgeInfo> = new Vector.<ChartWedgeInfo>();
wedgeVector2.push(new ChartWedgeInfo(0.5, 0xfca25a));
 
_donut2 = new DonutChart(40, 10, 0x821626, wedgeVector2);
_donut2.x = 180;
_donut2.y = 60;
addChild(_donut2);
 
_donut3 = new DonutChart(30, 25, 0x56baec);
_donut3.x = 300;
_donut3.y = 60;
addChild(_donut3);
 
var wedgeVector3:Vector.<ChartWedgeInfo> = new Vector.<ChartWedgeInfo>();
wedgeVector3.push(new ChartWedgeInfo(0.3, 0xfca25a));
wedgeVector3.push(new ChartWedgeInfo(0.3, 0xfd8332));
wedgeVector3.push(new ChartWedgeInfo(0.3, 0xde4649));
wedgeVector3.push(new ChartWedgeInfo(0.3, 0xaa2c34));
wedgeVector3.push(new ChartWedgeInfo(0.3, 0x821626));
 
_donut4 = new DonutChart(50, 30, 0x821626, wedgeVector3);
_donut4.x = 420;
_donut4.y = 60;
addChild(_donut4);

I think it is pretty easy to use. Here are some considerations; if you don’t give in any wedge info, it will just draw a donut, you can give more than 100% for your chart it will just loop, and the chart 0,0 is at the center of the donut. So here you go, you can just download the files below. I think it could be improved a little and there is no options to put labels or anything but it should fit more use cases that way.

DonutChartsSource

, , , ,

8 Comments


RTL languages and the Text Layout Framework

So this is the positive post about the Text Layout Framework that I was talking about earlier. For the current project I am working on I have the joy (read the sarcasm here) to be doing it in 9 languages and if that wasn’t fun enough one of those is Hebrew which is a right to left language. To be frank this kinda make the project really hard but not because of technical reasons, it makes it hard just to put the text at the right place… Anyway I digress, the thing when working with right to left languages is that there is not that much information on it or what you will find is really dated and not relevant anymore. Well it is that way with TLF in general too, so finding information on the subject is really tedious. Actually I didn’t find anything useful on the web and I had to figure things out on my own; that is why I am writing this post. Has I mentioned on the previous post, there are 3 ways to make text using the TLF: TLFTextfield, TextBlock or TextFlow. I will go through all of those and explain how to display RTL language correctly.

TLFTextfield

I find that this is the easiest way to display text using the Text Layout Framework. It is easy because it pretty much works the same as the good old Textfield. A colleague told me that the CSS part of it wasn’t really working and from the documentation it seems to be still in beta. To display a right to left language like Arabic, Hebrew or Persian, this seems like the way to go. Easily enough, it has a property called direction that you can just set to “rtl” and there you go, your text will display properly.

TextBlock

If you think you are going to be doing a version of your site/application for a RTL language, do not use TextBlock. That’s a shame cause this method of displaying text seems to give better looking text, but I was never able to get my Hebrew text displaying properly. It is weird because if you look at the documentation there seems to be a way to do it, using the bidiLevel property and setting it to an odd number (I have no idea why, this seems very unobvious to me). But I tried it and it doesn’t work. The problem arise when you have LTR text inside a RTL paragraph, so let’s say a english word inside a Arabic paragraph. This will greatly confuse the text engine and your text won’t display properly sometimes showing very differently than it the xml it has been taken from (if you pull your text from xml). So in this case, use TLFTextfield.

TextFlow

I am not a big fan of TextFlow, it seems more complicated for nothing, but I guess that if you want to display columns and more complex text that is the way to go. But has in the case of the TLFTextfield, it seems pretty easy to use RTL languages and TextFlow. So basically in your TextFlow markup you can do something like that <flow:p direction=”rtl”>my persian content</flow:p>. Easy enough, I haven’t tried it, but I have read that it works.

So there you have it, how I finally got it to work properly. Had I known before I would have built my site differently, I was using TextBlock everywhere, so now I check if the language is Hebrew and use TLFTextfield in that case. Also note that working with right to left text using tools that don’t really support it is really hard and confusing, the editor gets confused and selecting text becomes hell as it goes a bit for right then to the left and then right again. Be prepared for some trouble… Anyway I hope this saved some a bit.

, , , , , , , , ,

2 Comments