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

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

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

前回の第16回三角関数を使った楕円軌道のアニメーションでは,インスタンスが楕円軌道でアニメーションするフレームアクションを作成した。今回はそのスクリプトに手を加えて,遠近感のある3D風の回転を表現してみたい。

簡易なパースペクティブを与える

前回作成したスクリプト16-4は,第16回の2ページ目からダウンロードできる。ここまでの段階では,インスタンスがただ楕円軌道を描いて回転するだけだ。なお,フレームアクションに確認用に挿入したtrace()関数のステートメントは,コメントアウト(コメント区切り記号で無効化)した。また,この後のアニメーション表現の都合で,インスタンスのイラストは左向きとする図1)。

図1 インスタンスが楕円軌道を描いて回転する

図1 インスタンスが楕円軌道を描いて回転する

「パースペクティブ」(perspective)とは遠近法を意味する(「パース」と略されることもある)。もっとも,今回はごく簡易な表現で済ませる。修正点はふたつだ。第1に,インスタンスは平面をイメージして,楕円軌道の両端に近づくほど幅を狭くする。第2は,楕円軌道の上を3次元の奥とみなし,上にいくほどインスタンスのサイズを小さくする図2)。

図2 端にいくほど幅は狭く上にいくほどサイズを小さく

図2 端にいくほど幅は狭く上にいくほどサイズを小さく

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

図3 [変形]パネルの幅と高さのスケール

図3 [変形]パネルの幅と高さのスケール

遠近感を与えるためのスケールの変更は,新たな関数xScale()を定義して処理することにする。もちろん,この関数もインスタンスのDisplayObject.enterFrameイベント(定数Event.ENTER_FRAME)にリスナーとして加える。まず,第1の幅を変化させる処理から書いていこうスクリプト1)。

スクリプト1 楕円軌道の端にいくほどインスタンスの幅を狭める

// 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 = nSin;
}
function xUpdate(eventObject:Event):void {
  nDegree += nSpeed;
  nDegree = (nDegree%360+360)%360;
  nRadian = nDegree*nDegreeToRadian;
  nCos = Math.cos(nRadian);
  nSin = Math.sin(nRadian);
}

[ムービープレビュー]を見ると,インスタンスは楕円軌道の端にいくほど幅が狭くなる図4)。新たに定義した関数xScale()の処理はというと,DisplayObject.scaleXプロパティに単にsin値(nSin)を設定しているだけだスクリプト1)。

図4 楕円軌道の端にいくほどインスタンスの幅が狭まる

図4 楕円軌道の端にいくほどインスタンスの幅が狭まる

sinの値の変化は,インスタンスの垂直方向の座標に比例係数として与えた。そして,垂直方向の最下部で最大値1,最上部で-1の値を取った。さらに,楕円軌道の両端になる,垂直方向の中央で値は0になる。忘れてしまった読者は,前回の解説をもう1度読んでほしい。また,DisplayObject.scaleX/DisplayObject.scaleYプロパティの特色として,マイナスの値を与えるとインスタンスが反転する。だから,sin値をそのままプロパティに設定するだけでよいという訳だ。

※1
幅と高さをピクセル単位で指定する場合には,DisplayObject.widthとDisplayObject.heightプロパティを使う。

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入