初期設定と設計

初期設定と設計

　まずは今回作成するサンプルflaファイル一式をこちらからダウンロードしてください（http://www.thinkit.co.jp/images/article/91/1/9111.zip）（9111.zip/1.01 MB）。

　flaファイルを展開すると上から「Actions」「Click」「Title」「Container」「Background」という5枚のレイヤーが見えると思います。「Actions」という名前のレイヤー第1フレーム目にAS3のコードを記述していきます。

　それでは、図2の（1）のソースコードをご覧ください。このサンプルで必要になるAPEクラスをimportさせAPEクラスが使えるようにしておきます。APEのクラスライブラリを読み込むimport文は次のように書きます。

import org.cove.ape.*;

　行末にあるアスタリスク "*"で指定することにより、org/cova/apeパッケージ内のクラスファイルをすべてをロードすることができます。

　まず準備段階としてムービー全体のフレームレートと表示クオリティを設定します。ステージのフレームレート（1秒あたりのフレーム数）は30に設定します。レンダリングクオリティ（表示クオリティ）は普通で設定します。

stage.frameRate = 30;　
stage.quality = "medium";　
APEngine.init(1/2);

　APEngine.initメソッドは、引数なしで呼び出すと0.25（1/4）という値がデフォルトで設定されます。引数に少ない値を指定すればするほどパーティクル（Particle）の落下スピードが減速されます。一般的には1/3～1/4ぐらいの数値を設定するのが適当ですが、好みに合わせて変更してください。ちなみにこのサンプルでは1/2に設定してあります。

APEngine.container = container_mc;
APEngine.addForce(new VectorForce( false, 0, 2 ) );
APEngine.damping = .97;

　APEのコンテナを設定するcontainerプロパティに、container_mcというインスタンスを代入します。defaultGroupという変数名でGroupオブジェクトを生成しておきます。

var defaultGroup:Group = new Group();
defaultGroup.collideInternal = true;

イベントリスナーの登録と追加

　ソースコードの方は前後してしまいますが、サンプルの右下に見える「CLICK」という文字の再生開始ボタンのコードを記述していきます。

　それでは、図2の（6）のソースコードをご覧ください。再生開始ボタンのインスタンス名をclick_mcに設定します。このオブジェクトに対してイベントリスナーの登録をしていきます。最初の3行はaddEventListener()メソッドにより、それぞれのマウスイベントで発生するイベントハンドラを設定します。1つ目のイベントリスナーはMOUSE_DOWNというマウスイベントにより、startという関数を呼び出すようにしています。2つ目と3つ目はROLL_OUT、ROLL_OVERというそれぞれのマウスイベントで、bhtという関数を呼び出します。

click_mc.addEventListener(MouseEvent.MOUSE_DOWN, start );
click_mc.addEventListener(MouseEvent.ROLL_OUT, bht );
click_mc.addEventListener(MouseEvent.ROLL_OVER, bht );

　buttunModeプロパティをtrueにすることで、インスタンスにロールオーバーしたら指カーソルに変化するよう設定します。alphaプロパティでは、インスタンスにマウスが触れていないときの透明度を0.6に設定しインスタンスを少し透かした状態にします。

click_mc.buttonMode = true;　
click_mc.alpha = .6;

　それでは、図2の（5）のソースコードをご覧ください。ここではマウスイベントで実行される関数を定義しています。最初に定義する関数はrunという名前で、APEngine.step()メソッドとAPEngine.paint()メソッドを実行するという処理を書きます。

function run(evt:Event):void {
APEngine.step();
APEngine.paint();　}

　start関数はイベントリスナーの登録と,click_mcインスタンスが画面から見えなくなるようにvisbleプロパティにfalseの値を設定しておきます。

function start(e:Event) {
addEventListener(Event.ENTER_FRAME, run);
click_mc.visible = false;　}

　bht関数ｈはマウスのロールアウト時とロールオーバー時でインスタンスの透明度を変化させるように定義しています。MouseEventオブジェクトのtypeプロパティがrollOutの場合には、click_mcインスタンスの透明度を0.6に設定します（.6という表記法は、0.6の省略表記です）。

function bht(e:MouseEvent) {
if (e.type == 'rollOut') {
click_mc.alpha = .6

　そしてtypeプロパティがrollOverの場合は透明度を1に設定します。

} else if(e.type == 'rollOver'){
click_mc.alpha = 1
}　　　}

　マウスのクリックによりstartという関数が呼ばれ、その処理の中のイベントリスナーでrunという関数が呼ばれているのがわかると思います。そのrunという関数がstep()メソッドとpaint()メソッドを実行することによりそれぞれのパーティクルが画面に描画されるという仕組みです。bht関数はマウスイベントにより、click_mcインスタンスのalpa値をコントロールしています。