現在我們已經學習了許多製作動畫的方法,但大家對於動畫最終的呈現形式仍不十分清楚。動畫究竟怎樣輸出?在哪些地方使用?在使用上又有哪些需要注意的?這節課我們就來詳細說明這些問題。
目前在Windows系統上的主要動畫圖像格式是GIF,其也可以直接在網頁中顯示,是目前應用最廣泛的動畫圖像格式。包括現在流行的手機彩信中的動畫也屬於GIF格式。 GIF格式可支援靜止和動畫兩種表現方式。無論靜止或動畫,其特點是相同的。
GIF格式動畫的實現原理並不複雜,大家可將其理解為將多個靜止畫面(幀)組合在一起輪流顯示。這些畫面(幀)之間還有運算關係存在,與選區何路徑的運算類似,分別是添加、減去和消除。這是為了優化動畫的位元組數。
某一幀如果是添加方式,就會在保留前一幀影像畫面的基礎上,再加上這一幀的內容,綜合形成新的畫面。如常見的進度條動畫就是一個典型,如下圖所示,假設一個進度條由3幀組成,那麼在我們眼中所看到的理論幀形態上來說,好像這3幀中分別保存了最短、中度和最長進度條的影像。但其實在第2幀中只包含了第1幀中所沒有那個部分的像素,然後以添加方式作用於第1幀之上,形成了「1+2」的圖像。第3幀也是如此。此優化措施可有效減少影像位元組數。
減去方式與之正好相反,是將前一幀影像中的某些像素抹去,可用「倒退的進度條」去理解。消除方式則是將前一幀完全擦除,主要用在前後兩幀之間沒有任何關聯的時候,例如從全部紅色變為全部綠色時,前後幀之間並沒有任何像素相同,則採取消除方式。
在實際製作中Photoshop會自動根據影像情況決定採取何種方式,不需要人工幹預。這些運算方式作為一個知識來了解就好了。也可以作為構思動畫時的一個參考。
現在要說以下GIF格式的一個重要特點,就是色彩數量的限制, GIF最多只能支援256色,也就是說一幅GIF影像中最多只能有256種色彩。這點在靜態GIF中特別明顯,有些帶有豐富色彩的影像,如多種色彩的漸變等,很難在GIF中完美的表現出來。如下左圖所示就是一張照片的局部(注意是局部,並不是完整的全圖)在PNG24位、GIF256無仿色和擴散仿色的圖像情況。全圖是一幅在威尼斯拍攝的商店櫥窗,如下右圖所示。
可以明顯看出PNG24位的色彩最好,可以看作原圖。而GIF格式的色彩表現力欠佳。在無仿色的情況下,原圖中的一些帶有色彩過渡的部位出現了色斑。在擴散仿色下色斑有所淡化,但顆粒感較重,這是仿色自身的原理造成的。有關仿色的概念在基礎教程中已介紹過了。
需要注意的是,256色指的是針對整個影像而言的。如果整幅原始影像就是如下圖的大小,則256色與原圖的差異就不是很大了。這是因為將色彩減少到256色的時候,Photoshop會根據原有影像中的顏色進行編排,這個過程也稱為索引,就是將相近的多種顏色歸為一種。
如果原圖中的色彩包含多個色相,那麼256色平均分攤下來後,分給單一色相的數量就很少。相反,如果原圖中的色相基本上一致或接近,則256色也可以很好地表達。這就是為什麼之前的256無仿色看起來色斑明顯,而現在的色斑較不明顯的原因。因為前者的原圖中包含了較多色相,有些顏色被分配給藍色、紅色等,分配給黃色相的色彩較少。而後者的原圖中基本上只有黃色相,這樣就不必為分配其他色相分配顏色了。
如下圖是一張在皮亞琴擦拍攝的街景照片,我們取其不同的部位來比較。下方的若干方塊是色表,其中的色塊就表示所用到的256種顏色。在色表中可以很容易的看出原圖的色彩構成對色彩索引的影響。左側圖中色相較多,那麼256色中分配給天空的藍色相數量較少,影像中的天空出現了明顯的色斑。而右側圖中基本上只包含天空部分,所以256色中的大部分都分配給了藍色相,使得影像中的天空表現較好。
使用【檔案>儲存為Web及裝置所用格式】〖CTRL+SHIFT+ALT+S〗,將出現的保儲存設定框。這是我們最常用的輸出功能,在以後將要學習的網頁設計擴展教程中更是如此。
進入設定介面後要注意紅色箭頭處,必須在「最佳化」標籤中看到的才是輸出後的實際效果,也就是在瀏覽器或看圖軟體中的效果。而「原稿」選項卡則是在Photoshop中的效果,不能作為參照的標準,這點要切記。
綠色箭頭處是對應的設定區域,從中我們將影像格式設定為GIF,將色彩數設為256,關閉仿色選項。其設定與上圖左側的效果對應的。
注意藍色箭頭處的位元組數指示,這是一個很重要的指標,無論何時我們都必須使這個數字盡可能地小,否則將無法有效使用圖像或動畫。
要令位元組數小,就需要減少顏色數,色表中的色塊數也會隨之減少。但顯而易見的,太少的顏色會對影像品質造成明顯的影響,很容易形成色斑。開啟仿色雖然可以淡化色斑,但同時也會增加位元組數。這就像架在字節數和質量之間的一座蹺蹺板,兩者不能兼顧。作為準備在網路上傳輸的圖像而言,位元組數往往更為重要,因為大部分訪客不會有耐心花上幾分鐘去等待一個網頁的顯示。而網頁除了圖像之外,還有其他一些程式碼也需要佔用位元組數,所以,盡量減少位元組數是一個基本原則。當然這個原則與影像品質是衝突的,這就要求我們在構思和製作的過程中要有足夠的技巧去平衡兩者。這些技巧包括:
一、不要在動畫中使用過於豐富的色彩。原因已經說過了,較多的色彩會導致在索引後影像品質的下降,形成難看的色斑。既然如此不如使用較為單一的色彩,雖然可能不夠華麗,但起碼能避免色斑這種硬傷的出現。
二、如果一定需要豐富的色彩,則應保持豐富色彩部分的像素在動畫中處於靜止狀態。因為GIF動畫的前後幀之間存在著運算關係,位於靜止狀態的部分可以沿用到後續的幀,那些後續的幀中不必再存有這部分的圖像。這樣就可以在保持整個動畫具備豐富色彩的前提下有效地減少位元組數。相反,如果色彩較豐富的像素也在運動的話,則後續的幀中就必須再存有色彩豐富的像素,會大大增加動畫的整體字節數。
如下兩個動畫的對比,第一個保持小球的外發光、投影等部分不動,只有高光部分在變化。而第二個則是小球整體移動。在同樣幀率、同樣時長、同是256無仿色的前提下,前者的位元組數是9.29K,後者則是57.1K。相差達6倍之多。那麼它們在網路上傳送所耗費的時間也就相差6倍。
我們在構思動畫的時候,要事先考慮好其用途,如果是要用於網頁之中,那還要參考其在網頁中的重要性,如果不是很重要,屬於裝飾性的,就盡量減少字節數。這可從減少儲存時的色彩數,以及良好的製作規劃兩個面向去實現。如果遇到帶有重要指示性的,一定需要色彩豐富或動感強烈的動畫時,則應盡可能減少動畫的尺寸。因為小尺寸的影像中像素總量也少,用256色進行索引就不會顯得那麼局促。這點大家可自己動手實驗得知。
GIF還有一個重要特點是支援背景透明,這使其可以與網頁的背景很好的融合。大家也可以在關閉背景圖層的前提下輸出透明背景的GIF。不過GIF的背景透明只能是兩種狀態,要嘛全透明,要嘛全不透明,而不能是介於兩者之間的半透明。因此除非影像的邊界是水平、垂直、45度斜線這三種情況,否則都會因為透明而形成明顯的鋸齒。如下圖所示是一組不同邊界的圖形在不同背景色下的表現。從中不難看出兩者的差異。
要注意的是,邊緣的鋸齒的形成原理不只是影像的問題,也有顯示器物理限制的因素,相關知識在基礎教學中提到。
對於具有半透明像素(如投影樣式)的影像而言,若要儲存為透明背景,則需要開啟透明度抖動項目,這樣可以用微小的疏密不同的散點來模擬半透明。如下圖所示即是。可看出在「無透明度仿色」下的GIF儘管也是背景透明,但在原先半透明的部分仍然保留有白色,這樣只能適用於白色背景之上。而後者可適用於任何背景之上。如下右圖所示。
需要注意的是,透明度仿色並不是一個完美的解決方案,甚至可以說是一個非常差的解決方案。但出於GIF本身對於透明度的限製而言,也是一種解決之道。在實際的製作中,如果確定要使用GIF格式,則應避免在影像的邊界產生半透明像素。換言之就是盡量避免使用透明仿色。
還有一點要注意的是,如果輸出的動畫是透明背景的,則可能改變在非透明狀態下各幀的運算關係,也可能導致動畫的位元組數增加。
現在我們來簡要地說說將動畫用作手機彩信的用途。
中國移動目前最大允許100K的彩信,那動畫最好控制在95K以下,要留一些空間給文字及簡訊本身的程式碼。另外還要注意的是動畫的尺寸,不同型號的手機由於其螢幕解析度不同,能夠完美顯示的動畫尺寸也不相同。所謂完美顯示就是指手機螢幕解析度與動畫尺寸一致或更大。如果動畫尺寸超過了手機螢幕的分辨率,手機則會將其縮小顯示。但縮小後的動畫品質會變得很差。常見的螢幕尺寸有:
128×128:常見於早期以及時下一些低階型號的手機上。是彩信動畫的基本尺寸,網路上下載的彩信動畫以這個尺寸居多,因為它可以運行於幾乎所有支援彩信的手機之上。
128×160:雖然比之前的要多出一些像素,但主要用於顯示一些訊息,所以能夠運行的動畫尺寸大多也仍為128×128。
176×208、240×320:常見於Symbian及WindowsMobile等開放式作業系統的手機,皆可播放全螢幕動畫。也有一般手機採用此解析度的,能否支援全螢幕播放則不一定。
480×640:常見於高階的手機型號,雖然理論上可以支援全螢幕播放同尺寸的動畫,但由於GIF本身的限制,播放時的流暢度無法保證。
在製作彩信動畫的時候,應該以128×128作為首要考慮的尺寸,因為其相容性最好,且由於尺寸小,同樣內容的動畫位元組數也比大尺寸的要小。當然,如果確定了接收者的螢幕分辨率,也可以採用與之相當的尺寸製作。動畫的背景最好是白色的,這樣就不會形成明顯的邊界感。因為白色也是手機顯示彩信時候的背景色,就如同網頁背景。當然有時也需要刻意營造邊界感(如印章輪廓),大家可針對具體情況自行決定。另外,因為絕大多數的手機不能更改彩信顯示時候的背景,所以在彩信的動畫中使用透明背景的意義不大。
在「儲存為Web和裝置所用格式」右下角有一個「Device Central...」的按鈕,按下後能在選定的手機裝置上預覽動畫在手機上的效果。如下圖所示。可在左側的設備清單中選擇,圖中所選的是Nokia 3110。 Adobe Device Central其實是一個行動裝置的資料庫,可為針對行動裝置製作的人員提供集中的環境。除了普通的顯示以外,還可以模擬手機螢幕背光關閉,以及戶外螢幕逆光等條件下的顯示情況。不過這些功能目前對我們目前而言意義不大。
另外要注意的一個問題就是動畫的幀率,在電腦上基本上都能流暢播放30fps的動畫,但手機的處理器不比桌上型電腦,其資源有限。動畫的幀率應設定為2~5fps為佳,針對開放式作業系統的手機,由於其處理器效能較一般手機出色,可設定為10fps或更高。同時影響手機播放效果的還有尺寸、總長度、位元組數等因素。做出來的動畫最好是拿到手機試播觀察其流暢度。
如果要輸出多種不同尺寸的動畫,則最好使用向量格式進行製作,並且向量格式也是最佳的保存原始圖像的格式,符合我們一貫主張的「保留最大可編輯性」原則。