给网易漫画部做了一个全景的纸盒视频,在这里记录一些功能实现点。
背景音乐的播放:
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