Tweener: TextShortcuts

「超訳：Tweenerドキュメント＆言語リファレンス」の翻訳作業の中で、TweenerのTextShortcutsについてやってた時に知ったこと。Tweenerって、テキストフィールドの文字列までトゥイーンできるんですね！どういうことかというと、こういうこと↓

Tweener 1.31.66 を試す(8) ～TextShortcuts～【閃光的網站・弛緩複合体 -Review Division-】

「_text」プロパティとかおもしろいなあ。これ、今度使おう。

MovieClip.scrollRectプロパティ

「超訳：Tweenerドキュメント＆言語リファレンス」の翻訳作業を進める中で、MovieClip.scrollRectプロパティというものの存在を知った。

import flash.geom.Rectangle;

//ステージ上にムービークリップ（灰色・100x300）を生成
var mc:MovieClip = this.createEmptyMovieClip("movie_mc",this.getNextHighestDepth());
mc.beginFill(0x999999);
mc.moveTo(0,0);
mc.lineTo(100,0);
mc.lineTo(100,300);
mc.lineTo(0,300);
mc.endFill();

//生成したムービークリップの中にテキストフィールドを生成し、ダミーテキストを表示
var txt:TextField = mc.createTextField("movie_txt",mc.getNextHighestDepth(),0,0,100,300);
txt.wordWrap = true;
txt.multiline = true;
txt.text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

//scrollRectとして設定するためのRectangleオブジェクトを生成
var rect:Rectangle = new Rectangle(0,0,mc._width,100);

//生成したムービークリップのscrollRectとしてrectを設定
mc.scrollRect = rect;
//scrollRectプロパティを設定したムービークリップのcachaAsBitmapプロパティをtrueに設定
mc.cacheAsBitmap = true;

ここまでだとマスクと何ら変わりない。scrollRectの「scrollって何？」って思ったら、こういうことらしい↓

this.onMouseDown = function():Void{
    this.onEnterFrame = function():Void{
        //scrollRectに設定したRectangleオブジェクトのyプロパティを変更
        rect.y ++;
        //scrollRectオブジェクトを再設定
        mc.scrollRect = rect;
    };
};

this.onMouseUp = function():Void{
    delete this.onEnterFrame;
};


おお、スクロールする！うん、割とこれは便利かもしれないですね。今後、活用しよう。

ちなみにTweenerの特殊プロパティを使ってscrollRectをトゥイーンさせた例は下記の通り。
import flash.geom.Rectangle;
import caurina.transitions.Tweener;
import caurina.transitions.properties.DisplayShortcuts;
DisplayShortcuts.init();

//ステージ上にムービークリップ（灰色・100x300）を生成
var mc:MovieClip = this.createEmptyMovieClip("movie_mc",this.getNextHighestDepth());
mc.beginFill(0x999999);
mc.moveTo(0,0);
mc.lineTo(100,0);
mc.lineTo(100,300);
mc.lineTo(0,300);
mc.endFill();

//生成したムービークリップの中にテキストフィールドを生成し、ダミーテキストを表示
var txt:TextField = mc.createTextField("movie_txt",mc.getNextHighestDepth(),0,0,100,300);
txt.wordWrap = true;
txt.multiline = true;
txt.text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

//scrollRectとして設定するためのRectangleオブジェクトを生成
var rect:Rectangle = new Rectangle(0,0,mc._width,100);
mc.scrollRect =rect;
//scrollRectプロパティを設定したムービークリップのcachaAsBitmapプロパティをtrueに設定
mc.cacheAsBitmap = true;

//Tweenerの特殊プロパティを使ってscrollRectを操作
this.onMouseDown = function():Void{
    Tweener.addTween(mc,{
        _scrollRect:rect,
        _scrollRect_y:(mc._height),
        time:2
    });
};


オンラインシンセサイザー？？

「実際の楽器を操作する感じで音楽が制作できてしまう」という、フリーのオンラインサービスがあるそうです：

Hobnox - Audiotool

なんというか、Flashで作られた、よくできたシンセのようなもの（？）であることまではわかったんですが、肝心の使い方がよくわからないので、楽器としての性能については不明です。

元ネタはこちらのブログの記事から。チュートリアルムービーも載ってます：

とんでもない音楽系ウェブアプリが出た - Hobnox Audiotool | DIGITAL DJ

配列の（浅い）コピー

ActionScriptで配列をコピーする方法について。

Flash CS4 Professional ActionScript 2.0

下記のように単に元配列を参照しただけでは、copy_arrayへの変更が元配列（base_array）にも及んでしまう。
var base_array:Array = new Array("a","b","c");
var copy_array:Array = base_array;
copy_array.shift();
trace(base_array); //"b","c"←base_arrayの方も変更されている
trace(copy_array); //"b","c"
Array.slice()メソッドを引数なしで使うことで、配列の（浅い）コピーを作ることができる。
var base_array:Array = new Array("a","b","c");
var copy_array:Array = base_array.slice();
copy_array.shift();
trace(base_array); //"a","b","c"←base_arrayの方は元のまま
trace(copy_array); //"b","c"

Tweener 1.32.74

Tweenerがバージョンアップ（1.31.74→1.32.74）との報告が公式MLでありました。

[Tweener] Tweener 1.32.74

変更点についての記述は下記の通り（一部抜粋）。

変更点は至ってわずか（ほんのコード2行分）。でも重要な変更です。

＊Tweenの上書きを「オプション」扱いとし、デフォルトでは無効とした。
＊addTween()に「overwrite:」パラメーターを新規に追加。この値が「true」だったら、新しいtweenとオーバーラップする同一オブジェクトの同一プロパティに設定されているすべてのtweenを上書きする。

Tweenの上書きをたくさん使ってるような場合には、この変更によって互換性が失われることがあるかもしれません。ただ、特に大量の数のtweenを生成する場合のパフォーマンスが大幅に向上されるので、こうすることが重要だと考えました。

公式サイトの方にはまだ反映されてないし、上記メールの文中にあるURLはSVN用のものなので、Subversion使ってる人向けってことですかね。

超訳：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

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

AS3のColorクラス（interpolateTransform()メソッドなど）

ActionScript3.0のヘルプ（FlashCS3の）の読み方にまだ慣れない。AS2のヘルプ（ActionScript 2.0リファレンスガイド）なら、各クラスのプロパティやらメソッドやらについて、ほぼ必ずサンプルのコードが載っていたのに、AS3のヘルプ（ActionScript 3.0コンポーネントリファレンスガイド）で色々なクラスを調べても、なかなかサンプルのコードが載ってない。

で、今回はムービークリップの色の変更をさせようと思い、ColorTransformクラスについて探している中で、昔懐かし（？）Colorクラスを発見！

ActionScript 3.0 コンポーネントリファレンスガイド：Color


と思ってよく読んだら、「Color クラスは、Flash Player の ColorTransform クラスを拡張し、明度およびティントを制御する機能を追加します。」とのこと。ああ、以前のColorクラスとは違って、ColorTransformクラスの拡張なのね。でも、明度やティントの制御だとか、「2 つの ColorTransform オブジェクトまたは 2 つのカラー値を補間するための静的メソッドも存在します」だとか、割とよさげなこと書いてあるから、使ってみようかな。

・・・と、思ってみたものの、サンプルコードが見あたらず。ネット探しゃあ出てくるだろうと思って「AS3 Colorクラス interpolateTransform」などのキーワードでググってみるも、出てくるのはAdobeのヘルプページくらい。

むむ。ぜ、全然わからん・・・。interpolateTransform()メソッドの説明には、「ColorTransform オブジェクトから別のオブジェクトにスムーズにブレンドします。 」とか書いてあるから、例えばある色からある色に変化させるのに便利なんだろうけど、色を適用させるオブジェクトを指定するパラメータだとか、ブレンドにかかる時間を指定するパラメータも無いし、どないすんねん！！

闇雲に試してみた挙げ句、やっとこ正しい使い方（？）になったっぽいのが下記のスクリプト。

//Colorクラスのインポート
import fl.motion.Color;
//開始色（赤）のColorTransformオブジェクトを生成
var cTrans1:ColorTransform = new ColorTransform(1,0,0,1,0,0,0,0);
//終了色（青）のColorTransformオブジェクトを生成
var cTrans2:ColorTransform = new ColorTransform(0,0,1,1,0,0,0,0);
//開始色と終了色の間の任意の位置の色データを保持したColorTransformオブジェクトを生成
var cTrans3:ColorTransform = Color.interpolateTransform(cTrans1,cTrans2,0.5);
//cTrans3をtarget_mcに適用
target_mc.transform.colorTransform = cTrans3;


interpolateTransform()メソッドの「progress」パラメータは、開始色の位置を0、終了色の位置を1とした時、最終的に生成する色（上の場合cTrans3）の位置をどこにするか、ということを指定するためのパラメータなのね。上記では0.5にしたから、開始色と終了色のちょうど中間。例えば0.1とかだったらより開始色に近い色になるし、0.9とかだったらより終了色に近い色になる、ってわけか。

とりあえず忘れないようにメモ。

Flashでの3D表現のすばらしい例：THE ECO ZOO | ECODA!DOBUTSUEN

THE ECO ZOO | ECODA!DOBUTSUEN

すごい！Flashできちんと3D表現ができてる。なんでも「 3D座標(x,y,z）をパースペクティブ座標（x,y）にアフィン変換して、ポリゴンを描画」してるのではないかという分析をしてる人がいた。パラッパラッパー的な3Dだけども十分インパクトあるし、動作が軽いのもすばらしい。