[ヅ] Flex 2 から Tweener を利用してみる (2007-07-01)

Flex 2 から Tweener を利用してみる (2007-07-01)

Tweener とは

トゥイーンを実現するActionScript用ライブラリ。

「トゥイーン」とはアニメーション用語で、主要アニメーターが重要なフレーム (主要な変更を含むフレーム) だけを描画し、アシスタントがその間のフレームを描画するという工程を指したものです。

Fireworks ヘルプ - トゥイーン

よくわからないが最初と最後の状態(位置や色など)を指定するだけで、中間部分を自動で処理してくれる。いってみればモーフィング？
Tweener には ActionScript2.0版と ActionScript3.0版がある。

Tweener 入手方法

公式サイトらしい tweener - Google Code から入手可能。
今回は最新のバージョン tweener_1_25_57_as3.zip をダウンロードした。

Tweener ライブラリのセットアップ

zipファイルなので解凍して、ライブラリソースコード置場に設置。
今回は C:\flex_work\libs がライブラリソースコード置場。

Tweener は *.as が 9個あった。
C:\flex_work\libs 以下に caurina ディレクトリを設置。
以下のような感じ。


C:\flex_work\libs\caurina\transitions>dir
 ドライブ C のボリューム ラベルは java です
 ボリューム シリアル番号は CAFE-BABE です
 
 C:\flex_work\libs\caurina\transitions のディレクトリ
 
2007/07/01  19:32    <DIR>          .
2007/07/01  19:32    <DIR>          ..
2007/04/14  00:33             1,925 AuxFunctions.as
2007/05/27  22:32            30,133 Equations.as
2007/04/28  14:37             2,857 PropertyInfoObj.as
2007/05/13  13:34            16,545 SpecialPropertiesDefault.as
2007/04/22  23:30             1,275 SpecialProperty.as
2007/04/28  14:29             1,016 SpecialPropertyModifier.as
2007/04/22  23:30               864 SpecialPropertySplitter.as
2007/05/27  22:33            39,890 Tweener.as
2007/04/13  23:51             7,894 TweenListObj.as
               9 個のファイル             102,399 バイト
               2 個のディレクトリ   1,234,567,890 バイトの空き領域

とりあえずサンプルを作ってみた

マウスでクリックした位置に数字とテキストがいろんなトゥイーンを適用して移動してくるサンプル。トゥイーンアニメーションは41種類あるらしいので、すべて入れてみた。入れすぎたせいか、よくわからない動きになってしまった。

サンプルのソースコード(TweenersTweens.as)


package {
 
  import flash.display.*;
  import flash.text.*;
  import flash.events.*;
  import caurina.transitions.Tweener;
 
  [SWF(width="400", height="400", backgroundColor="#000000", frameRate="30")]
 
  public class TweenersTweens extends Sprite {
 
    private var colors:Array = [
      0xff0000, // RED
      0x00ff00, // GREEN
      0x0000ff, // BLUE
      0x00ffff, // CYAN
      0xff00ff, // MAGENTA
      0xffc800, // ORANGE
      0xffafaf, // PINK
      0xffff00, // YELLOW
      0x00ffaf, // ??????
      0xafff00  // ??????
    ];
 
    private var names:Array = [
      "linear",
      "easeinquad",    "easeoutquad",    "easeinoutquad",    "easeoutinquad",
      "easeincubic",   "easeoutcubic",   "easeinoutcubic",   "easeoutincubic",
      "easeinquart",   "easeoutquart",   "easeinoutquart",   "easeoutinquart",
      "easeinquint",   "easeoutquint",   "easeinoutquint",   "easeoutinquint",
      "easeinsine",    "easeoutsine",    "easeinoutsine",    "easeoutinsine",
      "easeincirc",    "easeoutcirc",    "easeinoutcirc",    "easeoutincirc",
      "easeinexpo",    "easeoutexpo",    "easeinoutexpo",    "easeoutinexpo",
      "easeinelastic", "easeoutelastic", "easeinoutelastic", "easeoutinelastic",
      "easeinback",    "easeoutback",    "easeinoutback",    "easeoutinback",
      "easeinbounce",  "easeoutbounce",  "easeinoutbounce",  "easeoutinbounce"
    ];
 
    private var numbers:Object = {};
    private var texts:Object   = {};
 
    public function TweenersTweens() {
 
      for (var i:int=0; i<names.length; i++) {
 
        var name:String = names[i];
 
        var text:TextField = new TextField();
        var number:TextField = new TextField();
 
        text.text   = name;
        number.text = "" + i;
 
        if(i == 0){
          text.textColor   = 0xFFFFFF;
          number.textColor = 0xFFFFFF;
        }else{
          var index:int = (i-1) / 4;
          var c:uint = ((colors[index] as Number) * ((((i-1) % 4) + 1) as Number) * 0.25);
          text.textColor   = c;
          number.textColor = c;
          //text.text   = "" + c;
          //number.text = "" + c;
        }
 
        addChild(text);
        addChild(number);
 
        texts[name]   = text;
        numbers[name] = number;
      }
 
      stage.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
        for (var n1:String in numbers) {
          Tweener.addTween(numbers[n1], {x:mouseX, y:mouseY, time:2, transition:n1});
        }
        for (var n2:String in texts) {
          Tweener.addTween(texts[n2], {x:mouseX, y:mouseY, time:5, transition:n2});
        }
        });
    }
  }
}

サンプルのコンパイル用設定ファイル(TweenersTweens-config.xml)


<flex-config>
  <use-network>true</use-network>
  <benchmark>true</benchmark>
  <compiler>
    <incremental>true</incremental>
    <source-path>
      <path-element>libs/</path-element>
    </source-path>
  </compiler>
</flex-config>

コンパイルの様子


C:\flex_work>mxmlc TweenersTweens.as
設定ファイル "C:\flex_sdk_2\frameworks\flex-config.xml" をロードしています
設定ファイル "C:\flex_work\TweenersTweens-config.xml" をロードしています
最初の設定 : 375ms
8 個の SWC がロードされました : 797ms
C:\flex_work\TweenersTweens_312413.cache (指定されたファイルが見つかりません。)
警告: クラスパスエントリ '' は、クラスパスエントリ 'C:\flex_work' のサブディレクトリです。
 
ファイル :68 時間 : 2234ms
リンクしています... 188ms
最適化しています... 125ms
SWF エンコーディング中... 46ms
C:\flex_work\TweenersTweens.swf (11477 bytes)
10 個のコンパイル単位を永続化しています... 79ms
合計時間 :3844ms
ピークメモリ使用量 :36 MB (ヒープ :16, ヒープ以外 :20)

参考

追記: 2007-09-20

多少まともになった NI-Lab.'s ヅラッシュドット: Flex 2 から Tweener を利用してみるその2 というサンプル。

また、なぜかポーランド語のサイト？からリンクされていたので記念に逆リンク。
Flex 2: Tweener - Animacje i efekty ActionScript 3

tags: zlashdot Flash Flash Flex Tweener

Posted by NI-Lab. (@nilab)

ヅラッシュ！ by NI-Lab.