Tweener で MotionTypography (5)
2007/06/14 21:28 - tweener
今回は、文字を定義するクラス TypoLetter.as に着目してみたいと思います。
このクラスは、自分自身の内部に AqLetter オブジェクト（テキストフィールド）を addChild しますが、その際 AqLetter オブジェクトの座標は指定しません。
表示オブジェクトの基準点は特に設定しない限り左上隅になりますから、AqLetter オブジェクトの基準点も左上隅になります。
つまり文字のトゥイーンによる変形はテキストフィールドの左上隅を基準におこなわれることになるわけですね。
その、テキストフィールドの基準点を表示したものが下の画像です。
黒線で縁取られた灰色の円が基準点です。 その文字オブジェクトローカルで見ると座標 (0,0) ですね。
んで、文字を囲んでいる枠の幅と高さはそれぞれの文字を表示しているテキストフィールドの textWidth と textHeight を指定しました。
ところでよく見ると文字が枠に収まってないじゃないの。
文字が枠の右側に寄ってるし。
いや、"p" を見ると下にもはみ出してるから、文字が枠の右下に寄っているのか。
そういえば、textWidth と textHeight 絡みで2ピクセルのズレがどうのこうのってのを見た覚えがあるなぁ。
んなワケで、ググったりいろんなリンクを辿ったりしてたら…… 出てきましたよ、絵入りのヤツが。
なんと。Flash MX 2004 の Livedocs でした。
あぁ、そういえば昔モーションタイポで綺麗に文字詰めするために textWidth じゃないヤツを使ったっけなぁ、とうっすら思い出しました。
そんなわけで AqLetter オブジェクトを定義するときに、その x と y に単純に -2 を加え、補正するように TypoLetter.as を修正します。
そうすると下の画像のように、文字がキレイに枠に収まるようになりました。
ところで、StringSplitter.as の stageAdjust メソッドにおいて、各文字オブジェクトの x 、y に対して -2 をおこなっています（65、66行目）。
これは、モーションタイポ作成過程で fla のフレームにテキストフィールドをベタ打ちして、スクリプト配置された文字と見比べてながら補正してたら、結果として -2 を記述することになったものです。
なんで 2ピクセルなのかなぁ、と思っていたら、こういうことだったんですね（つーかもっと早く思い出せよ＞オレ）。
ところで ActionScript 3.0 の Livedocs を見ていたら、flash.text パッケージに TextLineMetrics クラスなるものがあって、上記に挙げた Flash MX 2004 Livedocs のとほぼ同じ絵が載ってました。
一読してみたけど、TextLineMetrics というのがどういう使い道があるクラスなのかよく分からん。
ただ少なくとも、このモーションタイポを組むに当たって有益なクラスではなさそうなので、こいつは見なかったことにします。
シリーズ
- tweener で MotionTypography (1)
- tweener で MotionTypography (2)
- tweener で MotionTypography (3)
- tweener で MotionTypography (4)
- tweener で MotionTypography (6)
- tweener で MotionTypography (7)
