圖形柵格化(共20頁)

1、本帖最后(zuhu)由 hbweb 于 2012-2-28 18:12 編輯要求(yoqi)：必備(b bi)知識： 要有使用FlashProfessional工作區(qū)的常識，并且必須對在Flash中使用ActionScript3的一些概念有一個(gè)基本的了解。用戶級別 所有人必備產(chǎn)品： Flash Professional( HYPERLINK /go/tryflash/ t _blank 在這里下載試用版)例子文件： HYPERLINK /pub/developer/flash/image_rasterization.zip t _blank image_rasterization.zip由Ad

2、obeFlash Professional已經(jīng)發(fā)展成一個(gè)強(qiáng)大的應(yīng)用程序和游戲開發(fā)環(huán)境，所以有必要去了解媒介的特色以及相關(guān)的性能優(yōu)化。使用矢量圖形和位圖是Flash中可視化設(shè)計(jì)中的一個(gè)基礎(chǔ)內(nèi)容。圖形光柵化指的是為了性能優(yōu)化而將矢量圖形轉(zhuǎn)化為位圖這么一個(gè)過程。本文研究的是贊成和反對使用矢量圖形和位圖的依據(jù)，以及目前已有的用于圖形光柵化的操作方法。你將可以找到很多有關(guān)這方面內(nèi)容的簡單的練習(xí)，這些練習(xí)舉例說明了怎樣在創(chuàng)作時(shí)和運(yùn)行時(shí)去設(shè)置以及使用光柵化特性（點(diǎn)擊圖1）。同時(shí)，你也將學(xué)到怎樣使用新的導(dǎo)出為位圖的特性-以及學(xué)會(huì)如何在ActionScript 3中使用BitmapData對象。 圖1.本文練習(xí)

3、中描繪(miohu)的位圖示例理解(lji)矢量圖和位圖的概念Flash中的圖片有兩種格式，分別是矢量圖以及位圖。每一種格式都有它的優(yōu)缺點(diǎn)。在這部分內(nèi)容中，你將會(huì)學(xué)習(xí)每一種格式，了解贊成和反對每一種格式的理由以及知道(zh do)在什么情況下該選用哪種格式的圖片。什么是矢量圖？矢量圖就是一種由一連串的點(diǎn)同時(shí)用線條將這些點(diǎn)連接起來所組成的形狀。（如圖2）例如，一個(gè)正方形是由四個(gè)角上的點(diǎn)以及用線條將這些點(diǎn)連接起來所組成的圖形。一個(gè)圓同樣的也有四個(gè)點(diǎn)，但是連接這些點(diǎn)的線條不是直線而是曲線。一張矢量圖有一個(gè)填充色以及一個(gè)輪廓（描邊）顏色。通常一張矢量圖是由數(shù)十個(gè)或者更多的向量形狀重疊組合而成。 圖2.

4、定義一個(gè)矢量(shling)正方形以及一個(gè)矢量圓的點(diǎn)和線條矢量圖形的優(yōu)點(diǎn)是它的體積很小并且可以進(jìn)行無限縮放。不僅如此，矢量圖形中的點(diǎn)和線都是完全(wnqun)由數(shù)學(xué)公式定義的,所以它們與分辨率無關(guān)。因此(ync)，矢量圖體積很小并且可以對它的尺寸進(jìn)行無限放大或者縮小但整張圖不失真。同時(shí)矢量圖還可以在需要的時(shí)候進(jìn)行編輯和修改。矢量圖的一個(gè)缺點(diǎn)是在某些情況下需要消耗大量的處理器資源。矢量圖形由CPU在運(yùn)行時(shí)進(jìn)行渲染并且在圖形發(fā)生改變的時(shí)候就必須要重新進(jìn)行渲染。例如，當(dāng)一個(gè)矢量圖在一個(gè)補(bǔ)間動(dòng)畫中使用的時(shí)候，或者如果舞臺上的矢量圖形與補(bǔ)間動(dòng)畫重疊了，那么這個(gè)圖形就要在每一幀中再次對它進(jìn)行渲染，這樣的話

5、才能在屏幕上顯示出變化的部分。很多時(shí)下的臺式機(jī)和手提電腦對復(fù)雜矢量圖形的渲染并不存在任何問題，但是要知道移動(dòng)設(shè)備可能會(huì)顯露出明顯的性能問題。當(dāng)你要?jiǎng)?chuàng)建可以自由縮放的圖形，并且其中要使用到可編輯文本框和圖形，或者當(dāng)動(dòng)畫中需要一些彎曲特性的時(shí)候，那么使用矢量圖形就應(yīng)該是你的最佳選擇。小貼士：FlashProfessional中的繪圖工具天生就可以用來繪制矢量圖形，但是在很多情況下，最好的方法是將圖片以位圖格式發(fā)布，這樣可以提升性能。什么是位圖？位圖就是一張由很多稱為像素的點(diǎn)所組成的圖片（如圖3）。每個(gè)像素包含一種顏色。所有帶有顏色的像素組合在一起就形成了一張圖片。每英寸上的像素點(diǎn)的個(gè)數(shù)就決定了這張

6、圖片的分辨率的大小。一般電腦顯示器的分辨率是72dpi（dots per inch每英寸上有多少個(gè)點(diǎn)）。 圖3.一張位圖中顏色像素(xin s)的放大圖位圖的優(yōu)點(diǎn)(yudin)是不需要經(jīng)過CPU的渲染就可以顯示出非常細(xì)膩(xn)逼真的圖形內(nèi)容。一旦位圖經(jīng)過了加載并進(jìn)行顯示，就不需要再次對它進(jìn)行渲染了。位圖的缺點(diǎn)是它的體積非常大。分辨率，色彩數(shù)，壓縮技術(shù)以及位圖的尺寸都影響到了圖像的文件大小。同時(shí)，由于位圖的清晰度是由分辨率決定的，所以不可能在不失真的情況下將位圖放大到更大的尺寸。在Flash中不能編輯位圖；你可以使用像Photoshop或者Fireworks這樣的工具來編輯你的位圖圖像，然后再

7、將編輯過后的位圖導(dǎo)入到Flsah中?？梢詫⑽粓D用在背景圖以及那些不需要進(jìn)行編輯或者縮放的靜態(tài)圖像上。同樣，由于性能的原因以及移動(dòng)設(shè)備的可移植性問題，只要有可能，就應(yīng)當(dāng)考慮使用位圖或者光柵化技術(shù)。小貼士：你可以在繪制圖片或者運(yùn)行時(shí)將矢量圖形光柵化，將它轉(zhuǎn)換為位圖圖像，用這樣一種策略來優(yōu)化可編輯的矢量圖形。典型的性能問題以及它們的解決方法根據(jù)Flash影片的復(fù)雜程度，你可能會(huì)發(fā)現(xiàn)有的動(dòng)畫和頁面過渡顯得有點(diǎn)緩慢或者斷斷續(xù)續(xù)，當(dāng)很多重疊了的矢量圖在每一幀都要進(jìn)行重畫的時(shí)候，剛才那種情況就會(huì)發(fā)生。結(jié)果可能導(dǎo)致不一致的幀速以及在向量繪制時(shí)的間歇性的停頓。下面是一些要考慮的事情，這些事情可能有助于提高工程的

8、性能：1.給背景圖使用位圖。動(dòng)畫經(jīng)常是在大的背景圖上面進(jìn)行顯示。對背景使用位圖將有助于降低(jingd)渲染圖像時(shí)的資源消耗以及使CPU的使用率降到最少。2.大面積的動(dòng)畫更可能導(dǎo)致(dozh)性能問題。試著盡可能地將動(dòng)畫的顯示面積降到最小。3.使用(shyng)了透明效果（alpha）的動(dòng)畫和復(fù)雜圖像比不透明的圖像需要消耗更多的CPU資源。4.使用了濾鏡和混合模式的動(dòng)畫以及復(fù)雜圖形比那些不使用這些效果的動(dòng)畫和圖形需要消耗更多的CPU資源。使用濾鏡和混合模式要非常謹(jǐn)慎。同樣地，在使用濾鏡的時(shí)候盡量將它設(shè)置為低品質(zhì)。5.如果可能的話，避免顯示經(jīng)常停頓的動(dòng)畫。6.在Flash中使用光柵化特性，從而在

9、創(chuàng)作期間或者在運(yùn)行期間將靜態(tài)圖像轉(zhuǎn)換成位圖。小貼士：在你優(yōu)化你的工程時(shí)，你可以使用基于ActionScript的檢驗(yàn)程序來檢查你的影片的性能并且與影片沒有優(yōu)化之前的內(nèi)存消耗做一個(gè)比對?？纯碨haneMcCarthys的 HYPERLINK /2008/10/06/as3-swf-profiler/ t _blank AS3SWF Profiler，一個(gè)使用起來很簡單的可操作選項(xiàng)。矢量圖形光柵化的好處FlashProfessional和ActionScript3提供了幾個(gè)選項(xiàng)來將矢量圖轉(zhuǎn)化為位圖。使用這些特性的好處是你經(jīng)?？梢员苊馇懊嫣岬竭^的性能陷阱，同時(shí)也讓你的圖片在創(chuàng)作期間一直處于可編輯狀態(tài)

10、。最終你的工程將會(huì)具有更少的CPU消耗，平滑的動(dòng)畫效果，以及一致的幀速，同時(shí)還能提升性能-尤其是對那些要移植到移動(dòng)設(shè)備上的應(yīng)用程序。FlashProfessional和ActionScript 3中的可選項(xiàng)本文的下面這些部分將帶你學(xué)習(xí)一些概念以及例子，它們很好地展現(xiàn)了Flash中的光柵化特性。你將學(xué)習(xí)到下面這些創(chuàng)作期間的特性：1.緩存為位圖2.導(dǎo)出為位圖3.轉(zhuǎn)換為位圖并且將選擇項(xiàng)轉(zhuǎn)換為位圖 你也將學(xué)到這些運(yùn)行期間的ActionScript特性1.緩存為位圖2.Bitmap對象3.BitmapData對象使用創(chuàng)作期間的光柵化特性 Flash Professional CS5.5引入了導(dǎo)出為位圖的

11、特性作為一項(xiàng)改進(jìn)了的工作流程來在SWF文件中以位圖的形式發(fā)布圖片。這個(gè)特性，結(jié)合了前面的緩存為位圖以及轉(zhuǎn)換為位圖的特性，給在FLA文件中進(jìn)行可視化創(chuàng)作提供了幾個(gè)強(qiáng)大的，簡單易用的選項(xiàng)。這部分內(nèi)容(nirng)提供了在Flash中創(chuàng)作時(shí)光柵化特性(txng)的一個(gè)概述。位圖緩存位圖緩存特性(txng)是Flash中很早就有的一個(gè)光柵化特性。使用位圖緩存可以讓FlashPlayer在運(yùn)行時(shí)將一個(gè)元件作為位圖儲存到RAM存儲器中。位圖緩存特性使用起來很簡單。將一個(gè)圖像轉(zhuǎn)換為元件，同時(shí)確定它已經(jīng)被選中了，然后在屬性面板中找到顯示區(qū)塊，選擇緩存為位圖渲染項(xiàng)。（如圖4）圖4當(dāng)一個(gè)元件被選中的時(shí)候，屬性面板

12、中的緩存為位圖選項(xiàng)這個(gè)方法里面，位圖緩存允許FlashPlayer來緩存圖像，這樣就可以避免在每一幀中都要進(jìn)行重新渲染的問題。這個(gè)特性在沒有動(dòng)畫，沒有濾鏡或者沒有應(yīng)用混合模式的情況下使用圖像時(shí)運(yùn)行的最為完美。小貼士：如果一個(gè)補(bǔ)間動(dòng)畫中含有縮放或者旋轉(zhuǎn)的動(dòng)作，而你使用的圖像是補(bǔ)間動(dòng)畫中的一部分，那么緩存為位圖選項(xiàng)實(shí)際上會(huì)增加CPU消耗。包含復(fù)雜變換的動(dòng)畫將會(huì)在每一幀中重新加載位圖-對它們進(jìn)行緩存比起單純地只使用原來的矢量圖需要消耗更多的CPU資源。轉(zhuǎn)換為位圖：當(dāng)你想在創(chuàng)作期間將矢量圖轉(zhuǎn)換為真正的位圖時(shí)，轉(zhuǎn)換為位圖以及將選擇項(xiàng)轉(zhuǎn)換為位圖這兩個(gè)特性會(huì)讓這變得非常容易。元件和繪圖對象都可以使用這個(gè)特性

13、。要使用這個(gè)特性，就要選擇舞臺上的一個(gè)或多個(gè)圖形，然后選擇修改-轉(zhuǎn)換為位圖。你也可以在已選擇的對象上右擊，并且在彈出菜單上選擇轉(zhuǎn)換為位圖選項(xiàng)。 轉(zhuǎn)換為位圖的特性就像它的字面意思所表達(dá)的一樣，根據(jù)所選擇的項(xiàng)目在庫中創(chuàng)建出一個(gè)新的位圖文件，你可以選擇一個(gè)圖形，將它轉(zhuǎn)換為位圖，然后在一個(gè)圖形編輯軟件中對它進(jìn)行編輯，例如PhotoShop（如圖5）。在創(chuàng)建了位圖之后，元件作為獨(dú)立的可編輯對象仍然在庫中保存著。繪圖對象在將它們轉(zhuǎn)換為位圖之后就不可以再進(jìn)行編輯了。 圖5庫中被選中位圖的右鍵菜單(ci dn)包含了“用AdobePhotoshopCS5編輯(binj)”選項(xiàng)當(dāng)你想創(chuàng)建一個(gè)實(shí)際的位圖文件，文件

14、中的位圖可以在其他的繪圖軟件中進(jìn)行編輯并且作為外部位圖圖像進(jìn)行保存，那就可以使用轉(zhuǎn)換(zhunhun)為位圖特性。小貼士：這個(gè)方法的一個(gè)好處是，在庫中會(huì)生成一個(gè)位圖項(xiàng)。在位圖上雙擊，彈出位圖屬性對話框，你可以看到位圖圖像的詳細(xì)信息并對其中的壓縮設(shè)置項(xiàng)進(jìn)行調(diào)整。導(dǎo)出為位圖新的導(dǎo)出為位圖屬性允許你在創(chuàng)作時(shí)將任意的影片剪輯或者按鈕元件轉(zhuǎn)換成位圖。（如圖6）當(dāng)選擇了這個(gè)選項(xiàng)的時(shí)候，元件的第一幀就以位圖顯示。你可以將背景設(shè)置為透明的或者用一種特殊的背景色將它設(shè)置為不透明的。當(dāng)查看元件實(shí)例的時(shí)候，你可以看到第一幀顯示為位圖，當(dāng)你對元件的時(shí)間軸進(jìn)行編輯的時(shí)候，你能看到幀動(dòng)作，幀數(shù)以及關(guān)鍵幀，它們和你預(yù)期的一

15、樣的。不同于轉(zhuǎn)換為位圖特性，導(dǎo)出為位圖特性可以讓元件和它的內(nèi)容在FLA文件里面依然是可編輯的。這意味著你可以繼續(xù)編輯并且按需要改變元件的內(nèi)容，注意你創(chuàng)建文件時(shí)的位圖，在你發(fā)布影片的同時(shí)從第一幀起發(fā)布這個(gè)位圖。當(dāng)你使用導(dǎo)出為位圖這個(gè)特性的時(shí)候，并不會(huì)在庫中創(chuàng)建一個(gè)獨(dú)立的位圖。 圖6當(dāng)你選中了一個(gè)影片剪輯或則一個(gè)按鈕元件的時(shí)候，可以在屬性面板中選擇導(dǎo)出為位圖選項(xiàng)導(dǎo)出為位圖特性使你在應(yīng)用程序或者廣告橫幅中重新設(shè)計(jì)圖片時(shí)變得更簡單。當(dāng)你要在應(yīng)用程序中使用插圖，廣告用的圖片或者UI圖片時(shí)，則使用這個(gè)方法，這些圖片會(huì)以不同的大小在屏幕上顯示。例如，在FLA文件中使用導(dǎo)出為位圖特性來按需要重置背景圖片和標(biāo)志

16、的大小，同時(shí)在你創(chuàng)建的SWF文件中將元件元素作為靜態(tài)位圖發(fā)布。小貼士：將導(dǎo)出為位圖特性和工程面板中的創(chuàng)作期間共享資源特性結(jié)合起來，用來對工程中要重用以及調(diào)整大小的共有(n yu)資源進(jìn)行分類，這將是一個(gè)非常棒的方法。練習(xí)(linx)1：使用導(dǎo)出為位圖以及轉(zhuǎn)換(zhunhun)為位圖特性在最簡單的案例中，你會(huì)發(fā)現(xiàn)你自己用了一張非常大的矢量圖來用作背景，而你想將這個(gè)背景發(fā)布為一張位圖。這樣做將會(huì)導(dǎo)致文件大小變大，但是這可以使動(dòng)畫或者其它重疊的內(nèi)容顯示起來更加平滑。在這個(gè)例子中，你將導(dǎo)入一張上面有很多人的相片，并且將它設(shè)置成你的影片背景圖案。為了好玩以及獲取一個(gè)更加特別的效果，你將使用Trace B

17、itmap命令將這張圖片轉(zhuǎn)換成一連串的矢量圖，然后將調(diào)整過的照片設(shè)置成導(dǎo)出為位圖。你也可以試著使用轉(zhuǎn)換為位圖選項(xiàng)來進(jìn)行更深一層次的編輯。跟著下面這些步驟來設(shè)置你的工程文件夾： 1如果你還沒有下載在本文開始時(shí)提供的源文件中的bitmap_exercise.zip文件，那么請你先進(jìn)行下載； 2對這個(gè)例子文件進(jìn)行解壓，并將它保存到桌面。在你使用的時(shí)候，你將從資源文件夾中打開這個(gè)示例文件，并且在你完成這個(gè)例子的時(shí)候?qū)⒛銊?chuàng)建的文件保存到bitmap_exercises文件夾里面。 3下載bitmap_exercises_completed.zip文件，查看其中已經(jīng)做好了的同一個(gè)工程文件，并將它和你的文件

18、進(jìn)行對比。跟著下面這些步驟來設(shè)置你的背景圖片：1.創(chuàng)建一個(gè)新的ActionScript 3 FLA文件，并將它保存到你的工程文件夾下面，命名為exercise1.fla.2.單擊舞臺，這樣就可以在屬性面板中訪問到舞臺的屬性。將舞臺大小設(shè)置為1024像素x600像素。3.選擇文件-導(dǎo)入-導(dǎo)入到舞臺，然后同一文件夾下的導(dǎo)入background.jpg圖片，如果你喜歡的話，你可以導(dǎo)入你自己的圖片。4.將你的圖片的X,Y坐標(biāo)設(shè)置為0,0.（靠近左邊）。5選中圖片(tpin)，選擇修改-位圖-轉(zhuǎn)換位圖。在轉(zhuǎn)換位圖對話框中調(diào)整一些設(shè)置(shzh)，然后點(diǎn)擊預(yù)覽按鈕來查看效果。（如圖7）這個(gè)操作本質(zhì)上將(s

19、hngjing)位圖分離成了一組簡單的矢量圖。點(diǎn)擊OK來添加效果。 圖7在轉(zhuǎn)換為位圖的對話框中輸入顏色臨界值1在矢量圖依然被選中的時(shí)候，按下F8鍵來將矢量圖轉(zhuǎn)化為一個(gè)新的影片剪輯元件，并命名為Background。這一步是必須要有的，主要是為了使用導(dǎo)出為位圖的特性；2當(dāng)選中了舞臺上的新的影片剪輯元件實(shí)例的時(shí)候，在屬性面板中將渲染項(xiàng)設(shè)置為導(dǎo)出為位圖。你可以將位圖背景屬性設(shè)置為透明，但是要知道如果圖片包含透明區(qū)域，你也可以設(shè)置為一種不透明的背景色。3在屬性面板中，將alpha屬性值改為25%，主要是為了創(chuàng)建一個(gè)水印的背景效果。如果你想的話，你可以通過將背景元素放大來更近距離地顯示出照片中的每一個(gè)人

20、。由于背景現(xiàn)在由矢量圖形組成，在你縮放背景的時(shí)候你并不需要擔(dān)心圖片會(huì)失真，因?yàn)槭噶繄D并不取決于分辨率的大小。4選擇控制-測試影片來發(fā)布SWF文件并且檢查你的成果；5保存FLA文件。跟著下面的步驟在Flash外部對位圖文件進(jìn)行編輯1假設(shè)你想保存這張經(jīng)過多色調(diào)分色印的圖片，并且在Photoshop或者其它的圖形編輯工具中進(jìn)行編輯。只要選擇這個(gè)元件實(shí)例，右擊它，然后從彈出菜單中選擇轉(zhuǎn)換為位圖選項(xiàng)；2注意舞臺上的實(shí)例被新的剛剛添加到庫中的Bitmap 1文件所替代了；3右擊庫中的Bitmap 1對象，在彈出菜單中選擇在Adobe Photoshop CS5中進(jìn)行編輯或者在.軟件中進(jìn)行編輯選項(xiàng)，從而將位

21、圖發(fā)送到了外部的圖形編輯工具中。當(dāng)你在Photoshop中打開這個(gè)文件的時(shí)候，做一些編輯工作，然后保存，在Flash中的文件也會(huì)自動(dòng)進(jìn)行更新。在Photoshop中，你可以選擇文件-另存為到桌面上，來保存位圖文件的一份副本，以便在其它的工程中再次使用。練習(xí)(linx)2：為廣告項(xiàng)目創(chuàng)建一個(gè)(y )可變大小的模板一個(gè)更加復(fù)雜的情況可能涉及到在不同的工程項(xiàng)目中使用不同背景圖片尺寸的問題。例如，如果你正在設(shè)計(jì)一個(gè)網(wǎng)頁廣告，你可能會(huì)被分派去設(shè)計(jì)一個(gè)標(biāo)語和商標(biāo)的動(dòng)畫，這個(gè)動(dòng)畫要能在不同標(biāo)準(zhǔn)(biozhn)的顯示器上進(jìn)行顯示?；蛘吣憧赡芤_發(fā)一個(gè)游戲或者應(yīng)用軟件，并且要將它們進(jìn)行移植，根據(jù)網(wǎng)絡(luò)或者移動(dòng)設(shè)備

22、的配置需要來適應(yīng)不同的屏幕尺寸。在這個(gè)練習(xí)中，你將設(shè)計(jì)一個(gè)可以用來開發(fā)不同尺寸的網(wǎng)頁廣告的模板，這些廣告使用相同的背景圖。在這個(gè)例子當(dāng)中，最好將模板中文件的大小保持在40K以下。為了能夠達(dá)到這個(gè)要求，你要在illustrator中創(chuàng)建一張可縮放的圖片，然后使用這張圖片。主要為了在每個(gè)網(wǎng)頁廣告中都可以將這張圖片當(dāng)做矢量圖來進(jìn)行復(fù)制和調(diào)整大小的操作，但是依然將背景圖發(fā)布為位圖格式。跟著下面這些步驟來設(shè)置廣告橫幅的模板：1.創(chuàng)建一個(gè)ActionScript 3 FLA文件，并且將它命名為exercise2.fla保存到工程文件夾中。2.將舞臺的尺寸設(shè)置為300 x250像素大小。3.將默認(rèn)的圖層1重

23、命名為background，并且在它上面創(chuàng)建一個(gè)新的圖層，命名為border。4.選中border圖層，在舞臺的邊緣附近畫一條1像素的黑色輪廓線，將border圖層鎖定；5.選中background圖層，選擇文件-導(dǎo)入-導(dǎo)入到舞臺。瀏覽并選擇同一文件夾下的pattern.ai文件，然后選擇打開從而導(dǎo)入文件。在導(dǎo)入到舞臺對話框中，點(diǎn)擊OK來接受默認(rèn)的illustrator導(dǎo)入設(shè)置。注意在導(dǎo)入了文件之后，圓形圖案就會(huì)在舞臺上顯示出來。6.選擇圓形圖片并且將它放置到舞臺的左上方，將它的坐標(biāo)設(shè)置為0,0。按下F8鍵來將這張圖片轉(zhuǎn)換為一個(gè)影片剪輯元件，并且命名為Background。這一步讓你可以按需要

24、對圖片進(jìn)行調(diào)整大小以及復(fù)制的操作，同時(shí)只要使用導(dǎo)出為位圖特性一次，就可以將它用作背景實(shí)例了。7雙擊這個(gè)位圖實(shí)例從而可以在時(shí)間軸上對它進(jìn)行編輯。按需要對這個(gè)圖片進(jìn)行縮放以及復(fù)制來覆蓋整個(gè)舞臺區(qū)域。8點(diǎn)擊場景1的鏈接返回到主時(shí)間軸，選擇這個(gè)背景實(shí)例，在選中它的時(shí)候，選中這個(gè)位圖實(shí)例，在它被選中的時(shí)候，在屬性面板中選擇導(dǎo)出為位圖選項(xiàng)。9選擇控制-測試影片來檢查你的成果。在SWF文件仍然被選中的時(shí)候，選擇查看-頻率分析器（在菜單欄的上面）。頻率分析器面板顯示了并且允許你查看這個(gè)影片的大小（如圖8）。使用這個(gè)方法來快速地查看你的文件大小，主要是為了使模板的大小保持在10k到20k之間（或者更少）。10保

25、存文件。 圖8使用頻率分析器來檢查廣告(gunggo)模板的SWF文件(wnjin)小貼士：在使用導(dǎo)出為位圖特性的時(shí)候沒有辦法(bnf)去控制生成位圖的壓縮設(shè)置。在你設(shè)計(jì)模板的時(shí)候使用頻率分析器來檢查你的SWF的文件大小。如果你發(fā)現(xiàn)你需要對位圖的壓縮方法進(jìn)行更多的設(shè)置，那么可以使用轉(zhuǎn)換為位圖特性來對庫中的位圖項(xiàng)進(jìn)行調(diào)整并進(jìn)行編輯。此時(shí)你已經(jīng)建立了廣告模板的基礎(chǔ)。從現(xiàn)在開始，你應(yīng)該按需要將商標(biāo)，標(biāo)語，以及動(dòng)畫添加到文件中。當(dāng)你想創(chuàng)建一個(gè)適用于不同屏幕尺寸的橫幅廣告時(shí)，只要選擇文件-另存為，然后用一個(gè)新的名字來保存它。對這個(gè)文件進(jìn)行編輯來改變舞臺的大小，同時(shí)調(diào)整資源的大小來適應(yīng)屏幕。跟著下面這些步

26、驟來使用模板創(chuàng)建一個(gè)適用于不同尺寸的橫幅廣告：1在Flash中打開(d ki)exercise2.fla文件(wnjin)，并選擇文件-另存為，用一個(gè)新的名字來對它進(jìn)行命名(mng mng)并進(jìn)行保存；2在屬性面板中，將舞臺的大小設(shè)置為180 x150像素；3將border圖層解鎖，選中矩形，調(diào)整它的大小為180 x150。當(dāng)你完成率重置矩形大小的步驟后，就再次鎖定這個(gè)圖層；4選定背景實(shí)例并雙擊它來對它的時(shí)間軸進(jìn)行編輯。調(diào)整它的大小并且對它的位置進(jìn)行調(diào)整從而適應(yīng)背景區(qū)域；5選擇控制-測試影片來檢查你的成果；6保存文件。所有的工作都完成了。使用一個(gè)模板，你可以跟著上面列出來的步驟繼續(xù)創(chuàng)建新的SW

27、F文件。如果你想實(shí)踐，試著以120 x600像素，160 x600像素，728x90像素這么幾個(gè)尺寸來創(chuàng)建幾個(gè)SWF文件，使它們適用于不同標(biāo)準(zhǔn)的橫幅尺寸，當(dāng)然還可以有其它的像素尺寸。一定要在模板文件中放入所有的公有元素，例如圖標(biāo)或者文本，這樣的話只要你需要它們，你就可以對他們進(jìn)行復(fù)制。 小貼士：你可以在FlashCS 5.5的工程面板中通過使用創(chuàng)作期間共享庫的特性來將這個(gè)例子提升到另外一個(gè)層次。這就可以讓你將插入的背景圖片添加到共享庫中，這樣的話，在圖片更新了之后，你就可以一次性更新完所有的廣告文件。有關(guān)這個(gè)方法的更多信息，看看FlashProfessional在線文檔中的 HYPERLINK

28、 /en_US/flash/cs/using/WSd60f23110762d6b883b18f10cb1fe1af6-7effa.html t _blank 使用Flash工程這篇文章。使用運(yùn)行時(shí)光柵化特性ActionScript 3為在運(yùn)行時(shí)創(chuàng)建和操作位圖提供了強(qiáng)大的選擇項(xiàng)。這些特性在用來創(chuàng)建二維特效以及在Flash游戲以及動(dòng)畫項(xiàng)目中實(shí)現(xiàn)更高級的優(yōu)化時(shí)使用的最為普遍。這部分內(nèi)容對運(yùn)行時(shí)與光柵化有關(guān)的ActionScript操作進(jìn)行了一些概述。使用cacheAsBitmap屬性 ActionScript 3中的 HYPERLINK /en_US/FlashPlatform/reference/

29、actionscript/3/flash/display/DisplayObject.html l cacheAsBitmap t _blank DisplayObject類包含了cacheAsBitmap的屬性。其實(shí)它與創(chuàng)建FLA文件時(shí)屬性面板中的緩存為位圖特性所達(dá)到的效果是一樣的，這里它是以一種編程的方式呈現(xiàn)。這也意味著你將會(huì)想到遵循上面提到過的用于創(chuàng)作期間特性的指導(dǎo)教程。對于那些靜態(tài)的或者不使用縮放和旋轉(zhuǎn)制作動(dòng)畫的顯示對象而言，最好是只使用cacheAsBitmap屬性。cacheAsBitmap屬性可以通過ActionScript代碼應(yīng)用到顯示對象上。你可以在屬性面板中對顯示對象的實(shí)例

30、進(jìn)行命名并且使用下面的代碼來設(shè)置這個(gè)屬性：myDisplayObject.cacheAsBitmap= true;復(fù)制代碼使用(shyng)Bitmap類ActionScript 3中的Bitma來p類在代碼中用來代表(dibio)一個(gè)位圖。你既可以使用Loader對象來加載一個(gè)位圖，或者在代碼(di m)中創(chuàng)建一個(gè)新的Bitmap實(shí)例，然后用一個(gè)BitmapData對象對它進(jìn)行填充。Bitmap類經(jīng)常用來定義一個(gè)位圖，除非你使用BitmapData來動(dòng)態(tài)地創(chuàng)建一個(gè)位圖。像這樣用ActionScript來創(chuàng)建一個(gè)空的位圖：import flash.display.Bitmap;var bmp:

31、Bitmap = new Bitmap();addChild(bmp);復(fù)制代碼使用BitmapData類 HYPERLINK /en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html t _blank BitmapData類是ActionScript中用來操作位圖的主要工具。你可以使用BitmapData來將繪制的矢量圖當(dāng)做位圖用，給位圖添加效果以及進(jìn)行像素級的調(diào)整，計(jì)算和比較。按照應(yīng)用程序和游戲項(xiàng)目的規(guī)模，它們一般都是使用BitmapData和光柵化來優(yōu)化動(dòng)畫，頁面切換以及實(shí)現(xiàn)內(nèi)容播放。一個(gè)Bit

32、mapData實(shí)例要用四個(gè)參數(shù)來進(jìn)行初始化：寬度，高度，透明度以及填充色。下面的代碼給你展示了怎么去創(chuàng)建一個(gè)位圖： import flash.display.Bitmap;import flash.display.BitmapData;var bmpData:BitmapData = new BitmapData(50,50, true, 0 xFFFFAA00);var bmp:Bitmap = new Bitmap(bmpData);addChild(bmp);復(fù)制代碼小貼士：關(guān)于使用BitmapDatade的一個(gè)非常有趣方面是它可以對一個(gè)已有的位圖進(jìn)行像素上的操作，或者它可以用來繪制位圖

33、。練習(xí)3：使用ActionScript3光柵化影片剪輯元件中的一幀 BtimapData類可以通過一個(gè)影片剪輯元件中的任何一幀來創(chuàng)建一個(gè)位圖。這對于運(yùn)行時(shí)優(yōu)化以及重用圖片而言將變得非常方便。由于BitmapData實(shí)例可以被很多不同的位圖實(shí)例共享，這個(gè)方法可以在動(dòng)畫以及游戲項(xiàng)目中使用，用于創(chuàng)建重復(fù)出現(xiàn)的場景或者消耗更少RAM內(nèi)存的游戲元素。在這個(gè)練習(xí)中，你將只要通過對影片剪輯的某個(gè)幀上的矢量圖創(chuàng)建一個(gè)位圖快照，然后就可以使用BitmapData類了。多虧了MyWeb軟件提供了在這個(gè)工程文件中使用的那張很酷的獅子頭像。 跟著(gn zhe)下面這些步驟通過一個(gè)矢量圖來渲染一個(gè)位圖：1創(chuàng)建(chu

34、ngjin)一個(gè)新的ActionScript 3FLA文件并且將它保存到工程文件夾下，命名為exercise3.fla；2第一步是導(dǎo)入整個(gè)(zhngg)的行走循環(huán)動(dòng)畫。你首先要找準(zhǔn)動(dòng)畫的某一幀并將它渲染為一個(gè)位圖。選擇文件-導(dǎo)入-打開外部庫，然后顯示出一個(gè)打開文檔的對話框，瀏覽資源文件夾并找到walkcycle.fla文件，點(diǎn)擊打開；3選擇WalkCycle元件，同時(shí)對它進(jìn)行復(fù)制。將它粘貼到exercise3.fla庫中；4在WalkCycle元件上右擊，在彈出菜單上選擇屬性。在元件屬性對話框中，將類型域改為影片剪輯，同時(shí)選上ExportforActionScript選項(xiàng)。這一步也可以讓你使用

35、ActionScript來初始化這個(gè)元件，這樣的話你可以生成一個(gè)位圖快照。在完成這一步之后，你的庫應(yīng)該和圖9中顯示的屏幕截圖相類似。注意ASLinkage域上顯示的是元件的名字。你將在ActionScript中使用鏈接名來引用這個(gè)元件。 圖9 在轉(zhuǎn)換為影片剪輯以及打開Exportfor ActionScript選項(xiàng)之后，庫中WalkCyle元件的顯示狀態(tài)5將默認(rèn)的圖層1的名字設(shè)置成actions。在時(shí)間軸上的第一個(gè)圖層（最上面的那個(gè)）里面添加ActionScript代碼是最好的方法，這個(gè)圖層是專門用來放置代碼的。在很多的情況下，ActionScript 代碼會(huì)放在actions圖層的第一幀的關(guān)

36、鍵幀上；6選擇actions圖層第一幀的關(guān)鍵幀，按下F9打開動(dòng)作面板，在你完成接下來的幾步之后，你將要添加那些可以生成位圖的代碼。先在腳本面板中加入下面的代碼來導(dǎo)入在代碼中你要引用的類；import flash.display.Bitmap;import flash.display.BitmapData;import flash.display.MovieClip;import flash.geom.Rectangle;import flash.geom.Matrix;7復(fù)制并粘貼下面的代碼來初始化WalkCycle元件。在你通過它生成一個(gè)位圖之后，你將會(huì)移除這個(gè)元件實(shí)例，但是此時(shí)你可以按你的

37、要求來轉(zhuǎn)換這個(gè)矢量圖形。注意這一步里面的代碼創(chuàng)建(chungjin)了WalkCyle的實(shí)例，并且將它放到到了200%，最后將這個(gè)實(shí)例添加到舞臺上。 / 1. Add symbol to stagevar target:MovieClip = new WalkCycle();target.scaleX = 2;target.scaleY = 2;addChild(target);復(fù)制(fzh)代碼8接下來，添加下面的代碼，這行代碼將影片剪輯(jinj)實(shí)例跳到你要尋找的幀上。在這個(gè)例子中，你將會(huì)跳到第10幀。/ 2. Go to a frame in the symboltarget.goto

38、AndStop(10);復(fù)制代碼9添加下面的代碼來創(chuàng)建BitmapData實(shí)例，注意這里創(chuàng)建了一個(gè)有邊界限制的對象以及一個(gè)矩陣，用于定義元件中圖片的位置。BitmapData實(shí)例定義了一個(gè)包圍了圖片的框框，這個(gè)框框包含了矩形當(dāng)中處于正確位置的位圖，并且將它賦給了一個(gè)透明的背景。draw方法將矢量數(shù)據(jù)復(fù)制到了BitmapData實(shí)例中。/ 3. Copy the frame to BitmapDatavar bounds:Rectangle = target.getBounds(this);var bmpData:BitmapData = new BitmapData(Math.floor(bo

39、unds.width), Math.floor(bounds.height), true, 0);var bmpMatrix:Matrix = target.transform.matrix;bmpMatrix.translate(-bounds.x, -bounds.y); / Draw bitmapbmpData.draw(target, bmpMatrix);復(fù)制代碼10添加下面的代碼來創(chuàng)建一個(gè)位圖用于顯示BitmapData對象。BitmapData實(shí)例作為Bitmap的構(gòu)造函數(shù)參數(shù)傳入，然后這個(gè)位圖就被放在了舞臺上。/ 4. Render Bitmap instancevar bmp

40、:Bitmap = new Bitmap(bmpData);bmp.x = (1024-bmp.width)/2;bmp.y = (600-bmp.height)/2;addChild(bmp);復(fù)制(fzh)代碼11最后，添加下面這行代碼(di m)來移除WalkCycle元件。這時(shí)候已經(jīng)不需要它了。/ 5. Remove symbol from the Stage removeChild(target);復(fù)制(fzh)代碼12選擇控制-測試影片來檢查你的成果。你應(yīng)該看到獅子文件的第十幀的圖片以兩倍與原圖大小的尺寸顯示在舞臺的中心。13保存文件。如果你想對這個(gè)例子進(jìn)行更進(jìn)一步的使用，你可以試

41、著使用相同的BitmapData 實(shí)例來生成多個(gè)位圖。練習(xí)4：使用BitmapData通過矢量動(dòng)畫來創(chuàng)建一個(gè)位圖動(dòng)畫矢量動(dòng)畫有的時(shí)候會(huì)有點(diǎn)緩慢，尤其是如果滿屏幕都是很多復(fù)雜的元件實(shí)例。為了消除這個(gè)問題，很多的Flash應(yīng)用程序以及游戲選擇將矢量內(nèi)容光柵化。你可以循環(huán)矢量動(dòng)畫中的所有幀，然后將每一幀渲染為位圖。從此，你就可以使用一個(gè)ENTER_FRAME事件循環(huán)或者一個(gè)時(shí)間間隔函數(shù)來將播放位圖幀。在這個(gè)練習(xí)中，你將通過一個(gè)標(biāo)準(zhǔn)的矢量動(dòng)畫來生成一個(gè)位圖動(dòng)畫。你將再次使用到獅子的例子，并且創(chuàng)建一個(gè)補(bǔ)間動(dòng)畫從而使獅子在舞臺上的位置發(fā)生改變。行走動(dòng)畫以及補(bǔ)間動(dòng)畫最終都會(huì)在位圖動(dòng)畫中反映出來。跟著下面這些

42、步驟來講一個(gè)矢量動(dòng)畫渲染成一個(gè)位圖動(dòng)畫：1.創(chuàng)建一個(gè)新的ActionScript 3 FLA文件，然后在工程文件夾中將它保存，并命名為exercise4.fla；2.如果walkcycle.fla文件還沒有導(dǎo)入，則再次將walkcycle.fla庫導(dǎo)入進(jìn)來，在walkcycle.fla庫中復(fù)制WalkCycle元件，并且將它粘貼到exercise4.fla庫中。這一次你將使WalkCycle元件的類型位一個(gè)圖形元件。當(dāng)幀是以位圖的形式來捕獲的時(shí)候，這一步將允許walk cycle動(dòng)畫里面的幀能夠在補(bǔ)間動(dòng)畫中的時(shí)間軸中進(jìn)行顯示；3.按下F8鍵來創(chuàng)建(chungjin)一個(gè)新的影片剪輯元件，并命名

43、為WalkAnimation。在創(chuàng)建新元件的對話框中打開Export forActionScript選項(xiàng)；4.雙擊WalkAnimation元件(yunjin)進(jìn)入它的時(shí)間軸；5.將圖層1重命名為animation。將WalkCyle圖形元件(yunjin)的一個(gè)實(shí)例拖入到animation圖層的第一幀；6.將animation圖層的時(shí)間軸拓展到第48幀；7.右擊WalkCyle實(shí)例，在彈出菜單中選擇創(chuàng)建補(bǔ)間動(dòng)畫選項(xiàng)。將播放頭放在第48幀，并且將WalkCyle實(shí)例移動(dòng)到距離右邊界300像素的地方，從而創(chuàng)建了這個(gè)行走動(dòng)畫；此時(shí)你已經(jīng)創(chuàng)建了一個(gè)基于矢量圖的動(dòng)畫版本。下一個(gè)人物是增加ActionScript 代碼來生成一個(gè)位圖動(dòng)畫。8.返回到主時(shí)間軸上，將默認(rèn)的圖層1重命名為actions。選擇actions圖層的第一幀，并且打開動(dòng)作面板來添加代碼。你將會(huì)看到這些腳本和練習(xí)3中使用額代碼類似，但是，下面的例子包含了更多的代碼來獲取到每一幀的BitmapData對象并以適當(dāng)?shù)膸賮聿シ胚@個(gè)位圖動(dòng)畫；9.復(fù)制并粘貼下面的代碼，這些代碼用來導(dǎo)入你將要引用的用來初始化WalkAnimation元件的類；import flash.display.Bitmap;import flash.display.BitmapData;import flash.displa