モーションタイポ再び (8)【閃光的網站・弛緩複合体 -Review Division-】

モーションタイポ再び (8)

2008/03/22 22:23 - AS3.0

前回は文字オブジェクト内のテキストフィールドをセンタリングしようとしたけれど、letterSpacing や leading を設定すると素直にいかないという話でした。

今回はその解決編です。

ここで、このモーションタイポの文字オブジェクト生成プロセスを今一度記述します。

表示したい文字列を text にセットしたテキストフィールドを生成、表示したい場所に配置する
そのテキストフィールドにテキストフォーマットをセットする
そのテキストフィールドの getCharBoundaries メソッドで各文字領域を取得する
表示したい文字列を1文字ずつ分解し、1文字ずつ文字オブジェクトを生成する
文字オブジェクト群のそれぞれのテキストフィールドに、2. で使用したテキストフォーマットをセットする
3. で取得した Rectangle 群の座標をそれぞれの文字オブジェクトの座標に反映させる

斯様に、テキストフィールドは下地となる文字列と、実際に表示される文字群の二種類ある一方、テキストフォーマットは一種類しかありません。まぁ当然のことですね。

そして align や letterSpacing、leading はテキストフォーマットで設定される、ここですポイントは。

つまり文字列テキストフィールドにセットするときには、テキストフォーマットの letterSpacing や leading は設定されていますが、そのテキストフォーマットを文字群のテキストフィールドにセットするときには letterSpacing や leading をクリアしてしまえば良いわけです。

文字クラス TypoLetter.as をそのように改造します。

改造した結果が下のサンプルです。

get Flash Player

前回の最初のサンプルと見較べてみると分かりますが、赤い枠、つまり getCharBoundaries によって取得された各文字の Rectangle は文字の右に余白があるままです。しかし緑の枠、つまり各文字のテキストフィールドの領域は、文字に応じた幅と高さになっています。

これならセンタリングしても問題なさそう。ってなワケでセンタリングしたのが下のサンプルです。

get Flash Player

今度はちゃんと文字の中心に基準点を移動することができました。めでたしめでたし。

なお "x" の基準点は線が交差している部分より上になってたり、"p"や"q" の基準点は線が丸まっている部分の内部上寄りだったりしていますが、これはこれでよろし。

だって TextLineMetrics クラスじゃｘハイトが取得できないんだもん。ｘハイトとアセンダを足した物をアセントって言ってるし。