2009-02-13

The notorious Problem with letterSpacing in Flash

These days I met a problem in Flash with the property letterSpacing of a dynamic text field.

If we are looking at the examples provided by Adobe:

this.createTextField("mytext", this.getNextHighestDepth(), 10, 10, 200, 100);
mytext.multiline = true;
mytext.wordWrap = true;
mytext.border = true;

var format1:TextFormat = new TextFormat();
format1.letterSpacing = -1;

var format2:TextFormat = new TextFormat();
format2.letterSpacing = 10;

mytext.text = "Eat at \nJOE'S.";
mytext.setTextFormat(0, 7, format1);
mytext.setTextFormat(8, 12, format2);

The problem is, this doesn't work for a dynamic text field, only for dynamic generated text field!

There are a lot of solutions on the internet.

Solution 1:

var
styling:TextFormat = new TextFormat();
styling.font = "Blackadder";
styling.color = 0xBA1424;
styling.letterSpacing = 15;

tf.setNewTextFormat(styling);
tf.text="mööööp"


This one doesn't use the method setTextFormat() to set the letterSpacing, instead of that, setNewTextFormat() will be used.

Solution 2:

From the blog "Summit Projects":

function setTextFormatting(){
var fmt:TextFormat = club_name.name.getTextFormat();
club_name.name.setTextFormat(fmt);
club_name.name.setNewTextFormat(fmt);
club_name.name.autoSize = “left”;
}


He said, "It’s silly, but it works.". Unfortunately, it didn't work in my case.

Solution 3:

Bob Walton suggests that in his blog "Flash: yourMom.getTextFormat(); //is the key to letterSpacing"

var fmt:TextFormat = myTextField.getTextFormat();
myTextField.setTextFormat(fmt);
myTextField.setNewTextFormat(fmt);


This also didn't work for me.

I spent hours to figure out how can I fix it. Now here is the solution from mine.

txtCtrl.html = true;
txtCtrl.htmlText = "<font letterspacing='-3'>Now it is the right one!</font>";


So you can see, I got no sucess on setting the format of a dynamic text field. At the end, a font property can achieve that so easily!

5 comments:

Unknown said...

Hi! I'm a developer at Summit Projects and partly responsible for the blog you referenced in Solution 2. I should note that the person who wrote that blog post is no longer with us and won't be writing anymore posts on our blog!

We're pretty sure, though, that the solution worked in the situation leading to the writing of that post, and the fact that Solution 3 is essentially the same leads us to believe that in general it works (for AS2). For some reason it didn't work for you, but I'm glad you found a workaround.

There may be any number of differences between your TextField and the one we were writing about. It would be interesting to see if we can pinpoint the differences and the reasons for the behavior.

I did a quick test in AS3 and it looks like the same issue persists, and can be overcome with a similar technique:

var tf:TextFormat = t.getTextFormat();
t.defaultTextFormat = tf;
t.text = "Bob Loblaw";

I have no idea if this method is any more reliable than it was in AS2.

Incidentally, you can also use CSS to achieve the same results as you post, only with (potentially) cleaner markup.

Last but not least, we are going to update our blog post to make note of your findings.

Unknown said...

Hi!
Look here http://craiggrummitt.blogspot.com/2008/06/kerning-of-dynamic-text-field.html

It worked for me :-).

motou said...

Thanks to drukepple's comment. I think the use of "defaultTextFormat" is very important to specify the defaultTextFormat for any inserted or changed Text in the run.

Without that "defaultTextFormat" the text field will always use the default text format which is defined by flash player.

By the way, getNewTextFormat() and setNewTextFormat() are the corresponding methods in AS2 for the property "defaultTextFormat" in AS3.

Thiago said...

Yep. It worked for me too. Ridicolously, as3 has a lot of bugs and this language doesn't work properly. Instead, i'm having a headache to solve problems like this one or some like unloadAndStop, wich was solved in CS4 version. What Adobe wants? Solve programming issues with new software versions? Got it. That must be to combat piracy and every new programming issue solved, you must buy a new version from Adobe. To expensive to making sites.

casperfc said...

Hi

I've been banging my head trying to get the setNewTextFormat method to work. In the end your html font letterspacing tip worked - thanks!

Although the setNewTextFormat does seem like a more sexy approach.