Kevin Cao谈IKEA Dream Kitchen站点交互

相信这个IKEA互动项目对很多人来说都有耳目一新的感觉. 今天得空把中间的一些特点拿出来研究一下, 发现还是挺有价值的.
首先最具震撼效果的肯定就是那个很有感觉的转场了. 具体怎么实现不得而知, 不过无非是定点拍摄和三维两种做法, 从画面的细节来看拍摄的可能性大些.

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

转载来源:Kevin Cao’s Blog

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

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


Have Your Say »

Required

Required, never published