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. }
  112.  

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. }
  229.  

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. }
  95.  

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. }
  38.  

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

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

コンパイルについて

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

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

基準点について

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

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

参照サイト
投稿日 2010年2月24日 04:55
カテゴリ ActionScript
タグ アニメーション | テストコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1190

コメント

コメントする
Name
Email Address
URL

KANTENNA.COM

Solarized

PAGE RANK

384 PV約 68 秒/1PV

[Ubuntu]動画ダウンロードと検索が簡単にできるGMediaFinder | 情報備忘録

814 PV約 68 秒/1PV

[PHP]MySQLを利用した画像の保存と出力 | WEBプログラム覚書

173 PV約 66 秒/1PV

jQuery PageSlide.js | KANTENNA.COM

630 PV約 61 秒/1PV

表示内容の切り替え(JavaScript) | WEBプログラム覚書

166 PV約 52 秒/1PV

[WordPress]投稿タイプ、タクソノミー、タームについて | WEBプログラム覚書

170 PV約 52 秒/1PV

jQuery slider | KANTENNA.COM

207 PV約 45 秒/1PV

[WordPress]XML-RPCを利用して外部から投稿したりする。 | WEBプログラム覚書

1045 PV約 37 秒/1PV

[jQuery]こんな機能があったんだ。jQuery stop() | WEBプログラム覚書

1055 PV約 35 秒/1PV

jQueryによる表示、非表示切り替え | WEBプログラム覚書

161 PV約 35 秒/1PV

[jQuery]closest()とparents() | WEBプログラム覚書

404 PV約 28 秒/1PV

[jQuery]デザイン系の人は、$(function(){})よりwindow.onloadを使ったほうがいいかも。 | WEBプログラム覚書

132 PV約 28 秒/1PV

基本的な光の作り方2 | KANTENNA.COM

584 PV約 25 秒/1PV

Dreamweaverで文字コードを変換する手順 | 情報備忘録

398 PV約 25 秒/1PV

Excel VBA の改行コード | WEBプログラム覚書

248 PV約 25 秒/1PV

javascript 子要素取得のメモ | WEBプログラム覚書

131 PV約 23 秒/1PV

コマンドプロンプト(cmd.exe)が芸術的すぎる件 | 情報備忘録

161 PV約 23 秒/1PV

渦っぽい光が美しいPhotoshop効果 | KANTENNA.COM

144 PV約 11 秒/1PV

ウェブデザイン・ホームページ制作 KANTENA.COM

394 PV約 9 秒/1PV

MySQLエラー「Column 'カラム名' in field list is ambiguous」 | WEBプログラム覚書

TIME LINE

2018 11.15

webpack、babelでreactのビルド環境構築

node.jsはインストール済でとにかくreactをJSXでかいてES5にトランスコンパイルして既存のページにscriptタグをぺちっとしたい人向け。

2018 06.05

[CakePHP3.7]LayoutでCellを使ったら memory size エラー出る場合

layoutファイルの中でcellをrender()するとViewでmemory size エラー出る場合がある。

どうやらViewでsetLayout()とか使ってると無限ループのようになってメモリエラーになるっぽい？？ 下手なlayout設定は命取りになる模様。

Tag