Wiki ナビゲーション

OverlayFlash?ライブラリ

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

構成

AS
- OverlayFlash?.as: JSからの情報をFlash内で使用するためのクラス
- OverlayFlashEvent?.as: OverlayFlash?のイベントを管理するクラス
JS
- overlayflash.js: ブラウザから情報を取得するクラス

コード

*AS3版

http://www.libspark.org/svn/as3/OverlayFlash/ 以下にあります。
リポジトリブラウザで閲覧

*AS2版

http://www.libspark.org/svn/as2/OverlayFlash/ 以下にあります。
リポジトリブラウザで閲覧

使い方

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://d.hatena.ne.jp/onozaty/20060802/p1

詳細はサンプルを参考にしてください。

参考

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

異なるフォーマットでダウンロード:

Plain Text

Spark project

Wiki ナビゲーション

OverlayFlash?ライブラリ

構成

コード

使い方

参考

異なるフォーマットでダウンロード: