長州ビューア:FLASHからhighslideを機動する方法 

写真ビューアの開発メモ
開発の手順は、大きく3つ。

1.FLASHをがしがし作る
2.SWFObjectでSWFを読み込む
3.FLASHからhighslideを起動して画像を開く



FLASHをHTMLに組み込むには、SWFObjectが便利。
ダウンロードと使い方は検索すれば、すぐに出てくるけれど
FLASHからJavaScriptを呼ぶには、オプションのallowscriptaccessを"always"にしなければいけないが、SWFObjectでのパラメータ渡しの方法が分からずに悩む。

グーグルさんで検索すると、すばらしいWEBアプリを発見。
SWFObject 2 HTML and JavaScript ジェネレーター v1.2
さらに詳しくで項目を開くと、パラメータが指定できるので、設定してコードを生成。

また、デフォルトの設定だと、FLASHが最善面に来てしまい、highslideで開いた画像がFLASHの下に隠れてしまう。
params.wmode = "opaque"; を指定することで画像をFLASHの上に表示することができる。



FLASHからJavaScriptを呼ぶには、ExternalInterface.callを使えばいいが、
問題は、どうやってhighslideを起動するか。
highslideの書式は、
<a href="xxx.jpg" class="highslide" 
onclick="return hs.expand(this)">
<img src="xxx.png" alt="xxx" /></a>

JavaScriptからonclick()は叩けるらしい。
結構いろいろ試行錯誤したけれど、ソースを見た方が早いだろう。
簡略化したので、実際に使っているソースとは少し違うけど。
サンプル

2次配布がどうだか分からなかったので、JavaScriptは削除してあります。
jsフォルダにswfobject.jsを入れ、js/highslideにhighslideを入れてください。
highslideはこちらからダウンロードできます。


概要としては、透明にした<div id="head_flash_img">を配置して
FLASHからawJS_HS_Openを呼んで、<div id="head_flash_img">の中に、id_hs_xxと名前をつけた<a>タグを追加する。
それをonclick()で実行している感じ。

design.cssのvisibility: hidden;で<div id="head_flash_img">を非表示にしているので、これをコメントアウトすると、実際の動作が分かりやすいかも。

最初は、innerHTMLで追加する<a>タグを使いまわそうと思ったけれど、
hs.expand(this)のthisが肝心で、これが変わると同じ画像が複数開いたりするので、結局、枚数分を作成している。



FLASHのソースは、ある意味キモな部分なので非公開。
知り合い限定で、欲しい人がいれば送ります。
まぁ、でも動きは好きな様に作って、highslideさえ起動できれば、同じ様なものは作れるはず。

xmlのリストから画像を読み込むのは、どこにでもサンプルが転がっている。

クリックしたら移動して、移動した座標から4角形の頂点を計算し、drawTrianglesで、頂点リストとUVリストを使った、2Dポリゴンのようなイメージで描画。

楕円の中央部分の幅は広く端は狭く補正とか、移動に減衰を入れるとか、画像の順番をその都度ソートするとか。
そんな感じ。

 



 

投稿されたコメント[3] 

日本語がこれほどまでに理解できなかったことは
未だかつて記憶にありません(笑)

ところで、写真を複数枚同時にアップロードすることって可能?
毎回一枚ずつアップするのがかなり辛気くさいのだが(笑)



そこを、そうすればいいわけか。
そうすると、あれがああなって、結果的にこうなるわけね。

なるほど、なるほど。



>アップロードすることって可能?
なんか、そんなプラグインもあったようななかったような。
HTMLタグを変更してるんで、そのまま使えるかどうかちょっと見てみます。

あれがああなってこうなるとできるかも。



コメントをお願いします 

Name:   ※必須(ニックネームでOK)
 名前を記憶
コメント:(HTMLタグは使用できません)