７．画像を変形させてみる２
Matrixって何？
ところで、先ほどは見よう見まねでパラメータをいじってなんとか変形させただけですが、、、Ｍａｔｒｉｘって何？
この設定しているａ，ｂ，ｃ，ｄ，ｔｘ，ｔｙって何のこと？
という疑問が湧き出てきますが、参考サイト（Flashゲーム講座＆ASサンプル集）の説明がよくわかります。
特にこの赤と青のベクトルを書いた説明図が素晴らしいです。
この説明図を見てから勉強するとより一層理解しやすいのではないかと思います。
あ、画像は本文とは関係ありません（＾＾；
やりたいのは
結局やりたいのは図にあるように、角度βを与えて変形させる、というものなんです。
なぜって、、、うーーん、その方が今後楽だから、、、というわたくしの身勝手な理由であります。深く突っ込まないで下さい。（＾＾；
では、先ほどのＭａｔｒｉｘの要素をどう与えればいいのか？
Adobe Flex2 リファレンスガイドのＭａｔｒｉｘクラスをよく見つつ考えると、、、
とりあえず、拡大、縮小は無視する、として。
ｔｘ，ｔｙは気にしなくていいし、、、
ｃ，ｄは０，１でいいし、、、
では、ａ，ｂの値は、、
θ＝９０−βとすれば、
cosθと-sinθでいいことになる、ということで以下のスクリプト。
//test.as 画像変形テスト２
package {
import flash.display.*;
import flash.events.*;
import flash.net.URLRequest;
import flash.geom.Matrix;
public class test extends Sprite {//クラス宣言
private var message:messagebox;
private var img:Loader;
private var beta:Number=0;//■
public function test(){//コンストラクタ
message = new messagebox();
addChild(message.container);
var tURL:String = "testimg2.swf";
var urImage:URLRequest = new URLRequest(tURL);
img = new Loader();
img.load(urImage);
img.x=100;
img.y=150;
addChild(img);
addEventListener(Event.ENTER_FRAME, loading);
}
private function loading(event:Event):void {//画像読み込み
message.show("READING-"+img.contentLoaderInfo.bytesLoaded+
"/"+img.contentLoaderInfo.bytesTotal);
var rate:Number=img.contentLoaderInfo.bytesLoaded/
img.contentLoaderInfo.bytesTotal;
if ( (rate >= 1)&&(img.contentLoaderInfo.bytesTotal > 100) ){
message.show("COMPLETE!");
removeEventListener( Event.ENTER_FRAME, loading );
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
}
private function onEnterFrame(evt:Event):void {//■
beta+=1;
message.show("beta="+beta+"度");
var theta:Number=90-beta;
var vx:Number=Math.cos(theta/180*Math.PI);
var vy:Number=-Math.sin(theta/180*Math.PI);
//マトリックス
var myMatrix:Matrix = img.transform.matrix;
myMatrix.tx = 100;
myMatrix.ty = 150;
myMatrix.a = vx;
myMatrix.b = vy;
myMatrix.c = 0;
myMatrix.d = 1;
img.transform.matrix = myMatrix;
}
}
}
package {
import flash.display.*;
import flash.events.*;
import flash.net.URLRequest;
import flash.geom.Matrix;
public class test extends Sprite {//クラス宣言
private var message:messagebox;
private var img:Loader;
private var beta:Number=0;//■
public function test(){//コンストラクタ
message = new messagebox();
addChild(message.container);
var tURL:String = "testimg2.swf";
var urImage:URLRequest = new URLRequest(tURL);
img = new Loader();
img.load(urImage);
img.x=100;
img.y=150;
addChild(img);
addEventListener(Event.ENTER_FRAME, loading);
}
private function loading(event:Event):void {//画像読み込み
message.show("READING-"+img.contentLoaderInfo.bytesLoaded+
"/"+img.contentLoaderInfo.bytesTotal);
var rate:Number=img.contentLoaderInfo.bytesLoaded/
img.contentLoaderInfo.bytesTotal;
if ( (rate >= 1)&&(img.contentLoaderInfo.bytesTotal > 100) ){
message.show("COMPLETE!");
removeEventListener( Event.ENTER_FRAME, loading );
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
}
private function onEnterFrame(evt:Event):void {//■
beta+=1;
message.show("beta="+beta+"度");
var theta:Number=90-beta;
var vx:Number=Math.cos(theta/180*Math.PI);
var vy:Number=-Math.sin(theta/180*Math.PI);
//マトリックス
var myMatrix:Matrix = img.transform.matrix;
myMatrix.tx = 100;
myMatrix.ty = 150;
myMatrix.a = vx;
myMatrix.b = vy;
myMatrix.c = 0;
myMatrix.d = 1;
img.transform.matrix = myMatrix;
}
}
}
■の所が主に変わった部分です。
リファレンスだとｂはtanの値なので、角度が９０度などでは値を持てないと思いますが、実行時にエラー出して止まる、なんてことはないようです。ありがたや。