Tweener カスタムプロパティのトゥイーン

2010.10.14kickbaseActionScript3.0


Tweenerで独自プロパティをTweenするサンプルです。先人達のブログにて解説され尽くした感はありますが、「実際に動作するそのもののサンプル」が見当たらなかったのでポストしました。

今更Tweenerの記事?と思う方もおられるでしょう。僕もメインのTweenエンジンはTweenMaxに移行していますが、Tweenerは使い勝手が抜群に良い点、事例が多くリファレンスが豊富な点、ProgressionのメインTweenエンジンである点もあわせると、まだまだ需要はあるんじゃないかと思います。

フローとしては以下の通りです。

01.Tweenさせたいカスタムプロパティを持ったクラス(NumberManager)を作り、getter/setterを用意します。
  ここでは初期値を500としています。設定しなかった場合1発目のTweenで0と設定されてしまうので注意が必要です。
02.ドキュメントクラスでNumberManagerクラスのインスタンスを生成します。Tweenerが実際に操作するのは、
  「NumberManagerクラスのインスタンスが持っているnumプロパティ」であるところがポイントです。
03.Tweener.addTweenします。onUpdateプロパティを使ってトゥイーンしている間、関数(numUpdate)を叩きます。
04.numUpdate内でNumberManagerクラスのインスタンスからnumプロパティを参照し、テキストフィールドに反映させます。

こんな感じです。Tweenさせたいカスタムプロパティを持ったクラスには、複数のプロパティを持たせてもOKです。

This movie requires Flash Player 9

▼以下ソース

Main

package 
{
	import caurina.transitions.Tweener;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	/**
	 * ...
	 * @author kickbase
	 */
	[SWF(width = "640", height = "480", frameRate = "30", backgroundColor = "#ffffff")]
	
	public class Main extends Sprite 
	{
		private var tf:TF = new TF();
		private var btn1:Square = new Square(100, 0xCCCCCC, 30);
		private var btn2:Square = new Square(100, 0x222222, 30);

		private var numObj:NumberManager= new NumberManager();

		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			
			//ステージ設定
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			//NumberManagerクラスのnumプロパティを初期値として表示する。その際int型からString型へ型変換します
			tf.text = numObj.num.toString();
			addChild(tf);
			
			btn1.name = "btn1";
			btn1.x = 210;
			btn1.y = 300;
			addChild(btn1);
			
			btn2.name = "btn2";
			btn2.x = 330;
			btn2.y = 300;
			addChild(btn2);

			btn1.addEventListener(MouseEvent.CLICK, onClick);
			btn2.addEventListener(MouseEvent.CLICK, onClick);
		}

		private function onClick(e:MouseEvent):void
		{
			//クリックされたオブジェクトの名前で分岐
			switch (e.target.name)
			{
				case "btn1":
				numTween(0);
				break;

				case "btn2":
				numTween(1000);
				break;
			}
		}

		private function numTween(targetNum:Number):void
		{
			//もちろんトランジションも効く
			Tweener.addTween(numObj, { num:targetNum, time:1.0, onUpdate:numUpdate ,transition:"easeOutBack"} );
		}

		//onUpdate時、つまりTweenしている間numUpdateを叩き続ける
		private function numUpdate():void
		{
			tf.text = numObj.num.toString();
		}
	}
}

NumberManager

package  
{
	/**
	 * ...
	 * @author kickbase
	 */
	public class NumberManager
	{
		private var _num:int = 500;//初期値を決めておかないと、0として扱われてしまうので注意。

		public function get num():Number { return _num; }

		public function set num(value:Number):void
		{
			_num = value;
		}
	}
}

TF

package  
{
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	/**
	 * ...
	 * @author kickbase
	 */
	public class TF extends TextField
	{
		public var tfm:TextFormat = new TextFormat();

		public function TF()
		{
			setTextfield();
			setDefaultFormat();
		}
		
		private function setTextfield():void
		{
			this.y = 150;
			this.width = 640;
			this.height = 200;
			this.type = "dynamic";
			this.autoSize = TextFieldAutoSize.CENTER;
			this.wordWrap = false;
			this.multiline = true;
			this.selectable = false;
		}

		private function setDefaultFormat():void
		{
			tfm.size = 100;
			tfm.color = 0x0;
			tfm.bold = true;
			tfm.font = "_ゴシック";
			this.defaultTextFormat = tfm;
		}
	}
}

Square

package  
{
	import flash.display.Sprite;
	/**
	 * ...
	 * @author kickbase
	 */
	public class Square extends Sprite
	{
		/*--------------------------------------------------------------------------
		 * コンストラクタ
		 *---------------------------------------------------------------------*//**
		 * @param width     <p>heightが0の時のみwidthを代入します。つまり、第一引数のみ指定したときは正方形になります。</p>
		 * @param color     <p>省略可。省略時にはランダムカラーとなります。</p>
		 * @param height     <p>省略可。省略時にはwidthが代入され正方形となります。</p>
		 */
		public function Square( width:Number, color:uint = 0x0, height:Number = 0)
		{
			//ボタンモードをオンに
			this.buttonMode = true;
			
			height ||= width;
			color ||= Math.random() * 0xFFFFFF;
			
			with (graphics)
			{
				beginFill(color);
				drawRect(0, 0, width, height);
				endFill();
			}
		}
	}
}

サンプルのダウンロード


ページトップへ