swfはcssのbackgroundで指定しても背景にならないけれど、背景ぽく見せる方法メモ。
躓いたところ
swfがobjectのwidth、height100%で縦横100%にならなかった
cssでwidthとheightを100%指定して解決
動画のfitのさせ方(対策は後述)
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>
css(すでにresetしているとして)
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をコンテンツより小さくする。
例
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やブラウザのボタン両方)の反応が悪かったり良いことないなぁ
関連記事かもしれん:
- 新しい記事:sakurachiro.com
- 古い記事:lintに怒られないFlash挿入