1、主logo啓動說明
krpano項目啓動畫面是全景漫遊中很搶眼球的一個環節，在視覺爲先的時代，優秀的啓動畫面可能比好的導航還能加分。今天我們就來講講如何添加啓動畫面。首先告訴大家官方案例的位置。下面是在線觀看官方案例。如果你下載了krpano安裝包，其位置就在krpano 1.18.6。官方案例位置：/examples/xml-usage/introimage/introimage.html。可以看到官方的案例做了一個小小的圖片，大概是佔了屏幕的五分之一不到的比例。在剛進入全景的時候展示大概四秒後或在你點擊圖片後即自動消失。具體可看：
它是一個全屏的畫面，而且可以等到全景圖載入結束以後才進入全景，而不是真的等到4秒，進入了全景，發現還在全景圖還在載入中，那這個啓動畫面就失去意義了。除了這種基本的啓動畫面，我們還可以製作開門、翻頁、半透明、鏤空等啓動畫面效果。
首先我們要製作三個layer，第一個是container容器，它是一個顏色塊，在這裏就是一個白色，爲什麼要用container而不是用圖片作爲背景呢，首先是一個載入速度的問題，啓動畫面一定是輕量級的，其次涉及到各種設備的尺寸和分辨率問題，使用container作爲背景容易控制。如果你需要背景有紋理，那你可以選擇圖片，但圖片就需要注意尺寸的適應問題，可能會導致紋理被錯誤地拉伸和扭曲。
另外我們要做一個小小的log放在中間以及一個文字layer放在logo的下面。
因此就有了下面的代碼。你可以放在scene標籤外的任何空檔位置
<layer name="startpic_container"
preload="true"
alpha="1"
handcursor="true"
enabled="true"
children="true"
visible="true"
zorder="90"
type="container"
maskchildren="true"
keep="true"
width="100%"
height="100%"
bgcolor="0xFFFFFF"
bgalpha="1" >
<layer name="skin_title_logo3"
zorder="100"
keep="true"
x="0"
y="-80"
align="center"
url="360logo.png"
scale="1"
alpha="0"
onloaded="tween(alpha,1.0);tween(layer[skin_title_pr].alpha,1.0);"
onclick="tween(layer[startpic_container].ox,-2500,1);
delayedcall(2,set(layer[startpic_container].enabled,false);
set(layer[startpic_container].visible,false));
stopdelayedcall(startpic1);stopdelayedcall(startpic2);"
enabled="false" />
<layer name="skin_title_pr"
background="true"
backgroundcolor="0x999999"
roundedge="10"
backgroundalpha="0"
border="true"
bordercolor="0x999999"
borderalpha="0"
borderwidth="4.0"
glow="0"
glowcolor="0xCCCCCC"
visible="true"
keep="true"
alpha="0"
onloaded=""
children="false"
align="center"
zorder="100"
autowidth="auto"
height="40"
url="%SWFPATH%/plugins/textfield.swf"
html="全景漫遊"
css="text-align:center; color:#9B8179; font-family:SimHei; font-weight:bold; font-size:32px;"
x="0"
y="150"
onclick="tween(layer[startpic_container].ox,-2500,1);
delayedcall(2,set(layer[startpic_container].enabled,false);
set(layer[startpic_container].visible,false));
stopdelayedcall(startpic1);stopdelayedcall(startpic2);"
enabled="false"
/>
</layer>
<events name="startlogoevents" keep="true"
onloadcomplete="
ifnot(layer[skin_title_logo3].enabled,
set(layer[skin_title_logo3].enabled,true);
set(layer[skin_title_pr].enabled,true);
delayedcall(startpic1,4,tween(layer[startpic_container].ox,-2500,1));
delayedcall(startpic2,5,set(layer[startpic_container].enabled,false);set(layer[startpic_container].visible,false));)
"/>
<!-- 啓動畫面結束 -->
第一個layer是一個白色的背景，第二個以及第三個分別是logo和文字。注意這裏將enabled設爲false，也就是無法響應鼠標行爲，因爲我們需要全景圖像載入完成之後才觸發enabled，不然用戶看到logo，就會很自然地點擊logo，但進去以後卻發現還是黑的，這樣的體驗就是不好的。因此我們要把enabled設爲false。
另外我們要把onclick寫好，這裏主要是將啓動畫面往左隱藏到屏幕外。同時我們還有一個如果不點擊的話也是會在規定時間內自動隱藏自動移開的action，因此需要寫一個stopdelayedcall
onloadcomplete的events：
<events name="startlogoevents" keep="true"
onloadcomplete="
ifnot(layer[skin_title_logo3].enabled,
set(layer[skin_title_logo3].enabled,true);
set(layer[skin_title_pr].enabled,true);
delayedcall(startpic1,4,tween(layer[startpic_container].ox,-2500,1));
delayedcall(startpic2,5,set(layer[startpic_container].enabled,false);set(layer[startpic_container].visible,false));)
"/>
這裏基本上與logo和文字標題的onclick屬性是相似的，但因爲啓動畫面只需要做一次，而onloadcomplete是每個場景的全景載入結束時都會有的，因此這裏加了一個ifnot的action進行判斷，這樣就不會每次載入全景時都會多餘地執行這些啓動畫面的行爲，儘管這一步對全景影響微乎其微，但好的邏輯是做好漫遊的基礎。
另外，我們還要在startup這個action里加一句實現logo下標題文字的功能。
點擊代碼窗口最右側按鈕，在新窗口打開後複製代碼
set(layer[skin_title_pr].html,get(title));
也就是
<action name="startup" autorun="onstart">
if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
loadscene(get(startscene), null, MERGE);
if(startactions !== null, startactions() );
set(layer[skin_title_pr].html,get(title));
</action>
2、純圖片啓動畫面
如果是純畫面的啓動，而且是要考慮到橫屏和豎屏的話，可以看下面的說明。
參考預覽：http://img360.fang.com/2017/03/31/gz/static/8788e7af5913418dbcb0e9ea96d29530/tour.html
可以看到這個啓動畫面包括了一個背景圖和中間的一個開始體驗按鈕。
<!-- 啓動畫面開始 -->
<layer name="intro_jpg"
url.normal="img/intro.jpg"
url.mobile="img/intro_1.jpg"
preload="true"
handcursor="false"
enabled="true"
children="true"
visible=""
zorder="90"
maskchildren="true"
keep="true"
width="100%"
height="100%"
>
<layer name="skin_title_logo3"
zorder="100"
keep="true"
enabled="false"
visible="false"
x="0"
y="20%"
alpha="0"
align="center"
url="img/navi.png"
crop=""
scale.normal="0.9"
scale.mobile="0.5"
onclick="
tween(layer[intro_jpg].ox,-2500,2);
delayedcall(2,set(layer[intro_jpg].enabled,false));
"
onover="stoptween(alpha);set(alpha,1);"
onout="tweenintrobuttonalpha(0.35);"
/>
</layer>
<action name="tweenintrobuttonalpha" >
if(%1 == 0.35,
set(alphavalue,1),
set(alphavalue,0.35)
);
tween(layer[skin_title_logo3].alpha,%1,1,default,tweenintrobuttonalpha(get(alphavalue)));
</action>
<events name="startlogoevents" keep="true"
onloadcomplete="
set(layer[skin_title_logo3].enabled,true);
set(layer[skin_title_logo3].visible,true);
tweenintrobuttonalpha(1);
"
onnewpano="
set(layer[navi_title].visible,false);
set(layer[navi_title].visible,true);"
onresize="
if(stagewidth GT stageheight,
set(layer[intro_jpg].url,img/intro.jpg),
set(layer[intro_jpg].url,img/intro_1.jpg)
);
"
/>
<!-- 啓動畫面結束 -->
上面是考慮桌面平板和手機之間的設備差異，然後用url.normal和url.mobile分別設置圖片路徑。
3、每個場景獨立啓動畫面
每個場景開始時都顯示一張圖片在正中央，然後圖片在10秒後自動消失或用戶可以自行點擊圖片隱藏。
解決方案：
爲了讓所顯示的圖片的自適應屏幕尺寸，首先在tour.xml插入下面的代碼（不要放在scene標籤內）：
<action name="picture_resize">
<!-- 使用屏幕寬度或高度的百分之九十 -->
div(aspect, layer[%1].imagewidth, layer[%1].imageheight);
mul(new_width, stagewidth, 0.90);
div(new_height, new_width, aspect);
mul(max_height, stageheight, 0.90);
if(new_height GT max_height,
copy(new_height, max_height);
mul(new_width, new_height, aspect);
);
roundval(new_width);
roundval(new_height);
copy(layer[%1].width, new_width);
copy(layer[%1].height, new_height);
</action>
你可以修改上面兩個0.9的數字，控制圖片在全景窗口中的顯示比例。
然後在你要實現該功能的scene標籤內加入下面的代碼：
<layer name="test" url="1.jpg" align="center"
alpha="0" visible="false"
onclick="tween(alpha,0);delayedcall(0.5,set(visible,false));"
onloaded="picture_resize(get(name));" />
<events name="picture_period"
onpreviewcomplete="
set(layer[test].visible,true);
tween(layer[test].alpha,1);
delayedcall(10,tween(layer[test].alpha,0);delayedcall(0.5,set(layer[test].visible,false)));
"/>
layer標籤是我們要放進場景開始時的圖片，你可以修改url的路徑，來選擇你想要的圖片，然後最後在delayedcall那個地方你可以將10改爲你想要的消失時間。
思路解釋：
首先得有一個layer，layer只需要設置一下url、align這些屬性，具體的尺寸比例我用picture_resize這個action完成。然後在onclick這個事件中也設置了用戶點擊圖片後自動消失的代碼。
大家可以注意到我將visible設置爲了false，即不可見，同時alpha也是0.。考慮到如果直接顯示可見的話，可能在全景圖還沒載入完畢，也就是可能部分黑屏時圖片就顯示了。這樣的體驗可能不太好。因此我通過一個onpreviewcomplete event來控制，在預覽圖全部載入完成後才顯示圖片，同時加入延時執行10秒的代碼實現圖片消失。
4、用HTML元素作爲啓動畫面
首先顯示黑屏中加載中文字，然後在第一個場景的全景圖全部加載完時（即onloadcomplete事件調用時）移除黑屏加載文字的div。
打開tour.html文件，修改對應代碼。
<div id="loadtext" style="background:black;width:100%;height:100%;text-align:center;line-height:30vh; "><br>加載中……</div>
<script src="tour.js"></script>
<div id="pano" style="width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
var krpano = null;
embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true,onready:krpano_onready_callback});
// 在krpano嵌入到html且可使用時執行回調函數
function krpano_onready_callback(krpano_interface)
{
krpano = krpano_interface;
krpano.set("events[loadtext].keep", "true");
krpano.set("events[loadtext].onloadcomplete", "jscall('document.body.removeChild(loadtext)'); set(events[loadtext].onloadcomplete,null); ");
}
</script>
</div>
注意事項：
loadtext這個div要放在pano這個div的前面，也就是代碼在前。
然後在要在onready設置回調函數，執行krpano_onready_callback。
參考自：krpano360 及軟盟網