カテゴリー：ActionScript

AS3ライブラリ LiquidLayouterの使い方

今回は、先日公開したFlashのリキッドレイアウト用ライブラリLiquidLayouterの使い方を紹介したいと思います。LiquidLayouterのパッケージは、LiquidLayouterページよりダウンロードして下さい。

まず下図のように、解凍したフォルダのsrcフォルダにあるjpフォルダをflaファイルと同じ場所に置きます。環境設定のActionScriptにあるActionScript3.0設定でソースパスを指定しても構いません。

次は、LiquidLayouterのパッケージをimportします。LiquidLayouterのパッケージは、jp.kudox.layoutになります。SizeFollowRuleクラスの定数を使用する場合は、SizeFollowRuleもimportします。

ActionScript3.0

import jp.kudox.layout.LiquidLayouter;
import jp.kudox.layout.SizeFollowRule;

LiquidLayouterを使用する場合、まず最初に初期化する必要があります。LiquidLayouterはstaticクラスなので、初期化はコンストラクタではなくinit()メソッドを使用します。

第1引数はstageの参照、第2引数はstageWidthの初期値、第3引数はstageHeightの初期値、第4引数はstage.alignの値、第5引数はステージの最小幅、第6引数はステージの最小高さ、第7引数はステージの最大幅、第8引数はステージの最大高さをそれぞれ指定します。

第2引数と第3引数は、Flashのプロパティパネルで指定したステージの幅と高さを指定します。第4引数以降は、省略可能です。ステージの幅と高さの最小値を指定した場合、ステージサイズがそれ以下の値になっても指定した最小値として処理します。同じように最大値を指定した場合もステージサイズがそれ以上の値になっても、指定した最大値として処理します。

ActionScript3.0

LiquidLayouter.init(stage, 1280, 900, "", 800, 600, 1920, 1200);

次にリキッドレイアウトで配置したいオブジェクトをLiquidLayouterに登録します。LiquidLayouterは、登録されたオブジェクトの座標のみをリキッドレイアウトで配置します。登録されていないオブジェクトは、通常通りstage.alignの値に従って配置されます。

オブジェクトの登録には、addLiquidItem()メソッドを使用します。第1引数はDisplayObjectの参照、第2引数はステージのどこに配置するかをStageAlignクラスの定数で指定します。第3引数はDisplayObjectがステージの表示リストから消された際にLiquidLayouterの持つ参照を自動で破棄するかのブール値、第4引数は座標を整数にするかのブール値を指定します。

第5引数はx座標値、第6引数はy座標値、第7引数はx座標がパーセントでの指定であるかを示すブール値、第8引数はy座標がパーセントでの指定であるかを示すブール値を指定します。第3引数以降は省略可能です。

座標値を省略またはNaNを指定した場合は、現在のそのオブジェクトの座標値が指定されます。第7,8引数をtrueにした場合、第5,6引数は、それぞれ1を100%とするステージサイズに対するパーセント値となります。

ActionScript3.0

LiquidLayouter.addLiquidItem(foo_mc, StageAlign.TOP_LEFT);
LiquidLayouter.addLiquidItem(hoge_mc, StageAlign.BOTTOM, false, true, 0.1, NaN, true, false);

LiquidLayouterは、ステージサイズに応じてDisplayObjectのサイズを自動的に変化させる機能も持っています。この機能を使用するためにはaddSizeFollowItem()メソッドを使用します。第1引数はDisplayObjectの参照、第2引数は、SizefollowRuleクラスの定数を指定します。多くの場合、AUTOで対応できるでしょう。

第3引数以降は省略可能のオプションです。第3引数はDisplayObjectがステージの表示リストから消された際にLiquidLayouterの持つ参照を自動で破棄するかのブール値、第4引数はwidth,heightを整数にするかのブール値を指定します。第5引数はwidth、第6引数はheight、第7引数はwidthがパーセントでの指定であるかを示すブール値、第8引数はheightがパーセントでの指定であるかを示すブール値を指定します。

ActionScript3.0

LiquidLayouter.addSizeFollowItem(fuga_mc, SizeFollowRule.AUTO);

以上でステージサイズが変更された際にLiquidLayouterが自動で処理をするようになります。DisplayObjectを動的に生成した場合など、LiquidItemやSizeFollowItemを更新したい場合もあるでしょう。LiquidItemの更新には、coordinatesUpdate()メソッドを、SizeFollowItemの更新にはsizeUpdate()メソッドを呼びます。

ActionScript3.0

LiquidLayouter.sizeUpdate();
LiquidLayouter.coordinatesUpdate();

より詳細なリファレンスについては、LiquidLayouterリファレンスをご覧下さい。