Flash中的向量圖與點陣圖

發現「程式編寫」這個標籤好像丟在一旁很久，
近日又在工作上遇到一些值得分享的經驗之談，
等我都學下人寫下Flash小錦囊先。

點陣圖(bitmap graphic)及向量圖(vector graphic)，
基本上就是一個逐點逐點記，另一個是用數學方法把圖像儲存。
點陣圖可以表達得較細緻，向量圖則有放大縮細不失真的優點。
當然還有一個檔案儲存大小的分別……

一般來說，我們會說點陣圖因為要逐點記，所以檔案會較大，
不過這種說法有點不公平，因為兩種圖檔所呈現的東西根本不同。

所以在Flash中，兩種格式的圖檔是有必要共存，
而且在製作過程中，還要花點心機去取捨一下，
究竟哪些圖應該用哪種格式。

現在很多人做Flash時會先以AI畫好圖，
再把畫好的東西抄進Flash中用，兩種軟件都是同公司的，
Adobe還好窩心地把向量圖抄來抄去這個動作做得好像很方便似的……
不過當一種東西變得實在太方便的時候，就會被濫用，
之後就會發現這種方便其實會帶給大家另類的不便！

先看看這顆星星，

很普通的五角星，加漸變色的效果，這幅點陣圖檔是4KB.

再來看一看這顆星星︰

看上去有分別嗎？其實這個是一個swf檔，是上面同一粒星星由AI抄入Flash的，
但出來的swf卻用了10KB，而用來儲著一粒星星的fla檔更高達860KB！！

究竟發生了甚麼事呢？讓我先賣個關子。
事緣中幾天開了一個FLA檔，入面已有約干程式呀動畫呀之類做了，
奇怪的是，有個ANIMATION播放時特別窒下窒下，
但那個動畫只是很簡單的，其中一半就是這粒星由透明變出現，
一個超簡單的在時間軸上做的動畫變化。

找了很久，最後無意中在我把這粒星星移走了後，
整個動畫就變得流暢起來！！於是我卻定細心看看這粒星星。

普通的五角星，沒有特別呀。
漸變色，Flash都有基本的漸變色工具呀……
咦！但這粒星不是圓形或線形漸變，而是星形漸變？！

之後我就發現一個壯觀的事實……原來這麼簡單在AI畫了一粒星，
再用漸變工具做好多星形漸變，再很「方便」地Ctrl+C, Ctrl+V貼去Flash，
在Flash中為了呈現漸變效果，它很聰明的自己把一粒星變成以下圖中的……

總共218粒由大至少，慢慢逐步變色的星星堆叠在一起做出漸變效果！
218粒星星！！！

怪不得那個這麼簡單的Tweening會變得那麼窒，
因為那不是一個幾何圖形的運算，而是218個！！

最後，不用多想，我就把那粒星星匯出成一個點陣圖，
再直接在Flash中用那點陣圖做Tweening，才算解決了這個問題。

單單一粒小小的星星，已經可以把整個Flash拖慢，
那麼如果是需要大量圖像的動畫、程式、小遊戲等，
又是否應該全部改用點陣圖呢？

當然不是，全部用點陣圖的話，swf檔就會變得很大，
就算現在是寬頻年代，但檔案大總要費時下載的。
但如果過份使用向量圖，又會因為佔用了運算資源去繪圖，
可能會導致把整個程式拖慢的失敗結果。

我們是要自己取捨，好好想一想整個flash入面的分配。
簡單地說，圖形簡單的，明顯用向量圖有好處。
但如果是較複雜的圖形，用向量圖可能要分幾層才能表達的話，
尤其要在時間軸上做tweening的，就更應該要小心別讓太多無謂的向量化累事。

其實本來設計師畫圖時，人手畫的部份其實可想像的幾可形都只得有限數，
最大問題都是由AI抄去FLASH時自動生成的東西。
(例如上面一粒星變218粒……)

很討厭收到些fla檔，一開出來整個元件庫中都是不知名的怪物！
哼，我開過一個很簡單的fla檔，入有過千個movie clip在library，
但其中有七成以上其實是重覆的或甚至乎是冇用的……
沒錯library放多了些東西看似無傷大雅，不過去到這等數量，
就完全地浪費資源，把整個軟件的速度拖慢了到一個不夠忍受的地步！

其實在把繪圖物件由AI抄去Flash的時候，只要細心少少，
看見重覆的東西，不如只把一個抄到Flash，再在Flash中做一些組合，
例如畫了十輛汽車，如果逐輛原架的抄去，就算是2-D側面的車每架兩個車輪，
都會在library做了二十個一模一樣的moive clip出來！！
更何況一個車輪還可能因為顏色或陰影等而再分了做數個movie clip……
小數怕長計，自己想像一下分別是多麼的大！

如果有些圖根本在Flash中不打算再變形而且用向量表達會變得太過複雜的話，
倒不如因應該圖的需要而選用jpg,gif,png等。

不過要記著用點陣圖的話圖的大小會直接反映在最後匯出的swf上。

最重要都是先清楚自己/客人想要甚麼。只選擇得宜，分別發揮兩種圖檔的優點，
再加一點經驗，要找到最好的平衡點其實也不難。