Flashで動的にプロポーショナルスペーシングを実現する
Flashでテキストアニメーションを扱う機会は沢山あります。その中でも、動的文字列を1文字ずつアニメーションさせる事があると思いますが、アニメーションさせた後の文字列の整列。これにはハマりました。
動的文字列をトゥイーンさせる際にムービークリップでのラップが必要不可欠です。動的テキストを表示させるためには、ダイナミックテキストフィールド（動的な文字列を扱えるFlash内部のオブジェクト）を利用するのが普通です。
ここで問題だったのは、ダイナミックテキストフィールドの幅が文字の幅と合わない事。言葉で説明するのがおっくうなので絵で補完します。
普通な例
まず、見てもらいたいのは「普通な例」。これは、一つのダイナミックテキストフィールドに「abcdefg・・・」という文字列としてセットした場合。文字幅が各文字によって違い、文字間も自然な配置になっています。
余りに普通な光景でピンとこないかもしれませんが、ある事に気が付きます。そう、文字の幅。テキストフィールドの横幅は固定でしか使えない。幅が長過ぎればそれは余りますし、短過ぎれば文字は途中で切れてしまいます。セットしてある文字列の横幅に応じて自身の大きさは当然ながら変えてくれないのです。なので、文字を整列させようととした時に、困ってしまいます。何も考えずに、「固定幅で配置した例」が下の画像。
固定幅で配置した例
「f」や「i」のような幅の狭い文字、「m」や「w」のような幅の広い文字などでは、文字間に隙間が開いてしまったり、重なってしいます。これは、文字幅固定（例では15ピクセル）間隔で配置しているからです。でも、きちんとActionScriptでケアしてあげれば「普通な例」のように自然に文字を配置することができます。
対処法
TextFormatオブジェクトを利用して、ダイナミックテキストフィールドにセットされている文字（列）幅を取得します。文字（列）の物理的な長さが取得できるのでその幅を用いて、文字列を配置すれば良いのです。
解説
問題なのは、以下の図1のように各「文字」の「文字幅」が分からないため、次の文字をどこに配置してよいのか分からない、ということでした。そんなの等幅フォントを使えば良いじゃん、と思うかもしれませんが、ダサイしせっかくアニメーションさせるならカッコイイフォントで演出したい。では、文字列の横幅を取得するには、どうすれば良いか。
図1
自然な配置を実現するにためには
以下のコードを
1 var format = new TextFormat();
2 format.font = "Arial";
3 format.size = "24";
4 var width = format.getTextExtent("mimi").width;
1〜3行目：TextFormatオブジェクトの生成します。このコード自体、直接文字の配置には関係ないが、各文字の縦横幅を取得するために必ず必要です。
4行目：ここで、実際に各文字列の横幅を取っている。上のコードでは、「mimi」という文字列から文字幅を取得しています。ここで、取得した文字幅を元に「図2」のように文字の配置をすればよい。
図2
注意すべき点
1. ムービークリップにダイナミックテキストフィールドを作成する際に、必ずフィールドの横幅は「m」「w」が収まる幅にしておくこと。でないと文字が途中で切れてしまう。
2. テキストフォーマットオブジェクトに設定する値（ここではArialの24ピクセル）は、必ず読むテキストフィールドと同じように設定する必要がある。サイズ10ピクセルで設定したテキストフィールドを100ピクセルの設定で取得したら、取得した文字幅は想定していたものの10倍になってしまうので・・・。
要は、TextFormatオブジェクトの使い方を知っていれば、こんな事で頭を悩ませる必要は無かった訳ですが・・・、こんなの分かるかっ！でも、このテクニックとの上注意2点に気をつけておけば、文字の配置はもう怖くない。
次は、スムーズなテキストアニメーション、とかをネタにしてみようかな。
サンプル&参考ファイル