AEスクリプト用アニメーションライブラリ _tweenAE.jsx 公開～ (CS4 以上 & Windows限定)

本当にお久しぶりになってしまいました。
Twitterではつぶやいたりしていたのですが、久々に公開できるものが出来たのでうｐしようかと思います。

Web での javascript や Flash での actionscript など世の中には便利なライブラリがいろいろありまして、
特にアニメーションのライブラリなんかは非常に便利で見栄えもよくなる優れものなんであります。
今回、AfterEffects用にそれをむりくり作っちゃいました。
タイトルにもありますが、CS4以上のWindowsでしかアニメーションできません。なんせむりくりですから・・・

AEスクリプト用アニメーションライブラリ
tweenAE (zip)

このフォルダには３つのファイルがあります。
その内の<_tweenAE_Lib.jsx> がライブラリです。
これをAfterEffects の [Scripts]<[Startup]フォルダに入れてもいいですし、別の場所に置いてスクリプト上で
呼び出すもよし、好きなとこに置いてください。
個人的には [Startup] だと使わない時にも起動されているのが嫌なので、[Scripts] フォルダに入れて
必要な時に呼び出してます。
今回用意したサンプルスクリプトは全て、<_tweenAE_Lib.jsx>が[Scripts] フォルダにあるものとして
書きました。

ということで、今回はとりあえず[Scripts] フォルダに置いてください。
スクリプト上で呼び出す場合は、まず #includepath でファイルのあるディレクトリを指定した後に
#include を使います。

例: [Scripts] フォルダにある場合(windows XP 64bit)
#includepath "C:/Program Files (x86)/Adobe/Adobe After Effects CS4/Support Files/Scripts/"
#include "_tweenAE_Lib.jsx"

こうやって呼び出した後に
app.tweenAE([オブジェクト:Array], [パラメーター:Array], [移動幅:Array], 秒数, [オプション:Array]);
と1行書くだけでおｋです。
ではサンプルを使って実際にやってみましょう。

ダウンロードしたzipファイルにある<test_tweenAE.jsx>を実行してみると下のウインドウが出ます。



"START!!" ボタンを押すと真ん中の四角いアイコンが「にょーん」と動きましたでしょうか？
"Clear" ボタンを押すと元の位置に戻ります。
このファイルをエディタ(ExtendScript ToolKit など)で開いて、70行目を見てください。

app.tweenAE([wSelf.oIcon], ["location.x"], [100], 0.2, ["Linear"]);

これはoIcon(四角いアイコン)の"location.x"というパラメータに 100 ピクセル分 0.2秒で "Linear"(等速)
で動かす、ということです。
ちなみに 100 を -100 にすると反対に動きます。

では1度ウインドウを閉じた後に "Linear" の部分を "easeIn" ( I は大文字)に変えて再度実行してください。
"START!!" ボタンを押すとさっきの「にゅーん」が「にゅぅぅーんっ」な感じに変わったのがわかるでしょうか？
このオプションには "Linaer" , "easeIn" , "easeOut" , "easeInOut" の４つがあります。
書くときに [ ] を忘れないように気をつけてください。
同じようにパラメーターは "location.x" , "location.y" , "size.x" , "size.y" の４つがあります。

今の書き方では1つのパラメータしか動かせませんが、これじゃあ面白くないですよね？

app.tweenAE([wSelf.oIcon], ["location.x", "size.y"], [100, 50], 0.2, ["Linear", "easeOut"]);

70行目を上のように書き換えて実行すると、複数のパラメータを同時に動かせます。
この場合は、右に動きながら縦サイズが大きくなります。
もちろん4つ全てを動かせます。
複数パラメーターを動かす時の注意点は、パラメーター、移動幅、オプションの配列数が同じでないとダメ
ということです。
いろいろ組み合わせて遊んでくださいませ。

次に64行目に以下を書き足してください。
this.oIcon2 = this.dlg.add("group", [280,200,320,240]);
this.UI_bgColor255(this.oIcon2, [100,100,100]);

そして72行目(元の70行目の部分)を
app.tweenAE([wSelf.oIcon, wSelf.oIcon2], ["location.x", "size.y"], [100, 50], 0.2, ["Linear", "easeOut"]);
と変えて実行すると、２つのアイコンが同時に動くと思います。
これで複数のオブジェクトを同時に動かせます。
パラメーターや移動幅、オプションは全てのオブジェクト共通になるのであしからず。

プログラムに精通している方はお分かりだと思いますが、オブジェクト、パラメーター、移動幅、オプションは
[ ] で配列になっているので "," で区切って書くのですが、たくさんあると非常に面倒ですよね。
例えば72行目の前に
var oObjs = [wSelf.oIcon1,wSelf.oIcon2];
てな感じで配列にしたものを
app.tweenAE(oObjs, ["location.x", "size.y"], [100, 50], 0.2, ["Linear", "easeOut"]);
※このoObjs は配列なので [ ] はいらない
とすると、スッキリできます。(パラメーター、移動幅、オプションも同じ)


ざっと駆け足で説明してきましたが、何となくわかっていただけたでしょうか？
今回、windows XP 64bit  AfterEffects CS4 でしか動作確認出来ていませんので
もし他の環境での動作確認が出来ましたらここのコメントかTwitterで教えていただけるとうれしいです。

あとダウンロードしたファイルの3つ目のスクリプトは、ここまで付き合っていただいた方々へのおまけです。
フォルダが多い階層だともっさりしますので注意してください。
ちなみに61行目の
this.curDir = this.aePath; を
this.curDir = "任意のフォルダのパス ";
にすると少し幸せになれると思います。
改造してパス入力の部分をドロップダウンリストにしたり、ボタンにして並べたりするともっと使えるかも。
ひょっとしたらおかしな挙動するかもしれませんが、その時は教えてくださいませ。


最後にこのライブラリはあまり推奨されないものかもしれませんが、大量のオブジェクトではなく
ちょっとしたものを動かすだけならいいアクセントになるんじゃないかと思います。
これで仕事の効率が上がるようなものではないのですが、まぁちょっとでも楽しくなればいいかな・・・・・と。

今月末のアニメ撮影飲み会に参加予定ですので、何か不具合などありましたらお声をかけてください。





投票ボタン付けてみました。

       べ、べつに押したっていいんだからねっ！　s(●'へ'●)2