blocco blog

blocco blog

ブロッコ・デリの種々雑多な調子。

LightBox2D で「誰でもカンタンにインタラクティブページを作ろう！」

2008-12-18(Thu)　21:05

投稿者： yama

2008年10月17日に開催しました「FlashFlavor+月刊インタラ塾」にスピーカーとして参加しました。
今回は、そこで取り上げたLightBox2Dを紹介します。

■Demo

Lightbox2d01

■概要

LightBox2Dは「誰でもカンタンにインタラクティブページを作ろう！」をテーマに
FlashとJavascriptを連携させた実験コンテンツです。
JavascriptのLightBoxの様に手軽に設置できる事と、FlashのBox2Dを使用している事から「LightBox2D」と名前をつけてみましました。
既存のHTMLに少し手を加えるだけで、デモのようなアニメーション（すべての画像が上方へ飛び出した後、「ズドン」とページの下まで落ちるアニメーション）を仕掛けられます。
簡単に設置できるようにしてますので、ぜひお試しください。

■設置方法

・まず以下より関連ファイル一式をダウンロードします。
lb2d.zip
ダウンロードしたファイルを解凍すると「lb2d」フォルダが出来ます、そのフォルダを下の図のように、設置するHTMLファイルと同階層に置きます。
lb2d

・次に、設置するHTMLファイルの<head>〜</head>タグ内に以下のコードを追加します。

<script type="text/javascript" src="lb2d/jquery.min.js"></script>
<script type="text/javascript" src="lb2d/jquery.dimensions.min.js"></script>
<script type="text/javascript" src="lb2d/interface.js"></script>
<script type="text/javascript" src="lb2d/jquery.swfobject.min.js"></script>
<script type="text/javascript" src="lb2d/jquery.lightbox2d.js"></script>
<script type="text/javascript">$(document).ready(function(){$.lb2d.init();});</script>

以上で、設置は完了です。

　注　
※ローカル環境で実装した場合に、FlashPlayerの警告が出ますので、web上でお試しいただくか、FlashPlayerの設定を変更する必要があります。

■コード解説

まず、実装にあたり以下のライブラリを使用しています。
[Javascript]
・jquery(基本的なDOMツリーの操作とJavascriptのアニメーション用)
・jquery.swfobject.js(swfの配置用)
・jquery.dimensions.js(画像の位置取得用)
・interface.js(画面のスクロール用)
[flash]
・Box2d(画像が落ちてくるときの物理演算用)
・FLiNT(画像が落ちた後の煙に使用)

下準備１[Javascript]
まず、HTMLがロードされた時点で、Jqueryを使って<img>タグを配列に抜き出し各種設定をしています。

//jqueryを使って<img>タグを配列で取得。
$imgs = $("img");

//配列をループして各種設定、イベントの登録etcを設定して行く
for(var i=0; $imgs[i]; i++){

	//ここで<img>タグに各種設定

	//imgタグにイベントを登録
	$img.click(function(){
		$.lb2d.action();
	});
}

$.lb2d.swf();//flashを画面左上隅に1pxのサイズでセットしておく。

下準備2[flash]
Flashが設置された時点でExternalInterfaceクラスを使い、画像の情報(幅、高さ、パス)などをJavascriptより取得して画像をロードしておきます。また、bodyサイズも取得しておきます。

items = ExternalInterface.call("$.lb2d.getImageData");//画像の情報取得
bodySize = ExternalInterface.call("$.lb2d.getBodySize");//bodyサイズの取得

ここでもう一つ、Flash内のメソッドの「setImage(画像が上から落ちてくるアニメーション)」をJavascriptから呼び出せるように、登録しておきます。

ExternalInterface.addCallback("setImage",setImage);

アクション
実際に画像がクリックされると以下のようなJavascriptを実行して動きを付けています。

//FlashのメソッドsetImage()を叩く。(Flashのサイズを<body>に揃えしばらくして画像が落ちてくる)
var swf = document.getElementById("swf");
swf.setImage();

//画像を上方に飛ばす。
for(var i=0; $imgs[i]; i++){
	var $img = $imgs[i];
	$(".blank").css({display:"inline"});
	$img.css({position:'absolute'});
	time += Math.floor(Math.random()*2000);
	$img.animate({top:-1000,left:(b.w/2)-($img.width()/2)},time);
}

//ボディー全体を上下動させ下端へスクロール。
$body = $("body");
$spacer = $("<div id='spacer'></div>")
			.css({fontSize:"0px",lineHeight:"0px",backgroundColor:"#000"});
$end = $("<div id='end'></div>");
$body.prepend($spacer);
$body.append($end);
$spacer.css("height","0px");
$spacer.animate({
	height:600,
	backgroundColor:'#600'
},2500,function(){
	$.lb2d.swfresize();
	$spacer.animate({
		height:0
	},100,function(){
		$spacer.animate({
			height:10
		},50,function(){
			$spacer.animate({
				height:0
			},10,function(){
				setTimeout($.lb2d.slide,500);
			});
		});
	});
});

また、flaファイルを含むソースファイルを以下よりダウンロードできますので、
より詳細についてはソースコードをご覧ください。
lb2d_full.zip

trackback URL：
http://www.blocco-deli.co.jp/blog/2008/12/18/lightbox2d-%e3%81%a7%e3%80%8c%e8%aa%b0%e3%81%a7%e3%82%82%e3%82%ab%e3%83%b3%e3%82%bf%e3%83%b3%e3%81%ab%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%a9%e3%82%af%e3%83%86%e3%82%a3%e3%83%96%e3%83%9a%e3%83%bc%e3%82%b8/trackback/

画面トップへ