モーションタイポ再び (7)
2008/03/21 23:49 - AS3.0
しばらく間があいてしまったので、前回までのサマリーを。
私の作るモーションタイポ作品はランダムな状態（座標、スケール、角度、アルファ値など）な文字が特定の状態に整列して文字列を成す、という構成のものがほとんどです。
その最終状態である整列時の座標を取得する際に、今までは、各文字オブジェクトの textWidth と textHeight を1文字ずつ取得して累積していくという手法をとっていました。
この手法をとると、文字列全体としてみたときの align、そして letterSpacing や leading を考慮しようとするととても面倒になります。てゆーかそういうのを反映させようとすると汎用的なコードが書けません、私のスキルでは。
ActionScript も 3.0 になり、Text 周りにいろいろ新しいメソッドが増えたようです。 そしてその中に TextField.getCharBoundaries というメソッドというものを見つけました。
この getCharBoundaries を使うと、旧手法ではとても面倒だった align や letterSpacing、leading をいともたやすく反映させることができるのでした。
というのが前回までの話。
ここで、前回のソースコードを見ていただきたいのですが、このモーションタイポは、ドキュメントクラスと文字のクラスである TypoLetter.as から成り立っています。
ドキュメントクラスにおいて new キーワードで文字クラスのインスタンスを作成し、その文字オブジェクトを動かすことで実現しています。
前回までのソースでもそれっぽく動くことは動くんですが、問題点がひとつあります。
文字オブジェクトの基準点が左上になっているということです。
旧手法のモーションタイポのときにも書きましたが、文字の表示オブジェクトとしての基準点が左上にあるとその動きが美しくありません。
だから、各文字オブジェクトの基準点がテキストフィールドの中心になるよう、TypoLetter クラスを書き換えましょう、というのが今回からのテーマです。
TypoLetter クラスは Sprite を継承し、子オブジェクトとしてテキストフィールドを addChild() するよう設計しました。
よって、クラスオブジェクトの基準点を文字の中心にするということは、子オブジェクトであるテキストフィールドの中心が、クラスオブジェクトのローカル座標 (0, 0) になるよう、テキストフィールドを移動すればいいわけです。
分かりやすくするために、基準点と領域の枠を表示するようにしたのが以下のサンプルです。
4px×4pxの黒く塗りつぶされた正方形をその基準点に表示するようにしています。
青い枠は文字列全体のテキストフィールドの border です。
緑の枠は各文字のテキストフィールドの border です。
そして赤い枠は getCharBoundaries によって取得された各文字の Rectangle の x、y、width、height によって描かれる矩形です。
文字列のテキストフィールドの letterSpacing は 10、leading は 20 に設定してあります。
まだ文字のテキストフィールドをセンタリングしていないので、黒い正方形はそれぞれの文字の左上に表示されています。
緑の枠の左上が黒い正方形の中心となり、赤い枠の左上は黒い正方形の右下と接しています。
getCharBoundaries で取得される矩形はテキストフィールドのborder より 2ピクセルずつ内側になるというのは以前説明しましたね。
さてここで問題があります。サンプルを見て分かるとおり letterSpacing と leading を設定したことにより、赤い枠は文字の右側に、緑の枠は文字の右側および下側に余白ができています。
この状態で文字をセンタリングしようとすると、当然、緑の枠が文字オブジェクトの領域となり、その中心は文字の中心にはなりません。
下のサンプルのように文字オブジェクトの基準点が文字の中心よりも右下になってしまいます。
たとえ赤い枠から中心を計算したとしても、下側へずれるのは解決できても、右側にずれるのは解消できません。
じゃあどうすんのよ、ってことで次回解決編に続く。
- 今回のソース ( ZIP ファイル Flex 用)
シリーズ
- モーションタイポ再び (9)
- モーションタイポ再び (8)
- モーションタイポ再び (6)
- モーションタイポ再び (5)
- モーションタイポ再び (4)
- モーションタイポ再び (3)
- モーションタイポ再び (2)
- モーションタイポ再び (1)
