swfはcssのbackgroundで指定しても背景にならないけれど、背景ぽく見せる方法メモ。
躓いたところ
swfがobjectのwidth、height100%で縦横100%にならなかった
cssでwidthとheightを100%指定して解決
動画のfitのさせ方(対策は後述)
html
[html]
<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>
[/html]
css(すでにresetしているとして)
[css]
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;
}
[/css]
疑問点
z-indexは必要か?
swfとコンテンツの順番によっては必要だった
z-indexなしでswfの前にhtml要素が来る場合swfが上になる。
swf側のz-indexをコンテンツより小さくする。
例
[css]
object{z-index:0;}
#contents{z-index:1;}
[/css]
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やブラウザのボタン両方)の反応が悪かったり良いことないなぁ