swfはcssのbackgroundで指定しても背景にならないけれど、背景ぽく見せる方法メモ。
躓いたところ
swfがobjectのwidth、height100%で縦横100%にならなかった
cssでwidthとheightを100%指定して解決
動画のfitのさせ方（対策は後述）
html
|
1 2 3 4 5 6 7 8 |
<object type="application/x-shockwave-flash" width="320" height="240" title="title" data="swf/mov.swf"> <param name="movie" value="swf/mov.swf" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /><!-- Flashを下に --> </object> <div id="contents"> <p><img src="img/menu.png" width="440" height="340" alt="透過png" /></p> </div> |
css（すでにresetしているとして）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
body { overflow:hidden;/*スクロールバーを消す*/ } object{ width:100%; height:100%; position:absolute; top:0; left:0; } #contents{ position:absolute; top:50%; left:50%; margin-left:-220px; margin-top:-170px; } |
疑問点
z-indexは必要か？
swfとコンテンツの順番によっては必要だった
z-indexなしでswfの前にhtml要素が来る場合swfが上になる。
swf側のz-indexをコンテンツより小さくする。
例
|
1 2 |
object{z-index:0;} #contents{z-index:1;} |
swfをフィットさせるためには
AS2｜Stage.scaleMode = “noBorder”;
AS3｜stage.scaleMode=StageScaleMode.NO_BORDER;
これがわからなくてflvはfitしないのか？なんて諦めかけてた。
http://help.adobe.com/ja_JP/AS3LCR/Flash_10.0/flash/display/Stage.html#scaleMode
再読み込み（F5やブラウザのボタン両方）の反応が悪かったり良いことないなぁ