JavaScriptでのクラスの話は定期的に書いているネタな気がしますが、
自分でもなかなかスタイルが定まらないので、ちょっとメモなど。

jQueryのアニメーション機能はあまりにも便利ですが、
刻々と位置情報などを更新していくタイプの処理には向いていません。
こういうのが得意なのは、例えばASにおけるEnterFrameイベントなのですが、
似たような実装をJavaScriptで出来ないだろうか、というのが今回の趣旨です。

引き続きJSONのお話ですが、
連携に向いているフォーマットだ、という事はつまり
他の言語でを扱う方法を知っておかねばならないという事。
という訳で、軽くメモっておきます。

タイトルの通りですが、ちょっとつまづいたポイントがあったのでメモ。
Flashの「ライブラリ」に登録したビットマップデータの表示の仕方です。
そんなに頻繁にやる事ではなさそうですが…。

AS3にある多くのクラスの中でもお世話になる事が多いのが、EventDispatcher。
カスタムイベントを登録して送出したり出来るので大変便利。
本稿は、JavaScriptでも似た事が出来ないかなぁと試行錯誤してみたログです。

AS3実験室: 画像を読み込んでボタンにする～SimpleButtonの巻
AS3実験室: 画像を読み込んでボタンにするに続いて、
もういい加減にしなさいというテーマですが、書いてみちゃいました。
今回は、SimpleButtonクラスを拡張してselectedプロパティを追加してトグル出来るようにしました。

先日取引先から、納品したFlashについて問い合わせがありまして、
「設定用のXMLファイルの場所をswfと一緒に移動したら動かなくなった」とのこと。

XMLファイルへのパスをスタティックに指定してしまうと、
こういう事態に対処出来なくなり、メンテナンス性を欠くのでは？
という事でflashvarsでXMLファイルへのパスを渡す方式にして解決しました。

AS3実験室: 画像を読み込んでボタンにするを書いたあとに気付いたのですが、
SimpleButtonという便利なクラスが存在しておりまして、
これを使った方がより簡単にボタン化出来るので、フォローとしてログっておきます。

これも意外と頻出する処理ではないでしょうか。
読み込んだビットマップデータをボタン化する処理を、面倒なのでクラス化してみました。

XMLでリストを読み込み、画像をロードする…
というのはFlashコンテンツを作る上でかなり頻出する処理ですが、
それを簡易化する「BulkLoader」が広く知られています。

今日はXML読み込みからBulkLoaderによる一括ロードまでを
軽く備忘録しておきます。

bulk-loader – Project Hosting on Google Code

BulkLoaderは、複雑なローディング処理をより簡単に行う為に書かれたAS3ライブラリです。

早速、手順を追って書いてみるとします。

1. ライブラリをインポートするなど

import br.com.stimuli.loading.*;

保存場所に注意。

private var imagelist:XMLList;

URLのリストを格納しておく用の変数を準備しておきます。

2. XMLをロードする

XMLのロードはBulkLoaderを使わずにシンプルに書きます。

var ul:URLLoader = new URLLoader;
ul.addEventListener(Event.COMPLETE, onXmlLoaded);
ul.load( new URLRequest("list.xml") );

読み込むXMLはこんなのにしておきます。
実際はもうちょっと複雑な物になると思われますが…

<?xml version="1.0" charset="utf-8" ?>
<data>
    <items>
        <item id="1">images/a.png</item>
        <item id="2">images/b.png</item>
        <item id="3">images/c.png</item>
    </items>
</data>

3. 読み込んだXMLを処理する

private function onXmlLoaded(e:Event):void {
    var data:XML = new XML(e.target.data);
    imagelist = new XMLList( data.items.item );
    var bloader = new BulkLoader("imageloader");
    var item:*;
    for each( item in imagelist) {
        bloader.add( item.toString() );
    }
    bloader.addEventListener(BulkProgressEvent.COMPLETE, onImagesLoaded);
    bloader.addEventListener(BulkProgressEvent.PROGRESS, onImageProgress);
    bloader.addEventListener(BulkLoader.ERROR, onImageError);
    bloader.start();
}

BulkLoaderのコンストラクタには、ユニークな名前をつけてあげます。
（ここではimageloader）

var bloader = new BulkLoader("imageloader");

itemにはURL文字列が格納されたXMLオブジェクトが入っているので、
toString() でStringに変えてあげましょう。
URLをBulkLoader.addにつっこむと、BulkLoaderの読み込みリストに追加されます。

bloader.add( item.toString() );

イベントは、completeとprogressが登録できます。
APIドキュメントのイベントには記述されていませんが、errorイベントも受け取る事もできます。

BulkLoader.startで読み込み処理が開始されます。
URLLoader.loadみたいなもの。

4. イベントハンドラ

progressイベント

private function onImageProgress(e:Event):void {
    trace( Math.floor((e.target.percentLoaded * 100)) + "%" );
}

BulkLoader.parcentLoaded で全体の読み込み率を取得できます。
BulkLoader.bytesTotal, bytesLoadedもあるのでこちらも活用できますね。

errorイベント

private function onImageError(e:Event):void {
    trace(e.target.getFailedItems());
}

読み込みエラーが発生した時に呼ばれます。
BulkLoader.getFailedItemsでエラーの出たアイテムの情報が取得できます。

5. 完了時の処理

private function onImagesLoaded(e:Event):void {
    var item:*;
    var bmp:DisplayObject;
    var margin:int = 10;
    var point:Point = new Point( margin, margin );
    for each( item in imagelist ) {
        bmp = addChild( e.target.getBitmap(item.toString() ) );
        bmp.x = point.x;
        bmp.y = point.y;
        point.x += bmp.width + margin;
    }
}

10ピクセルの余白ごとにぺたぺたと横に画像を連ねるだけの簡単な処理をしています。
ポイントは、BulkLoader.getBitmap()。

bmp = addChild( e.target.getBitmap(item.toString() ) );

このメソッドに登録時につっこんだURLを入れると、
そのURLの画像をBitmapオブジェクトで引っ張ってきてくれます。なんて便利な。

他の形式で受け取りたい場合は、色々と用意されています。
getMovieClip, getSound, getSprite, getText,
getXML, getBitmapData, getContent, getBinary
などなどなど。
汎用的なgetなんていうメソッドもあります。
読み込んだファイルに応じて最適なものを使えば良いですね。

より詳しくは公式のドキュメントをご覧ください。
Wiki Pages – bulk-loader – Project Hosting on Google Code

本当は自分で似たようなのを書いてたんですが、
あまりにもこっちが便利なので愛用することに。
書く前に検索すればよいのですが、勉強になるので結果オーライです。