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

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

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

ダイナミックにぼかしを加える

Flash CS3でムービー作成(「オーサリング」ともいう)のときに,[プロパティ]インスペクタの[フィルタ]タブを用いて,インスタンスにフィルタを適用することができる図6)⁠ActionScriptを使うと,適用するフィルタの種類やパラメータをダイナミックに設定・変更することが可能だ。楕円軌道のアニメーションで仮想3Dの奥,つまり軌道上部にいくほどぼかしを加えれば,遠近感がより増してくる。

図6 [プロパティ]インスペクタの[フィルタ]タブでぼかしフィルタを適用したインスタンス

図6 [プロパティ]インスペクタの[フィルタ]タブでぼかしフィルタを適用したインスタンス

スクリプトでぼかしフィルタを適用するには,BlurFilterクラスを用いる。ぼかしフィルタ(BlurFilter)にかぎらず,スクリプトでフィルタを適用するには,基本的につぎの4つの手順が必要だ。

フィルタの適用手順
  1. 配列(Array)インスタンスを作成する。
  2. フィルタインスタンスを作成する。
  3. フィルタインスタンスを配列インスタンスに格納する。
  4. インスタンスのDisplayObject.filtersプロパティに配列インスタンスを代入する※2)⁠

たとえば,タイムラインにMovieClipインスタンスmy_mcが配置されているとき,そのインスタンスにぼかしフィルタをかけるには,つぎのようなフレームアクションを記述する。

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

BlurFilterクラスのコンストラクタには,引数が指定できる(オプション)⁠第1引数が水平方向,第2引数は垂直方向のぼかし量だ※3)⁠省略すると,ともにデフォルト値の4が適用される。

前掲フレームアクション(スクリプト2)に新たな関数xBlur()を定義して,インスタンスに対してその垂直位置で変化するぼかしを与えてみよう。この関数も,インスタンスのDisplayObject.enterFrameイベント(定数Event.ENTER_FRAME)のリスナーに加えるスクリプト3)⁠

スクリプト3 垂直位置でぼかしを変化させるフレームアクション

// 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, xBlur);   // 追加
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 xBlur(eventObject:Event):void {   // 追加
  var nBlur:Number = xGetIndexZ(4, 0);
  var myBlur:BlurFilter = new BlurFilter(nBlur, nBlur/2);
  filters = [myBlur];
}
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;
}

ぼけ幅は回転のアニメーションの最前面(軌道最下部)は0,最背面(軌道最上部)を4として,インスタンスの垂直位置に応じて変える。そこで,関数xBlur()本体の第1ステートメントでは,4と0を引数としてxGetIndexZ()関数を呼出し,ぼけ幅の値を得ている。

第2ステートメントは,そのぼけ幅の値をBlurFilter()コンストラクタの引数に渡して,ぼかしフィルタのインスタンスを作成する。ただし,水平に回転する想定のアニメーションなので,垂直方向のぼけ幅(第2引数)は値を半分にした。

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

[ムービープレビュー]でアニメーションを実行すると,楕円軌道の上部にいくほどぼかしがかかり,焦点がずれたような遠近感の効果を与える図7)⁠

図7 BlurFilterクラスによるぼかしの効果で遠近感を出す

図7 BlurFilterクラスによるぼかしの効果で遠近感を出す

次回からは,クラスを自分で定義する「カスタムクラス」について解説する。いよいよ本格的なプログラミングの考え方を学習することになる。

※2
配列はフィルタインスタンスを納めてからDisplayObject.filtersプロパティに設定する必要がある。プロパティに配列を設定した後で,配列にフィルタインスタンスを追加したり,エレメントのフィルタに変更を加えても,それらの操作はインスタンスにフィルタとして適用されない。
※3
第3引数には,ぼかしの品質として正の整数を指定できる。BlurFilterQualityクラスの定数を用いるのがよい。デフォルトは低品質の1(BlurFilterQuality.LOW)⁠
※4
エレメントの納められた配列インスタンスを配列アクセス演算子[]により直接作成する方法については,第15回配列を使ったキーコードとプロパティの扱い「配列と配列エレメントの扱い」を参照してほしい。
なお,変数(プロパティ)や関数(メソッド)から値を取出すのでなく,このように直接プログラムに記述される値は「リテラル」という。

今回解説した次のサンプルファイルがダウンロードできます。

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書