OverlayFlash?ライブラリ

  • HTML上に全面オーバーレイするFlashコンテンツの作成を支援するライブラリです。
  • Flashの100%設定では表示領域の100%となってしまいますが、HTMLの領域を判定し、ページ全面にオーバーレイすることができます。
    • ⇒スクロールしても下が見えることなく全面に表示されます。
  • AS2、AS3クラスとJSの組み合わせで、ブラウザ情報をFlashに引き渡します。
  • Flash内で取得、利用できる情報は以下の通りです。
    • スクリーンサイズ(ページ領域)
    • クライアントサイズ(表示領域)
    • id、class名が指定された要素の表示位置、表示領域
    • リサイズイベント
    • スクロールイベント、スクロール量
    • テキストリサイズイベント
  • IE6、7にてスクロールがアクティブにならない問題に対応
  • swfがローディングされるまでにhtmlが表示されてしまう問題に対応(swfが表示されるまで全画面の背景色を表示)

構成

  • AS
  • JS
    • overlayflash.js: ブラウザから情報を取得するクラス

コード

*AS3版

*AS2版

使い方

  • html側
    • html内に、OverlayFlash?用の<div>を作成し、id名を設定する。
    • overlayflash.jsを配置する。
    • <div>に全画面用のswfを埋め込むjsを記述する。
      <!--swfobject-->
      <script type="text/javascript" src="common/js/swfobject.js"></script>
      
      <!--overlayFlash-->
      <script type="text/javascript" src="sample/overlayFlash/overlayflash.js"></script>
      <script type="text/javascript">
      	function startOverlay(){
      		var obj = new Object();
      		obj.width = document.body.offsetWidth;
      		obj.height = document.body.offsetHeight;
      		
      		//オーバーレイ用のid名を指定し、内部にコンテナを作成
      		var overlayFlashElement = document.getElementById("overlayFlashSample");
      		overlayFlashElement.style.position = "absolute";
      		overlayFlashElement.style.top = "0px";
      		overlayFlashElement.style.left = "0px";
      		overlayFlashElement.style.width = obj.width + "px";
      		overlayFlashElement.style.height = obj.height + "px";
      		overlayFlashElement.style.zIndex = "1";
      		overlayFlashElement.style.visibility = "hidden";
      		overlayFlashElement.style.visibility = "visible";
      		
      		overlayFlashElement.innerHTML = '<div id="overlayContainer" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"><p></p></div>';
      		
      		//オーバーレイ用のswfを埋め込み
      		var so = new SWFObject('sample/overlayFlash/OverlayFlashSample.swf', 'overlay', '100%', '100%', '8', '#ffffff');
      		so.addParam('menu', 'false');
      		so.addParam('wmode', 'transparent');
      		so.addParam('allowScriptAccess', 'always');
      		so.write('overlayContainer');
      		
      		//埋め込んだswfのidでJavaScriptを初期化
      		OverlayFlash.initialize("overlay");
      	}
      </script>
      
  • Flash側
    • OverlayFlash?.as、OverlayFlashEvent?.asをインポートする。
    • new SWFObjectで指定したidとステージの参照を引数としてインスタンスを作成する。
    • イベントを設定する。
    • start()メソッドを実行する。
      //////////////////////////////////////////////////
      //import
      //////////////////////////////////////////////////
      import net.goodmix.overlayFlash.OverlayFlash;
      import net.goodmix.overlayFlash.OverlayFlashEvent;
      //////////////////////////////////////////////////
      //stage
      //////////////////////////////////////////////////
      stage.align = "LT";
      stage.scaleMode = "noScale";
      //////////////////////////////////////////////////
      //var
      //////////////////////////////////////////////////
      var overlayFlash:OverlayFlash;
      var clientSize:Object;
      //////////////////////////////////////////////////
      //function
      //////////////////////////////////////////////////
      //////////////////////////////
      //initialize
      //////////////////////////////
      function initialize() {
      	//overlayFlash
      	overlayFlash = new OverlayFlash("overlay", stage);
      	overlayFlash.addEventListener(OverlayFlashEvent.READY, jsReadyHandler);
      	overlayFlash.addEventListener(OverlayFlashEvent.RESIZE, browserResizeHandler);
      	overlayFlash.addEventListener(OverlayFlashEvent.TEXT_RESIZE, textResizeHandler);
      	overlayFlash.addEventListener(OverlayFlashEvent.SCROLL, onScrollHandler);
      	overlayFlash.start();
      	//
      	//background
      	window.alpha = 0;
      	window.base.width = stage.stageWidth;
      	window.base.height = stage.stageHeight;
      	window.mouseEnabled = true;
      	window.buttonMode = true;
      	window.addEventListener(MouseEvent.CLICK, end);
      }
      //////////////////////////////
      //event
      //////////////////////////////
      function jsReadyHandler(e:OverlayFlashEvent):void {
      	trace("[EVENT READY]");
      	
      	//ブラウザ情報
      	trace("engine: " + OverlayFlash.engine);
      	trace("browser: " + OverlayFlash.browser);
      	
      	//スクリーンサイズ
      	var screenSize:Object = overlayFlash.getScreenSize();
      	trace("Screen Size: "+"width:"+screenSize.width+", "+"height:"+screenSize.height);
      	
      	//クライアントサイズ(表示サイズ)
      	var clientSize:Object = overlayFlash.getClientSize();
      	trace("Client Size: "+"top:"+clientSize.top+", "+"left:"+clientSize.left + ", "+"width:"+clientSize.width+", "+"height:"+clientSize.height);
      	
      	start();
      }
      function browserResizeHandler(e:OverlayFlashEvent) {
      	trace("[EVENT RESIZE]");
      	//JSからの取得エラー対策
      	var tempScreenSize:Object = new Object();
      	//ブラウザからページサイズを取得
      	var screenSize:Object = overlayFlash.getScreenSize();
      	//
      	if (tempScreenSize.width == screenSize.width && tempScreenSize.height == screenSize.height) {
      		arguments.callee.call();
      	} else {
      		setOverscreen(screenSize);
      	}
      }
      function textResizeHandler(e:OverlayFlashEvent) {
      	trace("[EVENT TEXT_RESIZE]");
      }
      function onScrollHandler(e:OverlayFlashEvent) {
      	trace("[EVENT SCROLL]");
      	var scrollDistance:Number = e.target.getScrollDistance();
      	trace("Scroll Distance: "+ scrollDistance);
      }
      
  • 補足&注意点
    • スクロール、テキストリサイズイベントについて
      • スクロールを監視するには、startScrollEvent()メソッドを実行します。
      • テキストリサイズを監視するには、startTextResizeEvent()を実行します。
      • 上記の2つは、一定間隔のタイマーで監視するため、処理が遅くなる場合があります。そのため、開始のトリガーを切り分けています。
      • また、IE7、FF3、Operaのズーム機能には対応していません。
    • IE対応について
      • IEでは、全画面にFlashが存在するとホイールによるスクロールが無効となる場合があるため、FlashのMOSUE_WHEELイベントを使用してブラウザの表示域を変更しているため、ブラウザのホイール動作と若干移動量が異なる場合があります。
    • xml宣言について
      • swfを埋め込むXHTMLにxml宣言があると、正しく動作しない場合があります。
    • Flashの上にオーバーレイする場合
      • 他のFlashの上に重ねる場合は、重ねるFlashすべてのwmodeにopaqueかtransparentを指定してください。
      • 指定が無い場合、上に表示されることがあります。
    • 標準モードと互換モードで画面サイズ取得方法の違うため、埋め込むHTMLは標準モードで表示してください。
  • 詳細はサンプルを参考にしてください。

参考

  • サンプルはこちらhttp://storage.goodmix.net/?p=186
    • Wordpressではなぜか最下部まで取得できない・・・インクルードのせいか?
      • 仕事で使ったものではうまくいった。某飲料メーカーのキャンペーンとか。