Tweenerで自作クラスのプロパティをtweenさせる

Tweenerではデフォルトで設定されている表示に関係するプロパティ(xとか_scaleとかBlur_blurXとか)以外にも、数値型であれば自作クラスのプロパティでもtweenできるみたい。サンプルではエリアをクリックすると、クリックした座標に向かって数値がtweenします。

Tweenerで自作クラスのプロパティをtweenさせる

参考にさせて頂いたページ

数値プロパティを持つクラスを作成します。座標値としてtweenさせたい_numXと_numYを設定するだけのクラス。

package 
{
	public class Position
	{
		public var _numX:int;
		public var _numY:int;
		
		public function Position():void {
			
		}
	}
	
}

メインのドキュメントクラスはこんな感じ。

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	
	import Position;

	import caurina.transitions.Tweener;

	public class Tweener001 extends Sprite
	{

		// tweenする対象
		private var posObj:Position;

		// 文字TextField
		private var x_str:TextField;
		private var y_str:TextField;
		private var now_str:TextField;
		private var arr_str:TextField;
		
		// 座標TextField
		private var x_now:TextField;
		private var y_now:TextField;
		private var x_arr:TextField;
		private var y_arr:TextField;
				
		//座標初期値
		private const DEFAULT_NUM:Number = 999;

		// コンストラクタ
		public function Tweener001():void {
			init();
		}
		
		private function init():void {
			
			//MOUSE_MOVEイベントのリスナーに登録
			stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
			//stageのCLICKイベントのリスナーに登録
			stage.addEventListener(MouseEvent.CLICK, stageClick);
			
			// tweenさせるObject作成
			posObj = new Position();			
			
			//文字TextFormat
			var strTF:TextFormat = new TextFormat();
			strTF.font = "Arial";
			strTF.size = "12";
			
			//文字TextField作成
			x_str = new TextField();
			y_str = new TextField();
			now_str = new TextField();
			arr_str = new TextField();
			
			//文字TextFieldを配列に追加
			var strArray:Array = new Array();
			strArray = [x_str, y_str, arr_str, now_str];
			
			//x、y座標指定
			x_str.x = 90;
			y_str.x = 190;
			x_str.y = y_str.y = 5;
			
			//Now、Arrival座標指定
			arr_str.x = now_str.x = 5;
			arr_str.y = 45;
			now_str.y = 105;
			
			for (var j:int = 0; j < strArray.length; j++)
			{
				strArray&#91;j&#93;.autoSize = TextFieldAutoSize.LEFT;
				strArray&#91;j&#93;.defaultTextFormat = strTF;
				addChild(strArray&#91;j&#93;);
			}
			
			x_str.text = "x";
			y_str.text = "y";
			arr_str.text = "arrival";
			now_str.text = "now";
			
			//座標TextFormat
			var posTF:TextFormat = new TextFormat();
			//tf.font = "Arial Black";
			posTF.font = "Arial";
			posTF.size = "50";
			
			//座標TextField作成
			x_arr = new TextField();
			y_arr = new TextField();
			x_now = new TextField();
			y_now = new TextField();
			
			//座標TextFieldを配列に追加
			var posArray:Array = new Array();
			posArray = &#91;x_arr, y_arr, x_now, y_now&#93;;
			
			for (var i:int = 0; i < posArray.length; i++)
			{
				posArray&#91;i&#93;.defaultTextFormat = posTF;
				posArray&#91;i&#93;.text = DEFAULT_NUM;
				
				//座標指定
				if (i % 2 == 0) {
					posArray&#91;i&#93;.x = 40;					
				} else {
					posArray&#91;i&#93;.x = 140;		
				}
				if (i < 2) {
					posArray&#91;i&#93;.y = 25;					
				} else {
					posArray&#91;i&#93;.y = 85;	
				}
				posArray&#91;i&#93;.autoSize = TextFieldAutoSize.RIGHT;
				addChild(posArray&#91;i&#93;);
			}
		}
		
		//mouseMoveすると座標更新
		private function mouseMove(e:MouseEvent) {
			x_arr.text = mouseX.toString();
			y_arr.text = mouseY.toString();
		}
		
		//stageClickでposObjの値をtweenさせる
		private function stageClick(e:MouseEvent) {
			Tweener.addTween(posObj, { _numX:mouseX, _numY:mouseY, time:3, delay:0, transition:"easeOutExpo",
				onStart:onStart, onUpdate:onTween, onUpdateParams:&#91;posObj&#93;, onComplete:onComp } );
		}
		
		//tween開始時イベント
		private function onStart() {
			trace("start");
			//MOUSE_MOVEイベントのリスナー削除 tween中は座標を取得しない
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
			//stageのCLICKイベントのリスナー削除 tween中はクリックしても反応しない
			stage.removeEventListener(MouseEvent.CLICK, stageClick);
		}
		
		//tween中イベント
		private function onTween(o:Object) {
			//posUpdate(o._numX, o._numY);
			
			//現在座標update
			x_now.text = o._numX.toString();
			y_now.text = o._numY.toString();
		}

		//tween終了後イベント
		private function onComp() {
			//MOUSE_MOVEイベントのリスナーに登録
			stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
			//stageのCLICKイベントのリスナーに登録
			stage.addEventListener(MouseEvent.CLICK, stageClick);
		}
	}
}
&#91;/as3&#93;
<p>PositionクラスのposObjを作成、stageをクリックするとposObjの_numX、_numYの値がtweenされます。また、onStart、onCompleteにはそれぞれイベントリスナーの設定をしています。</p>

Tweener.addTween(posObj, { _numX:mouseX, _numY:mouseY, time:3, delay:0, transition:"easeOutExpo",
				onUpdate:onTween, onUpdateParams:[posObj], onComplete:onComp } );