AS3.0 への移植 Hopper(4)
2007/07/16 21:25 - tweener
Tweener を使ったモーションタイポの作成、Hopper 編の第4回目。
今回は、非線形トゥイーン周りのコードをもうちょっと作り込んでみます。
前々回は「トゥイーンの過程を二つに分解」、前回は「_beizer プロパティの使用」と、それぞれ二つの非線形トゥイーンのアプローチについて簡素なサンプルを作ってみました。
ひとつめのアプローチである「トゥイーンの過程を二つに分解」のサンプルでは、座標のトゥイーンは下図のように線形になっているため、なんかイケてないトゥイーンになってしまっているようだ、ということを書きました。
で、座標のトゥイーンを非線形にするために、下図のような、ちょっとした改造を加えてみました。
前半の addTween の座標到達値を、始点と終点の中間点を中心とした円周上のランダムな位置になるようにしてみます。その結果が、例えば上の方の到達点だったり、下の方の到達点だったりになることで非線形になるわけです。
ついでに、前半の addTween のスケール到達値にマイナス値も考慮するようにしました。
あと、トゥイーンの所要時間はその配分、transition などに微調整を加えました。
その結果が下のサンプルです。
- 002_2.zip（ 2.34 KB ）
最初の「トゥイーン二分割」サンプルよりはだいぶマシになったようです。
ですが、スケールや角度の変動を見ていると、いかにも二つのトゥイーンから構成されていますよ、な分裂感というか断絶感というか、そんなものが感じられてなんか気に入らない。
次に「_beizer プロパティの使用」のアプローチの方に移ります。
最初の「_beizer プロパティ使用」サンプルでは、_beizer 内の x と y の値はステージ上のランダムな位置にしていました。
この部分を上記同様、始点と終点の中間点を中心とした円周上の座標になるように書き換えてみます。
またこれも_beizer プロパティ内のスケール値にマイナス値も考慮するようにしました。
その結果が下のサンプルです。
- 003_1.zip（ 2.20 KB ）
お、いいじゃん。
前のサンプルは、_beizer 内の x、y がまったくのランダムな値だったせいか、とりとめがない感じがしてちょっと不満でしたが、今回のはイメージどおりの動きです。
そんなわけで、これをベースに作品としての Hopper に作り込んでみたいと思います。
