Tweenerとは、ActionScript 2.0でもActionSctipt 3.0でも使え、Flashでサイトを作る際に良く使っている一枚の画像をすっごく簡単に演出をつけるActionScriptのアニメーション用オープンソースのライブラリです。

前回紹介した「fosFORO: Flash中にテキスト文字を絵文字に変換するオープンソースのライブラリ」よりもっと便利なライブラリみたいです。

現状、FlexBuilderやFlex SDK、Flash Develop(※参考： FlashDevelop: .NETで開発されていてオープンソースのFlash/ActionScript 用のWindows向けIDE開発環境)はASのコードを書くのには非常に便利なツールなのですが、Flash特有のタイムラインが無いので、アニメーション部分を補完してくれる、Tweenerのライブラリはよく利用している方が多いです。

本文を発表する時点までは、以下のFlashバージョンがサポートされています。

  • ActionScript 2.0, for Flash 7+ and Flash Lite 2.0+
  • ActionScript 2.0, for Flash 8+
  • ActionSctipt 3.0, for Flash 9+

Tweenerの使い方

１）、Tweenerライブラリダウンロード

次のURLからTweenerライブラリをダウンロードします。>>http://code.google.com/p/tweener/downloads/list

tweener_1_31_74_as3_swc.zipの既にswc化になったファイルをダウンロードするとStep３へ、ソースからダウンロードするとStep２へ。

２）、展開した*.asソースファイル、以下のコマンドでswc化とする

  1. compc -include-sources tweener_1_31_74_as3 -output tweener.swc

３）、できたtweener.swc は /usr/lib/flash/にでも放り込んでおくことにする(FlexBuilderならGUIから追加できる)

４）、以下のソースをHelloTweener.asファイルに保存

  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.text.TextField;
  4.     import flash.events.MouseEvent;
  5.     import caurina.transitions.Tweener;
  6.     public class HelloTweener extends Sprite {
  7.         public function HelloTweener() {
  8.             var tf:TextField = new TextField();
  9.             tf.text = “Hello Tweener”;
  10.             addChild(tf);
  11.             stage.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
  12.                 Tweener.addTween(tf, {x:mouseX, y:mouseY, time:1, transition:”linear”});
  13.             });
  14.         }
  15.     }
  16. }

５）、コンパイル

  1. mxmlc -include-libraries=/usr/lib/flash/tweener.swc HelloTweener.as

そこまでは物を作れます。また、以下はマウスプレス時にも演出が加わっている具体的な実装例です。

  1. // Tweenerライブラリをインポート
  2. import caurina.transitions.*
  3. import caurina.transitions.properties.*
  4.  
  5. // カラーショートカットを登録
  6. ColorShortcuts.init()
  7.  
  8. // ボタン(btnというインスタンスがある前提)のロールオーバー
  9. btn.onRollOver = function(){
  10. // _brightness が明るさ。0が基準で±1で設定します。
  11. // timeで0.5秒を設定してます。
  12. Tweener.addTween(this,{_brightness:0.4, time:0.5})
  13. }
  14. btn.onRollOut = function(){
  15. Tweener.addTween(this,{_brightness:0, time:0.5})
  16. }
  17.  
  18. btn.onPress = function(){
  19. Tweener.addTween(this,{_brightness:-0.4, time:0.5})
  20. }
  21.  
  22. btn.onRelease = function(){
  23. Tweener.addTween(this,{_brightness:0.4, time:0.5})
  24. }

それ以外、Tweenerを使いこなすというよりは、Tweenerからつかわれるオブジェクトをどう設計するかのほうが面白そうです。

関連リンク
http://code.google.com/p/tweener/　公式ページ

メインコンテンツEND ■
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Posted on Monday, 11th May 2009 by admin

Tags: , , , ,
Posted in ActionScript, Flash Project | Comments (0) | 14,706 views

Leave a Reply