背景にFlashを貼る方法

背景にFlashを貼る方法です。

サンプルが残念なのでもうちょっとしたら修正しときます。
こんな感じ
http://moeten.info/flex/20090420_underLaySakura/test.html
HTMLにFlashを貼る方法はむらけんさんのOverLayが大変参考になります。
underLay呼び出し方法。ＪＳをインクルードして呼び出せます。

<script src="/mylib/js/underlay/underLayFlash.js" type="text/javascript" language="javascript"></script>
<a href="/flex/20090420_underLaySakura/bin-release/main.swf" rel="underLayFlash" ver="9,0,0,0">クリックしてね！</a>

すべてのソースはこちら
underLay（むらけんさんのOverLayのzIndex部分を変更したもの）
基本はcssのz-indexで重なりを制御します。

/*
    overLayFlash JS: Fullsize FLash Overlays
    by Ken Murayama むらけん - http://www.muraken.biz
    本スクリプトの利用、あるいは利用できないことによって発生した損失や損害に対してむらけんならびにF-siteは一切責任を負いません。
    自由に改変、利用してもらって構いません。
    但し転載する場合は、引用元を明記し、リンクを張ってください。
*/
//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){
    var yScroll;
    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop){     // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
    } else if (document.body) {// all other Explorers
        yScroll = document.body.scrollTop;
    }
    arrayPageScroll = new Array('',yScroll)
    return arrayPageScroll;
}
//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function getPageSize(){
    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {
        xScroll = document.body.scrollWidth;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }
    var windowWidth, windowHeight;
    if (self.innerHeight) {    // all except Explorer
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }
    // for small pages with total height less then height of the viewport
    if(yScroll < windowHeight){
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }
    // for small pages with total width less then width of the viewport
    if(xScroll < windowWidth){
        pageWidth = windowWidth;
    } else {
        pageWidth = xScroll;
    }
    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
    return arrayPageSize;
}
//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function pause(numberMillis) {
    var now = new Date();
    var exitTime = now.getTime() + numberMillis;
    while (true) {
        now = new Date();
        if (now.getTime() > exitTime)
            return;
    }
}
function showFlash(objLink){
    var file = objLink.href ? objLink.href : objLink;
    var ver = objLink.ver;
    if(navigator.appName.indexOf("Microsoft") != -1){
        var br = "ie";
    }else{
        var br = "other";
    }
    var arrayPageSize   = getPageSize();
    var arrayPageScroll = getPageScroll();
    var objBody = document.body;
    var objUnderlay = document.createElement("div");
    var myTag= '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version='+ver+'" width="100%" height="100%" id="underlayFlash" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="'+file+'" /><param name="quality" value="high" /><param name="salign" value="lt" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /><param name="FlashVars" value="br='+br+'" /><embed src="'+file+'" quality="high" salign="lt" swLiveConnect=true wmode="transparent" bgcolor="#ffffff" FlashVars="br='+br+'" width="100%" height="100%" name="underlayFlash" id="underlayFlash" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>';
    objUnderlay.setAttribute('id','myunderlay');
    objUnderlay.style.display  = 'block';
    objUnderlay.style.position = 'absolute';
    objUnderlay.style.top      = '0';
    objUnderlay.style.left     = '0';
    objUnderlay.style.zIndex   = '0';
     objUnderlay.style.width    = '100%';
    objUnderlay.style.height   = (arrayPageSize[1] + 'px');
    objUnderlay.innerHTML      = myTag;
    objBody.insertBefore(objUnderlay, objBody.firstChild );
    //window.document.underlayFlash.onclick = function () {hideFlash(); return false;}
    objUnderlay.style.display = 'block';
}
function hideFlash(){
    var objBody = document.body;
    objBody.removeChild(objBody.firstChild);
}
function initunderLayFlash(){
    if (!document.getElementsByTagName){ return; }
    var anchors = document.getElementsByTagName("a");
    // loop through all anchor tags
    for (var i=0; i<anchors.length; i++){
        var anchor = anchors[i];
        if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "underLayFlash")){
            anchor.onclick = function () {
                showFlash(this);
                return false;
            }
        }
    }
}
function startUnderLay(url)
{
  alert(url);
}
//
// addLoadEvent()
// Adds event to window.onload without underwriting currently assigned onload functions.
// Function found at Simon Willison's weblog - http://simon.incutio.com/
//
function addLoadEvent(func)
{
    var oldonload = window.onload;
    if (typeof window.onload != 'function'){
        window.onload = func;
    } else {
        window.onload = function(){
        oldonload();
        func();
        }
    }
}
addLoadEvent(initunderLayFlash);

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
 <head>
  <meta name="Author"                   content="moeten info">
  <meta http-equiv="Content-Type"       content="text/html; charset=Shift_JIS">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <link rel="stylesheet" type="text/css" media="screen" href="/style.php?BROWSER=ie">
<style type="text/css">
#wrapper{
  z-index:1;
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  text-align:center;
  border:1px solid red;
  padding:10px;
}
#wrapper .main{
  border:1px solid red;
  width:500px;
  margin:0 auto;
}
#wrapper .main th{
  background-color:#ffccff;
}
h1{
  padding:30px;
}
h1 a{
  font-size:20px;
  font-weight:bold;
}
</style>
 </head>
<body>
<script src="/mylib/js/underlay/underLayFlash.js" type="text/javascript" language="javascript"></script>
<div id="wrapper">
<div class="main">
<center>
<h1>＞<a href="/flex/20090420_underLaySakura/bin-release/main.swf" rel="underLayFlash" ver="9,0,0,0">クリックしてね！</a>＜</h1>
<table width="80%" align="center">
 <tbody>
  <tr>
   <th width="100">お店名</td>
   <td class="td_nakami">メイドカフェでGO！</td>
  </tr>
  <tr>
   <th>説明</td>
   <td class="td_nakami">全国のメイドカフェをはじめとした紹介情報サイトです。<br /><br />実店舗は現在持っていません。<br />住所は事務所となります。</td>
  </tr>
  <tr>
   <th>ジャンル</td>
   <td class="td_nakami">メイド喫茶紹介</td>
  </tr>
  <tr>
   <th>住所</td>
   <td class="td_nakami"><address>東京都千代田区神田練塀町76 </address></td>
  </tr>
  <tr>
   <th>電話番号</td>
   <td class="td_nakami"><address>000-000-000</address></td>
  </tr>
  <tr>
   <th>公式サイト</td>
   <td class="td_nakami"><a href="http://moeten.info/maidcafe/" target="_blank">http://moeten.info/maidcafe/</a></td>
  </tr>
  <tr>
   <th>モバイル</td>
   <td class="td_nakami"><a href="http://moeten.info/maidcafe/i/">http://moeten.info/maidcafe/i/</a></td>
  </tr>
  <tr>
   <th>オープン日</td>
   <td class="td_nakami">2003年2月23日</td>
  </tr>
 </tbody>
</table>
<img src="http://moeten.info//myimage/dayinfo_14165_480.jpg">
</center>
</div>
</div>
</body>
</html>

背景に入れるFlash

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="init()" verticalScrollPolicy="off" horizontalScrollPolicy="off"
    backgroundColor="0xffffff" backgroundAlpha="1" backgroundGradientAlphas="[1,1]" backgroundGradientColors="[0xffffff,0xffffff]"
    >
<mx:Script>
<![CDATA[
private var timer:Timer = new Timer( 200 );
private function init():void{
    timer.addEventListener(TimerEvent.TIMER , onTimer );
    timer.start();
}
private function onTimer( e:TimerEvent ):void{
    var myx :int = int( myImage.width  * Math.random() )
    var myy :int = int( myImage.height * Math.random() )
    makeParticle( myx , myy );
}
//桜パーティクル作成。クラス化したいねぇ
[Embed(source='sakura.png')]private var flower:Class
private var _vol:Number     = 3;
private var _drag:Number    = 0.9;
private var _shrink:Number  = 0.95;
private var _gravity:Number = 0.8;
private var _fade:Number    = 0.02;
private var _wind:Number    = 0.3;
private var xVelArr:Array   = new Array();
private var yVelArr:Array   = new Array();
private var rotArr:Array    = new Array();
private var cnt:int         = 0;
private function makeParticle(x:Number,y:Number):void{
    _gravity = -0.2;
    _wind    = -0.2;
    for (var i:uint = 0; i < 2; i++){
        var pt:Point = getNearPoint( new Point( x , y ) );
        var mc:Bitmap = new flower();
        mc.x    = pt.x;
        mc.y    = pt.y;
        mc.alpha = Math.random()*1;
        mc.name = "" + cnt;
        xVelArr[cnt] = getRandRange( -5, 5);
        yVelArr[cnt] = getRandRange( -5, 5);
        rotArr[cnt]  = getRandRange( -20, 20);
        mc.addEventListener(Event.ENTER_FRAME, function(e:Event):void{
            var m:Bitmap = e.target as Bitmap;
            if ( m.alpha > 0){
                var c:int     = int( m.name );
                m.x          += xVelArr[c] + _wind * 10;
                m.y          += yVelArr[c];
                xVelArr[c]   *= _drag;
                yVelArr[c]   *= _drag;
                m.scaleX     *= _shrink;
                m.scaleY     *= _shrink;
                yVelArr[cnt] += _gravity;
                m.alpha      -= _fade;
                m.rotation   += rotArr[c];
            }else{
                m.removeEventListener(Event.ENTER_FRAME, arguments.callee);
                myImage.removeChild(m);
                m = null;
            }
        });
        cnt ++;
        myImage.addChild( mc );
    }
}
private function getRandRange(min:Number, max:Number):Number{
    var randomNum:Number = (Math.random() * (max - min )) + min;
    return randomNum;
}
private function getNearPoint(pt1:Point):Point{
    var len:uint   = Math.round(Math.random() * 10);
    var angle:uint = Math.round(Math.random() * 2 * Math.PI);
    var pt2:Point  = Point.polar(len, angle);
    pt2.offset( pt1.x, pt1.y );
    return pt2;
}
]]>
</mx:Script>
<mx:Sequence repeatCount="0" id="myShow">
    <mx:Move xTo="{myImage.width-330}" duration="2000"/>
    <mx:Move yTo="{myImage.height-330}" duration="2000"/>
    <mx:Move xTo="30" duration="2000"/>
    <mx:Move xTo="30" yTo="30" duration="2000"/>
</mx:Sequence>
<mx:Image id="myImage" width="100%" height="100%" x="0" y="0"/>
<mx:Image source="@Embed('negi.png')" creationCompleteEffect="myShow" width="300" x="30" y="30"
    mouseOver="{myShow.pause()}" mouseOut="{myShow.resume()}"/>
</mx:Application>