Flash Web结构之背景层浅析
2008-02-14 19:16:22 来源:WEB开发网 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鐐劤缂嶅﹪寮婚悢鍏尖拻閻庨潧澹婂Σ顔剧磼閻愵剙鍔ょ紓宥咃躬瀵鎮㈤崗灏栨嫽闁诲酣娼ф竟濠偽i鍓х<闁诡垎鍐f寖闂佺娅曢幑鍥灳閺冨牆绀冩い蹇庣娴滈箖鏌ㄥ┑鍡欏嚬缂併劎绮妵鍕箳鐎n亞浠鹃梺闈涙搐鐎氫即鐛崶顒夋晬婵絾瀵ч幑鍥蓟閻斿摜鐟归柛顭戝枛椤牆顪冮妶搴′簼缂侇喗鎸搁悾鐑藉础閻愬秵妫冮崺鈧い鎺戝瀹撲礁鈹戦悩鎻掝伀缁惧彞绮欓弻娑氫沪閹规劕顥濋梺閫炲苯澧伴柟铏崌閿濈偛鈹戠€n€晠鏌嶆潪鎷屽厡闁汇倕鎳愮槐鎾存媴閸撴彃鍓卞銈嗗灦閻熲晛鐣烽妷褉鍋撻敐搴℃灍闁绘挻娲橀妵鍕箛闂堟稐绨肩紓浣藉煐濮樸劎妲愰幘璇茬闁冲搫鍊婚ˇ鏉库攽椤旂》宸ユい顓炲槻閻g兘骞掗幋鏃€鐎婚梺瑙勬儗閸樺€熲叺婵犵數濮烽弫鍛婃叏椤撱垹纾婚柟鍓х帛閳锋垶銇勯幒鍡椾壕缂備礁顦遍弫濠氱嵁閸℃稒鍊烽柛婵嗗椤旀劕鈹戦悜鍥╃У闁告挻鐟︽穱濠囨嚃閳哄啰锛滈梺褰掑亰閸欏骸鈻撳⿰鍫熺厸閻忕偟纭堕崑鎾诲箛娴e憡鍊梺纭呭亹鐞涖儵鍩€椤掑啫鐨洪柡浣圭墪閳规垿鎮欓弶鎴犱桓闂佸湱枪閹芥粎鍒掗弮鍫熷仺缂佸顕抽敃鍌涚厱闁哄洢鍔岄悘鐘绘煕閹般劌浜惧┑锛勫亼閸婃牠宕濋敃鈧…鍧楀焵椤掍胶绠剧€光偓婵犱線鍋楀┑顔硷龚濞咃絿妲愰幒鎳崇喓鎷犻懠鑸垫毐闂傚倷鑳舵灙婵炲鍏樺顐ゆ嫚瀹割喖娈ㄦ繝鐢靛У绾板秹寮查幓鎺濈唵閻犺櫣灏ㄥ銉р偓瑙勬尭濡繂顫忛搹鍦<婵☆垰鎼~宥囩磽娴i鍔嶉柟绋垮暱閻g兘骞嬮敃鈧粻濠氭偣閸パ冪骇鐎规挸绉撮—鍐Χ閸℃ê闉嶇紓浣割儐閸ㄥ墎绮嬪澶嬪€锋い鎺嶇瀵灝鈹戦埥鍡楃仯闁告鍕洸濡わ絽鍟崐鍨叏濡厧浜鹃悗姘炬嫹

背景层,顾名思义就是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模式;半道出家,什么都懂点的家伙们看了笔者这篇文章后,估计就要开始尝试混合模式了。
更多精彩
赞助商链接