krpano 小记

给网易漫画部做了一个全景的纸盒视频，在这里记录一些功能实现点。

背景音乐的播放：

1、插件引用

<plugin name="soundinterface"
         url="%SWFPATH%/plugins/soundinterface.swf"
         alturl="%SWFPATH%/plugins/soundinterface.js"
         rootpath=""
         preload="true"
         keep="true"
   volume ="0.2"
         />

2、在 onstart action 里面添加 播放代码 playsound(bggsnd, '%SWFPATH%/bgm.mp3', 0); //数字 0 表示无限循环

视频自动播放：

1、引入视频场景

		<scene name="liftTohell" isvideopano="true" thumburl="%CURRENTXML%/liftTohell.jpg" title="playing">

		<!-- include the videoplayer plugin -->
		<plugin name="video"
		        url.html5="%SWFPATH%/plugins/videoplayer.js"
		        url.flash="%SWFPATH%/plugins/videoplayer.swf"
		        pausedonstart="true"
		        loop="false"
		        volume="1.0"
		        posterurl.ios="%CURRENTXML%/liftTohell.jpg"
	                videourl.ios="%CURRENTXML%/liftTohell.mp4"
	                posterurl.no-ios="%CURRENTXML%/liftTohell.jpg"
	                videourl.no-ios="%CURRENTXML%/liftTohell.mp4"

		        />

		<!-- use the videoplayer plugin as panoramic image source -->
		<image>
			<sphere url="plugin:video" />
		</image>

		<!-- set the default view -->
		<view hlookat="-3.861" vlookat="-2.989" fovtype="MFOV" fov="128.796" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
 		<!-- place your scene hotspots here -->
	</scene>

2、在这段代码里面找到 pausedonstart="true" 改成 pausedonstart="false"

给热点添加帧动画外加地址跳转:

<hotspot name="spot1" url="more.png" onloaded="do_crop_animation(128,128, 10);"  onclick = "loadWebAddress();"  style="skin_hotspotstyle"  ath="0.061" atv="32.231" linkedscene="scene_liftover" />

属性里面 url="more.png" 就是序列帧图片,onloaded="do_crop_animation(128,128, 10);"这就处理序列帧动画的方法， 三个参数分别就是图片单帧的宽、高、帧数量。

		<action name="do_crop_animation">
		<!-- add attributes to the hotspot -->
		registerattribute(xframes, calc((imagewidth / %1) BOR 0));
		registerattribute(yframes, calc((imageheight / %2) BOR 0));
		registerattribute(frames, calc(xframes * yframes));
		registerattribute(frame, 0);

		set(crop, '0|0|%1|%2');

		setinterval(calc('crop_anim_' + name), calc(1.0 / %3),
			if(loaded,
				inc(frame);
				if(frame GE frames, if(onlastframe !== null, onlastframe() ); set(frame,0); );
				mod(xpos, frame, xframes);
				div(ypos, frame, xframes);
				Math.floor(ypos);
				mul(xpos, %1);
				mul(ypos, %2);
				calc(crop, xpos + '|' + ypos + '|%1|%2');
			  ,
				clearinterval(calc('crop_anim_' + name));
			  );
		  );
	</action>

属性里面 onclick = "loadWebAddress();" 就是地址跳转

	<action name="loadWebAddress">
		openurl("http://manhua.163.com/reader/4317041374930046603/4499978832940091876#imgIndex=0@scale=7",_self);
	</action>

_self 表示在当前页打开_blank 在新选项卡打开

延时调用方法 delayedcall(7,loadscene(scene_LiftOpen)); 数字7表示延迟的时间，这里表示7秒后加载一个名字叫scene_LiftOpen的场景

动态添加热点，并配置属性：

addhotspot(newspot);//创建一个名叫newspot的热点
set(hotspot[newspot].url,skin/vtourskin_hotspot.png);//设置其外表路径
set(hotspot[newspot].ath,150);//水平坐标
set(hotspot[newspot].atv,30);//垂直坐标
set(hotspot[newspot].scale,0.7);//缩放
set(hotspot[newspot].zoom,true);//是否可伸缩

让视角线性聚集到热点：

looktohotspot(newspot);

删除热点：

removehotspot(newspot);

更多详细信息见官网：www.krpano.com