ロードした画像達をタイル上に並べる

CASA Framework の LoadGroup でまとめてロードしたサムネイル画像を、所定サイズ内に収まるようにタイル上に並べたくてとりあえず書いたコード。

今から根本的に違うもの作るから一時保管メモ。

var thumbs:Array = thumbLoadGroup.getLoads();
var preMc:MovieClip;
for(var i:Number=0;i<thumbs.length;i++){
var mc:MovieClip = thumbs[i].getMovieClip();
if(preMc._x + preMc._width + mc._width <= this._width){
mc._x=preMc._x+preMc._width;
mc._y=preMc._y;
}else{
mc._x=0;
mc._y=preMc._y+preMc._height;
}
preMc = mc;
}

preMc は直前に処理したムービークリップ。LoadGroup 完了後にこの処理をするので、getMovieClip() して _width や _height もキチンと取得できる。

forループ1発目の preMc._x とかは undefined だけど 0 として扱ってくれるので気にしない。

6行目の this._width 部分を折り返しMAXのx座標値にすればOK。

割と初期の段階で CASA パッケージをダウンロードした人は、LoadGroup のインスタンスメソッド getLoads が追加される前のパッケージの可能性があるので最新版のご確認を。getLoads() と (MediaLoadクラスの)getMovieClip() は便利ですよ。

getLoads()して配列に格納して中のMediaLoadインスタンスをgetMovieClip()すると、一番最後にロードしたものが配列番号0番目になっているので注意

たぶんもっとスマートな方法はあるんでしょうね。何を今更的なコードだけど、こういう数学パズル的なことを考えるのが楽しい。この楽しさを5年前ぐらいの僕に教えてやりたい。

追記:同じようなタイリング用ユーティリティーがの CASA に既にあるということをたけしCEOに教えてもらいました。CASA の DistributionCollection を使えばいいとのこと。リンク先ページ「View source」でクラスファイルが見れるので、いかにスマートに実装してるかを見比べるがいいさ。

Comments:4

たけし 07-11-27 (火) 12:39

CASA の DistributionCollection も指定範囲にタイル上に並べられますよー
CSSっぽくマージンとかも設定できるので、ただ”並べるだけ”なら一応使えないことはないかとw

tera 07-11-27 (火) 13:49

ええ〜っ!そうだったんですか!!
僕がAPIリファレンス読んでないのがバレてしまいましたねwじっくり読まないとですね。
お恥ずかしい限りです。いやはやCASA便利だなぁ。

そら 08-01-31 (木) 18:30

こんにちは、いつも参考にさせて頂いています。

ビデオチュートリアルCASAを使ってホットペッパーの画像を読み込み
この記事を参考にして画像をタイル上に並べることが出来ました。

次にCASAのDistributionCollectionが便利そうなので、
これを使ってタイル上に並べようとしているのですがうまくいきません。
ドキュメントのサンプルは動かすことが出来ました。

今現在はこのようになってます。

function onGroupLoadComplete(){
trace(”全画像ロード完了”);

var _dist:DistributionCollection;
_dist = new DistributionCollection( true );
_dist.setRectangle( new Rectangle(50, 50, 800, Number.POSITIVE_INFINITY) );
_dist.setMargin(10, 10, 10, 10);

var thumbs:Array = myLoadGroup.getLoads();
for(var i:Number=0;i
var mc:MovieClip = thumbs[i].getMovieClip();
_dist.addItem( attachMovie(”mc”, “mc”+i, getNextHighestDepth()));
}
_dist.positionItems();
}

四角などのMovieClipを作って、リンゲージをboxとかにして
attachMovieのmcと置き換えると四角がタイル上に整列出来ます。

間違っている箇所があればご指摘くださるとありがたいです。

tera 08-01-31 (木) 23:22

>soraさん
コメントありがとうございます。
興味深かったので別エントリにしました。
http://www.trick7.com/blog/2008/01/31-231306.php
僕も知らないことがあったので勉強になりました。
今後ともよろしくお願いいたします。

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.trick7.com/blog/2007/11/27-004634.php/trackback
Listed below are links to weblogs that reference
ロードした画像達をタイル上に並べる from trick7

Moleskine Plain Notebook Large

アイデア帳として。

AS3習得本
AS3の全容を学習できる本。この中でどれか1冊自分に合ったものを。
Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD-ROM付) Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付) ActionScript3.0 プロフェッショナルガイド 初めてのActionScript 3.0 Flashユーザーのためのステップアップガイド 詳説 ActionScript 3.0 Actionscript 3.0 Cookbook
AS3発展本
ASでアニメーションさせる面白さを知るための本。最後のはPHP連携デビューにオススメの洋書。
Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編] ActionScript 3.0 アニメーション AdvancED ActionScript 3.0 Animation (Advanced) Flash and PHP Bible (Bible (Wiley))
AS2
"Flash"ではなく"ActionScript2.0"学習のための良著。他にもいろいろ読んだけど、この4冊を読んだ後、自分が成長できた感じがしました。
FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付] Essential Actionscript 2.0 Flash 8 Essentials Foundation Actionscript Animation: Making Things Move (Foundation)

Return to page top