Flashでフェードイン・フェードアウトさせる方法（ActionScript 3.0）

2010年3月 5日 04:00

Flashで手軽にフェードイン・フェードアウトを行う場合に利用できるフレームスクリプトを作ってみました。　フェード・アニメーションの秒数指定と終了後のイベント受け取りが可能な仕様になっています。　今回は豪華にActionScript 2.0版とActionScript 3.0版を掲載しておきますね。

ActionScript 3.0版

サンプルファイル

サンプルファイルを置いておきますので、ダウンロードして見てみてください。

使いかた

利用する場合は、まず以下のスクリプトを、フェードする真っ白なムービークリップか真っ黒なムービークリップの1フレーム目のフレームスクリプトに記述してください。

次に、そのムービークリップをステージ上に配置しインスタンス名を付けます。（今回は仮に「fadePanel」とします。

あとは、そのfadePanelに対し、フェードイン・フェードアウト用の命令をコールします。

呼び出し例

fadein関数

次の例は、fadePanelインスタンスを2秒かけて透明にしていくfadein関数です。　パラメーターに、フェードインが完了するまでの秒数を指定することができます。

fadePanel.fadein(2);

fadeout関数

フェードアウトも同様にfadeout関数で秒数も指定できます。　次の例は3.5秒かけてフェードアウトしていく処理です。

fadePanel.fadeout(3.5);

フェードイン・フェードアウトの終了を感知する方法

今回のコードでは、フェードイン、フェードアウトが完了した際に以下のカスタムイベントを発行するようにしてあるので、イベントリスナーを登録することでフェードインやフェードアウトの終了を待って任意の処理を行わせることができます。

カスタムイベント

フェードインの終了イベント名："fadeinEnd"
フェードアウトの終了イベント名："fadeoutEnd"

カスタムイベント利用例

次のコードは、fadePanelの3秒間のフェードインが終了した際に自作関数を実行する例です。

function myFunc(evt:Event) {
    trace(evt.type + "イベントが発生しました。");
    //以降、任意の処理を実行
}
fadePanel.addEventListener("fadeinEnd", myFunc);
fadePanel.fadein(3);

さて、長々と延ばしてしまいました。すみません。　以下がスクリプトコードの全体です。

スクリプトコード

import flash.display.MovieClip;
import flash.events.Event;

/**
 * 現在のフェードタイプ（"in" または "out"）
 *
 * @var String
 */
var fadeType:String;

/**
 * フレームが進むごとに加減させる値
 *
 * @var Number
 */
var fadeUnit:Number = 0;

/**
 * フェードイン関数
 *
 * @param Number sec 終了するまでの秒数
 */
function fadein(sec:Number) {
	fadeUnit = 100 / (sec * stage.frameRate) / 100;
	fadeType = "in";
	addEventListener("enterFrame", startFade);
}

/**
 * フェードアウト関数
 *
 * @param Number sec 終了するまでの秒数
 */
function fadeout(sec:Number) {
	fadeUnit = 100 / (sec * stage.frameRate) / 100;
	fadeType = "out";
	addEventListener("enterFrame", startFade);
}

/**
 * フェード中に実行されるイベントコールバック関数
 *
 */
function startFade(evt:Event) {
	if (fadeType == "out") {
		alpha += fadeUnit;
		if (alpha >= 1) {
			removeEventListener("enterFrame", startFade);
			dispatchEvent(new Event("fadeoutEnd"));
		}
	} else if (fadeType == "in") {
		alpha -= fadeUnit;
		if (alpha <= 0) {
			removeEventListener("enterFrame", startFade);
			dispatchEvent(new Event("fadeinEnd"));
		}
	}
};

stop();

ActionScript 2.0版

サンプルファイル

ActionScript 2.0版もサンプルファイルを置いておきますので、ダウンロードして見てみてください。

ActionScript 2.0ではActionScript 3.0と以下の点で違いがあります。

ActionScript 3.0版との違い

フレームレートが取得できないので、直接指定しておく。
透明度の指定は「alpha」ではなく「_alpha」。（プロパティにはアンダーラインが付く）
「_alpha」値の範囲は0～1ではなく、0（完全な透明）～100（完全な不透明）になる。
フェードイン・アウト終了後のイベント発行には事前にEventDispatcherを読み込んで初期化しておく必要がある。
発行するイベントのインスタンスはシンプルなオブジェクトを自作する。

使いかた

使いかたはActionScript 3.0版と同様です。　ムービークリップのフレームスクリプトに記述してお使いください。

スクリプトコード

import mx.events.EventDispatcher;

/**
 * フレームが進むごとに加減させる値
 *
 * @var Number
 */
var fadeUnit:Number = 0;

/**
 * 現在のフェード値
 * _alphaは整数値なので、_alphaに直接fadeUnit値を加える方法だと
 * 0未満の値がfadeUnitに指定されると_alpha値が変化しません。
 * そのため、一度Number型変数に代入し、それを_alpha値に指定するようにします。
 *
 * @var Number
 */
var fadeValue:Number = 0;

/**
 * フレームレート値
 *
 * @var Number
 */
var frate:Number = 30;


function fadein(sec:Number) {
	fadeUnit = 100 / (sec * frate);
	fadeType = "in";
	onEnterFrame = startFade;
}

function fadeout(sec:Number) {
	fadeUnit = 100 / (sec * frate);
	fadeType = "out";
	onEnterFrame = startFade;
}

function startFade(evt:Object) {
	if (fadeType == "out") {
		fadeValue += fadeUnit;
		_alpha = fadeValue;
		if (_alpha >= 100) {
			delete onEnterFrame;
			dispatchEvent({type:"fadeoutEnd", target:this});
		}
	} else if (fadeType == "in") {
		fadeValue -= fadeUnit;
		_alpha = fadeValue;
		if (_alpha <= 0) {
			delete onEnterFrame;
			dispatchEvent({type:"fadeinEnd", target:this});
		}
	}
};

EventDispatcher.initialize(this); //イベント発行用初期化処理
stop();