swfを背景にする

  • このエントリーをはてなブックマークに追加
  • LINEで送る

demo|swfを背景にする

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やブラウザのボタン両方)の反応が悪かったり良いことないなぁ

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.