2008年4月3日木曜日

Zoomify+Videobox(Javascript)+Flash(ActionScript)

今日はおたよりを紹介します
「パノラマ写真をZoomifyを使って見せる」
http://www.kilinbox.net/2008/01/zoomify_6170.html
をみて、当方もDLして使ってみました。
ブログにはってある、320×240のZoomifyに入る前の
「(▲)」の画像は、どのようにして作るのですか?

また、コントロール部分が、Zoomfyer EZでは、+ - ですが
kilin さんのはスライダーがつきますが、この点も教えていただけますか?
(内容は少し割愛させて頂いている場所があります)
以前から同じようなメッセージを他方面からいくつか頂き、その都度返信をしていたのですが、
どうやら需要がある内容のようなのでココで簡単に説明させて頂きます。

---
まず一番最初の質問に答えます。
この仕組みはZoomify + Videobox(Javascript) + Flash(ActionScript)が合わさって出来たものです。

Zoomify については以前紹介した通りです。

次にVideoboxを改造してZoomifyに対応させます。
具体的には当サイトで使用しているvideobox.jsの87行目あたりをご参照ください。
Videoboxとはmootoolsというjavascriptフレームワークがベースになった動画ビューアのようなものです。
導入方法はここでは紹介しませんが、公開先を紹介しましょう。Videobox: Lightbox for videos
この時点でテスト
↑のように書いてこのようにZoomifyが動けばまずは成功です。

最後にFlashからJavascriptを利用して上のようなことを実現させます。
適当にボタンを設置して、

getURL("javascript:Videobox.open('http://kilinbox.net/images/zoomify/1200930741', 'タイトル','');");
としてFlashからVideoboxを呼び出します。
あ、サムネイル画像はFlashのLoaderコンポーネントを使っています。
img.contentPath = "http://kilinbox.net/images/zoomify/1200930741/TileGroup0/0-0-0.jpg"
というように、画像をロードさせています(imgはLoaderのインスタンス名)


---
続いて二つ目の質問に答えます。

当サイトのようなスライダーが付いたZoomifyビューアはZoomfyer EZには付いてきません。
Adobe Photoshop CS3 Extendedのものです。

---
以上、簡単ではありましたが今回の説明とさせて頂きます。