BetweenAS3で時間軸を制御! ActionScriptでタイムリマップを試してみる

昨日は記事がホットエントリーで1番(800ブクマ近く)になったみたいで、ブクマ頂いた皆様ありがとうございます。さて、一ヶ月半ぶりに当ブログのメインテーマであるPapervision3Dのデモを作ってみました。

ActionScript3.0の新種のトゥイーンライブラリ「BetweenAS3」を使ってPapervision3Dを動かしたデモです。BetweenAS3は高い実行パフォーマンスが素敵どころですが(参考)、豊富な機能を使うことで新しい演出手法が生まれるのではと考えています。そこで２つのポイントについて試してみました。まずは次のデモをご覧ください。

• demo (require Flash Player 10)

ソースコードは次の記事を参考ください。では以下、技術的な解説です。

技術的な２つのポイント

再生途中に一瞬スローモーションになりますが、これは一般的にタイムストレッチと呼ばれている演出手法です(参考)。今までのトゥイーンエンジンでも作れなくもないですが、BetweenAS3を使用すれば簡単に作ることというのが1つ目のポイント。

また、このムービーは動画を再生しているように思いますが、動画ではなくスクリプトでリアルタイムに作成しているPapervision3Dのモーションです。その証拠にリロードするとボールの配置が変わります。この再生コントロールこそ他のトゥイーンエンジンでは実現できない新しい手法ではないかと思います。これが2つ目のポイントです。

タイムリマップ

私は兼ねてからAfter Effectsのタイムリマップという機能が大好きで、学生時代にAEを触っていたときは使いまくってました(この作品とか)。タイムリマップを使うことでタイムストレッチの演出を作ることができます。

参考記事

• After Effects Style｜タイムリマップを使用する｜初心者からはじめるAfter Effectsの使い方

Adobe MAX 2008でBeInteractive!さんがBetweenAS3を紹介しているとき(参考)、私はタイムリマップができるのでは、と可能性を感じていました。今になって試してみたところ、実際は次のようなスクリプトで実現することができました。

// ベースとなるTweenを作っておく
var baseTween:ITween = BetweenAS3.tween(my_mc, {x:100}, null, 10, Cubic.easeInOut);

// [Step.1] まずはTweenを切り出す
var tw1:ITween = BetweenAS3.slice(baseTween, 0.0, 0.4, true);
var tw2:ITween = BetweenAS3.slice(baseTween, 0.4, 0.5, true);
var tw3:ITween = BetweenAS3.slice(baseTween, 0.5, 1.0, true);

// [Step.2] 2番目のTweenの時間を10倍する
tw2 = BetweenAS3.scale(tw2, 10);

// [Step.3] 切り出したTweenをがちゃんこする
var totalTween:ITween = BetweenAS3.serial(tw1, tw2, tw3);

つまりStep2のように、作成したトゥイーンを加工することでオリジナルのトゥイーンが作れるというわけです。

ActionScriptでタイムリマップを実現する最大のメリットはフレームレートが落ちないという点だと思います。どんなにタイムリマップで微小時間を拡大しても、スクリプトによってコマが生成され、ハイスピードカメラで撮影したように微細な動きまでもが再現されます。

再生コントロール

わざわざ、再生コントロールをつけたのはBetweenAS3で時間制御がどのぐらい柔軟にできるか確かめるためです。デモは、複数のオブジェクトを動かしつつ、それもタイムリマップによって加工した複雑なトゥイーンであるにも関わらず、再生コントロールで制御が正確にできています。これがすごと感動した点です。

// Step.3で作成したITweenインスタンスをお馴染みのgotoAndStopするだけ
totalTween.gotoAndStop(秒数を指定);

シークバーのトリガーをドラッグ＆ドロップしてみると、時間に応じたトゥイーンの再現ができていることがわかります。発想次第では面白いUIが作れるんじゃないかと思います。

ということで今後に期待してます

参考記事

• BeInteractive! [Wonderfl で BetweenAS3 (Alpha) が試せます]