FlashでリキッドデザインのWebパーツを作る

フォームアプリケーション
1. サンプルのFlashをここからダウンロードしてください。
これからリキッドデザイン化を行っていく仮想サイトのデザインが配置されています。レイヤー毎に1オブジェクトずつ配置されており、今回設定を行うのは左の端にある「Line」、左上にある「Title」、右下にある「Navigation」、背景にある「Background」の4インスタンスです。

2. まずステージのサイズを取得します。以下のActionscriptをレイヤー「Action」の1フレーム目に記述してください。
myStageHeight = Stage.height;
myStageWidth = Stage.width;
前頁の通り、ステージの幅と高さを取得しています。

3. 続けてステージがリサイズされた場合の処理を記述します。
Stage.scaleMode="noScale"
myListener = new Object();
myListener.onResize = function() {
myStageHeight = Stage.height;
myStageWidth = Stage.width;
resize(myStageHeight,myStageWidth);
}
Stage.addListener(myListener);
こちらも前頁の通りですね。

リスナーの中の処理について、ステージがリサイズされた場合、改めてステージのサイズを取得する必要があります。ここではまずステージサイズを再取得しています。
リサイズ時の処理については別途関数を用意します。ここでは関数「resize(A,B)」として、ステージ幅、高さの二つの引数を関数に渡しています。

4. 最初に設定を行うのは左の端にある「Line」です。デザイナーからの指示では「幅を変えないで上から下までぴったりと」と言われたことにしましょう。先ほど後回しにした、リサイズされた場合の関数「resize()」の中身を指定していきます。先程のActionscriptに続けて以下の記述を行ってください。
function resize(H,W){
	Line._height = H;

}
まず引数としてステージの高さをH、幅をWとしています。
インスタンス「Line」は高さのみ変更すれば良いので、インスタンスの高さをステージの高さに変更するという意味になっています。

5. 次に左上にある「Title」の配置です。デザイナーいわく「左から20px、上から10pxくらいで」とのことです。関数「resize()」の中に追記していきましょう。
	Title._y = 10;
	Title._x = 20;

追記した行について見ていきましょう。今度はサイズはそのままに、位置だけを変更しています。タイトルの位置を縦「10」に、横「20」に設定しています。

6. 次に右下にある「Navigation」の配置です。デザイナーいわく「右下から10pxずつのところで」とのことです。関数「resize()」の中に追記していきましょう。
	Navigation._y = H - (Navigation._height + 10);
Navigation._x = W - (Navigation._width + 10);
右下という基準は、「ステージのサイズ - オブジェクトのサイズ」で求めることができます。それより10px内側ですから()で区切って先に「+10」しているというわけです。

7. 最後に背景にある「background」です。デザイナーからの指示は「縦横共にぴったりと」。背景の場合は少し特殊で、ステージの縦横のアスペクト比が変動する可能性を考慮しなければなりません。
	parH = H/300;
parW = W/400;
if(parH<parW){
Background._yscale = parW * 100;
Background._xscale = parW * 100;
}else{
Background._yscale = parH * 100;
Background._xscale = parH * 100;
}

最初の2つの行についてから見ていきましょう。元の背景のインスタンスは縦300px、横400pxで作成しています。そこで、現在のステージの高さ・幅より最低限必要な拡大率を求めたが「parH」、「parW」の二つです。

次にif文でこの二つを比較し、どちらの値を採用するかを決定しています。最後に採用した拡大率に背景のサイズを変更しているという流れになります。

次のページでは、ここまでの全文をまとめて見ていきましょう。