有許多動畫制作者使用 Macromedia Flash 制作復(fù)雜的基于矢量的動畫。Flash 的優(yōu)勢之一是其靈活通用的工作流程和制作過程。我開發(fā)了一些自定義技巧, 可幫助您創(chuàng)建及管理復(fù)雜動畫人物的各種移動部分。在本文中, 我將介紹一個人物從鉛筆草圖到完全動起來的 Flash 卡通動畫的整個制作過程, 在此過程中, 我會公開我最為得意的 Flash 秘技。
要求
要充分學(xué)習(xí)本教程, 您需要以下軟件和文件:
Macromedia Flash Professional 8
購買教程和范例文件:
mudbubble_boy.zip (ZIP, 106K)
必備知識
不需要。本文適用于 Flash 初學(xué)者以及具有任何程度的 Flash 使用經(jīng)驗的人。
在 Flash 中繪畫
Macromedia Flash 提供了多種繪畫工具, 用于創(chuàng)建妙趣橫生的人物以及其它形象。每種工具均有獨到之處, 可以產(chǎn)生不同風(fēng)格的效果。一些工具可創(chuàng)建較大的文件, 而其它工具則會產(chǎn)生較小的文件。在對這些工具比較熟悉以后, 您將學(xué)會根據(jù)想要的藝術(shù)風(fēng)格以及可能必須遵守的文件大小要求選擇最合適的工具。這不過是要在文件大小、下載時間及回放性能之間找到一個平衡點。在此部分中, 我將簡單介紹其中的每一種 Flash 繪畫工具, 并講述它們的優(yōu)缺點。
“刷子”工具
“刷子”工具 (見圖 1) 可能是所有這些工具中用途最廣的工具, 這一點在結(jié)合壓敏繪圖板使用時尤其明顯。
圖 1.“刷子”工具
使用“刷子”工具進(jìn)行繪畫與使用形狀進(jìn)行繪畫相同。這種工具由于具有支持壓力敏感度和斜度的功能, 因此在使用時感覺最自然。
Wacom 制造了一系列廣受歡迎的繪圖板, 這些繪圖板大小各異, 配有稱為鐵筆的無繩、無電池鋼筆, 并且可完美地與 Flash 結(jié)合使用。由于 Wacom 繪圖板能夠與您的現(xiàn)有鼠標(biāo)結(jié)合使用, 或完全替代鼠標(biāo), 因此其用途不僅僅是用于 Flash。許多數(shù)字設(shè)計人員都會將繪圖板與任意數(shù)目的圖形編輯器和動畫程序 (包括 Adobe Photoshop、Adobe Illustrator 及 Macromedia FreeHand) 一起使用。但不必?fù)?dān)心: 如果手頭沒有繪圖板, 您仍可使用“刷子”工具, 但斜度和壓力敏感度功能將不可用。
如果您安裝了壓敏繪圖板, 選擇“刷子”工具會為您提供兩個影響線條質(zhì)量的部分選取。在工具欄的最底部, 您會注意到壓力敏感度選項和斜度選項 (見圖 2)。如果選擇了其中一個選項或同時選擇了這兩個選項, 在 Flash 中使用“刷子”工具時會呈現(xiàn)不同的效果。
圖 2. 壓力敏感度選項和斜度選項
圖 3 顯示了在使用“刷子”工具繪畫時出現(xiàn)的情況。左側(cè)的結(jié)果是一個形狀, 意味著其在所有側(cè)邊上均有矢量點。對象具有的點越多, 文件的大小就越大。我使用壓敏繪圖板繪制了這個形狀。請注意該形狀尖細(xì)的兩端和不均勻的線條粗細(xì), 這種效果是通過向筆觸施加不同的壓力而產(chǎn)生的。我還利用“刷子”工具繪制了右側(cè)的形狀, 但這次關(guān)閉了壓力敏感度設(shè)置。
圖 3. 打開 (左側(cè)) 和關(guān)閉 (右側(cè)) 壓力敏感度設(shè)置繪制的形狀
“刷子”工具提供了多個部分選取來幫助您繪制特定效果 (見圖 4):
標(biāo)準(zhǔn)繪畫: 可對同一層的線條和填充涂色。 顏料填充: 在填充顏色的內(nèi)部及 (舞臺上的) 形狀的外部進(jìn)行涂色。 后面繪畫: 在現(xiàn)有填充及筆觸的后面進(jìn)行涂色 顏料選擇: 使您只能在所選填充的內(nèi)部進(jìn)行涂色 內(nèi)部繪畫: 在您開始在填充的內(nèi)部進(jìn)行涂色后防止您將顏色涂到線條的外測
圖 4.“刷子”工具的效果
對象繪制
“對象繪制”是 Flash 8 中的一項新功能。此功能使您能夠?qū)⑿螤钭鳛楸３窒嗷オ毩⒌膯蝹€對象進(jìn)行繪制。以前, 以避免一個形狀“切入”另一個形狀, 必須在單獨的圖層上繪制每一個形狀；現(xiàn)在, 這種狀況已經(jīng)一去不復(fù)返了。使用 Flash 8, 您可以將“對象繪制”作為“選項” (見圖 5) 下任何一種繪畫工具 (“刷子”、“鉛筆”、“鋼筆”、“橢圓”及“矩形”) 的部分選取對其打開或關(guān)閉。如果您熟悉 Macromedia FreeHand 或 Adobe Illustrator, 就會非常歡迎 Flash 中添加的這項熟悉的功能。
圖 5.“對象繪制”部分選取按鈕
如圖 6 所示, 如果不使用“對象繪制”功能, 在現(xiàn)有形狀上繪制形狀會將這兩個形狀合并在一起, 導(dǎo)致一個形狀切入到另一個形狀中。這稱為“合并繪制”模式。此模式對于通過切入到形狀中創(chuàng)建新形狀的方法非常有用。
圖 6.“合并繪制”模式
當(dāng)您在“對象繪制”模式中繪制形狀時, 此形狀會自動成為“對象繪制”形狀, 不會與其它形狀合并。您可以疊加“對象繪制”形狀, 不必?fù)?dān)心發(fā)生切入情況 (見圖 7)。在可能要重新定位對象或只是需要保持它們獨立的情況下, 這會非常有幫助。
圖 7.“對象繪制”模式
我只用鼠標(biāo)以及矩形和橢圓工具就創(chuàng)造完成了我的商標(biāo)男孩人物 (見圖 8)。我從未遇到必須結(jié)合使用 Wacom 繪圖板與“刷子”工具的情況。我本來可以輕松選擇“刷子”工具, 但使用形狀工具也得到了我希望實現(xiàn)的極為清晰的線條質(zhì)量?！八⒆印惫ぞ呓?jīng)常會產(chǎn)生多個不必要的點, 這些點會使文件急劇增大, 當(dāng)您以后試圖對形狀進(jìn)行編輯時會感到非常頭痛。對于此男孩圖形, 我希望形狀簡單并且文件盡可能地小。
圖 8. 使用形狀工具創(chuàng)建的人物
“鉛筆”工具
如果您要在整個圖像中使線條粗細(xì)保持一致, 并使文件盡可能小, “鉛筆”工具 (見圖 9) 是最合適的工具。
圖 9.“鉛筆”工具
使用“鉛筆”工具繪制的線條由為數(shù)不多的幾個矢量點組成。直線條只有兩個點, 一端一個。根據(jù)彎曲的數(shù)量, 曲線具有三個點或更多點 (見圖 10)。
圖 10. 使用“鉛筆”工具繪制的線條
“鉛筆”工具還提供了多種線條質(zhì)量模式 (見圖 11):
伸直: 如果要徒手繪制非常整齊的線條, 這是非常好的選項。即使您的手不斷抖動, 您的線條在繪制完成后仍會非常整齊。 平滑: 如果使用此選項, 軟件在保持您打算創(chuàng)建的基本形狀的同時, 會自動對線條進(jìn)行平滑處理。 墨水: 此選項可使您的線條質(zhì)量不受影響。這非常適用于徒手繪畫或“散漫”式繪畫。
圖 11.“鉛筆”工具的質(zhì)量模式
形狀工具
形狀工具 (“橢圓”和“矩形”) 可創(chuàng)建基本的填充和筆觸 (見圖 12)。按住 Shift 鍵, 然后使用形狀工具可創(chuàng)建完美的圓形或正方形。
圖 12. 形狀工具: “橢圓”和“矩形”
您可以通過“屬性”檢查器選擇填充和筆觸顏色 (見圖 13)。單擊任一樣本即可打開顏色面板, 您可以在里面編輯筆觸或顏色選擇。
圖 13.“矩形”工具的屬性檢查器
通過選擇帶有紅色對角線的正方形, 您甚至可將筆觸或填充指定為無色 (見圖 14)。
圖 14. 選擇此正方形可進(jìn)行無色繪畫。
“鋼筆”工具
要繪制精確的路徑 (如直線或者平滑流暢的曲線) , 可以使用“鋼筆”工具 (見圖 15)?？梢詣?chuàng)建直線或曲線段, 然后調(diào)整直線段的角度和長度以及曲線段的斜率。
圖 15.“鋼筆”工具
使用鋼筆工具時, 進(jìn)行單擊可以在直線段上創(chuàng)建點, 進(jìn)行單擊和拖動可以在曲線段上創(chuàng)建點?？梢酝ㄟ^調(diào)整線條上的點來調(diào)整直線段和曲線段。您可以將曲線轉(zhuǎn)換為直線, 反之亦可。
在創(chuàng)建曲線時, 您會注意到, Flash 會為每個錨記點生成一個切線手柄。稍后通過選擇錨記并拖動切線手柄, 可使用部分選取工具 (白色箭頭) 對這些線條進(jìn)行編輯 (見圖 16)。移動與錨記點相關(guān)的手柄可改變曲線的形狀。
圖 16. 使用“鋼筆”工具繪制的線段 (正在使用部分選取工具進(jìn)行編輯)
“繪圖紙外觀”工具
“繪圖紙外觀”工具位于“時間軸”面板的底部 (見圖 17)。
圖 17.“繪圖紙外觀”工具
選擇“繪圖紙外觀”工具時, 應(yīng)用程序會將“繪圖紙外觀”標(biāo)記添加到時間軸的播放頭指示器中 (見圖 18)。您可以拖動這些標(biāo)記, 以便在當(dāng)前幀前后擴(kuò)展幀數(shù)。
圖 18. 繪圖紙外觀效果
Flash 提供了兩種繪圖紙外觀風(fēng)格:
正常繪圖紙外觀: 當(dāng)前幀全色顯示, 而前面的幀及后面的幀逐漸變淡。這樣就形成了創(chuàng)建于半透明紙上然后相互堆疊的一系列繪畫的印象 (見圖 18)。 輪廓模式的繪圖紙外觀: 當(dāng)前幀全色顯示, 而前面的幀及后面的幀只顯示輪廓 (見圖 19)。當(dāng)在當(dāng)前幀前后處理多個不同的關(guān)鍵幀時, 這會使眼睛感到輕松一些。
圖 19. 輪廓模式的繪圖紙外觀
使用元件
Flash 之所以成為 Flash, 元件是最本質(zhì)的元素。您可以將您繪制的任何對象轉(zhuǎn)換成元件或?qū)氲皆?。而且在幾乎所有情況下, 您均應(yīng)如此。原因如下: 對象被轉(zhuǎn)換成元件時, 它會自動成為 Flash 文檔的庫中的一個項目。每個 Flash 文檔均有自己的庫, 您可以將元件從這些庫中拖到舞臺上。執(zhí)行此操作時, 舞臺上的對象稱為實例。無論元件的多少個實例位于舞臺上, Flash 只需要加載一次實例。這樣, Flash 就可以在保持較小文件大小的同時提供流動畫。盡可能多次重復(fù)使用元件非常有效。您還可以對實例應(yīng)用效果 (例如“縮放比例”、“色調(diào)”、“Alpha”及“亮度”, 并可以將補間動畫與一個或多個效果結(jié)合應(yīng)用。
好了, 不扯遠(yuǎn)了, 現(xiàn)在我將向您介紹元件及其行為。
創(chuàng)建一個對象 — 任何內(nèi)容都可以, 簡單形狀也行。選擇此對象 (Ctrl+A), 然后選擇“修改” ? “轉(zhuǎn)換為元件”或按 F8 鍵, 將其轉(zhuǎn)換為元件。這會打開“轉(zhuǎn)換為元件”對話框 (見圖 20)。
圖 20.“轉(zhuǎn)換為元件”對話框
您可以在“轉(zhuǎn)換為元件”對話框中鍵入元件的名稱, 從三個行為中選擇一個, 然后確定對象的注冊點。下面的列表對每個行為及其含義進(jìn)行了說明:
影片剪輯: 影片剪輯是動態(tài)的, 這意味著它們可以作為 Flash 編程語言 ActionScript 的對象。它們可具有任意數(shù)量的圖層和幀, 但它們的時間軸獨立于其它所有時間軸。請聯(lián)想一下太陽系: 每個行星為一個影片剪輯, 它們無休止地獨立圍繞太陽旋轉(zhuǎn), 而太陽便是主時間軸。 按鈕: 按鈕具有四種狀態(tài): “指針經(jīng)過”、“彈起”、“按下”和“點擊”。它們在按鈕元件中表現(xiàn)為關(guān)鍵幀。您可以在上述的任何狀態(tài)中放置圖形, 然后將 ActionScript 應(yīng)用到按鈕的實例, 以便為您的 Flash 影片添加交互性。 圖形: 圖形元件與影片剪輯非常相似, 但它們不是動態(tài)的, 也不能作為 ActionScript 的對象。但您可以將圖形元件放置到影片剪輯元件中。圖形元件可具有任意數(shù)量的幀和圖層。最重要的特性是, 它們始終與主時間軸保持同步, 并且互相保持同步。在嘗試創(chuàng)建基于時間的動畫時, 這一點非常重要。
在此動畫教程中, 我建議使用“圖形”行為。這使您能夠清理 時間軸, 以便在 Flash 創(chuàng)作環(huán)境中查看動畫播放?！扒謇怼笔侵甘謩觼砘匾苿硬シ蓬^, 以便回放時間軸的內(nèi)容。影片剪輯元件不播放第 1 幀之外的內(nèi)容, 除非您測試 Flash 影片 (Ctrl+Enter) 或?qū)⒂捌瑢?dǎo)出為 SWF 文件。
清理草圖
每項出色的設(shè)計通常都是從經(jīng)受了時間考驗的鉛筆和紙開始。我曾在冗長沉悶的管理研討會過程中有過一些最具創(chuàng)造性的時刻, 有時在雞尾酒餐巾紙上的隨意涂鴉就會激發(fā)創(chuàng)作絕妙人物的靈感。實際上, 您從不知道何時何地會產(chǎn)生靈感, 因此, 請準(zhǔn)備一枝鉛筆放在口袋中或別在耳后以隨時記下您的靈感。
您可以使用我前面介紹的任何工具在 Flash 中繪制草圖。如果您在紙上繪制了草圖, 并且想將其作為 Flash 人物的基礎(chǔ), 則需要使用掃描儀掃描這些草圖并保存為圖形文件。大多數(shù)掃描儀帶有軟件, 可以很輕松地完成掃描過程。Flash 可以導(dǎo)出使用比較廣泛的一些圖形格式, 包括 PNG、GIF、JPEG、TGA 及 TIFF。
在將草圖導(dǎo)入 Flash 中后, 應(yīng)考慮如何將其分離為幾個單獨的部分。此過程比較復(fù)雜。這是一個非常概念性的過程, 最終取決于您的動畫的風(fēng)格以及人物的風(fēng)格。
借用大眾汽車公司的說法, 就是“形式服從功能”, 這對您的人物設(shè)計非常關(guān)鍵。您必須將可能使人物如何移動的想法可視化, 這最終將支配其整個設(shè)計。
圖 21 顯示了一個草圖示例, 以及在 Flash 中對其重繪后的最終作品。此人物是完全使用“橢圓”和“矩形”工具完成的。注意我如何以原始草圖為參考, 在微調(diào)圖像時進(jìn)行細(xì)微的更改和調(diào)整, 以及利用 Flash 繪圖工具對其進(jìn)行跟蹤。
圖 21. 從草圖到 Flash — 我的商標(biāo)人物
在草圖旁創(chuàng)建了空白關(guān)鍵幀 (F7) 后, 您可以打開“繪圖紙外觀”功能查看草圖的重影。以繪圖紙外觀草圖作為引導(dǎo), 您可以使用任何繪圖工具進(jìn)行繪圖。如圖 22 所示, 我使用“橢圓”工具創(chuàng)建了男孩人物的頭部。創(chuàng)建人物的身體部分以及各個附件時, 請先試著想象一下, 然后再繪制整個形狀。您必須使您的人物形象地顯現(xiàn)出來, 就好像它是真正存在于空間中的 3D 對象。即使這是一個二維格式, 按照 3D 藝術(shù)家那樣進(jìn)行想象也可以幫助您形象地描繪某些部分如何連接到其它部分。
圖 22. 使用橢圓形狀定義的人物頭部
在繪制完人物的對象時, 應(yīng)將其復(fù)制并粘貼到一個新圖層上。此時, 我喜歡選中它, 然后將其轉(zhuǎn)換為元件。您還可以對圖層進(jìn)行命名。
將元件放置到圖層上可節(jié)省時間
我總是將對象轉(zhuǎn)換成元件, 然后按照簡單但具有描述性的命名約定對它們進(jìn)行命名。例如, head1、eye1、mouth_wide 等等。由于此時有更簡單、更快捷的方式, 因此我不對圖層進(jìn)行命名。創(chuàng)建所有元件并相應(yīng)地命名后, 我只需全部選中它們 (Ctrl+A), 然后復(fù)制 (Ctrl+C)。然后創(chuàng)建一個新圖層, 將它們粘貼到上面 (Ctrl+Alt+V)。這樣就可以將它們?nèi)空迟N在一個圖層上, 但它們?nèi)允菃为毜脑?。刪除其它所有圖層, 只保留一個包含所有人物元件的圖層。
下一步是最棒的部分。再次全選, 然后右鍵單擊您的人物, 選擇“分散到圖層” (見圖 23)。
圖 23. 選擇所有元件, 然后右鍵單擊人物, 選擇“分散到圖層”
瞧！Flash 不僅將每個元件放置到了各自的圖層上, 而且還根據(jù)元件名稱對每個圖層進(jìn)行了命名！干得漂亮吧？
通過出色的文檔管理節(jié)省時間
圖 24 顯示了在設(shè)計完人物、將其轉(zhuǎn)換成元件并做好制作動畫的準(zhǔn)備后, 時間軸的可能外觀示例。如果要編輯圖層的名稱, 請雙擊該圖層名稱, 然后鍵入新名稱。對于時間軸和文件管理, 根據(jù)圖層所含對象的類型為圖層取一個描述性名稱是非常可取的做法。在與多個藝術(shù)家合作時, 這尤為重要, 而在團(tuán)隊環(huán)境中工作時, 這更加重要。
圖 24. 時間軸中商標(biāo)人物的身體部位和元件
自 Flash MX (版本 6) 起, 就為您提供了創(chuàng)建圖層文件夾的選項。圖層文件夾只是一個新圖層, 它的作用如同文件夾, 可容納其它圖層。它們可展開或折疊。對于處理包含多個人物的多個圖層, 這極為有用。您可以為每個人物創(chuàng)建一個圖層文件夾, 然后將所有圖層放置在這些文件夾中, 這樣您就可以選擇將除您正在使用的人物之外的所有圖層折疊起來 (見圖 25)。這避免了在時間軸中無休止地進(jìn)行滾動, 從而可節(jié)省大量時間。
圖 25. 利用圖層文件夾節(jié)省時間
另一種管理 Flash 文檔的方法是構(gòu)建組織有序的庫。如先前所述, 當(dāng)您創(chuàng)建對象并將其轉(zhuǎn)換成元件時, 它會自動成為影片的庫中的一個對象。要打開庫, 則選擇“窗口” ? “庫”, 或按 Ctrl+L 組合鍵。庫 (見圖 26) 會為您提供有關(guān)所含的每個元件的各種信息和選項。您可以通過單擊元件名稱選擇每一個元件, 然后在庫預(yù)覽窗口中查看縮略圖。
圖 26. 我的商標(biāo)人物的庫
如果元件中包含動畫, 您還可以在預(yù)覽窗口的右上角看到“停止”和“播放”按鈕。這些按鈕使您可以在此預(yù)覽窗口中預(yù)覽動畫。
庫的右上角包含帶有多個選項的彈出式菜單 (見圖 27)。您可以創(chuàng)建新的元件、文件夾、字體或視頻。您還可以重命名元件, 將元件移動到文件夾, 復(fù)制或刪除元件, 或編輯及獲取元件的屬性。
圖 27. 庫管理選項
“2.5D”概念簡介
Flash 可以很輕松地進(jìn)行補間, 但這并不意味著您能夠始終依靠它來創(chuàng)作令人嘆服的動畫。不要誤解我的意思: 只要復(fù)雜程度不超過在舞臺上移動簡單的對象, 補間足以完成工作并節(jié)省大量時間。
但是, 如果您能夠利用補間方法使人物形象更加逼真會如何？如果您能夠利用其簡易性并使其以其它 Flash 用戶所想象不到的方式工作會如何？如果您已經(jīng)了解了有關(guān)補間的任何知識, 然后回過頭看了前面 10% 的知識便轉(zhuǎn)向其它內(nèi)容, 又會如何？這些“如果”將使您更上層樓。
在本課中, 我將介紹 Flash 動畫技巧的真正殺手锏, 這種技巧甚至可以創(chuàng)造出一些堪稱逼真的 3D 效果。最棒的是, 您絕不需要離開 Flash 環(huán)境；您仍在 2D 環(huán)境內(nèi)。您現(xiàn)在正處在一種過渡的維度當(dāng)中。如果它仍是 2D, 但看起來像 3D, 那么確切地講, 它到底是什么？
歡迎來到 2.5D 動畫世界。
沒錯, 是 2.5D 動畫。這是我起的名字。我并不是說我發(fā)明了這種技巧, 但就目前所知, 2.5 D 這一名稱是我發(fā)明的。
圖 28 展示了我的網(wǎng)站
www.mudbubble.com* 上的徽標(biāo)人物。
圖 28. 他難道不可愛嗎？
圖 29 表明我將每個元件放到了它們各自的圖層上。我打開了輪廓功能, 因此您可以看到人物身體的各個部位是如何區(qū)分開的。這非常重要, 因為在補間過程中, 補間動畫要求每個圖層上只能有一個元件。如果您試圖在同一補間動畫的同一圖層上放置兩個不同的元件, 此補間將會斷開。
圖 29. 每個元件都有自己的圖層
我甚至借此時機(jī)對每個圖層進(jìn)行了命名。盡管不必如此, 但為圖層命名確實有幫助, 因為, 隨著時間軸的增長, 您最終會越來越多地滾動時間軸。這在經(jīng)常進(jìn)行文件共享的團(tuán)隊環(huán)境中工作時也非常重要。在團(tuán)隊工作環(huán)境中, 越有條理越好。
設(shè)置時間軸后, 即可開始對人物應(yīng)用補間動畫。例如, 我只為組成人物頭部的元件制作了動畫, 因此我要確保其它所有圖層均被鎖定, 以避免更改錯誤的圖層。
轉(zhuǎn)動頭部 — 第 1 部分
首先, 我創(chuàng)建了一些關(guān)鍵幀, 我要使頭部在這些關(guān)鍵幀中開始及停止轉(zhuǎn)動。單擊并從頂部圖層垂直拖動到底部圖層, 轉(zhuǎn)換成關(guān)鍵幀 (F6)。執(zhí)行兩次此操作, 在關(guān)鍵幀之間保留約 15 至 20 個幀。在此示例中, 我將第 15 幀和第 30 轉(zhuǎn)換成了關(guān)鍵幀 (見圖 30)。
圖 30. 準(zhǔn)備應(yīng)用補間動畫
通過使播放頭保留在使人物的頭部由轉(zhuǎn)動轉(zhuǎn)為停止的幀上, 我使用“任意變形”工具對舞臺上的每一個元件進(jìn)行了編輯。
請按照我的方法操作。我從其中一只眼睛開始。您需要想象一下在球體 (頭部) 上轉(zhuǎn)動的眼睛。如果這是一個真正的 3D 對象, 當(dāng)一只眼睛靠近您時, 它會變得更大。它的形狀也不會像雞蛋, 因此使其變得寬一些也是很好的想法。由于我的人物的眼睛是由三個不同的元件組成的, 因此我通過按住 Shift 鍵同時選擇了所有這三個元件, 以便對它們進(jìn)行縮放 (見圖 31)。然后, 我使用“任意變形”工具同時對它們進(jìn)行了縮放。不必?fù)?dān)心此時能否做得非常完美。稍后您可以隨時對動畫進(jìn)行微調(diào)。這幾乎是盲人摸象, 因為在應(yīng)用補間動畫前您不能確切知道它的外觀將會如何。
圖 31. 選擇眼睛元件
現(xiàn)在讓我們處理鼻子。由于此人物正在轉(zhuǎn)向我們, 任何與我們最近的部位均應(yīng)從右側(cè)轉(zhuǎn)向左側(cè)。如果它是真正的 3D 對象, 則鼻子將會直接從頭部突出來。為使其更加具有真實感, 在將鼻子從右側(cè)移動到左側(cè)時, 我使其略微向下轉(zhuǎn)動了一些 (見圖 32)。不要忘記在其靠近查看者時將其放大一點。
圖 32. 修改鼻子
然后, 我挪動了另一只眼睛, 同時將其放大, 并使其不太像橢圓形, 而變得更圓一些。我還挪動了兩撇眉毛并略微旋轉(zhuǎn)了它們, 同時對它們進(jìn)行了放大 (見圖 33)。
圖 33. 修改另一只眼睛
此時, 我將補間動畫應(yīng)用到進(jìn)行這些編輯所在的每個圖層。現(xiàn)在該到展示實際完成的作品以及確定是否需要對其進(jìn)行進(jìn)一步調(diào)整的時候了。
不要擔(dān)心, 要實現(xiàn)這種恰當(dāng)?shù)男Ч麕缀蹩偸且M(jìn)行大量調(diào)整。圖 34 展示了人物的頭部在該舞臺上的轉(zhuǎn)動。
圖 34. 轉(zhuǎn)動人物的頭部
查看 mudbubble_boy.swf 文件, 查看最終的動畫效果 (見圖 35)。
圖 35. 頭部轉(zhuǎn)動的最終動畫效果
不錯的開始, 是吧？通過使用“任意變形”工具進(jìn)行一些簡單編輯, 您可以開始觀看逼真的動畫效果。其效果并不完美, 但此時不必使其完美。您可以繼續(xù)調(diào)整元素的縮放、定位及傾斜程度, 直至達(dá)到所需的效果為止。
轉(zhuǎn)動頭部 — 第 2 部分
接下來, 我針對人物頭部的其它資源進(jìn)一步強(qiáng)調(diào)其頭部的轉(zhuǎn)動。
此錯覺的最重要部分是使查看者相信, 這種扁平的 2D 對象具有體積和質(zhì)量。您還需要誘使用戶的眼睛在動畫中感覺到深度。您需要想象此人物是從空間中的各種 3D 對象構(gòu)建起來的。如果此人物真的在 3D 空間中轉(zhuǎn)動頭部, 則前景中內(nèi)容的行進(jìn)方向與背景中內(nèi)容的行進(jìn)方向相反。為幫助您進(jìn)行這種想象, 請想象一幅地球在空間中繞其軸進(jìn)行自轉(zhuǎn)的畫面。地球基本以逆時針旋轉(zhuǎn)。這意味著與我們最近的表面是從右向左行進(jìn)。離我們最遠(yuǎn)的表面是從左向右行進(jìn)。我將這種運動關(guān)系應(yīng)用到了人物的頭部。
由于頭部元件自身只是一個扁平的橢圓形, 我真正需要的是使其傾斜一點。我還選擇了將它向右輕推一點。我之所以這樣做是因為當(dāng)有人轉(zhuǎn)過來面向您時, 您看到的左眼右側(cè)的部分會更多。由于此頭部形狀更與面部特征相比更加靠后, 因此它應(yīng)向右移動幾個像素。不要過于夸大其中的一些移動。這種效果最好利用許多細(xì)微移動而不是一些較大更改來實現(xiàn)。正是由于多個細(xì)微動畫形成了意想不到的整體效果, 其各個部分才構(gòu)成一個整體。
然后, 將帽檐向人物頭部的右側(cè)旋轉(zhuǎn) (見圖 36)。請記住, 后部對象的運動方向與前景中對象的運動方向相反。
圖 36. 旋轉(zhuǎn)帽檐
我還使用箭頭鍵向右輕推帽檐, 使之看起來更像是位于人物的頸部之后。
人物的帽子適用于同一原理。我傾斜了帽子, 以便使其在向右移動幾個像素的同時變得更薄 (見圖 37)。
圖 37. 調(diào)整帽子
使耳朵傾斜一點, 同時向左上方移動一些 (見圖 38)。
圖 38. 傾斜耳朵
不要忘記頭發(fā)。我將頭發(fā)設(shè)計成三個單獨的元件, 這樣就能夠單獨對它們進(jìn)行編輯。當(dāng)頭部轉(zhuǎn)向查看者時, 我使頭發(fā)朝著人物眼睛的方向向下傾斜, 并使它們變得更短, 就好像它們更加指向查看者 (見圖 39)。這在一定程度上會形成透視錯覺, 但難以實現(xiàn)。您傾斜以及縮放元件的程度是有限制的。請記住, 盡量保守地通過細(xì)微的方式使用此效果會更好。到目前為止, 您只能夠推動封套。越少效果越好。
圖 39. 傾斜頭發(fā)
下一步, 將一些補間動畫添加到已編輯過的其余圖層中。到目前為止, 如果您按照我的方法進(jìn)行了操作, 請回放獲得工作成果。
效果不錯, 是吧？您可以清楚地看到他頭部的轉(zhuǎn)動, 就好像是一個 3D 對象。請記住, 大多數(shù)人物 (例如人) 都有兩只耳朵。要使人物的第二只耳朵在頭部的右側(cè)轉(zhuǎn)動, 需要在其它所有圖層下創(chuàng)建一個新圖層。復(fù)制現(xiàn)有耳朵, 然后將其粘貼到補間動畫中間空白關(guān)鍵幀中的新圖層上 (在第 22 幀周圍)。然后選擇“修改” ? “變形” ? “水平翻轉(zhuǎn)”, 使其翻轉(zhuǎn)。
將耳朵放置在頭部后的右側(cè)位置, 使其約一半的部分突出來。大約是這只耳朵上您需要看到的部分 (見圖 40)。
圖 40. 定位第二只耳朵
在第 30 幀 (其它所有關(guān)鍵幀所在的位置) 上添加另一個關(guān)鍵幀, 如圖 41 所示。
圖 41. 添加第二個關(guān)鍵幀
返回到這只耳朵的第一個關(guān)鍵幀, 重新定位幾乎完全位于頭部之后的耳朵。我已將其它一些圖層轉(zhuǎn)換成了輪廓, 以便您能夠看到這只耳朵的新位置 (見圖 42)。
圖 42. 重新定位第二只耳朵
現(xiàn)在, 該應(yīng)用補間動畫了?；胤拍膭赢? 看一下當(dāng)頭部向您“轉(zhuǎn)動”時這只耳朵呈現(xiàn)的效果 (見圖 43)。由于這種小細(xì)節(jié)有助于形成頭部成為圓形球體的錯覺 (這需要
Flash Player 8) , 因此可以極大地增強(qiáng)頭部的真實感。
圖 43. 在頭部轉(zhuǎn)動過程中耳朵呈現(xiàn)的最終動畫效果
請隨時清理時間軸, 如果感覺某些地方不太恰當(dāng), 則對元件進(jìn)行調(diào)整。這取決于您追求完美的程度以及人物的復(fù)雜性。鑒于我在設(shè)計中使用的對象數(shù)量, 本例中的男孩人物比較復(fù)雜。
“自定義緩入/緩出”面板 (僅限 Flash Professional 8)
我想對頭部轉(zhuǎn)動進(jìn)行一次最后的修整。如您所知, 由于速率的恒定, 補間動畫看起來具有非常好的靜態(tài)效果。在初始狀態(tài)下, 它們看起來非常不穩(wěn)定。但憑借 Flash Professional 8 中的新功能, 您可以添加一些“緩入和緩出”效果, 使過渡更加柔和。訣竅是如何在單個補間內(nèi)進(jìn)行緩入和 緩出。
第一步是應(yīng)用補間動畫。您可以使用以下兩種方法中的一種實現(xiàn)這一目的:
右鍵單擊兩個關(guān)鍵幀之間的幀。從彈出式菜單中選擇“創(chuàng)建補間動畫”。 利用選擇工具通過單擊和拖動操作選擇所有圖層, 以黑色突出顯示它們。從屬性檢查器的“補間”下拉菜單中, 選擇“動作”。
請注意屬性檢查器中的“編輯”按鈕 (見圖 44)。
圖 44. 單擊“編輯”按鈕, 打開“自定義緩入/緩出”面板。
單擊此按鈕可打開新的“自定義緩入/緩出”面板 (見圖 45)。
圖 45. 新的“自定義緩入/緩出”面板
與先前版本相比, 利用這種新的“自定義緩入/緩出”面板, 您可以更多地對緩動效果進(jìn)行控制?！白远x緩入/緩出”面板顯示的圖形表示動畫隨時間推移而變化的程度。水平軸表示幀, 而垂直軸表示對象變化的百分比。
圖形的曲線指示對象的變化率。曲線呈水平時 (無斜率) , 速率為零；曲線呈垂直時, 則表示對象的運動沒有任何緩動或延遲。
如果您選擇“為所有屬性使用一種設(shè)置”復(fù)選框, 則會將當(dāng)前曲線應(yīng)用到所有屬性 (“位置”、“旋轉(zhuǎn)”、“縮放”、“顏色”和“濾鏡”)。如果您取消選擇此復(fù)選框, 可以對每個屬性應(yīng)用單獨的曲線, 如下所示:
位置: 為舞臺上動畫對象的位置指定自定義緩入緩出設(shè)置。 旋轉(zhuǎn): 為動畫對象的旋轉(zhuǎn)指定自定義緩入緩出設(shè)置。例如, 可以微調(diào)舞臺上的動畫人物轉(zhuǎn)向用戶時速度的快慢。 縮放: 為動畫對象的縮放指定自定義緩入緩出設(shè)置。例如, 您可以更輕松地通過自定義對象的縮放實現(xiàn)以下效果: 對象好像漸漸遠(yuǎn)離查看者, 再漸漸靠近, 然后再次漸漸離開。 顏色: 為應(yīng)用于動畫對象的顏色過渡指定自定義緩入緩出設(shè)置。 濾鏡: 為應(yīng)用于動畫對象的濾鏡指定自定義緩入緩出設(shè)置。例如, 可以控制模擬光源方向變化的投影緩動設(shè)置。 “播放”和“停止”按鈕: 允許您使用“自定義緩入/緩出”對話框中定義的所有當(dāng)前速率曲線, 預(yù)覽舞臺上的動畫。 “重置”按鈕: 允許您將速率曲線重置為默認(rèn)的線性狀態(tài)。
單擊對角線可以添加新的控制點。通過拖動控制點的位置, 您可以精確控制對象的運動。
使用幀指示器 (用方形手柄表示) , 單擊要緩入或緩出 (加速或減速) 對象的位置。單擊控制點的手柄 (方形手柄) , 可選擇該控制點, 并顯示其兩側(cè)的正切點 (空心圓圈)。使用鼠標(biāo)或鍵盤上的鍵可以將控制點或正切點拖動到新位置。
提示: 默認(rèn)情況下, 控制點貼緊至網(wǎng)格。在拖動控制點時按住 X 鍵可以暫時取消這種貼緊方式。
單擊曲線上任何控制點之外的位置可在該曲線上創(chuàng)建新的控制點。單擊曲線和控制點之外的任意位置, 可以取消選擇當(dāng)前選擇的控制點。
要使動畫逐漸開始和逐漸結(jié)束, 應(yīng)調(diào)整曲線, 使其類似于圖 46。我強(qiáng)烈建議通過創(chuàng)建并編輯控制點和正切點然后使用面板左下角的“停止”和“播放”按鈕回放您的動畫來進(jìn)行試驗。這不需要很長的時間, 之后您將對曲線與其對動畫的影響之間的關(guān)系形成良好的感覺。
圖 46. 使用這種緩入/緩出路徑
現(xiàn)在回放您的動畫。請注意頭部轉(zhuǎn)動時是如何進(jìn)行緩入, 而在轉(zhuǎn)動即將結(jié)束時又是如何進(jìn)行緩出的。要創(chuàng)建頭部再次轉(zhuǎn)回到原始位置的動畫, 您只需要復(fù)制第 1 幀中的幀, 然后將它們粘貼在剛創(chuàng)建的補間之后。通過添加補間動畫重復(fù)同一過程以實現(xiàn)緩入和緩出, 這樣就形成了可以非常漂亮地來回轉(zhuǎn)動頭部的人物。
應(yīng)用濾鏡
是的, 現(xiàn)在這種不可能在 Flash 中已成為可能。Flash 8 引入了圖形濾鏡和混合模式, 這受到 Flash 群體的熱烈歡迎。您現(xiàn)在可將“投影”、“模糊”、“發(fā)光”、“斜角”、“漸變發(fā)光”、“漸變斜角”和“調(diào)整顏色”等效果應(yīng)用到任何影片剪輯實例中。通過應(yīng)用投影可使您的人物妙趣橫生。
首先要做的是將您的人物放入影片剪輯元件中。在時間軸中, 通過單擊和拖動選擇所有圖層間的全部幀。 (提示: 從左上角中的第 1 幀開始, 沿對角方向拖動到底部圖層上的最后一幀。) 這將以黑色突出顯示幀和圖層。選擇“編輯” ? “時間軸” ? “復(fù)制幀” (或按 Ctrl+At+C) 將整個時間軸復(fù)制到“剪貼板”上。 (您還可以右鍵單擊突出顯示的幀上的任何位置, 然后從上下文菜單中選擇“復(fù)制幀”。) 現(xiàn)在, 將該想法保留到下一步。
打開庫 (Ctrl+L), 然后從右上方的下拉菜單中選擇“新建元件” ? “影片剪輯”行為, 然后單擊“確定”。您現(xiàn)在已處于此新元件的“編輯”模式中。選擇時間軸的第一幀, 然后選擇“編輯” ? “時間軸” ? “粘貼幀” (或按 Ctrl+Alt+V) 粘貼所選擇的幀, 如圖 47 所示。 (您還可以右鍵單擊第 1 幀, 然后從上下文菜單中選擇“粘貼幀”)。
圖 47. 右鍵單擊第 1 幀并選擇“粘貼幀”
返回到主舞臺, 然后創(chuàng)建一個新圖層。找到您剛才在庫中創(chuàng)建的影片剪輯元件, 然后將其拖到此新圖層的舞臺上 (見圖 48)。
圖 48. 將影片剪輯拖到舞臺上
刪除包含原人物的其它所有圖層。此時, 時間軸應(yīng)該有一個圖層和一個包含人物動畫的影片剪輯元件。
您能夠創(chuàng)建的陰影有兩種。標(biāo)準(zhǔn)投影可在略偏于原始實例下方的位置創(chuàng)建陰影。這種效果通常沒有層次感, 類似于在墻上或其它平面上投下的陰影。如果您試圖獲得投射在地面上的陰影, 則其效果不太逼真。要實現(xiàn)更逼真的陰影效果, 您需要額外執(zhí)行一些簡單步驟。
復(fù)制該影片剪輯實例, 然后將其放置到原始實例的后面。 (可以將復(fù)制的實例放在同一圖層中并將其排列在原始實例的后面, 或?qū)⑵湔迟N到原始圖層下面的新圖層中。)
選擇復(fù)制的實例, 然后在屬性檢查器的“濾鏡”選項卡中, 從加號 (+) 菜單中選擇“投影” (見圖 49)。接下來, 將強(qiáng)度層級調(diào)整到 45% 左右, 并選擇“隱藏對象”。這會隱藏影片剪輯對象, 但會顯示“投影濾鏡”屬性。通過將“品質(zhì)”設(shè)置為“低”、“中”或“高”, 或通過修改模糊量、顏色、角度或模糊效果與原始圖形的距離, 可進(jìn)一步進(jìn)行調(diào)整。
圖 49. 應(yīng)用到復(fù)制的影片剪輯實例的“投影”濾鏡
為了防止該效果看起來過于類似在原始對象后面的平坦墻面上的投影, 可以使用“任意變形”工具來傾斜已應(yīng)用濾鏡的影片剪輯實例。此技巧需要進(jìn)行多次嘗試, 不斷修正錯誤, 然后才能成功應(yīng)用。擠壓和傾斜實例, 使其投影看起來好像是投射到地板上的影子 (見圖 50)。您可能需要重新定位此實例, 才能正確顯示其外觀。
圖 50. 復(fù)制的影片剪輯經(jīng)“任意變形”工具傾斜后的效果
測試影片, 您會看到逼真的效果。
將循環(huán)動畫與其它多個循環(huán)動畫相結(jié)合, 可以實現(xiàn)一些復(fù)雜的視覺效果, 如圖 51 所示 (這需要
Flash Player 8)。
圖 51. 使用“投影”濾鏡實現(xiàn)的 2.5D 效果示例
在此示例中, 您可以看到投影效果是如何將一個令人興奮的維度添加到動畫中的。此動畫是包含男孩與狗角色的循環(huán)動畫的一系列影片剪輯。在以后的文章中, 我將介紹小的動畫循環(huán)如何能夠使您的影片產(chǎn)生連貫的效果。
我希望本文能夠幫助您提高自己的 Flash 設(shè)計和動畫技能。還有更多能夠利用 Flash 實現(xiàn)的動畫技巧, 例如全動畫 (通常指逐幀播放的動畫) 、補間形狀以及視頻或 3D 動畫程序中的圖像序列。其它設(shè)計者和動畫制作者那里還有許多很好的插件, 能夠加快您的 Flash 工作流程。請等待介紹這些技巧和工具的新文章。
