ロードした画像達をタイル上に並べる2:CASA の DistributionCollection

distributionCollection.jpg

以前のエントリ「ロードした画像達をタイル上に並べる」にコメントを頂いて、留意点ぽいとこがあったので紹介してみます。

CASADistributionCollection クラスを使えば「予め設定しておいた矩形エリアの範囲内に収まるように、複数個のオブジェクト(MovieClip, TextField, Button)を敷き詰めることができる。もちろん端にくれば自動で折り返してくれるよ。マージン(間隔)も個別設定できちゃう。」という便利機能です。

サンプルソースはこちら。

DistributionCollectionSample.fla : fla8形式

CASA に既にクラスパス通している環境なら、あとはパブリッシュするだけでOK。

質問いただいた部分への回答となるコードは以下の箇所:



import org.casaframework.load.data.xml.XmlLoad;
import org.casaframework.util.XmlUtil;
import org.casaframework.load.LoadGroup;
import org.casaframework.load.media.MediaLoad;
import org.casaframework.math.geom.Rectangle;
import org.casaframework.layout.DistributionCollection;
:
(中略。詳細はソースをご覧ください。)
:
function onGroupLoadComplete(){
    trace("全画像ロード完了");
    loading._visible = false;
    var _dist:DistributionCollection;
    _dist = new DistributionCollection( true );
    //ここでやってる new Rectangle は org.casaframework.math.geom.Rectangle の方なので注意!
    //あと、Number.POSITIVE_INFINITY じゃないと DistributionCollection できないのかなぁ?
    _dist.setRectangle(new Rectangle(0, 0, 350, Number.POSITIVE_INFINITY));
    _dist.setMargin(10, 10, 10, 10);
    var thumbs:Array = myLoadGroup.getLoads();
    for(var i:Number=0;i<thumbs.length;i++){
        var mc:MovieClip = thumbs[i].getMovieClip();
        //配列に格納される順番が逆転してるのに注意!
        trace(thumbs[i].getMovieClip());
        //CASA のドキュメントのサンプルはライブラリの中からシンボルを attachMovie してるサンプルなので、
        //今回は mc を追加していくだけでOKです。
        _dist.addItem(mc);
    }
    _dist.positionItems();
}

留意点は以下。

  • 貼付け矩形を描画している new Rectangle ですが、これは Flash 標準のやつではなく、CASA の org.casaframework.math.geom.Rectangle です(リファレンスページ)。CASA ドキュメントのサンプルコードを流用してるとハマりやすいので注意。これは僕もハマって「インパネQ」のソースでも言及してました。drawUtil クラスも普通にサンプルコードで登場したりしているので合わせて注意すると吉。
  • setRectangle の部分で貼付けエリアとなる矩形(四角形)を設定していますが、DistributionCollection する時は、矩形の高さを無限大(Number.POSITIVE_INFINITY)にしないとタイリングできないかも。クラスファイルまだ見てないのであしからず。
  • DistributionCollection ページのサンプルコードの addItem(); の引数で attachMovie してますが、今回のサンプルは外部から画像をロードしてムービークリップの生成までは既に終わっているので addItem(mc) で大丈夫です。
  • 前回も言及したけど、LoadGroup クラスの getLoads(), MediaLoad クラスの getMovieClip() の併用はとても便利だけど、配列に格納される順番は逆になるので(サンプルの trace でご確認ください)注意。必要とあらば reverse() するといいです。

なにはともあれドキュメントを読みまくるといいです。僕もまだあんまりだけど。

ということで、CASA のことを少し書かせていただいた、

1ランク上の技を身につけるFlashの強化書 (MYCOMムック +DESIGNING Professional Bi)
1ランク上の技を身につけるFlashの強化書 (MYCOMムック +DESIGNING Professional Bi) +DESIGNING編集部

毎日コミュニケーションズ 2008-01-29
売り上げランキング : 7361

おすすめ平均 star
star実例サンプルがよい

Amazonで詳しく見る by G-Tools

と、書籍のサポートサイトそこで紹介している「インパネQ」のソース(MTL ブログ)はこちらからよろしくどうぞ。

追伸:
コメント欄にコード書いてくださる方は「<」と「>」を全角文字か、いっそ「小なり」「大なり」に置き換えてくださると助かります。そのままだとエスケープされて切れちゃうので。(←直し方しらないし。)
あと、忙しい時とか僕には分からない時ははぐらかしますのでご容赦くださいませ。

このエントリーをはてなブックマークに追加
はてなブックマーク - ロードした画像達をタイル上に並べる2:CASA の DistributionCollection

Comments:1

そら 08-02-02 (土) 23:26

わざわざ記事にしてくださってありがとうございます。

codeタグを入れてプレビューしたら、1行ごとにp・brタグが自動的に挿入されて
長い文章になってしまったので、普通に投稿してしまいました。
「>」がエスケープされているなんて気が付きませんでした。
お手数かけてしまって申し訳ありません。

ドキュメントを読んでみると、Number.POSITIVE_INFINITYは必ず
横か縦に入れる必要があるみたいです。

attachMovieせずに普通にaddItemすれば良かったんですね。
3Dやデザイン畑の人間なので、まだまだActionScriptは敷居が高いです。

丁寧に対応して頂いてありがとうございます。
ボクの方こそよろしくお願いします。

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.trick7.com/blog/2008/01/31-231306.php/trackback
Listed below are links to weblogs that reference
ロードした画像達をタイル上に並べる2:CASA の DistributionCollection from trick7

Return to page top