Tweener で MotionTypography (6)
2007/06/15 21:55 - tweener
前回は、文字を定義するクラス TypoLetter.as では表示オブジェクトとしての基準点が左上になっているという話でした。
ところで、モーションタイポの肩慣らしとして作った「動くグリッド」の Cell.as では、正方形の中心が基準点となるよう正方形を移動しています。
その方がトゥイーン時の変形具合がカッコイイと感じたからです。 角度のトゥイーンがある場合は特にそう感じます。
「Tweener で MotionTypography (3)」において、何かトゥイーン変形具合がダサいということを書きましたが、もしかして基準点の問題なんじゃなかろうか。
基準点をテキストフィールドの中心に移動すれば、もちっとイケてるトゥイーンをするんじゃあなかろうか。
そんなわけで、TypeLetter.as にそこいらへんの修正を加えてみた結果が下のとおりです。
上の赤地の画像は前回の再掲です（2ピクセル補正あり）。 下の青地の画像が修正を施して、基準点をテキストフィールドの中心に移動したものです。
下の方は文字間隔がビミョーにズレてるけど、まぁ許容範囲ってことで。
ではそれぞれの動きを比べてみます。
トゥイーン対象は _scale のみで値は 0→1 とします。
上のサンプルが従来の基準点左上のもの（2ピクセル補正あり）。
下のサンプルが基準点をテキストフィールドの中心にしたもの。
下の方が作品として完成度高いっぽく見えますね。
「Tweener で MotionTypography (3)」でそこそこイケてたヤツと何だかなぁなヤツの基準点中心に移動バージョンも試してみます。
（例1）そこそこイケてる例の基準点中心版
（例2）ちょっとなーな例の基準点中心版
例1に関しては、こっちも悪くないけど、基準点が左上だったときの方もダイナミックで良かったかなぁ。
例2に関しては、不揃い感がなくなって、良くなったように思えなくもないですが、こういう動きの場合、上から降りてくるのか、下から昇ってくるのか、全ての文字について統一した方が美しそうですね。
ところで、動きがダサい点に関しては基準点の位置の問題だけじゃないかも知れません。
StageDefine.as の中のモーション開始前の状態を定義する関数は、トゥイーン対象でないプロパティは記述を省略していました。
例えば（１）の関数では座標とスケールだけを定義して、角度とアルファ値は記述しない、また（２）の関数では x と scaleXだけを定義して、その他のプロパティは記述しない、というような書き方をしてきました。
そのような状況下で（１）のトゥイーンを途中でキャンセルして（２）のトゥイーンを始めた場合、（１）で書かれていて（２）で書かれていないプロパティ y、scaleY が、（１）の影響を受けてしまうことが、どうもあるように見えます。
よって、StageDefine.as の中のモーション開始前の状態を定義する関数は、トゥイーンの対象でないプロパティでも、しっかり定義することにしました。
シリーズ
- tweener で MotionTypography (1)
- tweener で MotionTypography (2)
- tweener で MotionTypography (3)
- tweener で MotionTypography (4)
- tweener で MotionTypography (5)
- tweener で MotionTypography (7)
