BetweenAS3でテキストをtweenしてみる

WonderflやTwitterのTLを眺めていて、これからはBetweenAS3の時代（Tweenerは開発終了）なんだとひしひしと感じたのでそろそろ触ってみる。最初は Spark project の Wiki で使い方を覚えたあと、Wonderfl で yossyさん、soundkitchenさん、clockmakerさんのコードを実際に読むと良くわかる。

• 概要 → http://www.libspark.org/wiki/BetweenAS3/en
• チュートリアル → BetweenAS3Tutorial | wonderfl build flash online
• BetweenAS3使い方、Tweenerからの乗り換えのために。 « Fountain

等速のテキストトランジションを作成

BetweenAS3で制御するために、基本となるテキストトランジション（よくある左から右に順に表示されるトランジション）を作る。

tweenするためには、開始値と終了値、更に制御用のプロパティが必要なんだけど、TextFieldには一切そんなプロパティが無いので時間ベースにする。仕様としては、一行分の最大文字数 n を再生時間 totalTime で分割し、それぞれの文字が現れる時間を決定後、与えられた時間 t から表示文字数を求めれるようにする感じ。

var current:uint = Math.floor( t / ( n / totalTime ) );

あとは、時間 t におけるテキストを反映してくれるクラスを作ればOK 。

// テキストを設定済みのTextFiledと再生時間を指定
var st:SequentialText = new SequentialText( txt, 1.0 );
// 時間を指定すると内部でテキストを反映してくれる
st.position = 0.5;

tweenする

さっき作った SequentialText クラスのインスタンスを BetweenAS3 に放り込んで tween してやるだけ。これでただのテキストだけど、トランジション時に easing が指定できたり BetweenAS3 の機能が使えるようになった！

var t:IObjectTween = BetweenAS3.tween( st, {position: st.totalTime}, {position: 0}, st.totalTime, Quad.easeOut );
t.play();

サンプル

tween と reverse を serial で繋いでループさせてる。

var t1:IObjectTween = BetweenAS3.tween( st, {position: st.totalTime}, {position: 0}, st.totalTime, Quad.easeOut); // ベースのtweenを作成
var r1:ITween = BetweenAS3.reverse(t1); // 逆再生
var tween:ITweenGroup = BetweenAS3.serial(t1,r1); // 繋ぐ
tween.stopOnComplete = false; // ループ設定
tween.play(); // 再生