スティックメェン!
Flashでオーバーレイする方法を書きました。が、スティックマンが蹴散らしてくれます。潰される前に読みきってください。
ではスタート。
エイプリルフールでやったネタみたいにFlashページにすりかえているわけではなくて、HTMLの上にFlashコンテンツを重ねています。
すでに暴れているとは思いますが、ジャマなやつはマウスあててやるとちょっとだけおとなしくなります。これを使えば、たぶん読みきれるんじゃないでしょうか(このルールをちゃんと読めていることをお祈りする)。
では、オーバーレイの説明です。
あぁ、その前にくだらねー話、聞いていただけますか?
このあいだ電車乗ってたら、いかにも研究生っぽい二人が対面にすわって、粒子だか量子だか、そんな内容の会話をしてて、うるーせーなーと思いながらも、寝たフリして聞いてたんですよぉ。
そしたら、話題はテレポーテーションの話になって(これも冗談なのか、本気なのかわからない口ぶりだったんだけど)、
改札とか通り抜けてさー、
電車代タダになるじゃーん。」
「そーだよねー、いいよねー。」
とかいって、夢見がちに遠い空を見ていた。
・・まったく理学者というものは、頭いいのか悪いのかわからん。
テレポートできたら、電車乗る必要ねーだろっ
寝たフリがバレないように、平常心を保つのに必死でした。
さて、オーバーレイのやりかた。
特殊な方法があるわけではなくて、単純に<div></div>で囲んだObjectタグを、position="absolute"で、表示するだけです。Flashを透過にするには、wmode=transparentをつける。
これをまとめると、こんな感じのJavaScriptコードになります。
fla.style.position = 'absolute';
fla.innerHTML = '<object ~>'
+ '<param name="wmode" value="transparent" />'
~
+ '</object>';
targetElement.insertBefore(fla, targetElement.firstChild);
難しいのかと思いきや、ポイントはこれだけで、HTMLのオーバーレイと同じです。ただし、FlashPlayer特有の挙動がありそうで、ブラウザによっても違うようです。
例えばここでは、IEではtargetElementをdocument.bodyにしています。なので、ブラウザを横に広げると、文章とFlashの位置がずれることがわかると思います。GeckoではtargetElementをdivにしています(IEではうまくいかなかった)。
※アニメがヘタくそなのはご勘弁

