2007/12/12

Flash 美術人員或新手常犯的錯誤

前言:

本篇主要是站在Flash程式人員的角度,來提醒Flash美術人員或初學者一些注意事項,因為往往這些錯誤會造成後續程式開發很多不必要的麻煩,嚴重者更會使團隊戰力無法有效發揮。



 

筆者從事Flash相關工作,算算也有7~8年左右,最早接觸大約是1998年開始,早期主要從事美術、動畫方面的工作,後期則專注在程式開發部份,不過儘管如此,這中間仍常需包辦部份美術的工作內容,畢竟Flash是程式+美術高度整合的技術,兩者還共用同一份檔案開發 (.fla),且許多Flash的創意表現手法便是程式+美術的巧妙搭配而成。

 

提到這些,主要是想告訴Flash美術人員或初學者,這篇文章不是單純的程式設計師站在不同立場胡亂靠北而已,而是將筆者過去經驗中常見的一些錯誤整理出來,並說明原因及改進方式。這裏面包括技術上的錯誤及觀念上的錯誤兩方面。技術上的錯誤較為簡單,大多只是軟體熟悉度不夠造成,看過一次大概就能知道了;而觀念上的錯誤,則可能需要時間適應才能轉換,不過請注意一點,本文所宣導的觀念,主要是筆者個人對Flash這項技術的主觀看法,若有任何不同意之處,歡迎留言指教。

 

拉Tween時常犯的錯

.萬惡的Tween symbol(Tween 1~Tween N)

image

中文版為"補間元件",這是一種在不正常狀況下添加tween效果的不良產物。

Tween symbol有啥不好?這些都是多餘的symbol,只會造成檔案大小的浪費,同時也沒有利用到symbol的便利性。

.正常的tween應該是:
    -motion tween兩側的keyframe,必需是同一個symble,且一個keyframe上只能有一個symbol
    -若keyframe上不是symbol,而是單純的shape的話,則只能用shape tween(反之亦然)
    -只要不符合上述兩種條件,鐵定會生出Tween symbol

.易出現Tween symbol狀況
    -多個symbol or shape放在同一個layer,又不小心拉了motion tween
    -誤認該死的Drawing Object為symbol
    -誤認該死的Group為symbol
    -白目(忘記以上說的任一事項)

 

.該死的虛線tween line

image 

虛線表示無效的tween line,這必然表示你有做錯之處,而虛線的tween line並不會有嚴重的影響,頂多是沒有動畫效果而已。不過當發現虛線tween line後,若沒有要做tween效果的話,也請最好把tween設定remove掉。(右鍵Remove Tween)

以下為容易出現虛線tween line的狀況:
   -有起點無終點或有終點無起點
   -在symbol上設shape tween
   -在shape上設了motion tween
   -白目(忘了以上說的任一事項)
   -解法:砍掉重練(刪掉或重做該段tween)

 

.錯誤的motion tween

wrong
    -沒有虛線、也沒有tween symbol,但動起來就是怪怪的,特徵是最後一格會跳一下,如同上面這張gif。
    -原因一:起點keyframe及終點keyframe,symbol被設成不同type,如movie clip , button , graphic
    -原因二:起點與終點,center piont被設在不同處
    -解法:不要白目犯上述任一情事。

 

一些該死的不良習慣
.多用Symbol,少用group或drawing object

image 

    -原則上,只要會出現一次以上的,就值得做成Symbol,善用Symbol才能發揮Flash的長處。

    -做group或drawing object,只在編輯時有一些便利性,對檔案大小絕無幫助,也絕對不要拿來做tween

註:做group是指選一堆東西後按Ctrl+g的群組功能)

註:drawing object是Flash8之後出現的無聊功能,就是上圖游標所選的icon,此功能在brush, pencil, 圓形, 方形, 多邊型選項中都會出現,沒特別需求的話,就把它關閉吧。以brush來說,正常時候,畫完一個圖形後,按Ctrl+A做select all,此時brush後的圖案應會出現白網點類似反白效果,若是被設drawing object的話,則會在四周出現藍色線框,就如同轉為symbol一般,但這是假的,不要被騙。

 

.Library的整理

image

    -請不要讓你的同伴在Library中看到Symbol 101這種可怕的東西。這表示所有symbol完全沒有做命名動作。

image 

    -無意義的命名,也是一樣可怕。

    -盡量取有意義的名字,就算英文拼不出來,好歹可以用中文。

    -除非你只有一個人在做這份.fla,否則都請好好為library中的symbol命名,因為你的工作伙伴很可能需要在這symbol 101中去添加actionscript。

    -有意義的命名,再加上資料夾妥善分類,那這個library就算是最妥善的處理了。

    -最後是記得把不用的symbol從library中刪除,多餘的東西只會讓檔案愈來愈大。

 

學習Flash的一些經驗談

對美術人員來說,我把Flash的功能分成三大塊:繪圖、動畫及程式。繪圖的部份在此就不多探討,因為Flash中提供的繪圖功具真的少的可憐,就一些基本的向量繪圖能力而已,且從Flash1發展至今,除了在Flash8時加入filter外,並無很大的長進。

(BTW,Flash10預計會加入IK關節功能,期待到時這項功能帶給大家的便利性)

 

.動畫功能

單純就Flash本身的動畫功能,其實也不多,除了frame by frame 之外,就是motion tween, shape tween兩種,其中shape tween使用機會也不高。另外是mask layer及motion guide兩樣輔助功能,再來似乎就沒什麼可以談論了。因此Flash動畫要做得好,倒不是在軟體的熟悉度,而是個人對"動態"的領悟程度。

例如一個自由落體的動畫,該怎麼動?用什麼樣的速度落下?這速度會怎麼樣的變化?而撞擊地面後,會有什麼反應?外觀會如何地壓縮?又如何地擴張?…等。這些都是"動態"的特徵。就如同畫素描一樣,只要能把主要特徵都突顯出來,觀眾就會覺得你畫得像。

當我們把動態特徵都掌握後,剩下的只是用Flash的動畫工具呈現出來而已。

而動態特徵的掌握,我個人的建議是多觀察多分析。

例如要做自由落體動畫,那就去觀察實際的自由落體運動;要做一個人走路的樣子,那就去觀察一個人走路的影片;要想做類似MTV電視台裏那種酷炫的轉場效果,那就多去觀察那些效果的變動邏輯。重覆觀察到一個程度後,相信就能分析出這裏面是由哪些元素構成,且又包含了哪些移動邏輯。

再來就是把這些條件一一實現即可。

不過隨著FLV功能的出現及網路頻寬的擴大,目前許多Flash設計都直接用FLV來處理複雜的動畫,因此,「在Flash裏單純做動畫」這種創作,應該會隨之減少。然而Flash內的動畫製作,則會隨著"互動"功能而繼續發展,並且把影片(flv)視為整個作品的一個元件來處理,以方便構思更大更宏觀的多媒體互動設計作品。

 

.程式功能

"互動性"是Flash很重要的核心價值,而"互動"需仰賴Actionscript來實現。自Flash5之後便大力發展Actionscript的功能,每一次改版都為Actionscript注入更強大的力量。所以就我個人的觀點,如果學Flash而沒學到一點點Actionscript寫作技術的話,那不如去玩其他更專業的動畫or後製軟體。

而美術人員在學習AS最大的障礙往往來自於對"程式"兩個字的排斥,認為那不該是他們要學習的事物。那麼我很想問:「是誰設定了你的學習範圍?」「是誰規定美術人員就是photoshop+illustrator這樣而已?」

回想電腦繪圖剛起步的年代,是不是也有一群習慣拿畫筆紙本作業的設計師哭夭說:「為什麼我要學電腦?」,然而現在哪個美術人員敢不懂電腦呢?

 

而在互動設計或動態UI這塊市場,若想做個突出的設計師,我個人認為程式邏輯就是必備的技術,這也是這個領域的美術人員與其他領域美術人員最大的差異。換個直接的說法,我認為沒有互動程式能力,或基本邏輯觀念的美術人員,是不能成為一個好的互動設計師。也許有人會說:「這樣講是不是太誇張了,我認識許多不懂程式,也沒有邏輯觀念的美術,他們也正從事著互動設計的工作,不也做得好好的嗎?」是的沒錯,他們仍然可以做這份工作,也不會把事情搞砸,但我想說的是,他們不會是"出色"的互動設計師。

 

好吧,也許前面說的太慘忍了,換個正面型的激勵方式。不久前曾聽一個朋友說過:「你就不要把它當做在寫程式,就當作這是你的作品的一部份,你只是單純地想實現它。」秉持這個想法,便沒有學不會的東西。

 

另外,我也常聽到一種狀況「我沒有排斥程式,我一直很想學,但就是一直學不會」。如果說沒有排斥,卻又一直學不會,那麼我想可能是「不夠用心」。怎麼說,一個用心在學動態技術的人,常常是無時無刻都在想如何做出他想做的作品,不管是吃飯、上廁所或是臨睡前,只要一有時間,就會不停地去思考如何呈現他想要的效果,這種狀態可能會持續好幾天或好幾個月,直到他找到了方法為止。你可以回想看看是否有過這樣的經驗。

 

最後,給初學程式的美術人員一點建議:分析、邏輯及創意

不論任何時候,都該善用你的分析能力。當你在看任何互動作品,即便不是Flash做的,都應習慣性地分析它裏面的互動原則,進而才有辦法窺視他的製作方式。

當分析出所需的各種功能或條件後,再以邏輯性的思考,把實作的方式建構出來。

而最後的創意,往往就是決勝之處。書本上或範例上的教學,只能讓你做出大家都會的效果,一旦想要做出別人無法做出的,或是沒人見過的效果,則需靠一點創意才能辦到。這過程有點像在變魔術,如果我們只用一般的做法,一般的寫法,那魔術師是不可能在舞台上切割真人的。這中間我們確信魔術師不是超能力者,也確信他沒有真的把人切開,但他確實弄出了把人切開"的樣子"。Flash的互動設計常會遇到這樣的情形,設計得當,就會如同變魔術一般,在視覺上看起來像即可,觀眾並不在意背後的實作方式如何。而這中間的技巧,便是需要許多創意堆積出來。

 

後語

說實話,本來後面還有著一大段,標題是:「要命的錯誤觀念」,文字也打了一半左右了,但喝杯水冷靜看了一下,發現愈寫愈像幹醮文,因此決定把該段刪除。

總之,寫這篇是希望能幫到需要幫忙的人,「美術人該學一點程式,程式人也該了解一些美學」,這是我對互動設計這塊領域的信念,即便是將來Flash不再流行,我仍相信只要是涉及視覺互動設計的從業人員,都應該是這樣的姿態來做事。


10 則留言:

yuan 提到...

建議想學程式的美術人員,可以先從MC Tween開始,http://hosted.zeh.com.br/mctween/。

Allen 提到...

老師~
我只寫程式,不太會畫畫
看到你問:是誰設定了你的學習範圍?
我決定去學畫畫了!

yuan 提到...

追加一個,如果是製作網站的話,儘量把每個單元獨立成一個fla。不要把所有的單元放在同一個檔案裏。除了可以讓檔案小一點之外,在管理和製作上 也比較方便。

Maso 提到...

感謝Yuan的補充
把各單元獨立成一個.fla這點,主要是loadMovie的使用,即使不懂這個指令是幹嘛的,至少要知道Flash內,swf與swf之間是可以在publish之後load來load去的,把各別的小單元、小元件做成獨立的swf,可在管理上、製作上更方便些。

Ed 提到...

Maso大
在製作複雜形狀的動畫(如人體動作)時
使用 group 或 drawing Object 可以大大減少圖層的使用與 library 內的物件數量
其實還是很有用的工具歐
且對美術底的 flasher 來說是很方便很有親切感的功能
所以適度的使用還是不錯啦

Maso 提到...

@ed:
感謝你的意見

我的意思是小心不要因group或drawing object而造成錯誤的motion tween

如果操作者不會出現這樣的問題的話,我想怎麼做都ok的。

(所以我個人習慣上就是直接做成symbol了 )

fayin 提到...

對於新手而言,大概是很難分清說的這一堆是啥?經過漫長的學習。覺的老師說的真好。也的確就是這樣。

不過,不管是美術或是程式,都是要很用心的去學習。不斷的嚐試錯誤,累積經驗。才能慢慢學會的。

仍在辛苦學習中的fayin

Ivan Wei 提到...

非常受用觀念導正。
我自己發覺很多視覺設計師,
就算在管理自己的Photoshop圖層,
也不願意仔細命名,每次接到別人的.psd檔,
裡面是"圖層#"或"圖層#拷貝"~
真的超想幹譙的…Orz

annwongfresh 提到...

good sharing, thanks.

★天秤女佳佳~佳佳的窩★ 提到...

寫的很好
這個老師上課都有講過
你取名abcdef
1234
最好知道哪個是哪個
好天才!!!
我如果遇到這種我會退回叫他改好再給我!!!