ActionScript 3.0で始めるオブジェクト指向スクリプティング

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

この記事を読むのに必要な時間:およそ 5 分

つぎに,第2のインスタンスのサイズを変える処理である。DisplayObject.scaleXとDisplayObject.scaleYの両プロパティの値を変える。インスタンスの大きさも,やはり垂直方向の座標に比例すべきなので,sin値が使えそうだ。仮想の3次元でもっとも手前となる楕円軌道の最下部が1,一番奥の最上部のとき0.8にサイズを設定することにしよう。

そこで,sin値に比例した一定の範囲の値を返す関数があると便利だ。関数名をxGetIndexZ()とし,必要な垂直方向最上部(sinが-1のとき)の値と最下部(sinが1のとき)の値を,ふたつの引数として渡す。すると,関数xScale()はつぎのように記述すればよいことになる。

    function xScale(eventObject:Event):void {
      scaleX = scaleY = xGetIndexZ(0.8, 1);
      scaleX *= xGetIndexZ(-1, 1);
    }

関数xScale()本体の第1ステートメントでは,xGetIndexZ()関数により,垂直位置に応じてインスタンスを最上部0.8から最下部1.0のスケールに設定する。関数の戻り値をふたつのプロパティDisplayObject.scaleXとDisplayObject.scaleYに代入する式は1行で記述した。各プロパティには,最右辺の関数xGetIndexZ()から返される値が設定される。

第2ステートメントも,右辺はxGetIndexZ()関数を呼出すことにした。引数が-1と1なので,nSinと値は同じになる。ただし,プロパティへの値の設定に,乗算後代入演算子*=を使っていることに注意してほしい。第1ステートメントのサイズをもとに,さらに水平方向スケールを変える必要があるからだ。

関数xGetIndexZ()の定義は,以下のようになる。sinは±1の範囲の値をとるので,1を足して2で割れば0から1までの値になる。それに,引数で渡された最小値から最大値までの値の幅を乗じ,最小値を加えることで,求める数値が得られる。

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

以上の修正を加えて,楕円軌道の上にいくほどインスタンスのサイズを小さくするようにしたのが,つぎのスクリプト2だ。

スクリプト2 楕円軌道の上にいくほどインスタンスのサイズを小さくする

// 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;
}

このスクリプト2には,補足がひとつある。関数xGetIndexZ()の引数に,代入演算子で値-1と1が指定されていることだ。この引数に用いられた代入演算子は,デフォルト値の設定になる。つまり,引数の数が足りなければ,そのデフォルト値が引き数として補われる。そして,関数xScale()本体の第2ステートメントでは,引数なしで xGetIndexZ()が呼出されている。すると,ふたつの引数のデフォルト値-1と1が渡されたものとして処理が行われるのだ。

[ムービープレビュー]を確かめると,楕円軌道の端にいくほどインスタンスの幅は狭く上にいくほどサイズが小さくなって回転するアニメーションが実行される図5)⁠

図5 楕円軌道の端にいくほどインスタンスの幅は狭く上にいくほどサイズが小さくなる

図5 楕円軌道の端にいくほどインスタンスの幅は狭く上にいくほどサイズが小さくなる

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書