ActionScript 3.0｜ランダムな動きをする光のFLASHアニメーションチュートリアル

【完成図】今回のお題はこんな感じです。

【ステップ1 - 概要】

今回、エフェクト全体を1箇所で操作できるクラスを作ります。
そのクラスをcallするだけで、光の数・色・透明度・サイズ・方向・スピード・ぼかしの質感の全てをお好みに変える事ができます。
なので、色々な光のバリエーションでFLASHアニメーションを簡単に作ることが可能です。

【ステップ2 - FLASHドキュメント作成】

ファイル＞新規＞『Flashファイル（AS3.0）』を選択。

お好みのステージサイズ・フレームレートを設定します。
（*今回は、サイズ：600×300px、フレームレート：25fpsにしました。）

【ステップ3 - 背景作成】

短形ツールで長方形を描き、青色のグラデーションをかけます。（#02C7FB〜#1F63B4）

【ステップ4 - レイヤー】

最初のレイヤー名を『Background』に変更し、その上に新規レイヤー『Code』を追加してロックしておきます。

【ステップ5 - 作業ファイル保存】

ここまでのFlashファイルを保存します。（ファイル名：Frothy_Lights.fla）

ここからは、ASコードを書く訳ですが、不明なコードはFlashヘルプ（F1）を参照して下さい。

ファイル＞新規＞『ActionScript（AS）ファイル』を選択。

【ステップ6 - 必要なクラスをインポート】

今回使うクラスをインポートします。
注意："package" の右隣の名称は、このASファイルを保存するフォルダ名と必ず同じにして下さい。
（今回は『Classes』フォルダにしました。）

package Classes

{

　/*必要なクラスのインポート*/

　import flash.display.MovieClip;

　import flash.filters.BitmapFilter;

　import flash.filters.BlurFilter;

　import flash.events.Event;

【ステップ7 - クラスの拡張】

ムービークリップクラスを拡張する事により、ムービークリップの持つ『メソッド』『プロパティ』『関数』の全てを、作業中のクラスに継承する事ができます。
今回は、 addChild() メソッドへアクセスするために使います。

//addChild() メソッドを使うためのクラスの拡張

  public class Lights extends MovieClip  

{

【ステップ8 - 変数】

分かりやすいように各変数にコメントをつけます。
これらの変数の値は、次の【ステップ9 - メイン関数】のパラメータから取得します。

/*変数*/

　private var lightsNumber:int; //ステージ上の"光"の数

　private var xSpeed:int; //"光"の水平移動スピード

　private var ySpeed:int; //"光"の垂直移動スピード

　private var lightsDir:String; //"光"の進む方向 - 『上、下、左、右』

　private var areaW:int; //"光"エフェクトのかかるエリアの『横幅』

　private var areaH:int; //"光"エフェクトのかかるエリアの『縦幅』

　private var lights:Array = new Array(); //この配列は、全ての"光"ムービークリップを格納するので、生成するfor文の外でも使用可能。

【ステップ9 - メイン関数】

光のエフェクトをかけるために必要なメイン関数です。
また、このコードの中に【ステップ8 - 変数】の値も設定します。

/*メイン関数*/

　public function init(areaWidth:int, areaHeight:int, numberOfLights:int, lightSize:int, lightColor:uint, minimumScale:Number, hSpeed:int, vSpeed:int, dir:String, quality:int):void

{

 

　/*変数の設定*/

　areaW = areaWidth;

　areaH = areaHeight;

　lightsNumber = numberOfLights;

　lightsDir = dir;

【ステップ10 - 光のエフェクトを作る】

ここでは、ユーザーがパラメータにセットしランダムに計算した数の光を生成するため、 "For" 文を使ってコードを書きます。

/*for文を使ったパラメータの生成 - 指定された"光"の数*/

　for (var i:int = 0; i < numberOfLights; i++)

　{

 

　　/*指定された光の数の生成*/

　　var light:MovieClip = new MovieClip();

 

　　/*パラメータに基づいた、xとyのランダムなスピードを設定*/

 

　　xSpeed = Math.floor((Math.random() * (hSpeed - -hSpeed + 1)) + -hSpeed);

　　ySpeed = Math.round((Math.random() * vSpeed) + 0.5);

 

　　light.xSpeed = xSpeed;

　　light.ySpeed = ySpeed;

 

　　/*光を生成（描画）する*/

　　light.graphics.beginFill(lightColor);

　　light.graphics.drawCircle(0, 0, lightSize / 2);

　　light.graphics.endFill();

【ステップ11 - 位置】

ここではエリアパラメータに基づいてランダムな光のスタート位置を設定します。

/*指定されたパラメータに基づいた位置の設定*/

　light.x = Math.floor(Math.random() * areaWidth);

　light.y = Math.floor(Math.random() * areaHeight);

【ステップ12 - ぼかしフィルター】

下のコードでぼかしをかけます。
注意：このコードはまだ "For" 文の一部です。なので、光にはそれぞれ異なったぼかしがかけられます。

/*ぼかしの追加｜ここで全ての"光"に新しくぼかしをかける宣言をする*/

　var b:int = Math.floor(Math.random() * 10) + 5;//ぼかし具合をランダムにする

　var blur:BitmapFilter = new BlurFilter(b,b,quality);//ぼかしフィルターを作成

　var filterArray:Array = new Array(blur);//フィルタは配列になります。

　light.filters = filterArray;

【ステップ13 - 透明度】

0.1〜0.6の間で透明度を設定します。

/*アルファの数値を変更*/

　light.alpha = Math.random() * 0.6 + 0.1;

【ステップ14 - スケール】

ここではオリジナルサイズから最小サイズまでの間の引数（パラメータ）で、光のスケールを設定します。

/*スケール*/

　light.scaleX = Math.round(((Math.random() * (1 - minimumScale)) + minimumScale) * 100) / 100;

　light.scaleY = light.scaleX;

【ステップ15 - 光をステージに追加】

ステージに光を追加して、後で使うために配列に格納します。また光がどの方向に進むかを見るため、checkDirection 関数を使います。

/*光を追加する*/

 

　addChild(light);

 

　/*後で使うため、配列に光を格納*/

　lights.push(light);

 

　/*光の方向をチェック*/

　checkDirection();

【ステップ16 - 方向チェック関数】

配列の中の光すべてにアクセスするため "For" 文を使います。そして光の動く場所を決めるため、4方向の変数（up,down,right,left）をチェックします。
それぞれに対応する関数へ追加したイベントリスナーの方向ごとに設定します。

 /*initの際に渡された方向をチェック*/

 

private function checkDirection():void

{

//配列「lights」に格納されているムービークリップ「light」の数分forループ、それぞれにイベントをつける。

for (var i:int = 0; i < lights.length; i++)

{

　switch ( lightsDir )

　{

　　case "up" :

　　　lights[i].addEventListener(Event.ENTER_FRAME, moveUp);

　　　break;

 

　　case "down" :

　　　lights[i].addEventListener(Event.ENTER_FRAME, moveDown);

　　　break;

 

　　case "right" :

　　　lights[i].addEventListener(Event.ENTER_FRAME, moveRight);

　　　break;

 

　　case "left" :

　　　lights[i].addEventListener(Event.ENTER_FRAME, moveLeft);

　　　break;

 

　　　default :

　　　trace("方向の指定は up,down,right,leftのいずれかを設定しないと動きまへん");

　　　}

　　}

}

【ステップ17 - 移動関数】

この部分は一見難しそうに見えますが、思ったより簡単です。
光は基本的にメイン関数で計算されたスピードで動くので、もしエフェクトの領域である光が『左へ移動する関数』を持っていた場合、それをチェックしてその光と反対方向のランダムな位置を設定します。

 /*上へ移動する関数*/

 

 private function moveUp(e:Event):void

{

　e.target.x += e.target.xSpeed;

　e.target.y-=e.target.ySpeed;

 

　/*上移動｜光の位置をリセット。最初にY → それからX*/

 

　if (e.target.y + (e.target.height / 2) < 0)

　{

　　e.target.y = areaH + (e.target.height / 2);

　　e.target.x=Math.floor(Math.random()*areaW);

　}

 

　if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW)

　{

　　e.target.y = areaH + (e.target.height / 2);

　　e.target.x=Math.floor(Math.random()*areaW);

　}

}

 

/*下へ移動する関数*/

 

 private function moveDown(e:Event):void

{

　e.target.x+=e.target.xSpeed;

　e.target.y+=e.target.ySpeed;

 

　/*下移動｜"光"の位置をリセット。最初にY → それからX*/

 

　if (e.target.y - (e.target.height / 2) > areaH)

　{

　　e.target.y = 0 - (e.target.height / 2);

　　e.target.x=Math.floor(Math.random()*areaW);

}

 

　if ((e.target.x + e.target.width / 2) < 0 || (e.target.x - e.target.width / 2) > areaW)

　{

　　e.target.y = areaH + (e.target.height / 2);

　　e.target.x=Math.floor(Math.random()*areaW);

　　}

}

 

/*右へ移動する関数*/

 

private function moveRight(e:Event):void

{

　e.target.x+=e.target.ySpeed;

　e.target.y+=e.target.xSpeed;

 

　/*右移動｜光の位置をリセット。最初にY → それからX*/

 

　if (e.target.y - (e.target.height / 2) > areaH || e.target.y + (e.target.height / 2) < 0)

　{

　　e.target.x = 0 - (e.target.height / 2);

e.target.y = Math.floor(Math.random()*areaH);

　}

　if ((e.target.x - e.target.width / 2) > areaW)

　{

　　e.target.x = 0 - (e.target.height / 2);

　　e.target.y = Math.floor(Math.random()*areaW);

　}

}

 

/*左へ移動する関数*/

 

private function moveLeft(e:Event):void

{

　e.target.x-=e.target.ySpeed;

　e.target.y-=e.target.xSpeed;

 

　/*左移動｜光の位置をリセット。最初にY → それからX*/

 

　if (e.target.y - (e.target.height / 2) > areaH || e.target.y + (e.target.height / 2) < 0)

　{

　　e.target.x = areaW + (e.target.width / 2);

　　e.target.y=Math.floor(Math.random()*areaH);

　}

 

　if ((e.target.x + e.target.width / 2) < 0)

　{

　　e.target.x = areaW + (e.target.width / 2);

　　e.target.y=Math.floor(Math.random()*areaW);

　　　}

　　}

　}

}

【ステップ18 - 関数をcall（呼び出し）する】

ファイル＞保存（ファイル名：Lights.as）＞『Classes』フォルダ内にASファイルを保存。

Flashファイル（Frothy_Lights.fla）を再度開き、タイムライン上の『Code』レイヤーに次のアクションを書きます。

import Classes.Lights;// Classesフォルダ内のLights.asをインポート

var light:Lights = new Lights();//Lightsクラスからインスタンスを生成

light.init(600, 300, 40, 60, 0xFFFFFF, 0.3, 3, 3, "up", 2);//設定データをinitに渡す

addChild(light);//表示リストに追加する。

【完成】

好きな文字等を追加したら完成です。

FLAダウンロード（16KB）

和訳原文："Create a Whimsical Animated Flash Background"