FlashとThickboxの連携

未分類

今まで Light Box を使って画像を表示しょーた。

 

今回、知り合いのホームページのリニューアルを頼まれてFlashをメインに使うことになっただけど、FlashとLight Boxはあまり相性が良くないみたいで、FlashからLight Boxを使って画像を表示できんかった

 

いろいろ調べたけどようわからんかったけ、Light Boxの代わりに Thich Box を使うことにしたで。

 

Thick Boxの導入

まずは、こちらからダウンロードしてくる。

 

ダウンロードファイルはzipとかで圧縮されとらんけ、必要なファイルをひとつずつダウンロードせんといけん。

 

それも、右クリックでファイルを保存っていう手順をふまんといけん。　（ちょっと面倒）

 

ダウンロードするのは下記の４つのファイル。

  • thickbox.js
  • thickbox.css
  • compressed version of jQuery
  • loadingAnimation.gif

 

このうち、「jquery-latest.pack.js」を「jquery.js」にリネームせんといけん。

 

それで、下記のように格納する。

thckbox
|- images ←フォルダを作る
|　　　　|- loadingAnimation.gif
|-thickbox.js
|-thickbox.css
|-jquery.js

 

それで、thickbox.js　をテキストエディタで開いて、８行目を環境に合うように変更する。

 

var tb_pathToImage = “http://hogehoge/thickbox/images/loadingAnimation.gif”;

 

さあ、これをFTPでアップロード。

 

 

Flash Acsion Scriptを作るで

ここからが本題のFlashのAction Script　(AS3.0)

とりあえず、hogehoge というインスタンス名のボタンが押されたときに、画像がThick Boxで表示されるようにしてみるで。

 

import flash.external.ExternalInterface;

 

hogehoge.addEventListener(MouseEvent.MOUSE_DOWN, DownFunc);

function DownFunc(event:MouseEvent){
ExternalInterface.call(“tb_show”, “WEDDING DRESS”, “画像のURL”);
};

 

 

HTMLファイルを変更するで

で、今度はHTMLファイルの変更をせんといけん。

ヘッダに下記を追加する。

 

<script type=”text/javascript” src=”thickbox/jquery.js”></script>
<script type=”text/javascript” src=”thickbox/thickbox.js”></script>
<link type=”text/css” rel=”stylesheet” href=”thickbox/thickbox.css” media=”screen”>

 

あと、swfを呼び出す処理にパラメータを追加せんといけん。

“wmode”　に　 “transparent”　を追加する。

 

例えば、SWFObjectを使っているなら、

<div id=”flashcontent”> Flashが再生できません。 </div>
<script type=”text/javascript”>
var so = new SWFObject(“http://hogehoge/hogehoge.swf”, “hogemovie”, “800”, “450”, “9”, “#000000”);
so.addParam(“loop”, “false”);
so.addParam(“wmode”, “transparent”);
so.write(“flashcontent”);
</script>

 

<OBJECT>で挿入しとるんなら、下記の param を object 内に追加せんといけんし、

<param name=”wmode” value=”transparent”>

embed に wmode 属性を追加せんといけん。

wmode=”transparent”

 

 

これで、ちょっとカッチョイイページができるで

 

 

 

 

関連コンテンツ

コメントを残す