制作krpano项目启动画面-小站

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 及软盟网

THE END