今回から、ちょっと本格的な動作指定を行っていきます。テーマは下記。

1)パノラマにボタン(ホットスポット)を配置する。
2)ホットスポットをクリックしたら画像がポップアップ。
3)ポップアップ画像をクリックしたら、画像が閉じる。

準備

1)xmlファイルを用意する・・テキストエディタで作成します。拡張子は .xml 。内容の最初と最後に、krpanoのタグを書いておき、その間に必要なコードを書いていきます。エンコードをUTF-8にするのを忘れずに。



2)ホットスポット画像・・・・パノラマ上に貼り付けるホットスポットの画像です。
3)ポップアップ画像・・・・・ホットスポット画像をクリックしたら表示する写真です。



これらが準備できたら、これらをまとめて「popup」フォルダに入れ、パノラマデータの中に入れます。



そうしたら準備ok。
これらを全て、zipにしてこちらに置いておきますので、ご活用を。

手順

1)メインのxmlで、popup.xmlをインクルードする。

2)popup.xmlで、画像を配置する。
2-a)ホットスポット画像をホットスポットとして配置する。(今回はパノラマの中央に置きます。位置調整のやり方は後日)
2-b)ポップアップ画像をレイヤーとして配置する。配置を確認したら、非表示にして見えなくする。

3)ホットスポットをクリックしたら、ポップアップ画像が表示されるアクションを作る。
4)ポップアップ画像をクリックしたら、ポップアップ画像が消えるアクションを作る。

5)動作確認して完了

今回は基本動作だけに絞って進めます。

1)メインのxmlで、popup.xmlをインクルードする。

メインxmlの上の方に、スキンxmlをインクルードするためのコードがありますので、それをコピペするなどして、下記を加えます。これで、popupフォルダの中のpopup.xmlが読み込まれるようになります。

 
	<!-- ポップアップxml -->
	<include url="popup/popup.xml" />

2)popup.xmlで、画像を配置する。

2-a)ホットスポット画像をホットスポットとして配置する。

popupフォルダの中にある、point.png をホットスポットとしてパノラマに配置します。
下記を、popup.xmlに書きます。(メインxmlに書いてもよいのですが、今回はとりあえず)

 
<hotspot name="point01" url="point.png" ath="0" atv="0" />

athは横座標、atvは縦座標で、ここでは0/0、つまりパノラマの中央に配置します。



パノラマを開くとこんな感じ。


2-b)ホットスポット画像をホットスポットとして配置する。

popupフォルダの中にある、photo.png をレイヤーとしてパノラマに配置します。
下記を、popup.xmlに書きます。

 
<layer name="popup01" url="photo.jpg" align="center" width="70%" height="prop" />

align=”center” 中央揃え
width=”70%” 幅をウインドー幅の70%に
height=”prop” 高さは、元画像の縦横比に従う



パノラマを開くとこんな感じ。

2-b)配置を確認したら、非表示にして見えなくする。

レイヤーとして写真が表示されることがわかりましたから、これを一旦非表示(visible=”false”)にします。

 
<krpano>
<hotspot name="point01" url="point.png" ath="0" atv="0" />
<layer name="popup01" url="photo.jpg" align="center" width="70%" height="prop" visible="false"/>
</krpano>



レイヤーが見えなくなりました。

2)ホットスポットをクリックしたら、ポップアップ画像が表示されるアクションを作る。

さていよいよ、動作を付けていきます。
まずは、ホットスポットをクリック(onclick)したら、レイヤーを表示(visible=”true”)にします。

 
<hotspot name="point01" url="point.png" ath="0" atv="0" onclick="set(layer[popup01].visible,true);"/>

set以降で、名前が「popup01」のレイヤーの、visible を ture にsetする という意味です。
これで、ホットスポットをクリックすると、画像が表示されるようになります。しかし、消すことができません。

4)ポップアップ画像をクリックしたら、ポップアップ画像が消えるアクションを作る。

画像を消す動作として、レイヤーをクリック(onclick)したら、レイヤーを非表示(visible=”false”)にします。

 
<layer name="popup01" url="photo.jpg" align="center" width="70%" height="prop" visible="false"
					onclick="set(layer[popup01].visible,false);"/>

これで、表示/非表示を切り替えられるようになりました。

5)動作確認して完了

こちらで動作を見られます。



完成したコードはこちら。

 
<krpano>
<hotspot name="point01" url="point.png" ath="0" atv="0" onclick="set(layer[popup01].visible,true);"/>
<layer name="popup01" url="photo.jpg" align="center" width="70%" height="prop" visible="false"
					onclick="set(layer[popup01].visible,false);"/>
</krpano>

以上が、基本的な動作の設定方法になります。
次回は、ホットスポットの位置の調整方法を学びます。

 

futter