我們來(lái)假設(shè)你在看到這篇教程之前，已經(jīng)對(duì)Flash的基礎(chǔ)動(dòng)畫(huà)有了一定程度的了解，這樣我們就不用花大段篇幅來(lái)解釋那些最基本的原理了。

　　就像你已經(jīng)知道的，F(xiàn)lash是一個(gè)基于矢量的程序。在Flash中，處理位圖（包括bitmap, jpeg, gif, png格式的圖像）最大的麻煩就在于，我們無(wú)法像操作矢量圖形那樣，熟練的操作位圖。比如說(shuō)，輸入一幅位圖圖像，用它來(lái)做最簡(jiǎn)單的形狀變化動(dòng)畫(huà)，就連這也是不可以的，更別說(shuō)其它的了。如果你試著把圖片拉伸，位圖的特性會(huì)使圖像產(chǎn)生像素化，圖像品質(zhì)會(huì)被降低。這些簡(jiǎn)單的操作對(duì)矢量圖像而言自然是不在話下，所以，我們?cè)鯓硬拍軐⑽粓D圖像轉(zhuǎn)化為矢量圖像呢？這個(gè)問(wèn)題我們可以交給Flash的“轉(zhuǎn)化位圖為矢量圖”（trace bitmap）功能來(lái)解決。

　　在這篇教程中我們?cè)敿?xì)解釋了轉(zhuǎn)化位圖為矢量圖這個(gè)功能，而且用它來(lái)創(chuàng)造從從一幅油畫(huà)到照片的變形效果。

　　轉(zhuǎn)化位圖

　　要想把一副位圖轉(zhuǎn)化為矢量圖像，只需將一個(gè)圖片的實(shí)例拖入主場(chǎng)景中，選擇它，再選擇修改>轉(zhuǎn)換位圖為矢量圖（Modify > Trace Bitmap）命令。轉(zhuǎn)換位圖的功能是檢查位圖圖像的顏色數(shù)量，顏色值相近的區(qū)域，被定義為近似形狀的矢量形狀，來(lái)替換位圖。這里，你需要知道的很重要的一點(diǎn)是，用于代替的矢量形狀僅僅是近似，而非完全相同。我們可以用轉(zhuǎn)換位圖對(duì)話框的一些選項(xiàng)來(lái)控制轉(zhuǎn)換的精細(xì)程度。（圖01）

圖01
　　顏色閾值（Color Threshold）：范圍從1到500。如果將兩個(gè)像素進(jìn)行比較，它們顏色值的差低于設(shè)定的顏色閾值，那么這兩個(gè)像素的顏色被認(rèn)為是相同的。所以，如果加大了閾值，那么轉(zhuǎn)換來(lái)的矢量圖的顏色就會(huì)減少。

　　最小區(qū)域（Minimum Area）：值介于1和1000之間。用于設(shè)定指定像素顏色時(shí)需要考慮的周?chē)袼氐臄?shù)量，更確切的說(shuō)，最小區(qū)域是跟蹤位圖時(shí)平均不同的顏色值。

　　曲線擬和（Curve Fit）：下拉列表的選項(xiàng)從像素到非常平滑，決定了繪制輪廓和區(qū)域的貼合程度。

　　角閾值（Corner Threshold）：下拉列表選項(xiàng)從較多轉(zhuǎn)角到較少轉(zhuǎn)角，它決定了保留銳利邊緣還是進(jìn)行平滑處理。

　　還有一點(diǎn)需要注意：如果你增加了轉(zhuǎn)換的精細(xì)度，那么形成的矢量圖像的復(fù)雜性也會(huì)隨之增加。一般來(lái)說(shuō)，將位圖轉(zhuǎn)換為矢量圖像可以減小文件大小，但如果包含復(fù)雜形狀和太多的顏色，轉(zhuǎn)換后的矢量圖像的大小反而會(huì)比原來(lái)的位圖文件還要大。從另一方面來(lái)說(shuō)，對(duì)復(fù)雜的矢量對(duì)象而言，即使是最簡(jiǎn)單的操作，都會(huì)耗費(fèi)大量的系統(tǒng)資源。

　　對(duì)于要轉(zhuǎn)換為矢量圖形的位圖來(lái)說(shuō)，往往是連續(xù)色調(diào)的圖像轉(zhuǎn)換的效果較為理想，特別是那些logo圖像。比如說(shuō)，我們想改變下圖例子中這個(gè)logo的形狀。首先，導(dǎo)入位圖圖像，然后用不同的設(shè)置將圖像“矢量化”。仔細(xì)觀察，你會(huì)發(fā)現(xiàn)，例子中的第一個(gè)圖形不太精確，在一些地方看起來(lái)有些平板。第三個(gè)圖形是用Flash中的選取工具稍微改變了一下形狀。在這里，我們可以隨心所欲的用繪圖工具來(lái)改變矢量圖形的形狀。（圖02）

圖02
　　效果

　　當(dāng)你對(duì)導(dǎo)入的圖片應(yīng)用將位圖轉(zhuǎn)換為矢量圖命令時(shí)，一些有趣的變化發(fā)生了。一幅典型的照片不像那些單色的logo，它包含很多不同的顏色區(qū)域。在跟蹤位圖之后，照片會(huì)被許多顏色塊表現(xiàn)出來(lái)。隨著轉(zhuǎn)換設(shè)置的不同，這些塊看起來(lái)會(huì)像是用畫(huà)筆涂抹在畫(huà)布上一樣。我們的目的，就是創(chuàng)建從油畫(huà)到照片之間的變形效果。

　　過(guò)程

　　找到一幅你喜歡的照片，如果需要，在導(dǎo)入Flash之前對(duì)之調(diào)整大小。在將調(diào)整大小后的照片導(dǎo)入之前，盡量減少Flash中的文件進(jìn)程。

　　新建一個(gè)影片。建立兩個(gè)層，將頂部的層命名為photo，底部的命名為paint（圖03）。我們先從油畫(huà)效果這部分開(kāi)始。選擇文件>導(dǎo)入到庫(kù)命令，選擇照片所在的文件路徑，將其導(dǎo)入到庫(kù)中。從庫(kù)中把圖片拖到paint層的第一幀上。將文檔大小設(shè)為320×240像素（導(dǎo)入的位圖大?。?，按下Ctrl+K，使用對(duì)齊工具，將圖片對(duì)齊到舞臺(tái)的中心。現(xiàn)在，確定圖片被選擇，運(yùn)行將位圖轉(zhuǎn)換為矢量圖命令。每張圖片的情況不同，所以每次你要根據(jù)圖片采用不同的設(shè)置。有了undo命令，你可以放心的試驗(yàn)不同的數(shù)值，直到圖像呈現(xiàn)出你滿意的效果。對(duì)我們這副圖像而言，我們采用了默認(rèn)的設(shè)置。當(dāng)圖像轉(zhuǎn)換為矢量格式之后，你可以使用繪圖工具修改個(gè)別區(qū)域。這個(gè)油畫(huà)效果的部分就作為動(dòng)畫(huà)的背景。（圖04）

圖03

圖04
　　現(xiàn)在我們來(lái)創(chuàng)建照片效果。新建一個(gè)圖形元件，命名為photo。從庫(kù)中將位圖拖入到圖形元件編輯窗口中，用對(duì)齊工具對(duì)齊到中心?，F(xiàn)在，按Ctrl+E，完成對(duì)元件的編輯，回到主場(chǎng)景的編輯窗口中。從庫(kù)中將圖形元件photo拖到photo層的第一幀中，同樣用對(duì)齊工具居中對(duì)齊。這個(gè)圖形元件將作為動(dòng)畫(huà)的前景。對(duì)位圖是無(wú)法直接改變透明度的，所以我們需要將位圖圖片轉(zhuǎn)換為圖形元件。（圖05）

圖05
　　準(zhǔn)備工作完成之后，我們就可以著手制作動(dòng)畫(huà)了。油畫(huà)背景的透明度保持不變。我們打算通過(guò)控制疊放在油畫(huà)上面，photo元件的透明度來(lái)控制“變形”效果。選擇photo元件，在效果面板中將其不透明度設(shè)為0％，或是一個(gè)很小的值（圖06）。

圖06
　　現(xiàn)在在時(shí)間軸上，間隔若干幀創(chuàng)建一個(gè)關(guān)鍵幀，將這一幀的不透明度設(shè)為100％，間隔越大，畫(huà)面的過(guò)渡就越細(xì)致。在透明度為0％（或很低）和100％的兩幀之間創(chuàng)建補(bǔ)間動(dòng)畫(huà)。這樣，照片會(huì)從無(wú)到有慢慢顯示出來(lái)。在paint層中，在上一層插入關(guān)鍵幀的同一幀處，插入一個(gè)空白關(guān)鍵幀。這樣，動(dòng)畫(huà)中就不會(huì)出現(xiàn)白色的空白了。動(dòng)畫(huà)從一幅油畫(huà)漸漸過(guò)渡到真實(shí)的照片。同樣道理，將第一幀的不透明度設(shè)為100％，而將最后一幀的不透明度設(shè)為0％，這樣，動(dòng)畫(huà)將從照片過(guò)渡到油畫(huà)效果。

　　其它需要考慮的

　　如果你覺(jué)得動(dòng)畫(huà)的速度過(guò)慢或有延遲的現(xiàn)象，就試著降低轉(zhuǎn)換位圖時(shí)的精細(xì)度，如果你覺(jué)得不能在畫(huà)面質(zhì)量和大小之間找到適當(dāng)?shù)钠胶?，就在轉(zhuǎn)換位圖之后接取屏幕圖像，優(yōu)化之后存儲(chǔ)為位圖，用它代替我們矢量化的位圖來(lái)作為動(dòng)畫(huà)的背景。用捕屏圖像代替跟蹤位圖的另一個(gè)原因是，這樣可以減小影片大小。又可能是因?yàn)椤笆噶炕膱D像”太復(fù)雜了，與普通的位圖相比，用掉了更多的空間。在這個(gè)例子中，如果用捕屏圖像的話，可以使文件尺寸稍微小上一點(diǎn)。還記得我們的例子變化是多么細(xì)微嗎？如果將動(dòng)畫(huà)速度提高，并用播放一次代替循環(huán)，那么我們可以使動(dòng)畫(huà)更容易觀察。要知道，對(duì)每個(gè)不同的影片來(lái)說(shuō)，不同的設(shè)置會(huì)帶來(lái)不同的效果，要通過(guò)試驗(yàn)才知道哪種更合適。

　　最后是關(guān)于變形的提示。其實(shí)這只是一種效果。從假到真的過(guò)程制造了戲劇性的變化而又不會(huì)太過(guò)火。你可以把它看作是一個(gè)制作Flash影片特效的“工具”，但不要把自己局限在這樣的效果中，你可以做的還多著呢！

　　其實(shí)，把位圖轉(zhuǎn)換為矢量圖的功能并不止你看到的這些。接下來(lái)，我們將繼續(xù)探索跟蹤位圖的其它作用。

　　藝術(shù)手法

　　眼下一種非常流行的效果就是雙色調(diào)的像剪影一樣的圖像。看起來(lái)雖然簡(jiǎn)單，但同樣可以增加藝術(shù)氣息。egomedia.com 就是這種效果的一個(gè)很好的例子。

　　在從油畫(huà)到照片的效果中，我們采用了較低的顏色閾值，以盡可能的保留顏色數(shù)量。而在這種剪影效果中，我們的目的卻是要消除圖像的絕大部分細(xì)節(jié)，所以我們將顏色閾值設(shè)為一個(gè)較高的值。下面的這個(gè)例子中，顏色閾值被設(shè)為400。也許你還需要增加最小區(qū)域的值來(lái)得到一種更好的平均顏色，例如這個(gè)例子中我們將最小區(qū)域設(shè)為1000像素。你可以以這些參數(shù)為起點(diǎn)，根據(jù)不同的圖片繼續(xù)輕微調(diào)整，直到最終結(jié)果滿意為止。最后一步是簡(jiǎn)單的改變圖像的顏色，按你的需要改變。比如在這里，我們用一種亮度很高的顏色作為高光部分，而用一種較暗的顏色作為陰影。（圖07）

圖07
　　數(shù)字靈感

　　將位圖轉(zhuǎn)換為矢量圖的一個(gè)基礎(chǔ)前提是，有些東西是無(wú)法預(yù)知的。也就是說(shuō)，轉(zhuǎn)換的結(jié)果并不完全像我們想象中的那樣。這里，我們拿一張隨機(jī)的抽象圖片作為例子，將它轉(zhuǎn)換為矢量圖，來(lái)看看圖中的哪些部分可以“幸免于難”，這是一種很自然的選擇方法。你可以用設(shè)置控制希望保持的細(xì)節(jié)數(shù)量。在這個(gè)例子中，我們將顏色與閾值設(shè)為100，最小區(qū)域?yàn)?0像素，曲線擬合為平滑。結(jié)果看起來(lái)像是一些雜亂無(wú)章的斑塊，但我卻認(rèn)為它很有特色！如果你安裝了Adobe Illustrator，可以用文件>輸入圖像命令，把它導(dǎo)入到Illustrator中，用.ai的格式保存起來(lái)。

　　在Illustrator中，將圖像拉伸，找出明顯的形狀。你也許會(huì)奇怪，那有什么用？嗯，回憶一下，在你以前的創(chuàng)作過(guò)程中，有沒(méi)有被有關(guān)形狀的問(wèn)題困住過(guò)？是否有絞盡腦汁的企圖挖出一個(gè)完美的形狀來(lái)？用這個(gè)簡(jiǎn)單的方法，我們就能輕易的得到有用的形狀，或是從中得到創(chuàng)作的靈感。你知道，靈感總是可遇不可求的，正如位圖轉(zhuǎn)換為矢量圖時(shí)的隨機(jī)性一樣。你也可以拋開(kāi)Illustrator，用對(duì)你來(lái)說(shuō)更輕松的方法改變形狀。讓我們?cè)俅胃兄xSteve在他的網(wǎng)站上為我們提供的靈感。（圖08）

圖08
　　清除細(xì)節(jié)

　　有時(shí)候，我們要從圖片上清除一些不需要的細(xì)節(jié)。就像上一個(gè)例子中，我們可以通過(guò)設(shè)置一個(gè)較高的顏色閾值，輕易的達(dá)到目的。有不少很好的理由使你想這么做。也許你需要為什么東西設(shè)置背景，但圖像上的細(xì)節(jié)會(huì)使瀏覽者的注意力被吸引到背景而不是真正的重點(diǎn)上。轉(zhuǎn)換位圖可以消除背景圖像中的細(xì)節(jié)，讓你把更多的注意力集中在圖像的主要部分。（圖09）

圖09
　　將位圖轉(zhuǎn)換為矢量圖的用法還在不斷地為人發(fā)現(xiàn)?？梢钥隙ǖ囊稽c(diǎn)是，這是一個(gè)非常有用的工具，僅僅改變?cè)O(shè)置值，就可以被用于各種途徑。我有意忽略了它在Flash環(huán)境中的直接用法，相信你可以把它結(jié)合入你的Flash影片中。要知道，跟蹤位圖技術(shù)僅僅是Flash技術(shù)種種變化之一，你可以把形成的矢量圖輸入到Illustrator中，或是在Photoshop中還原到位圖形式，那就看你的需要了。