1. TOPページに戻る
  2. Javascript
  3. Flashを全画面で表示して、スクロールバーを出す方法

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

全画面の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 のテストでご覧下さい。

参考/関連サイト