珍しく連続でやって来た？Flash Panorama Playerの連載第5回目です。今回は、パノラマにインタラクティブな機能を付加することが出来る高機能なプラグイン「Hotspots plugin」についてです。このプラグインを使って、パノラマに移動、ズーム等のコントロールボタンを追加してみましょう。

では、まずFlash埋め込み用スクリプトのサンプルです。パノラマを表示させたいhtmlのbody内任意の位置に埋め込みます。

●11行目：読み込むパス＋xmlファイル名

そして、そのxmlファイルの内容を以下に示します。この例では、パノラマの初期値、自動回転（autorotator plugin）、移動、ズーム等のコントロールボタン機能追加（hotspots plugin）を設定します。

では、パート毎に分けて解説します。

●1〜19行目：パノラマのパラメーター設定（1〜13行目）と自動回転プラグイン「autorotator」のパラメーター設定（14〜19行目）。12行目以外は全て連載のVol.4と同じです。詳細はそちらで確認してネ。

●20行目〜21行目：hotspotsタグ、global変数、ファンクションの設定

・onStart="external.autorotator.disabled=1"：Hotspots pluginがロードされた時、autorotator pluginの機能を無効にします。まどろっこしいいいまわしですネ、つまり、最初は、自動回転せんでエエヨ。もし、最初から自動回転してほしい場合は、ここを省けば牧場、もとい、OKデス。

・onOver=：オブジェクト（ボタンや画像等）の上にマウスがロールオーバーした時の動作設定。

・scale=1.1,600,elastic：オブジェクトのスケールを1.1倍、その時の変化にかかる時間は600ミリセカンド、変化するモーショントゥイーン効果は、ゴムひものように（elastic）。このモーショントゥイーン効果は、regular, smooth, strong, easyIn, easyOut, elastic, bounceの7種類あり、デフォルトはsmoothです。ちなみに、押すと特別賞与がもらえるbonusはありまセン、、、

・depth+=10：パノラマ内に貼り込まれたオブジェクトは、貼り込まれた順番に重なって行く、言わば、笑点の座布団状態？デス。このdepthは、貼り込まれた順番z-indexを決めるパラメーターです。指定しなければ、貼り込んだ順番に重なります。ここでは、強制的に+10（パノラマ内にあるボタン等が10個なので）して、最前面に移動させています。理由は、ボタンのスケールを変化させた時、両脇のボタンに重なってしまうためです。

・onOut=：オブジェクト（ボタンや画像等）の上にロールオーバーしたマウスが、ロールアウトした時の動作設定。

・scale=1,300：300ミリセカンドの時間で、もとのスケールに戻す。

・depth+=10：z-indexを強制的に-10します。この例の場合、もとの順番に戻すことになります。

ちなみに、このglobalタグ内に宣言したものは、パノラマ内の全てのオブジェクトに影響します。なので、この例の場合、パノラマ内の全てのオブジェクトは、マウスがロールオーバーすると1.1倍にスケールアップします。ただし、中に1万円札が貼られていても1万1千円にはなりま千円、、、

●22行目：情報ボタン用spotタグ

でも、この説明では、よけー分りにくいと言う声も聞こえて来そうなので、パノラマのサンプルをおこしてみました。サイコロの6の目の上右側に貼り付いている額縁がboxオブジェクトで、左上側に貼り付いている額縁がspotオブジェクトです。

↑spot、boxオブジェクトの比較

・id="info"：idはオブジェクト名で、ユニークな名前をつけます。

・static="1"：オブジェクトをパノラマ内の空間に貼り込むか、静止させるか。これまた、分りにくい表現デス。例えば、パノラマ内の壁に額縁を貼り込んだ場合、static="0"の時には、壁に引っ付いたまま、視点移動すると、壁と一緒にその額縁も移動します。static="1"の場合、視点移動しても、額縁はウインドウの指定された位置に留まり動きません。言い換えると、カメラのレンズにゴミが付着した状態でしょうか。カメラでいくら違った景色を撮影しても、決まった位置にゴミが写っているのです。デフォルトはstatic="0"です。

・align="BC"：オブジェクトを貼り込む時、オブジェクト自身の原点となる場所を指定します。BはBottom、CはCenterの略です。横方向：L(left), C(center), R(right), 縦方向：T(top), M(middle), B(bottom)のコンビネーションで指定します（下図参照）。

この例、”BC”の場合、ボタンの下側中央が位置指定の原点となります。

・salign="BC"：static="1"の時、つまり、オブジェクトを静止させた時、ウインドウのどの位置を基準に配置させるかを決めるパラメーター。align同様、横方向：L(left), C(center), R(right), 縦方向：T(top), M(middle), B(bottom)のコンビネーションで指定します。

・staticX="-300"：static="1"の時、ウインドウの基準点からのX座標。

・staticY="-10"：static="1"の時、ウインドウの基準点からのY座標。

この例の場合、salign="BC"なので、原点（0, 0）はウインドウの下側中央となり、左側（X軸マイナス方向）に300ピクセル、上側（Y軸マイナス方向）に10ピクセルの位置に、ボタンの中心が配置されます（上図参照）。

・url="files/black_i.png"：オブジェクトとして貼り込む画像のパス＋ファイル名です。

・onClick="infoscreen.visible+=1"：マウスクリックで、オブジェクトid"infoscreen"のvisibleの値に+1します。id"infoscreen"は31行目に設定されているポップアップウインドウのオブジェクトでデフォルトではvisible="0"の非表示です。この値に+1するということは、ボタンを押すたびに、id"infoscreen"が表示 / 非表示されるトグルスイッチ的な動作をします。

ε=(￣｡￣;)、ふぅ、、、
ここまでで、とっても長ーい説明になってしまいましたネ。おつき合い下さって有り難うゴザイマス。やっぱ、一話でこのHotspotsを完結させるのは、無理が有りますネ、でも、暴走列車？はもう止められません、突っ走りますヨ。さー、あと一踏ん張りデス。以降、既に説明したパラメーターについては省略させてくださりマセ。
m(_ _)m

●23行目：左方向移動ボタン用spotタグ

・onPress="pano.panKey=-2,500"：onPressは、ボタン（オブジェクト）が押された時の動作設定。pano.panKeyは、パノラマを横方向に回転させます。この例では、-2,500が指定されているので、左（マイナス）方向に2倍のスピードで回転します。この数字が大きい程、スピードは速くなります。500は、指定のスピードまで加速しながら到達する時間のハズ、、、単位はミリセカンドです。

・onRelease="pano.panKey=0"：onReleaseは、ボタン（オブジェクト）が押された状態から解放された時の動作設定。pano.panKey=0なので、ボタンからマウスを解放すると回転が停止します。

●24行目：右方向移動ボタン用spotタグ

・pno.panKey=2なので、右（プラス）方向へ2倍のスピードで回転します。

●25行目：下方向移動ボタン用spotタグ

・onPress="pano.tiltKey=-2,500"：pano.tilteKeyは、パノラマを上下方向に回転させます。この例では、-2,500が設定されているので、下（マイナス）方向に2倍のスピードで回転します。

●26行目：上方向移動ボタン用spotタグ

・pno.tiltKey=2なので、上（プラス）方向へ2倍のスピードで回転します。

●27行目：ズームアウトボタン用spotタグ

・onPress="pano.zoomKey=-2,500"：pano.zoomKeyは、パノラマをズーミングします。この例では、-2,500が設定されているので、2倍のスピードでズームアウトします。

●28行目：ズームインボタン用spotタグ

・pano.zoomKey=2,500なので、2倍のスピードでズームインします。

●29行目：自動回転ボタン用spotタグ

・external.autorotator.disabled+=1は、autorotator pluginのdisabledの値に+1します。ですので、このボタンを押すたびに、パノラマの自動回転が、on / offされます。

・pano.pan_v=0：パノラマの横方向の回転スピードを0にします。

・pano.tilt_v=0：パノラマの縦方向の回転スピードを0にします。

・pano.zoom_v=0：パノラマのズームスピードを0にします。

●30行目：フルスクリーンボタン用spotタグ

・fullscreen(-)は、パノラマが画面全体に広がるフルスクリーンモードをコントロールします。このコマンドを発行するたびに、パノラマのフルスクリーン化が、on / offします。ちなみに、このフルスクリーンモードを使うには、Flash Player 9.0.28.0以上が必要となります。

●31行目：ポップアップウインドウ用spotタグ

・22行目の情報ボタンを押した時に表示されるポップアップウインドウです。visible="0"が指定されているので、初期状態では非表示となっています。

・onClick="visible=0"：情報ボタンが押され、このポップアップウインドウが表示された時、このポップアップウインドウ自身をクリックすると、非表示となります。

・onOver="" onOut=""：このポップアップウインドウにマウスがロールオーバー、ロールアウトした時、何もしないよう初期化をしています。なぜかと言うと、最初にglobal変数で、すべてのオブジェクトに対しロールオーバー、ロールアウト時のスケール変更の処理を指定していました。これを、初期化しておかないと、ポップアップウインドウへマウスがロールオーバーした時、ビヨーンと、、、なってしまうのデス。

今回のファイル配置は、こんな感じ

そして、上記の設定でサイコロパノラマを表示すると、

↑こんな感じデス。

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

2008.10.31現在価格は、¥5,179ですヨ。
ちなみに、前回（10.17）調べた時は、¥6,129でした、うほ。

【関連情報】
flashpanoramas.com
swfobject - Google Code

【サイト内関連情報】
Flash Panorama Player
vol.4「xmlファイルとプラグイン」
vol.3「HTMLへの埋め込み」
vol.2「簡単再生」
vol.1「QTVRを再生」

投稿者: keiji 日時: 14:03 | パーマリンク | コメント (0) | トラックバック (0)

忘れた頃にやってくる？企画、Flash Panorama Playerの連載第4回目です。前回のvol.3「HTMLへの埋め込み」に引き続き、今回は、xmlファイルとプラグイン使用方法です。

xmlファイルを用いることにより、Flash Panorama Player（以後、FPP）の持つ多くの機能を利用することが出来ます。特に「Hotspots plugin」は、パノラマにインタラクティブな機能を付加することが出来る高機能なプラグイン。機能がありすぎて、拙者自身、いまだに全機能を理解出来ていないというか、試せていないのが現状で、、、（Hotspots pluginについては、次回以降に解説予定デス）

xmlファイルを用いず、htmlファイルの中に埋め込む方法もあるようですが、使い込む程にコードが巨大化してしまいますので、パノラマの機能部分を分離して管理するxmlファイル形式での利用がお勧めです。

では、まずFlash埋め込み用スクリプトのサンプルです。パノラマを表示させたいhtmlのbody内任意の位置に埋め込みます。

前回同様、JavaScriptのオープンソースライブラリSWFObjectを使っています。詳細は、連載のVol.3を見てネ。

●11行目：読み込むパス＋xmlファイル名

そして、そのxmlファイルの内容です。この例では、パノラマの初期値、自動回転（autorotator plugin）、表示範囲制限（borders plugin）を設定します。

●1行目はxmlファイルの宣言文、そして2行目はpanoramaタグ。

●3〜13行目：パノラマのパラメーター設定

・panoType：読み込むパノラマの形式で、選べるタイプは3種類、cube（Cube Face形式）、mov（QTVR形式）、cylinder（Equirectangular形式）です。ただし、mov（QTVR）の場合は、movDecoder.swf、cylinder（Equirectangular）の場合は、cylConverter.swfのプラグインが必要です（連載のvol.1参照）。
・panoName：パノラマデータ名と置かれている場所へのパスです。Cube Faceの場合は、データ名のアンダースコア以下を含みません（連載のvol.2参照）。
・panHome：水平方向の初期値（0°〜360°）
・tiltHome：垂直方向の初期値（-90°〜90°）
・zoomMax：最大ズームの初期値（2以下）
・zoomMin：最小ズームの初期値（0.45以上）
・zoomHome：ズームの初期値（0.45以上、2以下）
・layer_1：自動回転プラグイン「autorotator.swf」の読み込み
・layer_2：表示範囲制限プラグイン「borders.swf」の読み込み
さらにプラグインを読み込むためには、layer_3、layer_4...と追加します。

●14〜19行目：自動回転プラグイン「autorotator.swf」のパラメーター設定

・speed：回転スピードをコントロール、回転方向は「＋」で右回り（時計回り）、「ー」で左回り。
・interval：回転用ファンクションの呼び出される間隔。言ってみれば、ビデオのフレームレートの制御のようなものでしょうか。単位はミリセカンドなので、上記の例、interval = 30では、1秒間に約33回動くことになります。なので、数字が少ない方が動きが細かく、スムーズになるようですが、CPUに対する負荷は上がるのかもしれません。どうも、このintervalもスピードに関係するようで（値が小さい程速くなりますが、今イチ、よーく分らないのデス）、speedとの組み合わせで、パノラマの回転スピードが決まって来るようです。デフォルト値は30です。
・pause：ユーザのアクションが終了後、再回転するまでの時間（単位はミリセカンド）で、デフォルト値は3,000です。
・quality：回転時のアンチエイリアスのクオリティで、"low", "medium", "high", "best"から選択、デフォルト値はlowです。

●20〜25行目：表示範囲制限プラグイン「borders.swf」のパラメーター設定

・pan_min：水平方向の最小値（0°〜360°）
・pan_max：水平方向の最大値（0°〜360°）
・tilt_min：垂直方向の最小値（-90°〜90°）
・tilt_max：垂直方向の最大値（-90°〜90°）

以上。

今回のファイル配置は、こんな感じ

そんでもって、上記の設定でサイコロパノラマを表示すると、

↑こんな感じデス。

ところで、今回ご紹介した表示範囲制限プラグイン「borders.swf」ですが、同様な機能を持つ「limits.swf」というプラグインもあります。この「limits.swf」、マニュアルには「similar to Borders plugin, but Borders plugin restrict only the camera movement.」と書かれているのですが、拙者の語学能力では理解不能デス。頭が駄目なら体で、、、ってな訳で試してみました。上記のxmlファイルを「limits.swf」用に書き換えます。

修正前（12行目）

修正前（20〜25行目）

limits pluginで表示すると、

↑こんな感じ。

なるほど、「borders.swf」の場合、表示画面の中心を基準に制限しているのに比べ、「limits.swf」は、その制限範囲内のみ画面に表示されるということでしょうか？？？ ＜ ム〜かなり分かりにく表現？ですネ、まー、百聞は一見にしかずということでお許しを、、、

p.s.
暫く、話題の少なかったFPPですが、Adobe Flash Player 10のリリースに合わせるようにv2.3が出ました。早速インストールしてみましたが、パノラマ回転時のウネウネやチラチラ等がかなり改善されているようです。Flash Player 10に最適化？するのが大変だったようですネ。さらなる真価は、v2.4で発揮されそうです。

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

ちなみに2008.10.17現在価格は、¥6,129ナリ。

【関連情報】
flashpanoramas.com
swfobject - Google Code

【サイト内関連情報】
Flash Panorama Player vol.3「HTMLへの埋め込み」
Flash Panorama Player vol.2「簡単再生」
Flash Panorama Player vol.1「QTVRを再生」

投稿者: keiji 日時: 23:00 | パーマリンク | コメント (2) | トラックバック (0)

The World Wide Panoramaは、
カリフォルニア大学バークレー校The Geo-Images Projectが主催のパノラマ写真のイベントです。

今回のテーマは「Color」です。

Title：Turquoise mosque

copyright@ Andrew Varlamov / Andrew Varlamov - IVRPA

Andrew Varlamov氏撮影、ロシアの西部、サンクトペテルブルグにある「サンクトペテルブルグ・モスク」です。パノラマのタイトル「Turquoise mosque」どおり、トルコ石（ターコイズ）色の配色が見事なモスクです。

このトルコ石の青緑色、とても魅力的な色であるが、Wikipediaによると、トルコ石は、トルコで産出されている訳ではなく、トルコ経由でヨーロッパに広まったため、このように呼ばれているそうだ。主な産出国は、イラン、シナイ半島、米国らしい、知らなかった、、、

古代より愛され続けている、このトルコ石（ターコイズ）の色について調べてみると、webの世界でもメジャーな色であることが分った。

色の話でちょっと脇道へ
W3C（HTML3.2）で策定されたカラーネームは、aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellowの16色であるが、それを含めたX11カラー（X window system ver11）の140色も、主要なブラウザでサポートされているようである（W3G - World Wide Web Guide参照）。

このカラーネームとは、HTMLタグの中で色を指定する時の名前のこと。一般的には16進数のRGB値を用いるのだが、主要な色は、名前で指定してもブラウザが理解してくれるということだ。例えば、文字色を赤にしたければ「color:red」と言う感じで。実際のところ、赤、青、黄、緑程度は、使ったことはあったが、こんなに有るとは知らなかった、ハズカシイ、、、

この140色の中に「Turquoise」のバリエーション色が４色有る、さすが伝統の色である。

話はAndrew Varlamov氏に戻るが、
氏のパノラマがとっても気になったので調べてみると、viewAt.orgに57のパノラマがアップされていた。

Andrew Varlamov氏、Panographerでは珍しくペンタックスユーザーである。使用機器は、Pentax *ist DS + Pentax SMC P-DA Fish-Eye 10-17mmのようだ。その映像、味わいのある色で、とっても立体感を感じるのである。

人生色々、色の世界も、、、 → WWP - Color

【関連情報】
Wikipedia：ロシアにおけるイスラーム
W3G - World Wide Web Guide
WEB色見本 原色大辞典 - HTML Color Names

投稿者: keiji 日時: 22:55 | パーマリンク | コメント (0) | トラックバック (0)