「(49)ムービークリップの変形にMatrixを使ってみる 」でMatrixの使い方の入門編を勉強したが、今回は第2弾としてその応用例を勉強したいと思う。 ここで示す例は、写真を水平方向に連続反転させ、しかも同時に傾斜効果を付与することで、y軸を中心に回転している写真を斜め上からみているような効果を出している。 この効果は、モーショントゥイーンの「(6)反転 」で示したように、タイムラインにモーショントゥイーンを作成することで達成できるが、数多いムービークリップにこの効果を付与することは大変な作業となる。 今回のようにMatrixを使ったスクリプトでこれを行うとずっと楽になることは言うまでもない。
連続反転のスクリプト
「挿入」「新規シンボル」でイメージ(ここではBachの写真)を基準点を中心にして配置、シンボル名、リンケージ名を設定する。
ここでは、シンボル名、リンケージ名:sp1
import flash.geom.Matrix;
var rd = 0;
var speed = 0.05*Math.PI;
onEnterFrame = function () {
mc = attachMovie("sp1", "sp1", 1);
rd += speed;
var a = -1*Math.sin(rd);
var b = 0.5*Math.cos(rd);
var myMatrix:Matrix =
new Matrix(a, b, 0, 1, 75, 105);
mc.transform.matrix = myMatrix;
};
Matrixクラスのインポート
変化量の初期化
フレーム当たりの変化量の設定
イメージのインスタンス化
dにフレーム毎にspeedを加える
Matrixのa値にsin値を設定し回転をかける(時計回り)
b値にcos値を設定し傾斜をかける(傾斜度0.5)
適用Matrixの定義
ムービークリップに上記Matrixをセット
Matrixのa,b値については、「(49)ムービークリップの変形にMatrixを使ってみる 」を参照のこと
連続反転でイメージの切り替え
●150*200、背景色黒、12fpsのステージを用意
●画面上部に作曲家名を表示させるためのダイナミックテキストボックスを配置、インスタンス名をnameBoxとする。
FONT、色、サイズなどは好みで決める
●上記同様、10枚の写真をライブラリーに格納、リンケージ名をsp1,,,,sp10とする。ここでは、102*130の写真10枚。
import flash.geom.Matrix;
var composer:Array=new Array("Bach","Handel","Beethoven","Mozart","Brahms","Chopin",
"Schumann","Tchaicovsky","Mendelssohn","Shostakovich");
var rd = 0;
var n = 1;
var speed = 0.05*Math.PI;
onEnterFrame = function () {
if (n>10) {
n = 1;
} else {
mc = attachMovie("sp"+n, "sp"+n, 1);
nameBox.text = "";
}
if (rd>=Math.PI) {
rd = 0;
n++;
}
rd += speed;
var a = -1*Math.sin(rd);
var b = 0.5*Math.cos(rd);
var myMatrix:Matrix = new Matrix(a, b, 0, 1, 75, 105);
mc.onRollOver = function() {
rd += (1/3*Math.PI-rd)/3;
nameBox.text = composer[n-1];
};
mc.onPress = function() {
//ここにswitch文などを使って、getURLなどのイベントを記述する
}
mc.transform.matrix = myMatrix;
};
スクリプトの説明
●if (rd>=Math.PI) { rd = 0; n++; }
もし積算変化量(ラジアン)が、π(180度)になったら、rdを0に戻し、nに1を加える(写真番号を次へ)
● rd += (1/3*Math.PI-rd)/3;
(ロールオーバー時に、)rdを1/3πとなるように減速変化させる(写真が正面を向く)
●nameBox.text = composer[n-1];
ダイナミックテキストボックスに該当する作曲家の名前を表示させる
●mc.onPress = function() { ******** }
写真をクリックした時のイベントスクリプトを******部に記載する
たとえば、 swich(n) { case 1: getURL("*******"); break; } などとcase1からcase10までを記述すると、
それぞれの指定URLに飛ばすことができる
HOME お勉強総リスト