トゥイーンライブラリの対象は何も表示オブジェクトのx,y座標に限ったことではありません。数値はもちろんBooleanやタイムラインフレーム数も動かすことができます。

今回はタイムラインをTweenerで動かしてみました。

まず、トゥイーンさせるためのフレームアニメを作成しましょう。せっかくなのでシェイプトゥイーンで作ってみます。

*シェイプトゥイーンにはイージングを付けることが出来ないのですが、Tweenerを使うことでそれが可能になるというちょっとしたハッピーもあったりします。

 

このアニメは1〜150フレームまで用意されています。が、実際にトゥイーンさせるのは1〜100フレームです。なぜ50フレーム余分に作っておくかと言うと、easeOutBack等の「目的地をすこし飛び越えて戻る」タイプのイージングがあるためです。飛び越えた分のアニメまで余分に作っておけばこれらのイージングでもちゃんと再生されるようになります。

では用意したアニメをTweenerで動かしてみます。

Tweenerでフレームの操作を有効にするには一度DisplayShortcutsを初期化しておく必要があります。

import caurina.transitions.properties.DisplayShortcuts;
DisplayShortcuts.init();

実際にフレームをトゥイーンさせるには_frameの値を指定します。

Tweener.addTween(MovieClip(this.mc),{time:1, _frame:100,transition:'easeOutCubic'});

そして、実際に動かしてみたのが以下になります。再生ボタンでアニメ開始です。

ばっちりですね。シェイプで短調なモーフィングアニメをひとつ作っておいて、あとからTweenerで何種類かイージングを試してみるというのもアリだと思います。

HTML5飯