無題ドキュメント


Home	Wordpress						Theory & Methods in Working

11.

19.MAKE VTUOR(MULTIRES)の.xmlの変更2

1.MAKE VTUOR(MULTIRES)dropletは

、Eqirectangilar画像は複数枚の画像でも、CubicのTourを生成してくれるが、Cylindrical画像は複数枚ドロップしてもTourを組んでくれない。1枚ごとにドロップして生成することとなる。生成される「vtour」は全て「vtour」名となるので、上書きをしないように注意が必要です。

2.上記2枚を

に、1枚ずつドロップし、「vtour1」「vtour2」ホルダーを用いて1つの「tour」を作ることとする。

それぞれの「vtour」の中のファイルは上図の様になっている。ただし「skin」は自分で作成し、その中に「radar.swf」、「buttons.png」、「drag-cursors.png」、「qtvr-cursors.png」を入れて下さい。

3.中心となる「vtour1」の「tour.xml」をeditor(市販やフリーのeditorの方が編集し易い)で開き、42行目辺りに「radar構文」モジュールを挿入して下さい。

4.ホットスポットを有効にするために

5.linkを設定しておく(各シーンごとに設定できる)

6.編集中の.xmlファルはそのままにして、2番目の画像の「vtour2」のtour.xlmをeditorで開き、下図の範囲の「scene」をコピーし、編集中の.xmlの、</scene>の後ろに、ペーストする。

7.このペーストした「scene」にも前記4,5を実行する。ただし、link先は異なる「scene」であってもよい。

　以上で「radar」、「hotspot」は作動するので、.xmlファイルを一度保存して下さい。tour.htmlをクリックして確認して下さい。

1枚目の画像が表示され、アニメhotspotが点滅しています。hotspotをクリックするとエラーになり、エラーの内容が表示されます。

そのはずです、2枚目の「vtour2」ホルダーの中の「.tiles」ホルダーを1枚目の「vtour1」の中に移動させて下さい。コピー・ペーストでも可。

8.サムネールが作動するようにしていきます。

上記　onstart=""の後ろに　thumburl="______.tiles/thumburl.jpg"を加える。______は元画像の名前。各「scene」全て書き加えて下さい。

そして、最終行の</krpano>の前に「thumbnail構文」モジュールを挿入して下さい。

9.MAKE VTUOR(MULTIRES)dropletは、Eqirectangilar画像では、「.tiles」ホルダー内に「thumb.jpg」を生成してくれますが、Cylindrical画像では生成してくれないので、各画像ごとに自分で、特徴のある場所をトリミングするなりして、サムネール画像80×80を作成し.jpgで各「____.tiles」のホルダーに入れて下さい。

　以上で「サムネール」は作動するので、.xmlファイルを一度保存して下さい。tour.htmlをクリックして確認して下さい。

10.次は「操作アイコン」が表示できるようにします。4,5行目当たりに「操作アイコン0構文」モジュールを挿入し、

前半の20から30行目の<action name="??????? の、</action>の後ろに、「操作アイコン構文」モジュールを挿入して下さい。行数が挿入により変化していますから、注意して下さい。

以上で「操作アイコン」は作動するので、.xmlファイルを一度保存して下さい。tour.htmlをクリックして確認して下さい。

11.表示画像の回転モジュールを各「scene」の中の</image>の後ろに入れ、speed="1"を変更することにより回転速度と回転方向が変化します。

回転モジュールを全ての1番目の「scene」の開始よりも前に入れると、全ての画像は同じ設定が適用されます。

追記:以上の手順をマスターすれば、tourに組み込む画像枚数は無限に可能です。その時はhotspot1,hotspot2,・・・・と、沢山設定する方が魅力的になるでしょう。

以下は6-18MAKE VTUOR(MULTIRES)の.xmlの変更を再掲示します。

各モジュールの開始行から終了行をマウスでDiskTopにドラグするだけでモジュールファイルが得られるので、これを.xmlにドラッグアンドペースすることが出来ます。

私が理解できる範囲での注釈はここから見て下さい

9.操作アイコンの構文モジュール(drag-cursors.png,qtvr-cursors.png,buttons.pngが必要)

<events onxmlcomplete="setuppano();"
onpreviewcomplete=""
onloadcomplete=""
onloaderror=""
onkeydown=""
onkeyup=""
onclick=""
onmousedown=""
onmouseup=""
onmousewheel=""
onidle=""
onviewchange=""
onresize=""
onenterfullscreen="set(plugin[openfs].visible,false);
set(plugin[closefs].visible,true);
if(isandroid, set(plugin[android_openfs].visible,false); set(plugin[android_closefs].visible,true); );
"
onexitfullscreen="set(plugin[openfs].visible,true);
set(plugin[closefs].visible,false);
if(isandroid, set(plugin[android_openfs].visible,true); set(plugin[android_closefs].visible,false); );
"
/>

<control usercontrol ="all"
mousetype ="moveto"
zoomtocursor ="false"
zoomoutcursor ="true"
mouseaccelerate="1.00"
mousespeed ="10.00"
mousefriction ="0.80"
headswing ="0.00"
keybaccelerate ="0.50"
keybspeed ="10.00"
keybfriction ="0.90"
keybinvert ="false"
mousefovchange ="1.00"
keybfovchange ="0.75"
fovspeed ="3.00"
fovfriction ="0.90"
movetocursor ="none"
cursorsize ="10.0"
keycodesleft ="37"
keycodesright ="39"
keycodesup ="38"
keycodesdown ="40"
keycodesin ="16,65,107"
keycodesout ="17,89,90,109"
/>

<contextmenu fullscreen="true">
<item name="n0" enabled="true" visible="true" separator="false"
caption="KRPANO"
onclick=""
/>
<item name="n1" enabled="true" visible="true" separator="false"
caption="FULLSCREEN"
onclick=""
/>
<item name="n2" enabled="true" visible="true" separator="true"
caption="normal view"
onclick="action(view_normal);"
/>
</contextmenu>

<action name="dragcursor">
set(plugin[dragmode].visible, false);
set(plugin[movemode].visible, true);
set(control.mousetype, drag2D);
set(cursors.url, %SWFPATH%/skin/drag-cursors.png);
set(cursors.type, drag);
set(cursors.move, 2|0|30|32);
set(cursors.drag, 37|0|30|32);
</action>

<action name="qtvrcursor">
set(plugin[dragmode].visible, true);
set(plugin[movemode].visible, false);
set(control.mousetype, moveto);
set(cursors.url, %SWFPATH%/skin/qtvr-cursors.png);
set(cursors.type, 8way);
set(cursors.move, 0|0|16|16);
set(cursors.drag, 16|0|16|16);
set(cursors.arrow_u, 32|0|16|16);
set(cursors.arrow_d, 48|0|16|16);
set(cursors.arrow_l, 64|0|16|16);
set(cursors.arrow_r, 80|0|16|16);
set(cursors.arrow_lu, 96|0|16|16);
set(cursors.arrow_ru, 112|0|16|16);
set(cursors.arrow_rd, 128|0|16|16);
set(cursors.arrow_ld, 144|0|16|16);
</action>

<action name="view_normal">
tween(view.fovmax, 150.0, distance(179, 1.00), easeoutquad);
tween(view.architectural, 0.0, distance(1.0, 0.45), easeoutquad);
tween(view.fisheye, 0.0, distance(1.0, 0.45), easeoutquad, set(view.stereographic,false); set(view.pannini,false); set(display.flash10,on); );
</action>

<action name="setuppano">
action(qtvrcursor);
if(ispartialpano === true, set(showviewitems,false), set(showviewitems,true));
set(contextmenu.item[2].visible, get(showviewitems));
set(contextmenu.item[3].visible, get(showviewitems));
set(contextmenu.item[4].visible, get(showviewitems));
set(contextmenu.item[5].visible, get(showviewitems));
set(contextmenu.item[6].visible, get(showviewitems));
set(contextmenu.item[7].visible, get(showviewitems));
</action>

10.radarの構文モジュール(radar.swfが必要)

<plugin name="radar"
url="skin/radar.swf"
keep="true" preload="false"
visible="true" enabled="true" handcursor="true" capture="true" children="true" usecontentsize="false"
zorder="0"
alpha="1.00" blendmode="normal" effect="" smoothing="true"
align="rightbottom" edge="center"
x="64" y="64" ox="5" oy=""
width="128" height="128"
crop="" ondowncrop="" onovercrop=""
scale="1" scale9grid="" scalechildren="false"
rotate="270"
parent=""
mask=""
onloaded=""
onover=""
onhover=""
onout=""
ondown=""
onup=""
onclick=""
devices="all"
fillalpha="0.5"
fillcolor="16000000"
heading="0"
linealpha="0.3"
linecolor="16777215"
linewidth="0"
/>

11.hotspotの定義構文モジュール(hotspot_ani_black_64x64x20.png,hotspot_ani_white_64x64x20.pngが必要)

<style name="hotspot_ani_black"
url="hotspots/hotspot_ani_black_64x64x20.png"
crop="0|0|64|64"
frames="20" framewidth="64" frameheight="64" frame="0"
onloaded="hotspot_animate();"
altonloaded="if(isphone, mul(scale,2)); onloaded();"
/>

<action name="hotspot_animate">
inc(frame,1,get(frames),0);
mul(ypos,frame,frameheight);
txtadd(crop,'0|',get(ypos),'|',get(framewidth),'|',get(frameheight));
delayedcall(0.03, hotspot_animate() );
</action>

12.sceneの中のhotspotの定義モジュール

<hotspot name="spot1" style="hotspot_ani_black"
ath="40"
atv="0"
zoom="false"
onclick="looktohotspot(get(name)); loadscene('scene_inuitei2',null,MERGE,BLEND(1));"
/>

13.サムネールの構文モジュール

<action name="buildthumbs">
if(%1 != NEXT, set(i,0));
if(i LT scene.count,
copy(thumb, scene[get(i)].thumburl);
txtadd(thumbname,'thumb_',get(i));
addplugin(get(thumbname));
set(plugin[get(thumbname)].url, get(thumb));
set(plugin[get(thumbname)].keep, true);
set(plugin[get(thumbname)].align, leftbottom);
set(plugin[get(thumbname)].width, 40);
set(plugin[get(thumbname)].height, 40);
set(plugin[get(thumbname)].x, 10);
set(plugin[get(thumbname)].y, 10);
mul(plugin[get(thumbname)].x, i,3);
mul(plugin[get(thumbname)].y, i,3);
add(plugin[get(thumbname)].x, 5);
add(plugin[get(thumbname)].y, 5);
copy(plugin[get(thumbname)].xsmall, plugin[get(thumbname)].x);
copy(plugin[get(thumbname)].ysmall, plugin[get(thumbname)].y);
add(plugin[get(thumbname)].zorder, 100, i);
set(plugin[get(thumbname)].effect,glow(0xFFFFFF,1.0,2,10000));
set(plugin[get(thumbname)].jsborder,'1px solid #FFFFFF');
copy(plugin[get(thumbname)].thumbpos, i);
set(plugin[get(thumbname)].linkedscene, get(scene[get(i)].name) );
set(plugin[get(thumbname)].onclick, openthumbs() );
inc(i);
buildthumbs(NEXT);
);
</action>

<action name="openthumb">
if(%2 != NEXT,
set(pos,0);
copy(curpos, plugin[%1].thumbpos);
set(xdst, 0);
set(ydst, 0);
);

if(pos LT curpos,
inc(pos);
inc(ydst,90);
sub(ymax, stageheight, 100);
if(ydst GT ymax, inc(xdst,90);set(ydst,0); );
openthumb(%1,NEXT);
,
add(xdst,10);
add(ydst,10);
tween(plugin[%1].x, get(xdst) );
tween(plugin[%1].y, get(ydst) );
tween(plugin[%1].width, 80);
tween(plugin[%1].height, 80);
);
</action>

<action name="closethumb">
tween(plugin[%1].x, get(plugin[%1].xsmall));
tween(plugin[%1].y, get(plugin[%1].ysmall));
tween(plugin[%1].width, 40);
tween(plugin[%1].height, 40);
</action>

<action name="openthumbs">
if(%1 != NEXT,
set(i,0);
set(events.onclick, set(events.onclick,null); delayedcall(0.1, closethumbs() ); );
);

if(i LT scene.count,
txtadd(thumbname,'thumb_',get(i));
openthumb(get(thumbname));
set(plugin[get(thumbname)].onclick, set(events.onclick,null); closethumbs(); loadscene(get(linkedscene),null,MERGE,BLEND(1)); );
inc(i);
openthumbs(NEXT);
);
</action>

<action name="closethumbs">
if(%1 != NEXT, set(i,0));
if(i LT scene.count,
txtadd(thumbname,'thumb_',get(i));
closethumb(get(thumbname));
set(plugin[get(thumbname)].onclick, openthumbs() );
inc(i);
closethumbs(NEXT);
);
</action>

14.autorotateの構文モジュール

<autorotate enabled ="true"
waittime="1.5"
accel ="1"
speed ="1"
horizon ="0"
tofov ="NaN"
/>

15.カメラコントロールの構文モジュール(cameracontrols.swfが必要)

<plugin name="cameracontrols"
url="skin/cameracontrols.swf" zoom_refresh_fps="10"
keep="true"
align="lefttop"
x="20"
y="20"
/>

16.compassの構文モジュール(compass_plate.png,compass_pointer.png,compass_ring.png,compass.png,glass.jpgが必要)

<action name="onstart">
set(heading, 0);
</action>
<textstyle name="hoverstyle"
background="false" border="false" fontsize="30" textcolor="0xFFFFFF" effect="
glow(0xFFFFFF,0.7,4,2);glow(0xee0000,1,4,2);dropshadow(3,45,0x0000ff,2,0.8);"
fadetime="0.2" />
<autorotate enabled="true" waittime="3.0" accel="0.5" speed="3" horizon="0" tofov="100" />

<events onxmlcomplete="action(onstart);"onviewchange= "action(onviewchange);"/>

<action name="onviewchange">
sub(plugin[compass_pointer].rotate, view.hlookat, heading);
sub(plugin[compass2_plate].rotate, heading, view.hlookat);
</action>


<plugin name="compass" url="compass-img/compass.png" keep="true" zorder="1" children="false"
align="rightbottom" x="10" y="10"
scale="0.3" scalechildren="true"
destscale="1.0"
onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"
onhover="showtext(ÉNÉäÉbÉN->ëÂ,hoverstyle);"
heading="0" />

<plugin name="compass_pointer" url="compass-img/compass_pointer.png" keep="true" handcursor="false"
parent="compass" zorder="1"
align="center"/>

<plugin name="glass" devices="flash" url="compass-img/glass.jpg" keep="true" enabled="false"
blendmode="screen" alpha="0.5"
parent="compass" zorder="2"
align="center"/>

<plugin name="compass2" url="compass-img/compass.png" keep="true" zorder="1" children="false"
align="leftbottom" x="10" y="10"
scale="0.3" scalechildren="true"
destscale="1.0"
onclick="switch(destscale,1.0,0.5);tween(scale,get(destscale));"
onhover="showtext(ÉNÉäÉbÉN->ëÂ,hoverstyle);"/>

<plugin name="compass2_plate" url="compass-img/compass_plate.png" keep="true" handcursor="false"
parent="compass2" zorder="1"
align="center"/>

<plugin name="compass2_pointer" url="compass-img/compass_pointer.png" keep="true" handcursor="false"
parent="compass2" zorder="2"
align="center"/>

<plugin name="compass2_ring" url="compass-img/compass_ring.png" keep="true" handcursor="false"
parent="compass2" zorder="3"
align="center"/>

<plugin name="glass2" devices="flash" url="compass-img/glass.jpg" keep="true" enabled="false"
blendmode="screen" alpha="0.5"
parent="compass2" zorder="4"
align="center" />

17.

18.

Back