AS3でリンケージしたシンボルの配置、画像やswfファイルの読み込み

タイトルまんまです。

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

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

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

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

 

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

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

loader_link.png

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

loader_stage.png

というわけで、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(ファイルパス);
で、読み込み処理が出来ます。
ダウンロード時の処理については、上で触れてるので割愛。

コメント(2)

非常にべんきょうになりました。
これからも未熟者を救済するような魅力的な記事をお願いします。

>読み込むファイル分、Loaderオブジェクトを生成してもかまわないと思います。
>てか、そうしたほうが様々なトランジション効果を設定できていいと思うんで・・・・・・今度作りま
>す・・・いつか・・・必ず・・・。

期待しております。

>nobuさん

どもども、お役に立てたようでなによりです。

久しぶりにこのエントリーを見たんですが、
2年近く前のAS3を勉強したばかりのころのソースなんで、今見返すと結構見苦しいソースだなぁとか思ってしまいましたw

>期待しております。

自分で書いておいてすっかり忘れてたというw

トランジションの作り方というか、なんかそういうのって、コンテンツごとの演出プランとかページ数とかテイストとかに左右されるところが大きいんで、どうにもこうにも汎用的な方法っていうのが見いだせなくてですね・・・。

それっぽく作れたとしても、パフォーマンスチューニングやら、パラメータの受け渡しなんかで、結局作り捨ての部分が出てきてしまってねぇ。

そうこうしてるうちにすっかり忘れてしまっていたでござるの巻。

コメントする

トラックバック(0)

このブログ記事を参照しているブログ一覧: AS3でリンケージしたシンボルの配置、画像やswfファイルの読み込み

このブログ記事に対するトラックバックURL: http://studio-ensyu.sakura.ne.jp/mt/mt-tb.cgi/11

プロフィール

HN.NoBody

NoBody

市ヶ谷のとあるオフィスでFlashクリエイターとして労役中。
なんとなくチーフ。

twitterでつぶやき中