LightBoxとFlashをうまく使う方法 1


あつくなってきたー!!!

ということで、
Flash(アクションスクリプト)でLightBoxを呼び出してみる
LightBoxはご存じの通り
画像をスタイリッシュに表示する機能だぞ

基本的な使い方や、入手は
ちょっと検索しただけですぐ見つかるぞー

わざわざ、ノートしておく必要もないのサ
あっはっはっは

■LightBox2の本体はこちら
http://huddletogether.com/projects/
lightbox2/

■使い方検索結果
http://www.google.co.jp/hws/search?hl=ja&q=LightBox+%E4%BD%BF%E3%81%84%E6%96%B9&client=fenrir&adsafe=off&safe=off&lr=lang_ja

して、このLightBoxをFlash(AS3)から使ってみる

実は

すでに非常に詳しいやり方や、サンプルは出ているぞーー
出ているぞーーールキアー!!

なので、実はこっちもノートする必要はないのだー

■LightBoxとFlashの連携の使い方
参考にさせていただきました
ありがとうございます

http://www.tonpoo.com/blog/2009/12/flash-externalinterface-lightbox/
http://memo.kappa-lab.com/2009/05/flash_lightboxjs.html

じゃー、なぜわざわざ、ここにノートしておくか?

実は、上記サイト様で紹介されていた
[as3]
Lightbox.prototype.start(***);
//***は変数
[/as3]

という、メソッド

なぜか動かないのだ・・・・

でも、方法に間違いは無い

確認したところ、

LightBoxバージョン2.02だと動く
でも
LightBoxバージョン2.04では動かない・・・

んー??間違ったかな??

どうやら、LightBoxのバージョンによって
結構中身が代わっているみたい
(ざらっと見たけど、メソッドの違いは無かったと思うんだけど・・・)

ということで、良い方法を見つけました

方法は、[Flash] → [別のJava] → [LightBox]
といった感じ

で、その別のjavaってのがコレ

■LightBoxとFlahsをつなぐJavaScript

http://www.bram.us/projects/flashlightboxinjector/

使い方は至って簡単

まず、htmlの <head>~~</head> 部分に

[javascript]

<script type=”text/javascript” src=”js/flashLightBoxInjector.js”></script>

[/javascript]

を入れておく

このあたりは、LightBoxの基本的な使い方と同じ感じさ

次に、Lightbox.js の最後の行の

[javascript]

document.observe(‘dom:loaded’, function () { new Lightbox(); });

[/javascript]

[javascript]

document.observe(‘dom:loaded’, function () { myLightbox = new Lightbox(); });

[/javascript]

に変える

あとは、アクションスクリプト側で
ExternalInterface.callを駆使して
画像のグループを作って表示だ!

追加する時の内容はこんな感じ

[as3]

ExternalInterface.call(“myFlashLightBoxInjector.appendElement”,
“画像のURL” + “”,
“キャプションのテキスト” + “”,
“グループID” + “”,
“セットの名前” + “”
);

[/as3]

呼び出しは

[as3]

ExternalInterface.call(“myFlashLightBoxInjector.start”, “グループID” + “”);

[/as3]

で、実際試したけど
見事に動いてくれた!

ただし・・・・・
一つだけ未解決の問題が
なぜか、半透明設定が効かず、Flashがまるまる見えなくなるのだ

もちろんhtml側のwmodeはtransparentにしてある

んー、何か間違ったかな??
まぁ、動いてるからイイか!!
あっはっはっはっは

役に立つか分からないサンプルをどうぞ


ダウンロード:flashlightboxinjectorを使いまくる

ちなみに、flashLightBoxInjectorはLightBox2.04バージョン専用みたいです


Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

One thought on “LightBoxとFlashをうまく使う方法