超訳：Tweenerドキュメント＆言語リファレンス

Tweenerのドキュメントの一部を日本語化してみました。ただ、未完成＆わりといいかげんなので、参考程度に利用してみてください。

超訳：Tweenerドキュメント＆言語リファレンス

Tweener事始め：addCaller()

addCallerメソッドを使うことで、タイマーのような役割を持たせることもできる。
ただ、transitionパラメーターを何も指定しないと、onUpdateパラメーターで指定したファンクションが等間隔に実行されるのではなく、実行間隔にイージングがついて実行されてしまうようなので注意。
//Tweenerクラスを読み込み
import caurina.transitions.Tweener;

var val0:Number = 0;
var val1:Number = 0;

tween0_btn.onRelease = function():Void{
    //xReflesh0ファンクションを10秒間に100回実行
    Tweener.addCaller(this,{onUpdate:xReflesh0, time:10, count:100});
};
tween1_btn.onRelease = function():Void{
    //xReflesh1ファンクションを10秒間に100回、等間隔に実行
    Tweener.addCaller(this,{onUpdate:xReflesh1, time:10, count:100, transition:"linear"});
};
reset_btn.onRelease = function():Void{
    //リセット
    xReset();
};

function xReflesh0():Void{
    val0++;
    text0.text = val0;
}
function xReflesh1():Void{
    val1++;
    text1.text = val1;
}
function xReset():Void{
    Tweener.removeAllTweens();
    val0 = 
    val1 = 0;
    text0.text = 
    text1.text = "";
}


Tweener事始め：transitionパラメーター

addTweenにtransitionパラメーターを追加してみる。transitionパラメーターの種類はこのページにあるように沢山あるんだけど、とりあえず「Simple」な21パターンを試してみた。あと、removeAllTweens()を使ってリセットボタンも実装。

//Tweenerクラスを読み込み
import caurina.transitions.Tweener;

reset_btn.onRelease = function():Void{
    //全トゥイーンを削除
    Tweener.removeAllTweens();
    //ball_mcを戻す
    ball_mc._x = 30;
};
tween0_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"linear"});
};
tween1_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeInSine"});
};
tween2_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeOutSine"});
};
tween3_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeInQuad"});
};
tween4_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeOutQuad"});
};
tween5_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeInCubic"});
};
tween6_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeOutCubic"});
};
tween7_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeInQuart"});
};
tween8_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeOutQuart"});
};
tween9_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeInQuint"});
};
tween10_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeOutQuint"});
};
tween11_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeInExpo"});
};
tween12_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeOutExpo"});
};
tween13_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeInCirc"});
};
tween14_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeOutCirc"});
};
tween15_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeInElastic"});
};
tween16_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeOutElastic"});
};
tween17_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeInBack"});
};
tween18_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeOutBack"});
};
tween19_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeInBounce"});
};
tween20_btn.onRelease = function():Void{
    Tweener.addTween(ball_mc, {_x:270, time:1, transition:"easeOutBounce"});
};


Tweener事始め：addTween()その1

とりあえずAS2版で色々実験。まずは基本であるaddTween()メソッドのテスト。

ステージ上にボタン用のbtn_mcとトゥイーン対象のball_mcを配置。その上でフレームに下記スクリプトを記述。
//Tweenerクラスを読み込み
import caurina.transitions.Tweener;

btn_mc.onRelease = function():Void{
    //ball_mcの_x座標を100に変更。所要時間は1秒間。
    Tweener.addTween(ball_mc, {_x:100, time:1});
};

とりあえずAS2版で色々実験。まずは基本であるaddTween()メソッドのテスト。

ステージ上にボタン用のbtn_mcとトゥイーン対象のball_mcを配置。その上でフレームに下記スクリプトを記述。

一行目のimport文はTweenerクラスにアクセスするために必要な記述。面倒くさいようだけど、Tweenerのメソッドなどを使うフレームの中では必ず一度記述する必要があります。同じタイムラインであっても、例えば1フレーム目でこのimport文を記述したとして、10フレーム目でまたTweenerを使う際にはまた同じimport文を書かなければなりません（AS3だったら、同じタイムラインの中なら、一度アクセスするだけですむかも？）。

できあがった結果は下記の通り。

Tweener事始め：インストール

Tweener自体は特に何もインストールする必要はありません。そうかと言って、関連ファイルをどこぞのフォルダにダウンロード＆解凍しただけで使えるようになるものでもないです。じゃあどうすればいいのかと言うと、いくつか方法があるんですが、一番単純なのが、解凍して出てくる「caurina」フォルダを作業中のflaファイルと同じ階層に配置すること。



毎回毎回caurinaフォルダを配置するのが面倒だとか、flaファイルが複数あってフォルダに分けて管理してるだとかの場合は、個々のflaファイルやFlash自体にグローバルクラスパスを設定してあげればいけそうな気がしますが、さっきちょっとやってみてうまくいかなかったので、とりあえず後回しにします。

まずはスタンダードに「flaファイルと同階層にcaurinaフォルダを配置する」やり方で進めます。

Tweener事始め：ダウンロード

Tweenerを使ってみよう、と思い立ったので、備忘録も兼ねてブログにメモ。

まずは肝心のダウンロード＆インストール。Tweenerは現在Google Codeで公開されています。公式サイトはこちら↓

tweener - Google Code

でもって、安定版（the latest stable(heavily tested) version）のダウンロードページはこちら↓

Downloads - tweener - Google Code

本記事の投稿時点での安定版最新バージョンは1.31.74だそうな。

上記ダウンロードページでダウンロードできるものは色々あって、最初どれをダウンロードしたものかと迷ってしまったんですが、おおまかにこんな感じでしょうか↓

tweener_0_2_vvvv.zip

「wwの代替バージョン」？何のことだかよく分かりません。

tweener_doc_en-us_1008.zip（※）

Tweenerのドキュメントですね。現在併行して自分用に和訳中。

TransitionCheatSheets_2.zip（※）

Tweenerのトランジションの一覧表。

tweener_1_31_74_as2_fl7.zip

AS2版はAS2版でも、FlashPlayer7/FlashLite2対応版ってことでしょうね。

tweener_1_31_74_as2.zip （※）

AS2版。FlashPlayer8対応版。

tweener_1_31_74_as3.zip （※）

AS3版。

tweener_1_31_74_as3_swc.zip

AS3版で、「SWCファイル」になってるそうです。が、ワタクシはまだSWCファイルを使ったことが無いので、よくわかりません・・・。

tweener_highlight_1_24_47.mxp（※）

Flashの拡張機能ですね。これをインストールすれば、Flash上でTweenerのコードがハイライトされたりコードヒントが出たりする、ってことでしょうか・・・。

うちではAS2での開発がまだ主流ですが、AS3の案件も増えてきそうなので、AS2版とAS3版、あとドキュメント系と拡張をダウンロードしてみます（※のついたものをダウンロードしてみます）。

ダウンロードはここまで。次はインストール、というか導入の準備ですね。

なんだかわからないけど凄いFlashサイト

なんだかわからないけど凄いFlashサイトを見つけました。

Synchronous Objects

「凄い」のは、動画の下のタイムラインの部分の複雑さや、動画中のダンサーのモーションに合わせて動線（？）が表示される点。「なんだかわからない」のは、操作方法やタイムライン上の要素の意味、そして、ダンサーのモーション動線がリアルタイムに動画の内容から生成されてるとしたら、それがどのように実現されているか、という点。