あしたから本気出す工作 MovieClipLoaderで画像をロードする

5月24日
MovieClipLoaderで画像をロードする

ダウンロードしたswfファイルの中に、さらに画像などを読み込む方法といえば、loadMovieがまず思いつきます。このメソッドはURLを指定してやるだけでよくて、記述が簡単なんですが、難がひとつあります。それは、ロードが完了したタイミングをつかまえられない、ということ。つまり、読み込みが完了した直後にその画像を非表示にする、などということができません。
そういったニーズを満たしてくれるのが、MovieClipLoader。このクラスのオブジェクトに、リスナーオブジェクトを追加してやることで、画像読み込みに関連するいろいろなイベント、例えばエラー処理や読み込み完了など、を処理することができます。今日はもっとも基本的なパターンとして、「画像読み込みが完了するまではloading表示、完了したらloadingを消して、画像を表示」という挙動のクラスを設計してみます。

ざっくりとした仕様としては、StartLoadメソッドで画像の読み込みを開始して、ロード完了と同時に画像を非表示化。表示・非表示はShowメソッド、Hideメソッドで行う、という感じです。読み込みが完了する前のタイミングでShowが呼ばれたとしても、読み込み完了と同時に表示されるように時間差をクッションしてやる、というのがコツです。以下ソースコードです。

class MyPictureUnit{
  var mc:MovieClip;
  var oLoader:MovieClipLoader;
  var oListener:Object;
  var fVisible,fLoaded:Boolean;
  function MyPictureUnit(){
    this.mc = _root.createEmptyMovieClip("mcSample",_root.getNextHighestDepth());
    this.mc.createEmptyMovieClip("mcPicture",_root.getNextHighestDepth());

    this.mc.createTextField("tfLoading",_root.getNextHighestDepth(),0,0,0,0);
    this.mc.tfLoading.autoSize = true;
    this.mc.tfLoading.text = "loading...";

    this.oListener = new Object();
    var owner:Object = this;
    this.oListener.onLoadComplete = function(){owner.OnLoadComplete();}
    this.oLoader = new MovieClipLoader();
    this.oLoader.addListener(this.oListener);

    this.fLoaded = this.fVisible = false;

    this.StartLoad();
  }
  function StartLoad(strFilename:String){
    this.oLoader.loadClip(strFilename,this.mc.mcPicture);
  }
  function OnLoadComplete(){
    this.fLoaded = true;
    this.mc.tfLoading._visible = false;
    this.mc.mcPicture._visible = this.fVisible;
  }
  function Show(){
    this.fVisible = true;
    this.mc.mcPicture._visible = this.fLoaded;
  }
  function Hide(){
    this.fVisible = false;
    this.mc.mcPicture._visible = false;
  }
}

1行目：MyPictureUnitという名前でクラスを作成します。もちろん何でも構いません。
2行目：このmcの上に、loading表示のTextField、画像を貼り付けるmcを載せます。
3-4行目：MovieClipLoaderオブジェクトと、イベント処理用のリスナーオブジェクト。
5行目：ロードが完了したかどうか、表示が要求されたかどうかを格納するフラグ。
6行目：ここからコンストラクタです。
7行目：2行目のmcを作成します。ここではルート直下を指定していますが、任意でも可です。
8行目：さらにその上に画像を貼り付けるためのmcPictureというMovieClipを作成します。
10行目：tfLoadingという名前で、loading表示のためのTextFieldを作成します。大きさは(0,0)ですが、
11行目：autoSizeにして文字の大きさにTextFieldが変形されるようにしてあります。
12行目：tfLoadingに文字列を設定。please wait...でもよいです。もちろん。
14行目：イベント処理のためのリスナーオブジェクトを作成します。
15行目：oListenerのスコープから外にアクセスするための変数。後で使います。
16行目：画像の読み込みが完了したらOnLoadCompleteというメソッドが呼ばれるようにします。詳細は27行目で。
17行目：MovieClipLoaderオブジェクトを作成し、
18行目：14行目で作成したリスナーオブジェクトを登録します。
20行目：5行目のフラグをfalseで初期化します。
22行目：StartLoadメソッドで画像の読み込みを開始します。
24行目：StartLoadメソッドは何かというと、
25行目：17行目で作成したMovieClipLoaderオブジェクトに画像のファイル名と読み込み先のMovieClip(2行目で作成済み)を指定して画像の読み込みを開始します。
27-31行目：画像の読み込みが完了したときに呼ばれます。フラグfLoadedをtrueにし、loading表示を非表示にし、このタイミングで既にShowメソッドが呼ばれていた場合のみ読み込んだ画像を表示させます。
32-35行目：画像の表示させるためのメソッドで、fVisibleは30行目で使用。画像がまだ読み込まれている場合のみ、画像を表示させます。
36-39行目：Showメソッドの逆。

という具合です。このクラスの使用方法は、例えば以下のようになります。rootでの記述です。

var oPicture:Object = new MyPicture();
this.oPicture.StartLoad("sample.jpg");
this.oPicture.Show();

1行目：ページ上部で作成したMyPictureUnitクラスのオブジェクトを作成し、
2行目：ファイル名を指定して画像の読み込みを開始します。
3行目：画像を表示させます。読み込みが完了していない場合は、完了と同時に表示し、既に完了している場合は即時に表示されます。このShowメソッドを呼び出すタイミングは任意で、例えばボタンなどに割り当ててもOKです。

ご参考になれば嬉しいです。m( __ __ )m

twitterでつぶやき中