1 FL 教程Flash Web結構之背景層淺析 周四 3月 03, 2011 6:49 am
Admin
Admin
背景層,顧名思義就是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模式;半道出家,什么都懂點的家伙們看了筆者這篇文章后,估計就要開始嘗試混合模式了。]
我在這里把背景層分為以下三種模式:
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模式;半道出家,什么都懂點的家伙們看了筆者這篇文章后,估計就要開始嘗試混合模式了。]