【CASA】グリッド状にMCを整列する
まるでSEOスパムのようなクラスリストに引っかかって、DistributionCollectionの検索ワードでたどり着く方が多いようなので、今回はこれで。
フォトギャラリーのサムネイルとかにそこそこ使えるけど、再配置した時にアニメーションさせるとかが出来ないのでそのうち改造してやろうかしら。
使い方はいたって簡単。
Actionscript:
-
import org.casaframework.layout.DistributionCollection;
-
import org.casaframework.math.geom.Rectangle;
-
-
var _dist:DistributionCollection;
-
-
//インスタンス生成
-
_dist = new DistributionCollection( true );
-
//描画の範囲を設定 x, y,
-
_dist.setRectangle( new Rectangle(10, 10, 500, Number.POSITIVE_INFINITY) );
-
//各アイテムのマージンの設定、CSSとmarginと同じ
-
_dist.setMargin(20, 5, 5, 5);
-
-
var len:Number = 10;
-
for ( var i = 0 ; i <len ; i++ ) {
-
//addItemで整列対象のMCを順番にポコポコ追加していく。
-
_dist.addItem( this.attachMovie("box", "box"+i, this.getNextHighestDepth() ) );
-
}
-
-
//整列させる
-
_dist.positionItems();
インスタンス作って、配置するエリアを指定して、マージン設定して、整列させるMCをポコポコ追加して、描画したら終了。
相変わらず楽チンですね。
DistributionCollectionのインスタンス生成時にtrueを突っ込んでるところはピクセルスナップのオンオフです。
多分ほとんどの場合でオンにしといた方が何かと幸せな気がする。
それと、setRectangleで描画範囲を設定するんですけど、Rectangleの設定で幅もしくは高さのどっちかにinfinityを設定しとかないとちゃんと整列してくれないので注意。
整列の順番はaddItemで突っ込んだ順番です。
オブジェクトを指定して、何番目かという順番の取得は出来るけど、再設定できないっぽい。
というわけで、順番の入れ替えとかは後から変更する手段が無いっぽいので注意。
応用としては、Rectangleを別に保持しておいて、Stageのサイズに合わせてonResizeとかで値変更して再描画、とかすると画面サイズにそって整列するサムネイルとかを楽チンに作れたりします。
そんな感じ。
