Flashを全画面で表示して、スクロールバーを出す方法

Javascript

全画面のFlashサイトがありますが、Flashのサイズが大きいと画面サイズによっては 見えなくなる領域もできます。Flash内でスクロールできれば問題はないのですが、ブラウザのスクロールバーをだしたい時ようのメモです。

表示方法

使うのは以下2つのJS

まずは<head>の中に

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="swfforcesize.js"></script>

と記述しJSを読み込みます。そして続いて以下を記述します。

<script type="text/javascript">
	var flashvars = {};
		flashvars.url = "test.swf";
		flashvars.color = "0xFFFFFF";
	var params = {};
		params.play = "true";
		params.loop = "false";
		params.quality = "best";
		params.scale = "noscale";
		params.salign = "tl";
		params.bgcolor = "#000000";
		params.allowfullscreen = "true";
		params.allowscriptaccess = "sameDomain";
	var attributes = {};
		attributes.id = "flashId";
		attributes.name = "flashId";
		attributes.styleclass = "flashClass";
	swfobject.embedSWF("test.swf", "flash", "100%", "100%", "10", "expressinstall.swf", flashvars, params, attributes);
	swfobject.addLoadEvent(function()
	{
		var obj = document.getElementById("wrap");
		if(obj)
		{
			var forcesize = new SWFForceSize(obj, 1024, 768);
			forcesize.onLoadDiv();
		}
	})
</script>

中の細かい値はいらないのもあるのかもしれませんが、よくわからないのでこちらのソースをもってきて使用箇所だけ適宜変えてます(赤字のところ)。

続いてCSSを記述します。

html {
height: 100%;
overflow: auto;
}

body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

#wrap {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
line-height: 0;
}

これであとはbody内に以下のように記述します。

<body>
<div id="wrap">
<div id="flash">
<p>Flashが表示できないときの文言をここに書きます。</p>
</div>
</div>
</body>

以上で一定のサイズに縮小されたらスクロールバーがでます。ほとんどコピペですのでサンプルは参考にしたサイトswfobject2.2 & swfforcesize のテストでご覧下さい。

参考/関連サイト