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

ActionScript3.0 — Tags: , — chimanaco @ 11:30 AM このエントリをはてなブックマークに追加

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[j].autoSize = TextFieldAutoSize.LEFT;
				strArray[j].defaultTextFormat = strTF;
				addChild(strArray[j]);
			}

			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 = [x_arr, y_arr, x_now, y_now];

			for (var i:int = 0; i < posArray.length; i++)
			{
				posArray[i].defaultTextFormat = posTF;
				posArray[i].text = DEFAULT_NUM;

				//座標指定
				if (i % 2 == 0) {
					posArray[i].x = 40;
				} else {
					posArray[i].x = 140;
				}
				if (i < 2) {
					posArray[i].y = 25;
				} else {
					posArray[i].y = 85;
				}
				posArray[i].autoSize = TextFieldAutoSize.RIGHT;
				addChild(posArray[i]);
			}
		}

		//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:[posObj], 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);
		}
	}
}

PositionクラスのposObjを作成、stageをクリックするとposObjの_numX、_numYの値がtweenされます。また、onStart、onCompleteにはそれぞれイベントリスナーの設定をしています。

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

0 Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

Comments links could be nofollow free.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2010 chimanaco blog | powered by WordPress with Barecity