AS3でフルFlashサイトでの固定配置（リキッドレイアウト）を実装する

特にフルFlashサイトなどでは、ブラウザのサイズを変更しても、フッターを下につけたままにしたい、ボタンを中央にキープしたいなどといった場合があります。Webではリキッドレイアウトといいますが、このように、さまざまなサイズのブラウザでも体裁を保ちたいといった要望がFlashにも求められることが多くなりました。

そこで、任意のムービークリップにクラス「SampleMc01」が設定してあることを前提に、ActionScript3で固定配置するさまざまなサンプルをまとめたいと思います。

まず、ムービークリップを配置するステージをフルFlashにして、ステージの基準点を左上に設定したとします。

import flash.display.StageScaleMode;
import flash.display.StageAlign;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

左上に固定配置する

SampleMc01の中で、以下のように位置を指定します。

public class SampleMc01 extends MovieClip {
	this.x = 0;
	this.y = 0;
}

左下に固定配置する

画面のリサイズがあった場合に、底辺についてゆくようにイベントリスナーを設定します。yは底辺からの距離ですね。

public class SampleMc01 extends MovieClip {
	this.x = 0;
	this.y = stage.stageHeight - y;
	stage.addEventListener(Event.RESIZE, keeplayout);
}
private function keeplayout(e:Event):void {
	this.y = stage.stageHeight - y;
}

右下に固定配置する

同様にしてx軸にもついても右端についていくようにイベントリスナーに追加します。

public class SampleMc01 extends MovieClip {
	this.x = stage.stageWidth - x;
	this.y = stage.stageHeight - y;
	stage.addEventListener(Event.RESIZE, keeplayout);
}
private function keeplayout(e:Event):void {
	this.x = stage.stageWidth - x;
	this.y = stage.stageHeight - y;
}

中央に固定配置する

中央からx, yの距離に固定配置する場合は、それぞれ「stage.stageWidth / 2 – x」、「stage.stageHeight / 2 – y」とすればよいですね。

public class SampleMc01 extends MovieClip {
	this.x = stage.stageWidth / 2;
	this.y = stage.stageHeight / 2;
	stage.addEventListener(Event.RESIZE, keeplayout);
}
private function keeplayout(e:Event):void {
	this.x = stage.stageWidth / 2;
	this.y = stage.stageHeight / 2;
}

フッターエリアの幅をリキッドレイアウトにする（幅いっぱい）

底辺からの位置を保持しつつ、ブラウザの幅に合わせてオブジェクトの幅を更新します。

public class SampleMc01 extends MovieClip {
	this.x = 0;
	this.y = stage.stageHeight;
	this.width = stage.stageWidth;
	stage.addEventListener(Event.RESIZE, keeplayout);
}
private function keeplayout(e:Event):void {
	this.y = stage.stageHeight;
	this.width = stage.stageWidth;
}

フッターエリアの幅をリキッドレイアウトにする（中央・同比率幅）

ムービークリップのオブジェクトを中央揃えにした場合です。フッターエリア幅をブラウザ幅の80%で保持します。
少し複雑ですが、イメージできますでしょうか。。。

public class SampleMc01 extends MovieClip {
	this.x = stage.stageWidth / 2;
	this.y = stage.stageHeight;
	this.width = stage.stageWidth * 0.8;
	stage.addEventListener(Event.RESIZE, keeplayout);
}
private function keeplayout(e:Event):void {
	this.x = stage.stageWidth / 2;
	this.y = stage.stageHeight;
	this.width = stage.stageWidth * 0.8;
}

これらの組み合わせにより、ほとんどのリキッドレイアウトの要件に対応できます。