1. HOME
  2. BLOG
  3. Flash Panorama Player「Custom Controller」vol.6
BLOG

Flash Panorama Player「Custom Controller」vol.6

BLOG, panorama

86

●Custom Controller[bal1plus] for FPP
fpp controller bal1plus

Flash Panorama Player用Custom Controllerの第六弾は、Vol.3の[bal1]にサウンドボタン、閉じるボタンを追加したバージョン[bal1plus]です。ですので、パノラマは、新規ウインドウで開くことを想定しています。画面左下にサウンドボタン、右上に閉じるボタン、中央下にコントローラー。コントローラーボタンの機能は、左から情報ウインドウ表示、左へ移動、右へ移動、下へ移動、上へ移動、ズームダウン、ズームアップ、自動回転、フルスクリーンです。

以下のボタンでダウンロード、サンプル表示が出来ます。
dot1 sample downloadbal1plus sample preview
download file type:zip(1.2Mb)
ファイルは、個人、商用とも自由にご利用ください。ただし、再配布等はご勘弁を、、、

今回のMP3 Playerは前回とは違い、www.alsacreations.frで配布されているオープンソースのプレーヤー「dewplayer」です。タイプは3種類(Mini、Classic、Multi)有りますが、ここではMiniタイプを使用しています。ダウンロードや機能詳細については、コチラのページからどーぞ。

↓サンプルパノラマを含めた構成ファイル一覧です。
fpp controller bal1plus files

↓パノラマ表示用xmlファイル「controller-bal1plus.xml」について

<?xml version = ‘1.0’?>
<panorama>
<parameters>
panoType = mov
panoName = files/sample
panHome = 0
tiltHome = 0
zoomMax = 2
zoomMin = 0.5
zoomHome = 0.80
layer_1 = files/autorotator.swf
layer_2 = files/hotspots.swf
layer_3 = files/movDecoder.swf
</parameters>
<autorotator>
speed = 0.1
interval = 30
pause = 3000
quality = low
</autorotator>
<hotspots>
<global onStart=”external.autorotator.disabled=1″ onOver=”glow=3;glowColor=#ccff00″ onOut=”glow=0″>
<spot id=”guiBase” static=”1″ align=”BC” salign=”BC” staticX=”0″ staticY=”4″ url=”files/bal1_base.png” onOver=”” onOut=”” />
<spot id=”info” static=”1″ align=”BC” salign=”BC” staticX=”-116″ staticY=”-5″ url=”files/bal1_i.png” onClick=”infoscreen.visible+=1″ />
<spot id=”left” static=”1″ align=”BC” salign=”BC” staticX=”-87″ staticY=”-5″ url=”files/bal1_l.png” onPress=”pano.panKey=-2,500″ onRelease=”pano.panKey=0″ />
<spot id=”right” static=”1″ align=”BC” salign=”BC” staticX=”-58″ staticY=”-5″ url=”files/bal1_r.png” onPress=”pano.panKey=2,500″ onRelease=”pano.panKey=0″ />
<spot id=”down” static=”1″ align=”BC” salign=”BC” staticX=”-29″ staticY=”-5″ url=”files/bal1_d.png” onPress=”pano.tiltKey=-2,500″ onRelease=”pano.tiltKey=0″ />
<spot id=”up” static=”1″ align=”BC” salign=”BC” staticX=”0″ staticY=”-5″ url=”files/bal1_u.png” onPress=”pano.tiltKey=2,500″ onRelease=”pano.tiltKey=0″ />
<spot id=”zoomOut” static=”1″ align=”BC” salign=”BC” staticX=”29″ staticY=”-5″ url=”files/bal1_m.png” onPress=”pano.zoomKey=-2,500″ onRelease=”pano.zoomKey=0″ />
<spot id=”zoomIn” static=”1″ align=”BC” salign=”BC” staticX=”58″ staticY=”-5″ url=”files/bal1_p.png” onPress=”pano.zoomKey=2,500″ onRelease=”pano.zoomKey=0″ />
<spot id=”auto” static=”1″ align=”BC” salign=”BC” staticX=”87″ staticY=”-5″ url=”files/bal1_a.png” onClick=”external.autorotator.disabled+=1;pano.pan_v=0;pano.tilt_v=0;pano.zoom_v=0;” />
<spot id=”full” static=”1″ align=”BC” salign=”BC” staticX=”116″ staticY=”-5″ url=”files/bal1_f.png” onClick=”fullscreen(-)” />
<spot id=”infoscreen” static=”1″ align=”MC” salign=”MC” visible=”0″ url=”files/logoInfo.png” onClick=”visible=0″ onOver=”” onOut=”” />
<spot id=”closeBase” static=”1″ align=”TL” salign=”TR” staticX=”-68″ staticY=”0″ alpha=”1″ url=”files/bal1_close_base.png” onOver=”” onOut=”” />
<spot id=”close” static=”1″ align=”TL” salign=”TR” staticX=”-68″ staticY=”0″ alpha=”1″ url=”files/bal1_close.png” onClick=”javascript:self.close()” />
<spot id=”audio” url=”files/dewplayer-mini.swf?mp3=files/sample.mp3&autostart=0&autoreplay=1&showtime=1&volume=100″ static=”1″ align=”BL” salign=”BL” staticX=”2″ staticY=”-2″ alpha=”0.9″ shadow=”0.1″ onOver=”” onOut=”” />
</global>
</hotspots>
</panorama>

・パノラマファイル形式はQuickTime VR(4行目)です。なのでpluginは、autorotator.swf、hotspots.swf、movDecoder.swf(11〜13行目)の3種類を使用しています。もし、CubeFaceデータを使用する場合、movDecoder.swfは不要となります(連載 vol.4参照)。files/sample(5行目)が、表示させるパノラマのパス+ファイル名(拡張子は省く)です。

・コントローラー表示部分は、23〜32行目です。表示位置は中央下です。

・33行目は、情報ウインドウ用画像の指定です。サンプルではデフォルトのものがそのまま入っていますので、表示させたい画像を同じファイル名(logoInfo.png)で置換えて使用して下さい。

・34行目は、closeボタン背景用フレーム、35行目はcloseボタン本体で、表示位置は右上です。

・36行目が、MP3 Player「dewplayer-mini.swf」の読み込み部分です。
files/dewplayer-mini.swf:プレーヤーのパス+ファイル名
mp3=files/sample.mp3:再生するファイルのパス+ファイル名
以下は、オプションパラメーターの設定です。
autostart=0:自動再生の設定(on=1、off=0)
autoreplay=1:ループ再生の設定(on=1、off=0)
showtime=1:時間表示(on=1、off=0)
volume=100:音量の設定(%)

※注:player & plugin(上図、構成ファイル一覧の中の青の点線で囲まれた部分)は、ダウンロードファイルの中には含まれていません。Flash panorama Playerを、ご購入済みの方は、お持ちのファイルを所定の場所に入れてご利用ください。お持ちでない方は下記のサイトからどーぞ、、、dewplayer(dewplayer-mini.swf)は、www.alsacreations.frこのページからダウンロードの後、plugin等と同じ位置に入れてください。

Flash Panorama Playerに興味のある方、購入はこちらからどうぞ。
flashpanoramas

【サイト内関連情報】
Flash Panorama Player
Custom Controller [mob1plus]
Custom Controller [mob1]
Custom Controller [bal1]
Custom Controller [dot1]
Custom Controller [std1]
vol.7「LensFlare plugin」
vol.6「Editor plugin」
vol.5「Hotspots plugin」
vol.4「xmlファイルとプラグイン」
vol.3「HTMLへの埋め込み」
vol.2「簡単再生」
vol.1「QTVRを再生」

  1. やまお

    前回はご丁寧にレスしていただきありがとうございました。
    今回のサウンドボタンもいいですね。
    僕はvol,5のサウンドボタン・クローズボタンにbal1を使わせていただいています。ありがとうございます。

    過去記事の「イコロの森」拝見させて頂きましたが衝撃的でした。
    FPPの拡張性もさることながらそのテクニック・演出には脱帽です。
    とてもマネ出来ません。

    ただ強いて言えばイコロの森のENTERの所で使用されている画像をクリックすれば真ん中へ移動して拡大される方法は簡単でしょうか?FPPのブログでもプリンターの前にある写真をクリックした際、同じように拡大されて真ん中で表示されるテクニックがありました。
    この技?があればもう少し私の写真も幅が出てくるんですが・・・(笑) 

    本当にわかりやすくいつも助かっています。
    コレを元にして応用していきたいのですが・・・無理です(泣)

    今後も楽しみにしています。 長々すみません。

  2. keiji

    やまおさん、どーもでゴザイマス
    >とてもマネ出来ません。
    とんでもございません、(;^_^A

    >FPPのブログでもプリンターの前にある写真をクリックした際、
    実のところ、私もこのサンプルから学ばせて頂いたのですが(全てを理解している訳では無いのですが)、最初はちんぷんかんぷんでございました。今後の連載の課題とさせて下さいマセ。

    >今後も楽しみにしています。 長々すみません。
    有り難うございます。
    最近は、Flash Panorama も選択肢が増えてきたので、FPPにあまり執着しすぎてもと悩んでおりましたが、やまおさんに励ましを頂き、この連載、もう少しガンバってみます、ハイ。

  3. やまお

    ご丁寧にレス頂きありがとうございました。

    >実のところ、私もこのサンプルから学ばせて頂いたのですが・・・
    学んで出来るところがすごいですよ。
    僕は一応それなりに勉強しましたが無理でした。

    最近VR撮影に興味を持ちVR撮影に関して色々検索してたくさんのサイト・ブログを拝見しましたがkenjiさんのサイトが僕的には1番わかりやすく、丁寧、詳細、画像が綺麗、テクニックなど総合的に良く参考にさせて頂いています。 それに釣られてFPPを導入しました。英語はまったく理解出来ませんがホントここでの詳細な解説である程度理解できました。ありがとうございます。

    あまり褒めるとkenjiさんもやりにくいと思いますのでこの辺で(笑)

    いつもご丁寧・迅速なレスありがとうございます。

  4. keiji

    やまおさん、どーもデス。
    >あまり褒めると…
    ハイ、たまにはつっこみをどーぞ、ヾ(- -;)

    今度、やまおさんのパノラマご紹介くださいマセ。

  5. hiro

    はじめまして。
    貴サイトでFPPを知り、自分も購入に至りました。
    そこで、先達に不躾ながら質問させてください。
    イコロの森を拝見させていただきましたが、あそこで使われている方位磁石はどのswfで動かしているのでしょうか?
    解凍したpluginsフォルダにもそれらしきものはないし、FPPのフォーラムを覗いても見つかりませんでした。
    (単純に英語力の問題かもしれませんが・・・・)
    どうか、ご教授いただけませんでしょうか。

  6. keiji

    hiroさま、はじめまして
    お返事が遅くなり、申し訳有りませんでした。
    >貴サイトでFPPを知り、自分も購入に至りました。
    有り難うございました。
    >方位磁石はどのswfで動かしているのでしょうか?
    以下のサイトで配布されているnadir.flaを、ちょっぴり改造して使わせて頂いております。
    http://flashpanos.com/content/rotating-nadir-image-bottom-cap
    Flashをお使いでしたら、比較的簡単に改造可能と思われます。(私が出来ているので、、、)

  7. hiro

    わぁ、恐れ入ります。
    さっそくトライしてみます。

  8. hiro

    ありがとうございました、無事設置できました。
    もしよろしければ、みてやってください・・・。
    http://www.clips-online.net/panoramania/diary.cgi?no=28

  9. keiji

    hiroさん、どーもデス。
    >もしよろしければ、みてやってください・・・。
    拝見しました、panoramania
    http://www.clips-online.net/panoramania/diary.cgi
    パノラマが熱いデス、、、
    何だか、パノラマを始めた頃の情熱が甦りましたヨ。
    新作楽しみにしております。

  10. hiro

    >情熱
    いや、熱しやすく冷めやすいので、いつまで続くやら・・・。

    あと勝手ながらリンク張らせていただきます。
    今後も参考にさせていただきますので、よろしくお願いします。

  11. keiji

    hiroさん、こんばんは
    リンク有り難うございました。
    こちらこそ、今後ともよろしくお願いでゴザイマス。

  12. T-Photoworks

    keijiさま
    初めまして、谷口と申します。
    私はVR Panoramaを始めて半年のカメラマンですが手こずっております。
    特にFlash化するのにPano2VRを使っていたのですが、この度FPPを購入し使い始めたところいっそうこの思いを強くしております。
    そんな中、keijiさんのサイトを見つけありがたかったのですが、それでもてごわいですね。
    とはいえ、本日おかげさまで最低限の事が出来るようにはなりました。
    http://blog.t-photoworks.com/?day=20090514
    コントロールボタンも拝借しましたのでご挨拶をかねましてご報告いたします。どうぞよろしくお願いいたします。

  13. keiji

    谷口さま、はじめまして
    >それでもてごわいですね。
    そーですネ。
    xmlをゴニョゴニョやらなきゃならないのが、かなり、、、
    >どうぞよろしくお願いいたします。
    こちらこそ、どうぞよろしお願いいたします。
    サイト「a day in the life」拝見いたしました。
    http://blog.t-photoworks.com/
    いやー、スバラシイパノラマ堪能いたしました。

  14. T-Photoworks

    keijiさま
    いままでのカメラマンは撮る事だけでよかったのですが、10年ほど前からは印刷を、今はwebの技術をと覚える事が多く困ります。
    これからもお邪魔してお知恵を拝借すると思います。
    新しい技術の解説も期待しております。
    なにとぞよろしくお願いいたします。

  15. keiji

    谷口さま
    >なにとぞよろしくお願いいたします。
    こちらこそ、カメラマンの視線でのツッコミよろしくお願いいたしマス(^^;

  16. T-Photoworks

    お世話になっております。谷口です。
    この場でお尋ねしたものか迷いましたが、早くもFPPの壁にぶつかっております。
    それは、onClick=”loadPano(nextPano.swf)” />なのですが、これは新たなswfファイルに移動する時に使うものだと思うのですが、うまくいきません。(nextPano.swf)の所には同じフォルダの中の異なる(移行先)swfファイルの名前を入れれば良いのでしょうか。
    またその際にはFPPで作った(pano.swfの名前を変えた)ファイルにパスを張るのでしょうか。
    いずれもやってみましたがうまくいきません。
    openUrlは問題なくできるのですがこんなトッカカリでつまずいております。お時間のある時で結構ですのでなにとぞご教示いただけるとありがたいです。どうぞよろしくお願いいたします。

  17. keiji

    谷口さま、お疲れさまでゴザイマス。
    > onClick=”loadPano(nextPano.swf)” />なのですが、
    > これは新たなswfファイルに移動する時に
    > 使うものだと思うのですが、うまくいきません。
    nextPano.swfの構成ファイルは、どのようになっていますでしょうか?
    上記の例ですと、パノラマは、CubeFace形式(六面体)の必要がありそうです、たぶん、、、
    なので、構成ファイルは、
    ・nextPano.swf(pano.sfwをコピー&リネイムしたもの)
    ・nextPano_f.jpg(正面)、nextPano_b.jpg(背面)、….nextPano_d.jpg(下面)
    だと思うのですが、如何でしょうか?
    (自信無いので後で、確かめてみます)

    私は、普段、xml方式を使っています。
    xml方式のパノラマに移動する場合は、
    loadPano(xml_file=nextPano.xml,600,fade)ってな感じでござりまする。

  18. T-Photoworks

    keijiさま

    私はXML,HTML以外のファイルを、それらと同じレベルにフォルダを作りそこにおいています。
    その中にCubeの場合はpano.swfを、エクレクタンギュラの場合はpanoStripe.swfをコピー&リネイムして入れています。ーーー勿論それぞれの元ファイルも同様です。またPano2VRで作ったswfデータでも試しました。ーーーー
    そのリネイムと同じ名称ををloadPano(nextPano.swf)のnextPanoの部分に替えてみました。が出来ないのです。ーーーーーーチュートリアルにはmyPanoとかnextPanoとか出てきますがこれは同じ意味ですね。

    xml方式のパノラマというのは同じビヘイビアをするのでしょうか。
    ーーーloadPano(xml_file=nextPano.xml,600,fade)ーーーのnextPanoを入れ替えるのでしょうか。600はフェード時間ですかサイズですか。
    自分でちゃんと説明が出来ていないと思いますのでわかりにくく、質問ばかりしている様ですが(その通りです)申し訳ありません。
    本当はお目にかかって教えをこいたいところですが、コメント欄で失礼いたします。お差し支えのないところでお願いいたします。

  19. keiji

    >xml方式のパノラマというのは同じビヘイビアをするのでしょうか。
    そうですネ。
    例えば、
    ThisPano.xmlとNextPano.xmlに設定した
    項目が同じであれば、そうなります。

    >loadPano(xml_file=nextPano.xml,600,fade)
    私の場合のxml方式のファイル構成例です。
    ・ThisPano.html:パノラマ表示用html(最初に開くパノラマ以外は不要、htmlファイル名は任意)
    ・pano.swf:Flash Panorama Player本体(ファイル名は任意)
    ・ThisPano.xml:パノラマ設定項目を記述(xmlファイル名は任意)
    ・ThisPano.mov:qtvr形式のパノラマ(movファイル名は任意)
    その他、必要なplugin等です。

    >600はフェード時間ですかサイズですか。
    その通りで、単位はミリセカンドです。
    ちなみに、
    この辺りは、FPPのマニュアル”Hotospts”に詳しく書かれております。
    私もよく理解しておりませんが(汗

    xmlや構成ファイル等を拝見していないので、
    なかなか的確なお返事が出来無く、
    申し訳ございまセン。

  20. T-Photoworks

    keijiさま
    ありがとうございます。
    拙ブログにXMLのアップと構成ファイル画像を変更追加しました。
    どこが悪いのでしょうか。
    FPPのマニュアル”Hotospts”は結構読んではいるのですが、私の理解力が足りない所為で意味が分からないのです。
    申し訳ありませんがよろしくお願いいたします。

  21. T-Photoworks

    keijiさま
    出来ました。
    おっしゃる事をよく読んでみたらもう一つXMLファイルがいるのに気がつきました。
    これを知らないで同じXMLの中に書いていたのです。
    数日中にサンプルを上げますのでよろしくお願いいたします。

  22. T-Photoworks

    サンプルをブログに上げました。
    どうもありがとうございます。
    きっとまた質問ぜめにすると思いますがぜひとも見限らずお教えください。
    どうぞよろしくお願いいたします。

  23. keiji

    谷口さま、開通おめでとうございます。
    >きっとまた質問ぜめにすると思いますが
    ハイ、どーぞお手柔らかにお願いいたします、(;^_^A

  1. この記事へのトラックバックはありません。

PickUp