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

