イナヅマTVログ

フルサイズFlashをブラウザウインドウにフィットさせる覚書

| 1件のコメント

ブラウザウインドウいっぱいに広がるFlashコンテンツを作成するためのオレメモ。

Flashコンテンツを幅・高さ100% / 100% にしブラウザウインドウ内いっぱいいっぱいに表示させるためにすること。

swfobject
幅・高さとも100%に設定

swfobject.embedSWF("example.swf", "swfcontent", "100%", "100%", "10.0.0","expressinstall.swf")

HTML
IE 8のバグ対策:IE 7モード

<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<div id="swfcontent">
このタグをFlash objectタグで置換え
</div>

CSS

html, 
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#swfcontent {
	outline: none;
	min-height: 600px;
	min-width: 900px;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

Firefox対策のためにoutline: none;, position: absolute;
position: absolute;は今は必要無さそうだけど入れても弊害は無さそうなので…

以下は必要に応じて
・ブラウザのスクロールバーを消す:overflow: hidden;
・最小幅・高さを指定min-heigh,min-width:

Actionscript

import flash.display.StageAlign;
import flash.display.StageScaleMode;
 
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

StageScaleMode.NO_SCALEにしたらRESIZEを監視して自力でどうするかのScriptが必要。