haraです。

前回のエントリのおまけで車が走るコンテンツを作りましたが、ここのところ絵をちょっとのっけるだけで大分コンテンツがかわいく仕上がることに味をしめてまいりました。

しかし、前回もそうだったのですが、タイムラインアニメをpng書き出しして利用しようとしたりするとロード時間で結構待たされてしまいます。（帯域にもよりますが）

おそらくこういう画像の利用の仕方が今後増えると思ったので、wonderflで呼び出す用にwonderflでローディング表示を作ってみました。

おかげで前回の車コンテンツもこのような感じ、ストレス軽減です。

使い方

・loadViewという名前のObjectインスタンスを用意します。

・以下のようにクラスをインポートします。

import flash.display.Loader;
import net.wonderfl.utils.WonderflSWFUrl;
import flash.net.URLRequest;
import flash.events.Event;
import jp.progression.commands.Func;
import jp.progression.commands.lists.SerialList;

・クラスのどこかにこちらのようなメソッドを作ります。

 //--------------------------------------------------------------------------------//
 // ローディング表示呼び出し
 //--------------------------------------------------------------------------------//       
private function loadLoadingView(_f:Function):void {
 var CODE_PAGE:String = "http://wonderfl.net/code/fec7bdea47c77f160e52cd2c448bb49bb209ea92";
 var path:String = WonderflSWFUrl.getURLFromPageURL(CODE_PAGE);
 var ldr:Loader = new Loader();
 addChild(ldr);
 var s:SerialList = new SerialList();
 s.addCommand(
  new Func(ldr.load, [new URLRequest(path) ],ldr.contentLoaderInfo, Event.COMPLETE),
  function():void{loadView = ldr.contentLoaderInfo.content; },
  new Func(_f)
 );
 s.execute();
}

 

このメソッド、loadLoadingViewは関数を引数に取り、ローディング表示のswfを読み込み終わったらその関数を実行しています。

このloadLoadingView関数の処理中で、ローディングを表示するインスタンスをloadViewオブジェクトに参照させているため、このオブジェクトからローディング表示インスタンスのメソッドを実行することができます。

用意したメソッドは以下の３つ。loadViewオブジェクトを用いて以下のように呼び出してください。

//読み込み中の表示をスタートさせる時に呼び出します。
loadView.loadStart();

//読み込みの値を表示したい時に呼び出します。0.0〜1.0で指定します。
loadView.attachLoadValue(n:Number);

//読み込み表示を終了させたい時に呼び出します。
loadView.loadComplete();

 

こちらが画像だけ読み込んで表示するサンプルです。こんな感じに使います。

 

仕組み

以前のtaroの記事で紹介されていたWonderflSWFUrl.getURLFromPageURL関数を用いて、こちらに用意したローディング表示の投稿を読み込んでいます。

 

これで画像とかも軽い気持ちで呼び出せますね。wonderflで楽しいコンテンツを作りましょう。