2008年9月アーカイブ

サンプルを表示

AS3でサウンドを再生する仕組みはいたってシンプル
以前の、外部ファイル読み込みの例と同じく、リンケージプロパティにクラス名を入れましょう。
「OK」を押すと、なんか変な警告が出るので無視。

なんとなく「Soundクラスのサブクラスになるんだな～。」程度の認識でいいと思います。

準備が出来たら早速コーディング。

//リンケージさせたサウンドのインスタンスを生成
var se_sound:Sound_0 = new Sound_0();

/*
外部MP3ファイルの読み込み
load_sound.load(URLRequest)もしくは、var load_sound:Sound = new Sound(URLRequest)
で、サウンドを読み込み、生成する。
*/
var url:URLRequest = new URLRequest("test_sound.mp3");
var load_sound:Sound = new Sound();
load_sound.load(url);

btn0_mc.buttonMode = true;
btn1_mc.buttonMode = true;

btn0_mc.addEventListener(MouseEvent.CLICK , soudPlay);
btn1_mc.addEventListener(MouseEvent.CLICK , loadSound);

function soudPlay(event:MouseEvent):void{
    //リンケージサウンドの再生
    se_sound.play();
}

function loadSound(event:MouseEvent):void{
    //読み込みサウンドの再生
    load_sound.play();
}

/*
サウンドの読み込み状況を取得するためのイベントリスナー
今回は、MP3ファイルのサイズが小さいため一瞬でDLが終わるけれど、ファイルサイズが大きい場合は
Flvのような、プログレッシブダウンロードになるっぽい。
*/
load_sound.addEventListener(ProgressEvent.PROGRESS, progressHandler);
load_sound.addEventListener(Event.COMPLETE, completeHandler);

function progressHandler(event:ProgressEvent):void{
    loading_txt.text = load_sound.bytesLoaded.toString() + "/" +  load_sound.bytesTotal.toString() + " Byte";
}
function completeHandler(event:Event):void{
    loading_txt.appendText("\nLoad Complete. Ready.");
}

とまぁ、ライブラリから生成するか、load(url)したサウンドクラス（サブクラス）のインスタンスで
playメソッドを実行するだけと、拍子ぬけするくらい簡単ですね。

一個だけ注意すべきは、「load_sound.load(url)」を実行した後は、「load_sound」インスタンスで、loadメソッドは2度と実行できません（いや、nullとか入れれば出来るかもしれんけど。。。）
てなわけで、複数のMP3サウンドを読み込んで利用する場合は、AS2.0までは、ひとつのインスタンスでそのつどloadしてやれたけれど、AS3.0からは、都度インスタンスを生成してやる必要がありそう。
まぁ、その分、swfファイル中にキャッシュ出来るってことなんだけれど。。。これはこれで便利かな。

あとはVolumeとかPanとか、いろいろいじれるんで、試してガッテン。

タイトルまんまです。

AS2.0でリンケージしたシンボルを「attachMovie」することで、
シンボルの動的配置を行っていましたが、AS3.0では、ちょこっと変わりました。

また、画像やswfファイルの読み込みも
今まではステージに配置したインスタンスを、読み込んだファイルで置き換えることで表示していたのが
上記の「リンケージしたシンボルのアタッチ」と同じく変わってます。

両者は表示リストという概念で、同様に処理されるようになって、慣れれば
画面表示に関しては、同様に扱えるようなので、もしかしたら楽になるかもしれませんね。
ちなみに、表示リストに関しては、ココで詳しく解説されてます。

というわけで、ちょっくら作ってみました。
サンプルを表示

まず、ステージに配置したシンボルをリンケージ設定します。
ポイントは、「識別子」ではなく「クラス」になること、基本クラスは多分スーパークラスだと思う。まだ未検証。

それから、最初のフレームに書き出しのチェックをはずしているのは、
ここにチェックを入れている場合、最初のフレームの読み込みの前に、リンケージされたシンボルの画像や音声を読み込んでしまうために、ローディング画面が60%とか70%から開始してしまい、
しかも、ローディング画面が出るまでに時間がかかってしまうのです。

しかし「最初のフレームに書き出し」のチェックをはずしているので
このシンボルは読み込まれません。
そのため、実際に該当のシンボルをステージに配置しなければいけません。

というわけで、2フレーム目のステージの領域外に配置します。
では、実際のコードはこうなってます。

1フレーム目：単純なローディング処理です。もとになったのはこれ。
そのコードを「Event.ENTER_FRAME」ではなく、「LoaderInfo 」クラスのインスタンスのイベントリスナーで処理してます。
info.addEventListener(ProgressEvent.PROGRESS, loader);
info.addEventListener (Event.COMPLETE,loadFinished);
これですね。
「ProgressEvent.PROGRESS」で、ダウンロード中の進捗状況を取得して、ローディングバーに反映させてます。
そして、「Event.COMPLETE」で、ダウンロード終了を検知してます。

import fl.transitions.Tween;
import fl.transitions.easing.*;

loader_mc.alpha = 0;
loader_mc.lastProp = 1;

var loaderTween:Tween = new Tween(loader_mc , "alpha" , Regular.easeOut , loader_mc.alpha , loader_mc.lastProp , 10 , false);
//loaderTween.stop();

//SWFファイル容量取得
var info:LoaderInfo = this.loaderInfo;

//イベント設定
info.addEventListener(ProgressEvent.PROGRESS, loader);
info.addEventListener (Event.COMPLETE,loadFinished);

//関数定義
function loader(event:ProgressEvent) {
    var loadPer:uint = Math.floor(event.bytesLoaded / event.bytesTotal * 100);
    loader_mc.par.text = loadPer;
    loader_mc.bar_mc.scaleX = loadPer/100;
    trace(loadPer);
}

// 読み込み完了時に呼び出される
function loadFinished (event:Event) {
    loaderTween.begin = loader_mc.alpha;
    loaderTween.finish = 0;
    loaderTween.start();
    nextFrame();
}

loader_mc.bar_mc.scaleX = 0;
stop();

次に2フレーム目のコード

/*
リンケージ設定で、クラス名をImgに設定したシンボルを
インスタンス化して、ステージに配置
*/
var imgObj:Img = new Img();
stage.addChild (imgObj);
/*
読み込んだ外部画像やswfファイルを
ステージに配置するためのオブジェクトをあらかじめステージに配置する

※読み込みの都度、ステージに配置してもかまわないとは思う。

*/
var loader_obj:Loader = new Loader();
stage.addChild(loader_obj);

//loader_objの読み込み状態を調べるためのLoaderInfo
var loadInfo:LoaderInfo = loader_obj.contentLoaderInfo;

//LoaderInfoのイベントリスナー設定
loadInfo.addEventListener(Event.OPEN,loadStart);
loadInfo.addEventListener(ProgressEvent.PROGRESS, loader);
loadInfo.addEventListener(Event.COMPLETE,loadFinished2);

//読み込み開始時に呼び出される
function loadStart(event:Event){
    /*
    とりあえず、ステージにあるリンケージから呼び出したシンボルを非表示にする
    この辺の切り替えは、トランジションクラスとか使った、もっとスマートなやりかたがあるはず。
    */
    imgObj.alpha = 0;
   
    //ローディングバーのTweenを再設定し、フェードインで表示させる。
    loaderTween.stop();
    loaderTween.begin = loader_mc.alpha;
    loaderTween.finish = 1;
    loaderTween.start();
}
// 読み込み完了時に呼び出される
function loadFinished2 (event:Event) {
    /*
    とりあえず、ステージ配置されたLoaderインスタンスを非表示にする
    この辺の切り替えは...同上。
    */
    loader_obj.alpha = 1;
   
    //ローディングバーのTweenを再設定し、フェードアウトで消す。
    loaderTween.stop();
    loaderTween.begin = loader_mc.alpha;
    loaderTween.finish = 0;
    loaderTween.start();
}

//それぞれのファイルへのパスを、各ボタンに設定する。
var path1:URLRequest = new URLRequest("loader01.swf");
var path2:URLRequest = new URLRequest("loader02.jpg");

btn01_mc.PATH = path1;
btn02_mc.PATH = path2;

btn01_mc.addEventListener(MouseEvent.CLICK , Loading);
btn02_mc.addEventListener(MouseEvent.CLICK , Loading);

/*
ボタンを押した時の処理。
各ボタンに設定されたパスをloader_objのloadメソッドに渡す。
*/
function Loading(event:MouseEvent):void{
    loader_obj.load(event.target.PATH);
}

//画像0ボタンを押したときの設定
btn00_mc.addEventListener(MouseEvent.CLICK , vewImg);

function vewImg(event:MouseEvent):void{
    loader_obj.alpha = 0;
    imgObj.alpha = 1;
}

/*
各ボタンのボタンモードを設定
ムービークリップをマウスオーバーした際に、指先カーソルに変わるようにするためには
buttonMode = true;
にしてやる必要がある。
*/
btn00_mc.buttonMode = true;
btn01_mc.buttonMode = true;
btn02_mc.buttonMode = true;

長々と書いてますが・・・
ポイントは

var imgObj:Img = new Img();
stage.addChild (imgObj);

と

var loader_obj:Loader = new Loader();
stage.addChild(loader_obj);

/loader_objの読み込み状態を調べるためのLoaderInfo
var loadInfo:LoaderInfo = loader_obj.contentLoaderInfo;

の2箇所。

var imgObj:Img = new Img();
で、クラス名「Img」をつけたリンケージをnewでインスタンス化します。
（ちなみに、上記のように「最初のフレームに書き出し」のチェックをはずした場合、該当シンボルが配置された後のフレームでしかインスタンス化できないようです。）

そして
stage.addChild (imgObj);
で、ステージに配置します。（rootに配置されると思われ。）

あと、
var loader_obj:Loader = new Loader();
は、AS2.0のmovieClipLoaderと同じようなもんです。
そいつもstage.addChild()でステージに配置してます。
読み込むファイル分、Loaderオブジェクトを生成してもかまわないと思います。
てか、そうしたほうが様々なトランジション効果を設定できていいと思うんで・・・・・・今度作ります・・・いつか・・・必ず・・・。

んで、ローディングの進捗状態ですが
var loadInfo:LoaderInfo = loader_obj.contentLoaderInfo;
で、ステージの進捗状況と同じく取得できます。
ステージの処理と違うのは、LoaderInfoクラスのインスタンスに「loaderInfo」ではなく「contentLoaderInfo」を入れることくらいですかねぇ。
 

あとは、
loader_obj.load(ファイルパス);
で、読み込み処理が出来ます。
ダウンロード時の処理については、上で触れてるので割愛。