設(shè)計(jì)思考:FlashWeb結(jié)構(gòu)之背景層淺析

字號(hào):

背景層,顧名思義就是Flash網(wǎng)站的背景,看上去很容易理解也很簡(jiǎn)單,其實(shí)它蘊(yùn)涵著很多知識(shí)和技巧,如果處理不善,將直接影響Flash web的用戶體驗(yàn)。
    我在這里把背景層分為以下三種模式:
    1 Flash模式
    2 PS模式
    3 混合模式
    Flash模式:所謂Flash模式,就是直接在Flash中完成網(wǎng)站主體框架的繪制,并利用Flash完成框架修飾內(nèi)容的填充。這種模式比較適合界面簡(jiǎn)單,色彩單一,高效實(shí)用的Flash web。它充分利用簡(jiǎn)單矢量圖形體積小的優(yōu)勢(shì),同樣一個(gè)畫(huà)面,它的體積將比位圖小很多。所以這樣的網(wǎng)站如果處理恰當(dāng)?shù)脑?,完全可以比同種樣式的常規(guī)HTML網(wǎng)頁(yè)體積更小。同時(shí)由于它直接在Flash中繪制,非常便于修改以及同其它層結(jié)合。
    PS模式:這種模式我們可以和傳統(tǒng)的網(wǎng)頁(yè)制作進(jìn)行類(lèi)比。傳統(tǒng)網(wǎng)頁(yè)都是先用PS繪制界面,然后切片導(dǎo)出為網(wǎng)頁(yè),再在DW中進(jìn)行編輯。Flash web開(kāi)發(fā)一樣可以采用這一流程,利用PS強(qiáng)大的位圖處理功能彌補(bǔ)Flash繪圖方面的不足。但是在切圖的時(shí)候,它和HTML網(wǎng)頁(yè)切圖思想不同,在Flash web中經(jīng)常要把動(dòng)畫(huà)因素和各元件之間的遮擋關(guān)系考慮進(jìn)去,所以我一般都是把每個(gè)欄目切成一個(gè)JPG位圖,涉及動(dòng)畫(huà)和層級(jí)關(guān)系的元素則獨(dú)立導(dǎo)出為PNG透明圖象。這樣雖然方便了在Flash中的后期制作,但造成網(wǎng)站體積會(huì)一定程度的加大。為了優(yōu)化下載和用戶體驗(yàn),我們可以利用Flash流媒體的特性,把體積較小或者獨(dú)立性比較好的欄目放在開(kāi)始的幀先顯示出來(lái),相互聯(lián)系緊密的主功能欄目放中間,體積較大獨(dú)立性也較好的欄目放最后顯示。當(dāng)然不要忘記用一個(gè)loading條時(shí)刻提醒瀏覽者各欄目加載狀態(tài),不至于使他們失去繼續(xù)看下去的信心。這種模式一般適合網(wǎng)站各欄目獨(dú)立性較好,網(wǎng)站色彩豐富且含有大量動(dòng)畫(huà)效果,元件層級(jí)復(fù)雜的網(wǎng)站。另外,在我寫(xiě)這篇文章的時(shí)候,從黑羽那里得到消息,最新版的Flash真的可以支持PSD了,而且還能保留原始圖層,再加上以后網(wǎng)速越來(lái)越快,PS模式在將來(lái)很有可能會(huì)大行其道。
    混合模式:混合模式就是綜合利用PHOTOSHOP和Flash,取長(zhǎng)補(bǔ)短,相得益彰。先用PS設(shè)計(jì)好網(wǎng)站背景圖,并把內(nèi)容顯示部分留空,就像設(shè)計(jì)HTML網(wǎng)頁(yè)一樣。然后不需切圖直接導(dǎo)出為JPG,并導(dǎo)入Flash。再在這張大背景圖片上新建一層,用制作動(dòng)畫(huà)常用的鋼筆勾邊上色技術(shù)把網(wǎng)站主框架描一邊,這就涉及到我后面要講的“數(shù)據(jù)顯示層”,數(shù)據(jù)顯示層主要由與背景色相似的工整的矢量色塊組成,當(dāng)然像筆者一樣喜歡偷懶的人也可以適當(dāng)添加位圖,但數(shù)據(jù)顯示層體積控制在30K以內(nèi)。數(shù)據(jù)顯示層成型后,一定要記得把背景位圖放在數(shù)據(jù)顯示層之后的幀上。現(xiàn)在大家應(yīng)該差不多能猜出這種模式的優(yōu)勢(shì)在那里了吧!?對(duì),我們可以利用Flash流媒體的特性,無(wú)須等到整個(gè)SWF都下載完畢后再顯示網(wǎng)站,F(xiàn)lash web的loading時(shí)代該過(guò)去了!偉大的流式時(shí)代就要來(lái)臨了!我們完全可以先把數(shù)據(jù)顯示層顯示出來(lái),讓瀏覽者以最快的速度得到他們想要的信息,與此同時(shí),悄悄的下載背景層,由于我們的數(shù)據(jù)顯示層和背景層的顏色和布局都相似,甚至是完全匹配的,所以背景層下載完成并顯示出來(lái)的一剎那也不會(huì)給瀏覽者帶來(lái)太大的跳躍感。當(dāng)然這樣無(wú)疑加大了工程量,要求設(shè)計(jì)師的PS和Flash都不能弱。所謂魚(yú)和熊掌不能兼得,我們必須根據(jù)具體的項(xiàng)目進(jìn)行取舍,看是否真的有必要采用這種模式。筆者個(gè)人門(mén)戶V3主站中,由于背景圖片體積過(guò)大,我便采用了這種模式,據(jù)大部分人反映,用戶體驗(yàn)還是很好的:)
    三種模式可謂各有優(yōu)缺點(diǎn),如何取舍還是要根據(jù)具體項(xiàng)目決定,當(dāng)然,團(tuán)隊(duì)和個(gè)人能力也是重要因素。一般來(lái)說(shuō),程序員出身的可能比較喜歡Flash模式;傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)師出身的一般比較喜歡PS模式;半道出家,什么都懂點(diǎn)的家伙們看了筆者這篇文章后,估計(jì)就要開(kāi)始嘗試混合模式了。