FLASHのお勉強_アクションスクリプトaction script

FLASHのお勉強　ーアクションスクリプトの実践的事始めー

(49) ムービークリップの変形にMatrixを使ってみる 　　200７/10/2

「flash.geom.Matrix クラス」と言うと、一般のFLASHユーザーにはなじみが薄い存在なのではなかろうか。　Matrixを日本語に直訳すると「行列」となり、どうも近づかない方が無難かなと言う気になってしまう。　このサイトの以前のお勉強「BitmapData クラスを使って画像をスライス」で写真の一部を切り抜くときにMatrixを使ったが、本来は、BitmapDataを変換したり設定すると同時にグラフィカルな形態を変換するのに威力を発揮するものだろうと思う。　今回のお勉強では、このMatrixの使い方の入門として、話を簡単にするため、ムービークリップに適用した例を示したいと思う。　

Matrixの設定方法

まず、Matrixオブジェクトのプロパティには・・・・、などと堅苦しい説明は抜きにして、Matrixで設定できるものには、平行移動、回転、拡大縮小、歪曲(傾斜)などがある。　これらを設定するのに3列、2行の行列を使うが、Matrix（a,b,c,d,tx,ty）と言う風に定義すればよい。　ここで、プロパティ　a, b, c, d, tx, ty に数値を設定することで移動、回転などの変形が設定されることになる。ムービークリップ（mc）にこの設定を反映させるには、以下のようにすればよい。

var myMatrix:Matrix = new Matrix(a,b,c,d,tx,ty);
mc.transform.matrix = myMatrix;

ここで、ムービークリップとして、広島カープの球団マスコットの「スライリー（slyly）」君に登場願おう。　ｓｌｙｌｙ君の写真をシンボルに変換し、リンケージを同名で設定する。　後述のスクリプトのように、slylyをステージにattachMovieすると、座標(0,0)に表示されるが、これを例えば（100,100）に移動させるには、

import flash.geom.Matrix;
attachMovie("slyly","slyly",1);
var myMatrix:Matrix = new Matrix(1,0,0,1,100,100);
slyly.transform.matrix = myMatrix;

ここで、プロパティーの a, d は_xscale, _yscale に相当し、1が100%に相当する。　tx, ty　はそれぞれ、x軸、y軸方向の平行移動pix値である。　b, c は歪曲(傾斜)をセットするのに使う。　なお、平行移動、拡大縮小、回転にはそれぞれ、translate、scale、rotateというメソッドが用意されていて、これを使って設定する方法もあり、特に回転はこれを使った方が分かりやすい。

ここでは、Matrix(a,b,c,d,tx,ty)で定義する方法で、例を以下に示す。


Matrix(1,0,0,1,100,100)	Matrix(0.5,0,0,1,100,100)	Matrix(1,1,0,1,100,100)	Matrix(1,1,-1,0.5,100,100)

Matrixを使ってスライリーを酔わせる

それでは、スラーリー君をSWING運動で酔わせてみよう。右にスクリプトを示した。
各プロパティーを、sin あるいは cos で0-1の間で振幅運動させている。　***Factorはその振幅の大きさに相当する。

import flash.geom.Matrix;
attachMovie("slyly", "slyly", 1);
slyly._x = 120;
slyly._y = 120;
var speed = 0.2;
var changeValue = 0;
rotationFactor = 60;
var scaleFactor = 0.3;
var skewFactor = 0.2;
onEnterFrame = function () {
  changeValue += speed;
  tx = 150+rotationFactor*Math.sin(changeValue/2);
  ty = 150+rotationFactor*Math.sin(changeValue/4);
  a = 1+scaleFactor*Math.sin(changeValue);
  d = 1+scaleFactor*Math.cos(changeValue);
  b = skewFactor*Math.sin(changeValue);
  c = skewFactor*Math.cos(changeValue);
  var matrix:Matrix = new Matrix(a, b, c, d, tx, ty);
  slyly.transform.matrix = matrix;
};

さらに、Matrixを設定したslylyを入れ子にしたムービークリップ slyly_mc に通常のアクションを付与してみた例を以下に示す。
slyly_mcは、新規ファイルに「挿入」「新規シンボル」でslyly_mcを作成、上記のファイルからslylyとscriptをコピー・ペイストして作成する。
_root, FRAME1に以下のスクリプトを書き込む。
上記 slyly を登場させて、getTimer() を使って10.5秒間漂わせたのち、scale を0に近づけると同時に、遠くに移動させている。　この動きを setInterval を使って繰り返している。　秒数などの数値は、適当に設定している。

function slyly_mc_action() {
  attachMovie("slyly_mc", "slyly_mc", 1);
  with (slyly_mc) {
    _x = -100;
    _y = -100;
    var lap = getTimer();
    onEnterFrame = function () {
      _x += (0-_x)/10;
      _y += (0-_y)/10;
      if (getTimer()-lap>10500) {
        _xscale += (0-_xscale)/20;
        _yscale += (0-_yscale)/20;
        _x += (600-_x)/20;
      }
    };
  }
}
slyly_mc_action();
id = setInterval(slyly_mc_action, 16000);

最後に slyly　を回転させてみよう。　回転は、a,b,c,d の4つのプロパティーが関係してくるが、これらを設定するよりも、メソッドの rotate を使う方がやりやすい。　ムービークリップslylyの基準点を真中にしておくと、中心を基準に回転する。　slyly の座標配置は、Matrixの設定が終わってから行う。

import flash.geom.Matrix;
attachMovie("slyly", "slyly", 1);
var rad = 0;
onEnterFrame = function() {
  rad += 30;
  var myMatrix:Matrix = new Matrix();
  myMatrix.rotate(rad/180*Math.PI);
  slyly.transform.matrix = myMatrix;
  slyly._x=120;
  slyly._y=120;
}

HOME　　　お勉強総リスト

FLASHのお勉強 ーアクションスクリプトの実践的事始めー

FLASHのお勉強　ーアクションスクリプトの実践的事始めー