as - Flash ActionScriptネタなど » Flash Actionscriptでリキッドデザイン

06/06: Flash Actionscriptでリキッドデザイン

Posted by: sato

ブラウザの表示領域いっぱいにFlashを表示し、ブラウザサイズを変更すると、それに合わせてステージサイズも変更されるようにしてみたいと思います。
サンプルです。

swf呼び出しhtml

Flashデータを呼び出すためのhtmlのサイズ指定を、width="100%" height="100%"とします。
パブリッシュ設定でサイズ指定をパーセントに設定しても良いです。
あと、余白やスクロールバーが出ないように、


<body bgcolor="#ffffff" topmargin="0" marginheight="0" leftmargin="0" marginwidth="0" scroll="no" style="overflow: hidden;">

といった感じにしておきます。

ActionScript

ステージサイズ幅100px、高さ100pxとし、
幅100px、高さ100pxのムービークリップbgを座標(0,0)に配置しておきます。サンプルでは青枠のムービークリップを用意しました。


Stage.scaleMode = "noScale";

var stageListener:Object = new Object();

stageListener.onResize = function(){ resize(); }

Stage.addListener(stageListener);

resize();



//最初に１回実行するため関数としました。

function resize(){

  //座標の原点を左上にする。

  _root._x = - (Stage.width  - 100) / 2;

  _root._y = - (Stage.height - 100) / 2;

  //ステージ上のムービークリップを設定し直す。

  bg._xscale = Stage.width;

  bg._yscale = Stage.height;

}

以上で、IE6では思った通りに表示されました。

でも、このままではFireFoxでは、height方向がうまくいきません。
パブリッシュで吐き出したhtmlの１行目のDOCTYPEの指定方法によって失敗するみたいです。（詳しく調べていません。）
サンプルでは、DOCTYPEを取っ払ってしまいました。
そう！「最初に１回実行するため関数としました。」としている理由も、FireFoxとIEとで挙動が違ったためです。
IEはサイズ変更しなくても、最初にstageListener.onResizeイベントが発生するのですが、FireFoxでは発生しないみたいでした。
これで何とかFireFoxでもうまくいきました。

んーMacでも試してみたい。

サンプルはこちらからダウンロードできます。