第17回　3D風に回転するアニメーション

FLASH AS3

第17回←教材はこれ！

  • 3D風とな。
  • 奥に行って小さくなって手前で大きくなるとかそんな感じかな。
  • 当たってた。

インスタンスの幅やサイズを変えるには，DisplayObject.scaleXとDisplayObject.scaleYプロパティを使う。これらのプロパティは，[変形]パネルの幅と高さのスケールに当たる（図3）。ただし，単位はパーセンテージ（％）ではなく，実寸を1.0とする小数値であることに注意しよう。

  • 100%が1.0だから三角関数と相性良いのか。でも三角関数は負の値もあるから絶対値取る必要がありそう。

また，DisplayObject.scaleX/DisplayObject.scaleYプロパティの特色として，マイナスの値を与えるとインスタンスが反転する。だから，sin値をそのままプロパティに設定するだけでよいという訳だ。

  • なるほど！絶対値取る必要なく、負の値になったら方向変わるんだ！こりゃ相性ばっちりですな。
  • 仮想3次元でもっとも手前のスケールを1、奥で一番遠いところを0.8にするためにsinの値を変換する関数xGetIndexZ()を考える。

function xScale(eventObject:Event):void {
scaleX = scaleY = xGetIndexZ(0.8, 1);←最小値0.8から最大値1.0までのものとする
scaleX *= xGetIndexZ(-1, 1);　←Xだけ実際のsinの値を乗算
}

function xGetIndexZ(nMin:Number, nMax:Number):Number {
var nIndexZ:Number = (nMax-nMin)*(nSin+1)/2+nMin;
return nIndexZ;
}

// MovieClip: 回転するインスタンス
var nDegree:Number = 0;
var nRadian:Number = 0;
var nSpeed:Number = 5;
var nDegreeToRadian:Number = Math.PI/180;
var nCenterX:Number = stage.stageWidth/2;
var nCenterY:Number = stage.stageHeight/2;
var nRadiusX:Number = 100;
var nRadiusY:Number = 50;
var nCos:Number = Math.cos(nRadian);
var nSin:Number = Math.sin(nRadian);
addEventListener(Event.ENTER_FRAME, xMoveX);
addEventListener(Event.ENTER_FRAME, xMoveY);
addEventListener(Event.ENTER_FRAME, xScale);
addEventListener(Event.ENTER_FRAME, xUpdate);
function xMoveX(eventObject:Event):void {
x = nCenterX+nCos*nRadiusX;
}
function xMoveY(eventObject:Event):void {
y = nCenterY+nSin*nRadiusY;
}
function xScale(eventObject:Event):void {
scaleX = scaleY=xGetIndexZ(0.8, 1);
scaleX *= xGetIndexZ();　←引数指定なし！
}
function xUpdate(eventObject:Event):void {
nDegree += nSpeed;
nDegree = (nDegree%360+360)%360;
nRadian = nDegree*nDegreeToRadian;
nCos = Math.cos(nRadian);
nSin = Math.sin(nRadian);
}
function xGetIndexZ(nMin:Number=-1, nMax:Number=1):Number {
var nIndexZ:Number = (nMax-nMin)*(nSin+1)/2+nMin;
return nIndexZ;
}

  • 最後のxGetIndexZ関数でさりげに引数を定数として定義してる。
  • その前のxScale関数の中で引数指定なく呼び出されてるけど、この場合はあらかじめ定義されているものが使われる。
  • なるほどー。
  • そして今回は3ページ目もある！
  • なんとさらにぼかしまで加えると！
  • フィルタの適用手順。
    1. 配列（Array）インスタンスを作成する。
    2. フィルタインスタンスを作成する。
    3. フィルタインスタンスを配列インスタンスに格納する。
    4. インスタンスのDisplayObject.filtersプロパティに配列インスタンスを代入する。
  • ここでもまた配列が活躍。
  • そして脚注になにげに大切そうなことが！

配列はフィルタインスタンスを納めてからDisplayObject.filtersプロパティに設定する必要がある。プロパティに配列を設定した後で，配列にフィルタインスタンスを追加したり，エレメントのフィルタに変更を加えても，それらの操作はインスタンスにフィルタとして適用されない。

  • うーんなんとなく分かったような分からんようなー。
  • そしてぼかしを入れたいインスタンスのフレームアクションが以下。

var filters_array:Array = new Array();
var myBlur:BlurFilter = new BlurFilter();
filters_array.push(myBlur);
my_mc.filters = filters_array;

  • なんかめんどくさいねー。
  • 「push()」って何？格納用メソッド？
  • そしていきなりコンストラクタという用語が出てきた。知らない。調べたら先生の解説発見。関数と読み替えて問題なさそう。
  • ぼかしように書き足される関数が以下。

function xBlur(eventObject:Event):void {
var nBlur:Number = xGetIndexZ(4, 0);
var myBlur:BlurFilter = new BlurFilter(nBlur, nBlur/2);
filters = [myBlur];
}

  • xGetIndexZの引数が(4,0)となってる。単純に対応の関係か。
  • 第3ステートメントが分かりにくい。「[ ]」で囲むのはそういう書式かな？以下が解説。

第3ステートメントは，BlurFilterインスタンスを納めた配列のDisplayObject.filtersプロパティへの設定だ。前述のフィルタの適用手順では4つに分けたステップのうち，配列の作成とフィルタインスタンスの格納，およびそのDisplayObject.filtersプロパティへの設定の3つを，1つのステートメントで済ませている。

  • イマイチよくわかんないけど、filtersプロパティ全体がよくわかんないからしょうがない。
  • とりあえずこんなことできるんだなーくらいで覚えておこう。