Posts Tagged Font
Difference between TextField and TextBloc (or TextLine)
Posted by zedia.net in ActionScript 3 on April 21st, 2011
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).
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.
Skinning the ComboBox Flash component
Posted by zedia.net in ActionScript 3 on February 17th, 2010
This post is more for me because I keep forgetting how to do this. For my defense I have to say that it is not exactly the first thing that comes to mind when you are trying to change the font in the ComboBox component, but at least I won’t have to remember in which project I did it; I’ll just turn to my friend Google and type : comboBox + zedia.
Editing the visual is mostly easy inside of flash but my main problem is always the fonts. In a previous post I talked about fonts in Flash in general, this one will use that as a base and apply it to the ComboBox. Here is the code to change the font in the textfield and the dropping list:
var myFormatWhite:TextFormat = new TextFormat(); myFormatWhite.font = "DFC GillSansLight"; myFormatWhite.size = 15; myFormatWhite.color = 0xffffff; var myFormatBeige:TextFormat = new TextFormat(); myFormatBeige.font = "DFC GillSansLight"; myFormatBeige.size = 14; myFormatBeige.color = 0xa18c52; comboBox.textField.setStyle("embedFonts", true); comboBox.textField.setStyle("textFormat", myFormatWhite);< comboBox.dropdown.setRendererStyle("embedFonts", true); comboBox.dropdown.setRendererStyle("textFormat", myFormatBeige); comboBox.prompt = "Province"; //default value that won't show in the dropdown comboBox.addItem( { label:"New Brunswick", data:"New Brunswick" } ); comboBox.addItem( { label:"Nova Scotia", data:"Nova Scotia" } ); comboBox.addItem( { label:"Ontario", data:"Ontario" } ); comboBox.addItem( { label:"Prince Edward Island", data:"Prince Edward Island" } );
My problem was mostly with the setRendererStyle method; not that obvious. I also put the code for adding items in the ComboBox and to have a default text in it that doesn’t show in the dropdown. Now the next bit of code if to check, when you used ComboBox.prompt, if something was selected:
if (comboBox.selectedIndex == -1) { //show error message because comboBox wasn't changed }
P.S. all this code assumes that I have dragged the component to the stage in the Flash IDE


