overlayFlash2.jsを作ってみた

javascript Flash

HTML表示領域をうまくカバーしつつ、全画面をFlash表示で覆う、という仕組みをjavascriptで実現しているスクリプトが公開されています。

なかなか良さそうだなーと思って、ダウンロードしていろいろ試していたら、これはこれですごいのですが、微妙に使いにくかったり、いろいろと不満点が出てきたので、overLayFlash.js作者のむらけんさんに感謝しつつ、思い切って改変することにしてみた。

overlayFlash2.js

今回の改変ポリシーとして、「ライブラリとして使いやすく、最低限の機能に特化」「Flashとかからも呼べるように」ということ。改変したところは、以下のようになります。

  • 自身のファイル名を変更（→overlayFlash2.js）.
  • pause関数を削除.
  • showFlash を showOverlayFlash( swfname, swfver ); というインターフェイスに変更.
  • showOverlayFlash9(); という簡易版インターフェイスを追加.
  • showOverlayFlashで作成したdiv要素のidを返すように変更.（最新 id は lastFlashID にも格納）
  • hideFlash を hideOverlayFlash(); に関数名変更.
  • hide処理は自分のタイミングで呼びたいので、「onclickを埋め込み、hideFlashを呼んでいたコード」を削除.
  • javascriptの流儀はよく知らないが、aタグ内rel要素を見て、onclickイベントをつける、というのは、ライブラリのやることではないように思うので、初期化処理を削除.
  • Flashを表示したdivについてid管理が出来る仕組みを実装.
  • ウィンドウリサイズ時にウィンドウサイズを再度取得するように修正.

簡単な使い方の例は以下のようになります。

<html>
  <head>
    <script type="text/javascript" src="overlayFlash2.js"></script>
  </head>
  <body>
    <a href="JavaScript:void(0)" onclick="showOverlayFlash9('test2.swf')">CLICK!</a>
  </body>
</html>

改変したjsファイルのダウンロードはこちらです。

また、使用デモはこちらになります。
http://octech.sakura.ne.jp/demo/overlayFlash2/

デモで使ったswfのflaファイル(Flash9,AS3)とドキュメントクラスに使用したasファイルも置いておきました。

むらけんさんに感謝！

このスクリプトを使うといろいろと実現できそうで、これからの仕事が楽しみです。
元になるjsファイルの作者であるむらけんさんに感謝です！！！