view Barcinski & Jeanjean Website (Part1)
view Barcinski & Jeanjean Website (Part2)

另一个让人头疼的问题来了：文件量。搞一个高端的用户体验，在精度上总不能太寒碜，但是又怕用户等不了，怎么办？一开始加载的时候，他们为大家准备了一个 3D 弹球游戏，在一定程度上减弱了用户等待的焦虑感。但是网站内里太大太慢也是不行的，真功夫还是要拿出来的。

问题是背景，该用图片序列还是视频？一般经验告诉我们，像这种全景的东西，顺放倒放的，肯定都是用序列：flv倒放会卡。比如经典的IKEA网站用的就是图片序列。但是，这是过去的经验了。Barcinski & Jeanjean 告诉我们：jpg效率低，用 flv 才是高效，而且文件量小。How could it be?

OK，不知道大家是否有注意，在编码 flv 的时候可以设置关键帧距离。下图是AE里截的，Flash自带的编码器也可以设置。

一般我们都用自动方式，所以没太注意。但是如果将这个值设为1，那么就等于每一帧都编码为关键帧。由于播放器在解码非关键帧的时候需要在这一帧之前的关键帧数据，所以顺放和倒放的区别就在于：当前帧依赖的关键帧是否已经读取到内存中。那么如果每一帧都是关键帧，那顺放和倒放并没有区别！这样的设置无疑会增加 flv 的大小，但是还是比 jpg 序列小很多。而且在执行效率上，解码 flv 比 解码 jpg 速度快！感谢技术的进步，我们终于可以和臃肿的 jpg 序列说拜拜了！

过去还有个经验是：先载小图，再载大图盖上去。但是在这个网站里并没有这种做法，对此他们的解释是：无法忍受freeze。因为大图片的解码过程会让 Flash Player卡住，通常情况下，用户不会注意到这瞬间的停顿。但是这里场景中结合了Papervision3D制作的纸，具有动态的物理效果，这样的停顿 就会很明显。因此他们采用直接加载最终精度的flv的办法。

还记得IKEA网站中独特的加载方式吗？那是一种将序列重新组织的方法。可以让用户边下载边体验，没加载到的部分是过不去的。Barcinski & Jeanjean 面临同样的难题：即便用了flv压缩，主文件还是有16m之大。他们想了个天才的解决方法，在这篇文章里他们画了一个圆饼图表述了他们的思路。我总结一下：首先是在这个网站里达到平滑顺畅的全景体验需要144帧，如果我们隔一帧就抽掉一帧，就能省掉一半的文件量。此时播放的原始帧序号为“1,3,5,7,9,11,...”。如果我们再重复一次上一步的抽帧操作，那就只剩1/4的文件量了，已经降到的3M左右可以接受的范围。经过两次抽帧的文件只剩下36帧，此时播放的原始帧序号为“1,5,9,13,...”。抽帧后的视频仍然是一个完整的全景循环，只是不够平滑而已。

方法出来了：我们先提供经过抽帧两次的视频，用户加载完这个文件已经可以正常的浏览网站。然后在后台继续加载第二次操作中抽去的那部分，当这个文件加载结束后，就已经还原了1/2的帧数。最后再把剩下的1/2——也就是所有的偶数帧组成的视频文件加载进来。 View full article »