IKEA Dream Kitchen

相信这个IKEA互动项目对很多人来说都有耳目一新的感觉。今天得空把中间的一些特点拿出来研究一下，发现还是挺有价值的。

首先最具震撼效果的肯定就是那个很有感觉的转场了。具体怎么实现不得而知，不过无非是定点拍摄和三维两种做法，从画面的细节来看拍摄的可能性大些。

其次，到底那个流畅的转场是怎么平滑的loading的？这个网站主体有两个文件：ikea_v11.swf和ikea_lo.swf。其中第一个是首页文件，包含了网站的所有基本构架程序，还有前面的一小段loading动画。这个文件的大小是1.7M。第二个swf文件包含了所有的图片数据，“_lo”的意思是“low”低精度的版本。所以我们看到的转场都是来自于这个大文件（8.5M）。同时所有高精度都包含在另外的目录中，以一个个单张jpg的格式存储。分析到这里，整个转场的构架已经呼之欲出了。

第三，一个很大难题在于8.5M的文件怎么load？首先知道这个文件共由677张图片分布在677帧中，这样每帧的数据量都比较平均（类似于Video的CBR，既恒定码率）。根据flash流式加载和播放的特点，基本上就是一帧图片加载完，就能够播放到这一帧。其次图片的排列顺序很有讲究。一开始老人的那个场景既可以向右旋转，也可以向左旋转。所以图片的排列需要兼顾到两个方向的播放。于是最终的图片排列顺序就类似于0,1,-1,2,-2,3,-3,...——很有意思的一个排列，也算是一个小技巧。

最后要说到的是细节。音乐就是一个很好的例子。当场景完成切换的时候，音乐就跟着改变，配合得非常完美。在用户点击了画面上的按钮开始了解具体内容的时候，音乐就自动降低音量。特别的，当窗口失去焦点或是用户一段时间没有互动的情况下，音乐也会很人性化的减小音量。