さてさて「layer(レイヤー)」をパノラマに貼り付けて、その特徴を調べていきます。
以前も紹介したよう、レイヤーは、ブラウザ画面に対して位置を固定したボタン類です。ですから、画面下に配置されている上下左右ボタンなどもレイヤーです。

準備

何も配置されていないパノラマを用意し、layer.xmlをインクルード指定して読み込ませ、ここにいたずら書きをしていきます。


メインxml(pano.xml)で、layer.xmlをインクルード。

 
<krpano>	
	<!-- the skin -->
	<include url="skin/defaultskin.xml" />

	<!-- レイヤー -->
	<include url="layer.xml" />

layer.xmlは空っぽでスタート。

 
<krpano>
</krpano>

コンテナタイプのlayerを加える

まず、こんな感じに記述します。それぞれの属性の意味は前回を参照してください。
bgborder=”2 0xff0000 0.5″ これは、幅2ピクセル、色は赤、透明度は0.5 です。

<krpano>
<layer name="box"  type="container" keep="true"  
		align="left" x="100" y="0"
		width="300" height="200"   
		bgcolor="0xffffff" bgalpha="0.5" 
		bgborder="2 0xff0000 0.5" 
		bgroundedge="5" 
		bgshadow="5"  
		bgcapture="false"   
       />
</krpano>



画像を配置

ここで画面下にあるボタンを別に配置してみます。
%SWFPATH% は、SWFファイルを基準にしたディレクトリー指定です。../../など、相対URL指定も可能です。

<layer name="leftbtn"  url="%SWFPATH%/skin/buttons-2.png" keep="true"
		crop="0|0|80|80"  
		align="lefttop" x="10" y="10" scale="1"
	    />


親子関係を作る

左上にボタンがつきました。このまま、親子関係を作ります。

<krpano>

<layer name="box"  type="container" keep="true"  
		align="left" x="100" y="0"
		width="300" height="200"   
		bgcolor="0xffffff" bgalpha="0.5" 
		bgborder="2 0xff0000 0.5" 
		bgroundedge="5" 
		bgshadow="5"  
		bgcapture="false"   
       >

<layer name="leftbtn"  url="%SWFPATH%/skin/buttons-2.png" keep="true"
		crop="0|0|80|80"  
		align="lefttop" x="10" y="10" scale="1"
	/>

</layer>

</krpano>



leftbtnが、boxの子供になりましたので、親であるbox基準の位置に変わります。
つまり、他のボタンも全て、boxを親にすることで、ボタンをまとめて配置することができるようになります。
boxを透明にすれば、見た目は個別に配置しているように見えますが、親であるboxの配置を変更するだけで、全ての子供の配置をまとめて変更できるので便利です。

ボタンを並べて配置を調整する



各ボタン共通の属性は、styleでまとめて指定すると、変更が楽になります。

<krpano>

<layer name="box"  type="container" keep="true"  
		align="left" x="100" y="0"
		width="320" height="200"   
		bgcolor="0xffffff" bgalpha="0.5" 
		bgborder="2 0xff0000 0.5" 
		bgroundedge="5" 
		bgshadow="5"  
		bgcapture="false"   
       >

<layer name="leftbtn"  style="ctrlbtn" crop="0|0|80|70"   x="10" y="0"/>
<layer name="rightbtn" style="ctrlbtn" crop="80|0|80|70"  x="150" y="0" />
<layer name="upbtn"    style="ctrlbtn" crop="160|0|80|70" x="80" y="50" />
<layer name="downtbtn" style="ctrlbtn" crop="240|0|80|70" x="80" y="-50" />
<layer name="in"       style="ctrlbtn" crop="320|0|80|70" x="235" y="-50"  />
<layer name="out"      style="ctrlbtn" crop="400|0|80|70" x="235" y="50" />

</layer>


<style name="ctrlbtn"
		url="%SWFPATH%/skin/buttons-2.png" keep="true"
		align="left" scale="1"
		/>

</krpano>

全体のサイズを変える

boxレイヤーに、scale=”0.5″ を入れると、boxのサイズが小さくなります。しかし、ボタンはそのまま。



子供のボタンサイズも連動させるには、scalechildrenを使います。

scale="0.5" scalechildren="true"



こんな感じでやれば、ボタンの配置が自由にできるようになります。

 

futter