いよいよxmlをいじっていきます。
初回は、マウスタイプの変更。MAKE PANOドロップレットで作成したパノラマは、初期状態のマウスモードが「moveto」と呼ばれるタイプになっています。一昔前のQTVRに準じた動かし方で、マウスカーソルをちょっと横に動かすと、延々その方向にパノラマが動いていきます。慣れの問題なのですが、タッチデバイスに慣れた現代人にとっては、ちょっと馴染まない動きに感じます。マウスや指先で動かした(ドラッグした)だけ、動いてくれる方が感覚的なんですよね。なので、このマウスタイプを、「moveto」から、「drag2d」タイプに変更します。
変更するだけなら、コードをちょっと書き換えればよいだけなのですが、その仕組みまで、ちゃんと調べてみてみます。これまた、慣れるまでが大変なのですが、一つ一つの動きを調べて変更する方法を理解しておくと、後が楽になります。

1)準備

パノラマ画像を用意し、MAKE PANO ドロップレットでパノラマを生成します。
元画像はこちらを利用できます。(クリックしてからダウンロードしてください。)



MAKE PANOドロップレットでパノラマを生成します。


バラバラのファイルができますので、フォルダにまとめておきます。


パノラマを開くとこんな感じになります。

2)メインのxmlから調べる

最初に開かれるのは、(○○は画像のファイル名).xml ですので、これを開きます。



下の方の記述は、view、preview、image で、パノラマ画像を表示する内容だけです。ということは、最初にinclude されている、スキンのxmlにいろいろ書かれていそうだな、ということがわかります。
skinフォルダの中の、defaultskin.xml を開きます。



するとめでたく、最初の方に、こんな記述が見つかるわけですよ。

 
	<!-- default mouse control mode (moveto or drag2d) -->
	<control mousetype="moveto" />

マウスタイプを切り替えるには、mousetype の中を、moveto から drag2d に書き換えればよいことが書かれています。



これでok。パノラマをドラッグで動かせるようになりました。



3)もっと調べてみる

実は、マウスタイプの切り替えは、パノラマの下に表示されているボタンでも切り替えられます。右から3つめです。



このボタンの動作の記述も、スキン.xmlにあります。22行目あたり。



 
<layer name="btn_ctrlmode" x="240" style="defaultskin_button" crop="800|0|80|80" onovercrop="800|80|80|80" onclick="switch(control.mousetype,moveto,drag2d); switch(control.touchtype,moveto,drag2d); update_ctrl_mode();" />

説明していきましょう。
layer ・・・画面に配置するボタンなどを「layer」といいます。これは覚えます。
name=”btn_ctrlmode”・・・・名前を、btn_ctrlmod に指定。
x=”240″・・・・・・・・・・x座標(横の位置)を、240に。(詳細は後日)
style=”defaultskin_button”・・・レイヤーの表示スタイルの指定です。12行目に画像などが指定されています。
crop=”800|0|80|80″・・・・・・・スタイルで指定された画像をクロップします。xが800、yが0、幅と高さが80。
onovercrop=”800|80|80|80″・・・・マウスオーバーで、画像のクロップを変更し、イメージを変更します。
onclick=・・・・・・・・・・・・クリック時の動作を指定します。
switch(control.mousetype,moveto,drag2d);・・・マウスモードを、movetoとdrag2dにswitchし(切り替え)ます。
switch(control.touchtype,moveto,drag2d);・・・タッチタイプの変更(ここでは無視)。
update_ctrl_mode();・・・・・・・・・・51行目にupdate_ctrl_modeアクションの記述があり、ここでマウスモードの動作と画像の切り替え、ボタン画像の変更を指定しています。

いやあ、なんというか、すごくややこしそうですが、ボタンのonclickで、マウスタイプを変更し、update_ctrl_modeアクションで、実際に変更しているわけです。update_ctrl_modeアクションは下記のような記述になっています。



if文で、マウスタイプの設定によって、動作を切り替えています。
if文の読み方はこんな感じ。

if(control.mousetype == drag2d,・・・control.mousetype が drag2 なら、直後の動作を、そうでなければ、, (カンマ)以降の62行目からの動作をします。

set(cursors.url, %SWFPATH%/skin/drag-cursors-2.png);・・・・・・マウスカーソルの画像指定
set(cursors.type, drag);・・・・・・・・・・・・・・・cursors.typeを drag に。これで動作が変わる
set(cursors.move, 0|0|32|32);・・・・・・・・・・・・move時のクロップ
set(cursors.drag, 32|0|32|32);・・・・・・・・・・・・drag時のクロップ
set(layer[btn_ctrlmode].crop, 720|0|80|80);・・ボタン画像のクロップ
set(layer[btn_ctrlmode].onovercrop, 720|80|80|80);・ボタン画像のマウスオーバー時のクロップ

カンマ以降の動作は行数が多いですが、これと同じパターンです。

4)右クリック(コンテクストメニュー)の動作

もう一つ、ボタンでマウスタイプを切り替える以外に、右クリックでも切り替えることができます。



Change Controlmode をクリックすると、マウスタイプを切り替えられます。
が、意外にも、ボタンの画像が切り替わらないんですよ。記述をみてみましょう。



右クリックの動作は、contextmenu に書かれていて、item name=”cc” が「Change Controlmode」で、クリック時に「cm_changecontrolmode」というアクションを指定しています。このアクションは、114行目にあります。
よくよく見ると、マウスタイプを変更しているだけで、ボタンの画像変更などの指定がないみたいです。
ですので、ここに、ボタンの動作と同じように、update_ctrl_mode();を加えます。

 
	<action name="cm_changecontrolmode">
		switch(control.mousetype, moveto, drag2d);
		switch(control.touchtype, moveto, drag2d);
		update_ctrl_mode();
        </action>

すると、右クリックでの指定でも、ボタンの画像が変更されるようになりました。こちらで確認できます。

次回は、上下左右拡縮ボタンの位置やスピードを変更してみます。

 

futter