cellfusion blog

いままで Sprite でズーム表現をするためには、Flash で下記のように基準点を中心に持ってくるか、Sprite を入れ子にするという方法を使ってたんだけど。

それってどうしても一手間かかるし、何よりも基準点を移動させると AS で弄るときに座標系が混乱してくるのでどうにか方法はないのかなと探っていたら DisplayObject.transform.matrix を使うと左上が基準点でもオブジェクトの真ん中を基準として動かす事ができた！

コードは下記の通り

package  
{
	import flash.display.Sprite;
	import flash.geom.Matrix;
	import flash.geom.Transform;	
	
	public class TransformTest extends Sprite 
	{
		private var _sp:Sprite;
		
		public function TransformTest()
		{
			_sp = new Sprite();
			_sp.x = 150;
			_sp.y = 150;
			
			// 四角形を作る
			_sp.graphics.beginFill(0x000000);
			_sp.graphics.drawRect(0, 0, 100, 100);
			_sp.graphics.endFill();
			
			// 基準点をわかりやすくするために左上に赤い矩形を作る
			_sp.graphics.beginFill(0xFF0000);
			_sp.graphics.drawRect(0, 0, 5, 5);
			_sp.graphics.endFill();
			
			// 変換用の Matrix を準備
			var mat:Matrix = new Matrix();
			
			// 回転の中心点を変えるために -50 する
			mat.translate(-50, -50);
			
			// 回転する
			mat.rotate(45*Math.PI/180);
			
			// 元の位置に戻す
			mat.translate(50, 50);
			
			// 現在表示している matrix と合体させる
			mat.concat(_sp.transform.matrix);
			
			trace("before:"+_sp.transform.matrix);
			
			// 中心点で回転させるための Matrix を反映する
			_sp.transform.matrix = mat;
			
			trace("after:"+_sp.transform.matrix);
			trace("rotation:"+_sp.rotation);
			
			addChild(_sp);
		}
	}
}

特殊なのが

_sp.transform.matrix = mat;

の部分。直接いじれないので、別に Matrix を作成して合成して反映している。ココ以外は Matrix の使い方を知っていればそのままの知識が使える。

DisplayObject.transform.matrix を使う事で Sprite 関係は基本的に左上を基準点として作成すれば座標系で混乱する事もなるし、今まで以上にアニメーションの幅も広がるよね。

ちょっと上のコードだと動いてるのかわかりにくいので、enterFrame でくるくる回してみた。

package  
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Matrix;	
	
	public class TransformEnterFrame extends Sprite 
	{
		private var _sp:Sprite;

		public function TransformEnterFrame()
		{
			_sp = new Sprite();
			_sp.x = 150;
			_sp.y = 150;
			
			// 四角形を作る
			_sp.graphics.beginFill(0x000000);
			_sp.graphics.drawRect(0, 0, 100, 100);
			_sp.graphics.endFill();
			
			// 基準点をわかりやすくするために左上に赤い矩形を作る
			_sp.graphics.beginFill(0xFF0000);
			_sp.graphics.drawRect(0, 0, 5, 5);
			_sp.graphics.endFill();
			
			addEventListener(Event.ENTER_FRAME,	enterframeHandler);
			
			addChild(_sp);
		}
		
		private function enterframeHandler(event:Event):void
		{
			var mat:Matrix = new Matrix();
			mat.translate(-50, -50);
			
			// 5°ずつ回転させる
			mat.rotate(5*Math.PI/180);
			
			mat.translate(50, 50);
			mat.concat(_sp.transform.matrix);
			_sp.transform.matrix = mat;
			
			// 座標がどうなっているのか trace
//			trace("x:"+_sp.x, "y:"+_sp.y);
		}
	}
}

これでオブジェクトの基準点じゃなくて、中心で回ってるのがよくわかると思う。

transform.matrix は Flash8 くらいからあるので、AS2.0 を使っている人でも同じ使い方で使用できると思う。

今回の サンプルファイル

他には fl.motion.MatrixTransformer とか使ってもできそうな感じ。後でこいつも触ってみよう。

Tweener でこのプロパティを使いたい場合は fladdict さんの MatrixShortcut.as を使うといいよ！
fladdict» ブログアーカイブ » Tweener拡張で、MovieClipをMatrixで超変形をできるようにした