设计思考:Flash Web结构之背景层浅析

核心提示：背景层，顾名思义就是Flash网站的背景，设计思考:Flash Web结构之背景层浅析，看上去很容易理解也很简单，其实它蕴涵着很多知识和技巧，程序员出身的可能比较喜欢Flash模式;传统网页设计师出身的一般比较喜欢PS模式;半道出家，什么都懂点的家伙们看了笔者这篇文章后，如果处理不善，将直接影响Flash web的用户

背景层，顾名思义就是Flash网站的背景，看上去很容易理解也很简单，其实它蕴涵着很多知识和技巧，如果处理不善，将直接影响Flash web的用户体验。

我在这里把背景层分为以下三种模式：

1　Flash模式

2　PS模式

3　混合模式

Flash模式：所谓Flash模式，就是直接在Flash中完成网站主体框架的绘制，并利用Flash完成框架修饰内容的填充。这种模式比较适合界面简单，色彩单一，高效实用的Flash web。它充分利用简单矢量图形体积小的优势，同样一个画面，它的体积将比位图小很多。所以这样的网站如果处理恰当的话，完全可以比同种样式的常规HTML网页体积更小。同时由于它直接在Flash中绘制，非常便于修改以及同其它层结合。

PS模式：这种模式我们可以和传统的网页制作进行类比。传统网页都是先用PS绘制界面，然后切片导出为网页，再在DW中进行编辑。Flash web开发一样可以采用这一流程，利用PS强大的位图处理功能弥补Flash绘图方面的不足。但是在切图的时候，它和HTML网页切图思想不同，在Flash web中经常要把动画因素和各元件之间的遮挡关系考虑进去，所以我一般都是把每个栏目切成一个JPG位图，涉及动画和层级关系的元素则独立导出为PNG透明图象。这样虽然方便了在Flash中的后期制作，但造成网站体积会一定程度的加大。为了优化下载和用户体验，我们可以利用Flash流媒体的特性，把体积较小或者独立性比较好的栏目放在开始的帧先显示出来，相互联系紧密的主功能栏目放中间，体积较大独立性也较好的栏目放最后显示。当然不要忘记用一个loading条时刻提醒浏览者各栏目加载状态，不至于使他们失去继续看下去的信心。这种模式一般适合网站各栏目独立性较好，网站色彩丰富且含有大量动画效果，元件层级复杂的网站。另外，在我写这篇文章的时候，从黑羽那里得到消息，最新版的Flash真的可以支持PSD了，而且还能保留原始图层，再加上以后网速越来越快，PS模式在将来很有可能会大行其道。

混合模式：混合模式就是综合利用PHOTOSHOP和Flash，取长补短，相得益彰。先用PS设计好网站背景图，并把内容显示部分留空，就像设计HTML网页一样。然后不需切图直接导出为JPG，并导入Flash。再在这张大背景图片上新建一层，用制作动画常用的钢笔勾边上色技术把网站主框架描一边，这就涉及到我后面要讲的“数据显示层”，数据显示层主要由与背景色相似的工整的矢量色块组成，当然像笔者一样喜欢偷懒的人也可以适当添加位图，但数据显示层体积最好控制在30K以内。数据显示层成型后，一定要记得把背景位图放在数据显示层之后的帧上。现在大家应该差不多能猜出这种模式的优势在那里了吧!?对，我们可以利用Flash流媒体的特性，无须等到整个SWF都下载完毕后再显示网站，Flash web的loading时代该过去了!伟大的流式时代就要来临了!我们完全可以先把数据显示层显示出来，让浏览者以最快的速度得到他们想要的信息，与此同时，悄悄的下载背景层，由于我们的数据显示层和背景层的颜色和布局都相似，甚至是完全匹配的，所以背景层下载完成并显示出来的一刹那也不会给浏览者带来太大的跳跃感。当然这样无疑加大了工程量，要求设计师的PS和Flash都不能弱。所谓鱼和熊掌不能兼得，我们必须根据具体的项目进行取舍，看是否真的有必要采用这种模式。笔者个人门户V3主站中，由于背景图片体积过大，我便采用了这种模式，据大部分人反映，用户体验还是很好的：)

三种模式可谓各有优缺点，如何取舍还是要根据具体项目决定，当然，团队和个人能力也是重要因素。一般来说，程序员出身的可能比较喜欢Flash模式;传统网页设计师出身的一般比较喜欢PS模式;半道出家，什么都懂点的家伙们看了笔者这篇文章后，估计就要开始尝试混合模式了。