FlashからExternalInterfaceクラスを使ってLightboxを呼び出す

tonpoo — Tue, 22 Dec 2009 13:55:06 +0000

「Flash（swf）からLightboxを呼び出す」というニーズがこれまでに何回かあり、またついさっきもあって、その都度ちょっと面倒だったりしたのでメモ。なお、ウチの会社ではswfファイルの埋め込みには通常swfobject2を使ってるので、以下は「Lightbox2.04 + swfobject2 + ActionScript（ExternalInterfaceクラス）」という組み合わせが前提となっています。

Lightboxを入手

まず使用するLightboxのバージョンは2.04。Lokesh Dhakar氏によるLightbox 2の公式サイトで入手。

ベースHTMLの作成

次にベースとなるHTMLを作成。今回はとりあえずSWFObject 2 HTML and JavaScript ジェネレーターを使ってサクっと作りました。ポイントとしては、「SWFの定義」のオプションを一部変更すること。

まず、Lightboxを表示した際に、swfコンテンツが上に来てしまうのを避けるため、wmodeをtransparentに設定。また、ExternalInterfaceクラスを使うので、allowscriptaccessをalwaysに設定。できあがったHTMLは下記の通り：

Lightbox用のライブラリを組み込み

上記のベースHTMLのheadセクションに、Lightbox動作のためのjsファイルとcssファイルを組み込む下記の記述を追加。

Lightboxを起動させるJavaScriptメソッドを追加

Lightboxを直接起動させるJavaScriptのメソッドがないので、下記ページを参考にそのためのメソッドを追加。

Execute Lightbox Scripts From Flash at Codefidelity
（情報元：Flash から Lightbox を起動する方法 – minorio のプログラミング・メモ）

具体的に追加する内容は下記の通り。

最終的にできあがったhtmlは下記の通り。

ExternalInterfaceで呼び出し

次はFlash側の用意。sample.flaというファイル（ActionScript3）を用意、ステージ上にボタン用のMovieClipインスタンスを３つ配置し、それぞれbtn0, btn1, btn2という名前を付ける。sample.flaのドキュメントクラスとしてSampleクラスを指定。Sample.asの内容は下記の通り。

package {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.external.ExternalInterface;

	public class Sample extends MovieClip{
		public function Sample() {
			//Lightbox用の設定
			lightboxArray = new Array();
			lightboxArray[0] = {
				src:"images/photo0.jpg",
				caption:"写真その0"
			};
			lightboxArray[1] = {
				src:"images/photo1.jpg",
				caption:"写真その1"
			};
			lightboxArray[2] = {
				src:"images/photo2.jpg",
				caption:"写真その2"
			};
			//ボタンの設定
			for (var i:uint = 0; i < 3; i++) {
				var btn:MovieClip = this["btn" + i];
				btn.id = i;
				btn.buttonMode = true;
				btn.addEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);
			}
		}

		public var lightboxArray:Array;
		public var btn0:MovieClip;
		public var btn1:MovieClip;
		public var btn2:MovieClip;

		//ボタン用メソッド
		public function onBtnClick(e:MouseEvent):void {
			var btn:MovieClip = e.target as MovieClip;
			var id:uint = btn.id;
			var src:String = lightboxArray[id].src;
			var caption:String = lightboxArray[id].caption;
			//LightboxDelegateメソッドを呼び出し
			ExternalInterface.call("LightboxDelegate",src,caption );
		}
	}
}

これで完成！

オマケ：IE7～8でのLightboxの表示バグフィックス

Lightboxを使った縦に長いページをIEで閲覧した場合、ページをスクロールしてからLightboxを起動すると、Lightboxの背景（黒い透過）部分が途中で切れてしまう。これを回避するためにとりあえずやったのがlightbox.cssの改造。具体的には#overlayのpositionをabsoluteからfixに変更（+IE6ではおかしくなってしまうので、スターハックを使ってabsoluteのまま）部分を下記のようにしました。

#overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
}
* html #overlay {
	position: absolute;
}

以上、備忘録もかねて参考までに。

SWFObject 2 HTML and JavaScript ジェネレーター v1.2

tonpoo — Tue, 18 Aug 2009 11:08:14 +0000

swfobjectのプロジェクトサイトで提供されている「SWFObject 2 HTML and JavaScript generator v1.2」を、日本語環境で（というかTonpoo個人にとって）使いやすいよう一部カスタマイズした上で日本語化してみました！

【SWFObject 2 HTML and JavaScript ジェネレーター v1.2】

（特に開発者サイドの許可をとってないんですが、MITライセンスで、コピーライト表記をソースコード中にそのまま残しているので、これで大丈夫なんでしょうか・・・。ちょっと不安。）

ちなみに、オリジナル版からのカスタマイズ点は下記の通り。

文字コードの指定にShift_JISを追加。
文字コードのデフォルト値をutf-8に変更。
パブリッシュ方法のデフォルト値を「動的パブリッシュ」に設定。
HTMLテンプレートのデフォルト値を「XHTML 1.0 Transitional」に設定。
出力されるHTMLコードの言語系の属性の値をenからjaに変更。
出力されるHTMLコードのmeta要素などの出現順序を変更。
出力されるHTMLコードの中に、ドキュメント内でJavaScriptを使用していることを示すためのmeta要素を追加。
出力されるHTMLコードの中に記述される、FlashPlayerのダウンロードリンクのリンク先を、Adobeの日本語サイトに変更。

追記：当サイトでの公開について念のため確認し、了承をいただきました。に加えて、公式サイト内のWikiページからリンクを張って頂きました！

TONPOOBLOG » swfobject