1. HOME
  2. BLOG
  3. Flash Panorama Player vol.5「Hotspots plugin」
BLOG

Flash Panorama Player vol.5「Hotspots plugin」

BLOG, panorama

75

Hotspots plugin

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

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

<script type=”text/javascript” src=”files/swfobject.js”></script>
<div id=”flashcontent”>
パノラマを見るためには、
<a href=”http://www.adobe.com/go/getflashplayer/”>Adobe Flash Player</a>や、
JavaScriptを有効にする必要があります。
</div>
<script type=”text/javascript”>
var so = new SWFObject(“files/pano.swf”, “pano”, “100%”, “100%”, “9”, “#000000”);
so.addParam(“allowFullScreen”,”true”);
so.addParam(“allowScriptAccess”,”sameDomain”);
so.addVariable(“xml_file”, “saikoro2_hotspots.xml”);
so.write(“flashcontent”);
</script>

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

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

so.addVariable(“xml_file”, “saikoro2_hotspots.xml”);

上記の例では、saikoro2_hotspots.xmlを読み込みます。

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

<?xml version = ‘1.0’?>
<panorama>
<parameters>
panoType = cube
panoName = data/saikoro2
panHome = 0
tiltHome = 0
zoomMax = 2
zoomMin = 0.5
zoomHome = 0.80
layer_1 = files/autorotator.swf
layer_2 = files/hotspots.swf
</parameters>
<autorotator>
speed = 0.1
interval = 30
pause = 3000
quality = low
</autorotator>
<hotspots>
<global onStart=”external.autorotator.disabled=1″ onOver=”scale=1.1,600,elastic;depth+=10″ onOut=”scale=1,300;depth-=10″ >
<spot id=”info” static=”1″ align=”BC” salign=”BC” staticX=”-300″ staticY=”-10″ url=”files/black_i.png” onClick=”infoscreen.visible+=1″ />
<spot id=”left” static=”1″ align=”BC” salign=”BC” staticX=”-225″ staticY=”-10″ url=”files/black_l.png” onPress=”pano.panKey=-2,500″ onRelease=”pano.panKey=0″ />
<spot id=”right” static=”1″ align=”BC” salign=”BC” staticX=”-150″ staticY=”-10″ url=”files/black_r.png” onPress=”pano.panKey=2,500″ onRelease=”pano.panKey=0″ />
<spot id=”down” static=”1″ align=”BC” salign=”BC” staticX=”-75″ staticY=”-10″ url=”files/black_d.png” onPress=”pano.tiltKey=-2,500″ onRelease=”pano.tiltKey=0″ />
<spot id=”up” static=”1″ align=”BC” salign=”BC” staticX=”0″ staticY=”-10″ url=”files/black_u.png” onPress=”pano.tiltKey=2,500″ onRelease=”pano.tiltKey=0″ />
<spot id=”zoomOut” static=”1″ align=”BC” salign=”BC” staticX=”75″ staticY=”-10″ url=”files/black_m.png” onPress=”pano.zoomKey=-2,500″ onRelease=”pano.zoomKey=0″ />
<spot id=”zoomIn” static=”1″ align=”BC” salign=”BC” staticX=”150″ staticY=”-10″ url=”files/black_p.png” onPress=”pano.zoomKey=2,500″ onRelease=”pano.zoomKey=0″ />
<spot id=”auto” static=”1″ align=”BC” salign=”BC” staticX=”225″ staticY=”-10″ url=”files/black_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=”300″ staticY=”-10″ url=”files/black_f.png” onClick=”fullscreen(-)” />
<spot id=”infoscreen” static=”1″ align=”MC” salign=”MC” visible=”0″ url=”files/logoInfo.png” onClick=”visible=0″ onOver=”” onOut=”” />
</global>
</hotspots>
</panorama>

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

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

<?xml version=”1.0″ ?>
<panorama>
<parameters>
panoType = cube
panoName = data/saikoro2
panHome = 0
tiltHome = 0
zoomMax = 2
zoomMin = 0.5
zoomHome = 0.80
layer_1 = files/autorotator.swf
layer_2 = files/hotspots.swf
</parameters>
<autorotator>
speed = 0.1
interval = 30
pause = 3000
quality = low
</autorotator>

12行目の”layer_2 = files/hotspots.swf”でhotspots pluginを読み込んでいます。

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

<hotspots>
<global onStart=”external.autorotator.disabled=1″ onOver=”scale=1.1,600,elastic;depth+=10″ onOut=”scale=1,300;depth-=10″ >

さーここからが、Hotspots pluginの設定本番です。まず、globalタグに、全体を通じて機能する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タグ

<spot id=”info” static=”1″ align=”BC” salign=”BC” staticX=”-300″ staticY=”-10″ url=”files/black_i.png” onClick=”infoscreen.visible+=1″ />

・spot:パノラマ内に貼り込むオブジェクトの一種類。パノラマ内の空間に平面的(2次元的)に貼り込むことが出来ます。例えば、人物の写った写真を貼り込んだ場合、常に正面を向いたカメラ目線?の状態で貼り込まれます。これに対し、boxオブジェクトは、立体的に貼り込むことが出来ます。人物の写った写真を、横の壁に貼れば、ユーザーはカメラ目線?から逃れることも可能か、、、この例の場合は、インターフェイスボタンなので、カメラ目線タイプ?のspotを使用。

でも、この説明では、よけー分りにくいと言う声も聞こえて来そうなので、パノラマのサンプルをおこしてみました。サイコロの6の目の上右側に貼り付いている額縁がboxオブジェクトで、左上側に貼り付いている額縁がspotオブジェクトです。
spot and box object
↑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)のコンビネーションで指定します(下図参照)。
Hotspots plugin align
この例、”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座標。
Hotspots plugin salign
この例の場合、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タグ

<spot id=”left” static=”1″ align=”BC” salign=”BC” staticX=”-225″ staticY=”-10″ url=”files/black_l.png” onPress=”pano.panKey=-2,500″ onRelease=”pano.panKey=0″ />

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

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

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

<spot id=”right” static=”1″ align=”BC” salign=”BC” staticX=”-150″ staticY=”-10″ url=”files/black_r.png” onPress=”pano.panKey=2,500″ onRelease=”pano.panKey=0″ />

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

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

<spot id=”down” static=”1″ align=”BC” salign=”BC” staticX=”-75″ staticY=”-10″ url=”files/black_d.png” onPress=”pano.tiltKey=-2,500″ onRelease=”pano.tiltKey=0″ />

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

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

<spot id=”up” static=”1″ align=”BC” salign=”BC” staticX=”0″ staticY=”-10″ url=”files/black_u.png” onPress=”pano.tiltKey=2,500″ onRelease=”pano.tiltKey=0″ />

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

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

<spot id=”zoomOut” static=”1″ align=”BC” salign=”BC” staticX=”75″ staticY=”-10″ url=”files/black_m.png” onPress=”pano.zoomKey=-2,500″ onRelease=”pano.zoomKey=0″ />

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

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

<spot id=”zoomIn” static=”1″ align=”BC” salign=”BC” staticX=”150″ staticY=”-10″ url=”files/black_p.png” onPress=”pano.zoomKey=2,500″ onRelease=”pano.zoomKey=0″ />

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

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

<spot id=”auto” static=”1″ align=”BC” salign=”BC” staticX=”225″ staticY=”-10″ url=”files/black_a.png” onClick=”external.autorotator.disabled+=1; pano.pan_v=0; pano.tilt_v=0; pano.zoom_v=0;” />

・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タグ

<spot id=”full” static=”1″ align=”BC” salign=”BC” staticX=”300″ staticY=”-10″ url=”files/black_f.png” onClick=”fullscreen(-)” />

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

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

<spot id=”infoscreen” static=”1″ align=”MC” salign=”MC” visible=”0″ url=”files/logoInfo.png” onClick=”visible=0″ onOver=”” onOut=”” />

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

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

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

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

そして、上記の設定でサイコロパノラマを表示すると、
hotspots
↑こんな感じデス。

Flash Panorama Playerに興味のある方、購入はこちらからどうぞ。
flashpanoramas
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を再生」

  1. この記事へのコメントはありません。

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

PickUp