Tweener で MotionTypography (4)
2007/06/13 21:22 - tweener
今回はモーションタイポ専属クラスの説明です。
TypoLetter.as
モーションタイポにおける文字列を構成するそれぞれの文字。 それが「動くグリッド」における個別の正方形に相当します。
よって、文字を定義するクラスは Cell.as に対してそれに応じた改造を施せば事足りるというわけです。
改造点は以下の2点になります。
- 正方形の描画部分をテキストフィールド配置に書き換え
- ゲッターとセッターの書き換え
1. は当たり前のことなので特に説明は不要と思います。自作のテキストフィールド関連クラス AqLetter を使いました。
2. についてですが、TypoLetter.as では三種類のセッターとゲッターを設定します。
- その文字オブジェクトの規定位置の座標
- そのテキストフィールドに表示されている文字に関わるセッターとゲッター
- 表示された文字のサイズに関わるゲッター
a. の座標に関わるセッターとゲッターは Cell.as でも使っていましたが、モーションタイポでも必要になるのでそのまま使用します。
b. についてですが、ただ単なるモーションタイポだと表示文字に対してセッターは不要かも知れませんが、とりあえず用意しています。
c. についてですが、「動くグリッド」は構成セルが全て同じサイズの正方形でした。しかしモーションタイポを構成する各文字は、そのサイズがそれぞれ異なります。
よって、テキストフィールド textWidth と textHeight に関わるゲッターが必要になります。 なお、textWidth と textHeight は読み込み専用なので、ゲッターのみとなります。
Cell.as ではそのセルが、横位置が何番目で縦位置が何番目になるのかという、順番についてのセッターとゲッターがありましたが、モーションタイポでは現状ではいらないので削除します（今後構想している改造で復活する可能性あり）。
StringSplitter.as
「動くグリッド」における各セルの配置決定をするクラス Grid.as は、引数として入力されたグリッドを構成する縦の数と横の数を掛けた数だけ new Cell(); をおこない、それぞれの Cell にその座標と順番を格納します。
モーションタイポにおけるこの過程は StringSplitter.as が担います。
引数として表示する文字列を指定します。 その文字列を1文字ずつ分解して、文字の数だけ TypoLetter オブジェクトを生成します。
基本的な挙動は Grid.as と同じですが、各 TypoLetter のサイズ（幅）はその表示文字によって異なりますので、各 TypoLetter オブジェクトの座標決定プロセスが異なります。
また、スペース文字の扱いですが、文字配置絡みの必要性から一度は文字オブジェクトとして設定しますが、モーション絡みでは必要ないので改めて削除するというちょっと迂遠な手法をとっています。
- ソース (11.2 KB as ファイルのみ)
シリーズ
- tweener で MotionTypography (1)
- tweener で MotionTypography (2)
- tweener で MotionTypography (3)
- tweener で MotionTypography (5)
- tweener で MotionTypography (6)
- tweener で MotionTypography (7)
