KANTENNA.COM

Solarized

HOME > WEBプログラム覚書 > ActionScript3.0 [基礎] Tweenとeasing

ActionScript3.0 [基礎] Tweenとeasing

ActionScript3.0で最も簡単にアニメーションをさせることができる Tweenと加速と減速が簡単に設定できるeasingを使ってみる。

結果はこれ。

Main.as
  1.  package
  2.  {
  3.   import flash.display.Sprite;
  4.   import flash.display.Shape;
  5.   import flash.text.TextField;
  6.   import flash.events.MouseEvent;
  7.   import flash.display.StageAlign;
  8.  
  9.   import fl.transitions.Tween;
  10.   import fl.transitions.easing.*;
  11.  
  12.   import com.kantenna.display.DispalyBox;
  13.   import com.kantenna.effect.EffectBox;
  14.   import com.kantenna.display.ExecButton;
  15.  
  16.   public class Main extends Sprite
  17.   {
  18.  
  19.   private var _eff_box:EffectBox = new EffectBox();
  20.   private var _disp_box:DispalyBox = new DispalyBox();
  21.  
  22.   public function Main():void
  23.   {
  24.   stage.align = StageAlign.TOP_LEFT;
  25.  
  26.   var sp:Shape = new Shape();
  27.   sp.graphics.beginFill(0xE5E5E5);
  28.   sp.graphics.drawRect(0, 0, 1024, 800);
  29.   sp.graphics.endFill();
  30.   addChild(sp);
  31.  
  32.   // エフェクト用のオブジェクト作成
  33.   createEffectObject();
  34.   _eff_box.x = 200;
  35.   _eff_box.y = 100;
  36.   _eff_box.build();
  37.   addChild(_eff_box);
  38.  
  39.   // ボタン作成
  40.   createButtons();
  41.   _disp_box.row = DispalyBox.VERTICAL;
  42.   _disp_box.build();
  43.   addChild(_disp_box);
  44.   }
  45.  
  46.   public function createEffectObject():void
  47.   {
  48.   var str:String = 'kantenna.com';
  49.  
  50.   for (var i:int = 0; i < str.length; i++ ) {
  51.   var txt:TextField = new TextField();
  52.   txt.width = 20;
  53.   txt.text = str.charAt(i);
  54.   _eff_box.add(txt);
  55.   }
  56.   }
  57.  
  58.   public function createButtons():void
  59.   {
  60.   _disp_box.add(new ExecButton('現在位置から上', MouseEvent.CLICK, function(e:MouseEvent):void {
  61.   _eff_box.moveToTop( { } );
  62.   }));
  63.  
  64.   _disp_box.add(new ExecButton('現在位置から下', MouseEvent.CLICK, function(e:MouseEvent):void {
  65.   _eff_box.moveToBottom( { } );
  66.   }));
  67.  
  68.   _disp_box.add(new ExecButton('現在位置から右', MouseEvent.CLICK, function(e:MouseEvent):void {
  69.   _eff_box.moveToRight( { } );
  70.   }));
  71.  
  72.   _disp_box.add(new ExecButton('現在位置から左', MouseEvent.CLICK, function(e:MouseEvent):void {
  73.   _eff_box.moveToLeft( { } );
  74.   }));
  75.  
  76.   _disp_box.add(new ExecButton('拡大', MouseEvent.CLICK, function(e:MouseEvent):void {
  77.   _eff_box.zoomIn( { } );
  78.   }));
  79.  
  80.   _disp_box.add(new ExecButton('縮小', MouseEvent.CLICK, function(e:MouseEvent):void {
  81.   _eff_box.zoomOut( { } );
  82.   }));
  83.  
  84.   // 設定変更用のボタン
  85.   _disp_box.add(new ExecButton('String.easeIn 設定変更', MouseEvent.CLICK, function(e:MouseEvent):void {
  86.   _eff_box.defaultParams = {
  87.   easing: Strong.easeIn,
  88.   duration: 0.3,
  89.   duray: 80,
  90.   distance: 100,
  91.   scaleX: 3,
  92.   scaleY: 3,
  93.   alpha: 1
  94.   };
  95.   }));
  96.  
  97.   // 設定変更用のボタン
  98.   _disp_box.add(new ExecButton('Elastic.easeOut 設定変更', MouseEvent.CLICK, function(e:MouseEvent):void {
  99.   _eff_box.defaultParams = {
  100.   easing: Elastic.easeOut,
  101.   duration: 0.3,
  102.   duray: 80,
  103.   distance: 100,
  104.   scaleX: 3,
  105.   scaleY: 3,
  106.   alpha: 1
  107.   };
  108.   }));
  109.   }
  110.   }
  111.  }
EffectBox.as
  1.  package com.kantenna.effect
  2.  {
  3.   import flash.display.Sprite;
  4.   import flash.display.DisplayObject;
  5.   import fl.transitions.Tween;
  6.   import fl.transitions.easing.*;
  7.   import flash.text.TextField;
  8.   import flash.utils.Timer;
  9.   import flash.events.TimerEvent;
  10.  
  11.   public class EffectBox extends Sprite
  12.   {
  13.   public static const LINE:String = 'line';
  14.   public static const VERTICAL:String = 'vertical';
  15.  
  16.   /**
  17.   * 縦に配置するか横に配置するかの設定
  18.   *
  19.   * 縦配置 : line
  20.   * 横配置 : vertical
  21.   */
  22.   private var _row:String;
  23.  
  24.   /**
  25.   * 並べるアイテム
  26.   * 中身はDisplayObject
  27.   *
  28.   */
  29.   private var _items:Array;
  30.  
  31.   /**
  32.   * 並べた時の間隔
  33.   */
  34.   private var _margin:int = 0;
  35.  
  36.   private var _default_params:Object = {
  37.   easing: Regular.easeInOut,
  38.   duration: 0.5,
  39.   duray: 240,
  40.   distance: 100,
  41.   scaleX: 3,
  42.   scaleY: 3,
  43.   alpha: 1
  44.   };
  45.  
  46.   /**
  47.   * コンストラクタ
  48.   *
  49.   * @param items Array or DisplayObject
  50.   * @param row String line|vertical
  51.   */
  52.   public function EffectBox(items:* = null, row:String = LINE):void
  53.   {
  54.   _row = row;
  55.   _items = new Array();
  56.  
  57.   if (items !== null) {
  58.   add(items);
  59.   }
  60.   }
  61.  
  62.   /**
  63.   * _itemsにDisplayObjectを追加
  64.   *
  65.   * @param objects DisplayObject or DisplayObject が入ったArray
  66.   */
  67.   public function add(objects:Object):void
  68.   {
  69.   if (objects is Array) {
  70.   objects.forEach(function(object:DisplayObject):void {
  71.   _items.push(objects);
  72.   });
  73.   } else if (objects is DisplayObject) {
  74.   _items.push(objects);
  75.   } else {
  76.   throw new Error("Display Objectを入れてください。");
  77.   }
  78.   }
  79.  
  80.   /**
  81.   * _itemsにあるDisplayObjectを
  82.   * 自身にaddChild
  83.   *
  84.   */
  85.   public function build():void
  86.   {
  87.   var position:int = 0;
  88.  
  89.   _items.forEach(function(item:DisplayObject, index:int, array:Array):void {
  90.   if (_row === LINE) {
  91.   item.x = position;
  92.   addChild(item);
  93.   position += item.width + _margin;
  94.   } else {
  95.   item.y = position;
  96.   addChild(item);
  97.   position += item.height + _margin;
  98.   }
  99.   });
  100.   }
  101.  
  102.   public function get row():String
  103.   {
  104.   return _row;
  105.   }
  106.  
  107.   public function set row(str:String):void
  108.   {
  109.   _row = str;
  110.   }
  111.  
  112.   public function get margin():int
  113.   {
  114.   return _margin;
  115.   }
  116.  
  117.   public function set margin(px:int):void
  118.   {
  119.   _margin = px;
  120.   }
  121.  
  122.   private function margeParams(params:Object):Object
  123.   {
  124.   var result:Object = { };
  125.   for (var key:String in _default_params)
  126.   {
  127.   // メモ:undefinedはfalse
  128.   result[key] = params[key] ? params[key] : _default_params[key];
  129.   }
  130.   return result;
  131.   }
  132.  
  133.   public function set defaultParams(obj:Object):void
  134.   {
  135.   _default_params = obj;
  136.   }
  137.  
  138.  
  139.   /**
  140.   * 現在の位置から上に移動させる
  141.   *
  142.   * @param params デフォルトの値はmargeParams()を参照
  143.   */
  144.   public function moveToTop(params:Object):void
  145.   {
  146.   params = margeParams(params);
  147.  
  148.   var timer:Timer = new Timer(params.duray, numChildren);
  149.   timer.start();
  150.   timer.addEventListener(TimerEvent.TIMER, function():void {
  151.   var current = getChildAt(timer.currentCount - 1);
  152.   new Tween(current, 'y', params.easing, current.y, current.y - params.distance, params.duration, true);
  153.   });
  154.   }
  155.  
  156.   /**
  157.   * 現在の位置から上に移動させる
  158.   *
  159.   * @param params デフォルトの値はmargeParams()を参照
  160.   */
  161.   public function moveToBottom(params:Object):void
  162.   {
  163.   params = margeParams(params);
  164.  
  165.   var timer:Timer = new Timer(params.duray, numChildren);
  166.   timer.start();
  167.   timer.addEventListener(TimerEvent.TIMER, function():void {
  168.   var current = getChildAt(timer.currentCount - 1);
  169.   new Tween(current, 'y', params.easing, current.y, current.y + params.distance, params.duration, true);
  170.   });
  171.   }
  172.  
  173.   public function moveToRight(params:Object):void
  174.   {
  175.   params = margeParams(params);
  176.  
  177.   var timer:Timer = new Timer(params.duray, numChildren);
  178.   timer.start();
  179.   timer.addEventListener(TimerEvent.TIMER, function():void {
  180.   var current = getChildAt(timer.currentCount - 1);
  181.   new Tween(current, 'x', params.easing, current.x, current.x + params.distance, params.duration, true);
  182.   });
  183.   }
  184.  
  185.   public function moveToLeft(params:Object):void
  186.   {
  187.   params = margeParams(params);
  188.  
  189.   var timer:Timer = new Timer(params.duray, numChildren);
  190.   timer.start();
  191.   timer.addEventListener(TimerEvent.TIMER, function():void {
  192.   var current = getChildAt(timer.currentCount - 1);
  193.   new Tween(current, 'x', params.easing, current.x, current.x - params.distance, params.duration, true);
  194.   });
  195.   }
  196.  
  197.  
  198.   public function zoomIn(params:Object):void
  199.   {
  200.   /*
  201.   var easing:Function = (params._easing == undefined) ? Regular.easeInOut : params._easing;
  202.   var duration:Number = (params._duration == undefined) ? 0.2 : params._duration;
  203.   */
  204.   params = margeParams(params);
  205.  
  206.   var timer:Timer = new Timer(params.duray, numChildren);
  207.   timer.start();
  208.   timer.addEventListener(TimerEvent.TIMER, function():void {
  209.   var current:DisplayObject = getChildAt(timer.currentCount - 1);
  210.   new Tween(current, 'scaleX', params.easing, current.scaleX, current.scaleX * params.scaleX, params.duration, true);
  211.   new Tween(current, 'scaleY', params.easing, current.scaleY, current.scaleY * params.scaleY, params.duration, true);
  212.   });
  213.   }
  214.  
  215.   public function zoomOut(params:Object):void
  216.   {
  217.   params = margeParams(params);
  218.  
  219.   var timer:Timer = new Timer(params.duray, numChildren);
  220.   timer.start();
  221.   timer.addEventListener(TimerEvent.TIMER, function():void {
  222.   var current:DisplayObject = getChildAt(timer.currentCount - 1);
  223.   new Tween(current, 'scaleX', params.easing, current.scaleX, current.scaleX / params.scaleX, params.duration, true);
  224.   new Tween(current, 'scaleY', params.easing, current.scaleY, current.scaleY / params.scaleY, params.duration, true);
  225.   });
  226.   }
  227.   }
  228.  }
DispalyBox.as
  1.  package com.kantenna.display
  2.  {
  3.   import flash.display.Sprite;
  4.   import flash.display.DisplayObject;
  5.  
  6.   public class DispalyBox extends Sprite
  7.   {
  8.   public static const LINE:String = 'line';
  9.   public static const VERTICAL:String = 'vertical';
  10.  
  11.   /**
  12.   * 縦に配置するか横に配置するかの設定
  13.   *
  14.   * 縦配置 : line
  15.   * 横配置 : vertical
  16.   */
  17.   private var _row:String;
  18.  
  19.   /**
  20.   * 並べるアイテム
  21.   * 中身はDisplayObject
  22.   *
  23.   */
  24.   private var _items:Array;
  25.  
  26.   /**
  27.   * 並べた時の間隔
  28.   */
  29.   private var _margin:int = 0;
  30.  
  31.   /**
  32.   * コンストラクタ
  33.   *
  34.   * @param items Array or DisplayObject
  35.   * @param row String line|vertical
  36.   */
  37.   public function DispalyBox(items:* = null, row:String = LINE):void
  38.   {
  39.   _row = row;
  40.   _items = new Array();
  41.  
  42.   if (items !== null) {
  43.   add(items);
  44.   }
  45.   }
  46.  
  47.   public function add(objects:Object):void
  48.   {
  49.   if (objects is Array) {
  50.   objects.forEach(function(object:DisplayObject):void {
  51.   _items.push(objects);
  52.   });
  53.   } else if (objects is DisplayObject) {
  54.   _items.push(objects);
  55.   } else {
  56.   throw new Error("Display Objectを入れてください。");
  57.   }
  58.   }
  59.  
  60.   public function build():void
  61.   {
  62.   var margin:int = _margin;
  63.   var position:int = 0;
  64.  
  65.   _items.forEach(function(item:DisplayObject, index:int, array:Array):void {
  66.   if (_row === LINE) {
  67.   item.x = position;
  68.   addChild(item);
  69.   position += item.width + _margin;
  70.   } else {
  71.   item.y = position;
  72.   addChild(item);
  73.   position += item.height + _margin;
  74.   }
  75.   });
  76.   }
  77.  
  78.   public function get row():String {
  79.   return _row;
  80.   }
  81.  
  82.   public function set row(str:String):void {
  83.   _row = str;
  84.   }
  85.  
  86.   public function get margin():int {
  87.   return _margin;
  88.   }
  89.  
  90.   public function set margin(px:int):void {
  91.   _margin = px;
  92.   }
  93.   }
  94.  }
ExecButton.as
  1.  package com.kantenna.display
  2.  {
  3.   import fl.controls.Button;
  4.   import flash.events.*;
  5.  
  6.   public class ExecButton extends Button
  7.   {
  8.   // リスナー関数
  9.   private var _lisn:Function = function():void { trace(this.label) };
  10.  
  11.   // Event.CONST
  12.   private var _evt:String = MouseEvent.CLICK;
  13.  
  14.   public function ExecButton(lab:String, e:String, f:Function):void
  15.   {
  16.   super();
  17.   this.label = lab;
  18.   this.setEventListener(e, f);
  19.   }
  20.  
  21.   public function setEventListener(e:String, f:Function):void
  22.   {
  23.   delEventListener();
  24.  
  25.   addEventListener(e, f, false, 0, true);
  26.   _evt = e;
  27.   _lisn = f;
  28.   }
  29.  
  30.   public function delEventListener():void
  31.   {
  32.   if (hasEventListener(_evt)) {
  33.   removeEventListener(_evt, _lisn);
  34.   }
  35.   }
  36.   }
  37.  }

動き的にはElasticがおもしろい。 動きが単調だねとか言われたらElastic使えばごまかせそうｗ

移動のボタンを連打すると位置がずれる。これを防ぐには、Tween - motionFinish とか使えばよさそう。

コンパイルについて

FlashDevelopっていうかFlexSDKでflパッケージを利用すると動きがおかしくなることがある?? flashでのコンパイル結果とFlexSDKでのコンパイル結果が違ってかなりハマった。

おそらく僕の設定方法がおかしいんだろうけど、一応ネットで出てくる情報を元に、 SWC使ったりクラスパス通したりしたんだけどダメだったんで、もし同じような症状の人いたら flパッケージ使う場合はflashからコンパイルしたほうがいいよと。

基準点について

拡大縮小がわかりやすいんですが、基準点が左上になっている。 で、ActionScript3.0で作成したオブジェクトの基準点は自動で左上になり、 基準点を変更することはできないらしい。

が、偉大なる先駆者たちが変更したように見せかける方法を開発してくれています。 調べてみたところ3つくらいあるようです。次はそれについてテストしてみようかと思います。

参照サイト
Flash&ActionScript3.0 プロが教える“本当の使い方”
作者:MdN編集部 編 | 価格:￥ 2,940
投稿日 2010年2月24日 04:55
カテゴリ ActionScript
タグ アニメーション | テストコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1190

トラックバック(0)

コメント

コメントする
Name
Email Address
URL
PAGE RANK
TIME LINE
2012
02.10

[雑記]縦横がランダムな要素を隙間なく並べるのは無理なのか。

サイトマップ作ったんだけど、やりたかったことが出来なかった。

2012
02.08

[Ubuntu11.10]Winows XPユーザーがUbuntuを使ってみて

Windows XPとUbuntuのデュアルブート環境にしてみておもったこと。

2012
02.03

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

2012
02.01

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

2012
02.01

[WordPress]管理画面のフッタのフィルタとアクション。

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、 こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

2012
01.28

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

2012
01.27

検索エンジンにやさしいパンくずリストのコーディング

ってなんだ。

2012
01.26

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

2012
01.25

[Ubuntu11.10]Ubuntuのインストール後の設定

インストール完了後の環境構築。PC起動時いちいちBIOSからブートドライブ選んで ブートするのかと思ってたら起動時にOS選択画面が出てくる。

すばらしいですね。

2012
01.24

[Ubuntu11.10]Windows XPとUbuntuのデュアルブート環境

いろいろあってUbuntuをインストールすることに。

Tags