本例通過使用動態(tài)遮罩綁定以及簡單的影片剪輯復(fù)制來實(shí)現(xiàn)文字扭曲的效果。至于本例的實(shí)現(xiàn)原理，示意如圖1：


圖1　原理示意圖

　　可以試想現(xiàn)在擺在面前的有一疊6張一模一樣帶字的圓形紙片，然后把倒數(shù)第2張并將其外圍剪去寬度為整個圓半徑1/6的圓環(huán)，把倒數(shù)第3張剪去2/6大小的圓環(huán)，倒數(shù)第4張3/6，第5張4/6，第6張5/6。剪完之后，仍然按照原來的順序，對齊中心疊好。這樣的一疊紙片就能夠用來粗略地實(shí)現(xiàn)扭曲效果了。還不明白？試著轉(zhuǎn)動不同層次的紙片看看。

　　圖1左邊的6個instance就可以看作是上面那個場景中所提到的6張紙片，然后instance 2-6上的黑邊就可以看作是被剪去的部分。而圖1-76邊的那個圓餅就相當(dāng)于是6張紙片對齊疊好后的樣子。也許各位已經(jīng)發(fā)現(xiàn)了：紙片數(shù)量越多，產(chǎn)生的模擬扭曲的效果就越好。很顯然如果只胡兩層，其制作示意如圖2所示：


圖2 單個instance的制作原理

　　圖1-77展示的是單個instance的制作原理：將用來作為遮罩的影片剪輯Mask和要實(shí)現(xiàn)扭曲效果的影片剪輯Text通過Flash MX中的新函數(shù)SetMask聯(lián)系起來。這個SetMask函數(shù)的出現(xiàn)，使得可以在運(yùn)行時任意指定某個影片剪輯作為遮罩，實(shí)現(xiàn)動態(tài)遮罩綁定，從而大大簡化了以往制作動態(tài)遮罩的步驟。在制作過程中主要用到了　最終效果如圖3所示，要實(shí)現(xiàn)這一效果，其具體制作步驟如下：


圖3 最終效果圖

　　1.新建一個電影，在屬性面板中設(shè)置其尺寸為500pxX400px,選擇一種顏色（本例為#FFFFFF）作為背景色。

　　2．雙擊時間線上的“Layer 1”，并將其改為“main”，如圖1-79所示。選擇“插入/新建元件”菜單命令或直接按Ctrl+F8，打開“創(chuàng)建新元件”對話框?！懊Q”一欄中輸入“Text”，并設(shè)置其行為為“影片剪輯”，單擊確定按鈕新建一個名為“Text”的影片剪輯

　　3．選擇“插入/圖層”菜單命令或直接點(diǎn)擊時間線窗口上的 圖標(biāo)，新建一個圖層。分別將圖層命名為text和background，影片剪輯text的時間軸窗口如圖4所示：


圖4 影片剪輯text的時間軸窗口

　　4．選中“background”層，選擇“文件/導(dǎo)入”菜單命令，打開”導(dǎo)入“對話框。然后選擇一張圖片（本例為“apple.jpg”）導(dǎo)入到“background”層上作為背景。如果導(dǎo)入的圖片太大，就得使用Transform（變形）工具將其縮小到合適大小。選擇“窗口/變形”菜單命令或直接按Ctrl+T，打開“變形”面板，修改面板上的垂直和水平縮放比例至合適的值。導(dǎo)入后的圖片如圖5所示：


圖5 導(dǎo)入后的圖片

　　5.接下來該是在背景上寫字了。選中“text”層，在工具箱中選取“文本”工具，然后在舞臺上寫上“Apple”幾個字符，在屬性面板中，根據(jù)需要將剛才所寫的“Apple”的字體、大小、顏色設(shè)置妥當(dāng)，本例中設(shè)置字體為“Ruach LET”，顏色為“CCFFCC”，文本大小為“60”，這樣，“紙片”就做好了。

　　修復(fù)一提的是為什么一定要在字的后面加背景呢？這個問題是這樣的。知道，圖層就好像透明的玻璃一樣，可以透過一層看到下面的一層。如果這里不使用什么東西做背景的話，那么你寫的字就會象剪紙一樣有鏤空的地方，那么，在下一步進(jìn)行“紙片”重疊旋轉(zhuǎn)的時候就會露餡兒了。所以，字的后面一定得有背景，不管你所用的是圖片還是色塊。另外，其實(shí)這里并不一定要使用兩個圖層。因?yàn)槲淖趾蛨D片或者色塊都是獨(dú)立的對象，就算把它們都堆在一起也是不會有影響的（除非你把文字和圖片打散）。但是，請記住，把不同的對象放在不同的層是一個能讓你受益匪淺的好習(xí)慣。如果操作系統(tǒng)中沒有這樣的字體，是看不到如圖6的效果的。


圖6 加上文字后的圖片

　　二.制作遮罩

　　1．選擇“插入/新建元件”菜單命令或直接按Ctrl+F8，打開創(chuàng)建新元件對話框。在“名稱”一欄中輸入“Mask”，并設(shè)置其行為為“影片剪輯”，新建一個名為Mask的影片剪輯，將缺省的圖層“圖層1”改名為“mask”。從工具箱中選取“橢圓”工具，按住Shift鍵不放在舞臺上隨便畫一個正圓。因?yàn)槭侵谱髡谡?，所以圓的邊框色和填充色可以隨便是什么顏色。并把這個圓放到舞臺正中。打開排列面板排列先點(diǎn)擊 按鈕，將整個舞臺作為參照物，接著再分別點(diǎn)一下 （垂直居中）和 （水平居中）按鈕，這樣代表舞臺中心的十字就落到圓的中央了。如圖7所示。


圖7 圓中央放到舞臺中心

　　三.編寫代碼

　　1．回到主場景在時間軸中選中第一幀。選擇“窗口/動作”或直接按F9，打開“動作”面板，按F11，打開“庫”面板，單擊 按鍵，從彈出的功能菜單中選擇“聯(lián)接”，打開“聯(lián)接屬性”對話框。不必修改什么選項(xiàng)，直接按確定按鈕將“Text”元件導(dǎo)出，“標(biāo)識符”為Text，將元件導(dǎo)出是為后面代碼中“attachMovie”函數(shù)所服務(wù)的，因?yàn)榇撕瘮?shù)的一個參數(shù)要求必須使用元件的導(dǎo)出標(biāo)識符。用同樣的方法，將Mask元件也導(dǎo)出。

　　2．輸入如下Action代碼（注釋號“//”及其后面的文字可以不輸）：

iInitX = Stage.width/2;

//初始橫坐標(biāo)

iInitY = Stage.height/2;

//初始縱坐標(biāo)

iMax = 30;

iDirection = 1;

//旋轉(zhuǎn)方向

for (i=1; i<=iMax;//影片剪輯個數(shù)

iCounter = 1;

//旋轉(zhuǎn)計(jì)數(shù)器

iBound = 3;

//旋轉(zhuǎn)終止界限 i++) {

this.attachMovie("Text", "text"+i, 2*iMax-2*(i-1));

//通過捆綁復(fù)制創(chuàng)建文字影片剪輯Text的第i個實(shí)例

this.attachMovie("Mask", "mask"+i, 2*iMax-2*(i-1)-1);

//通過捆綁復(fù)制創(chuàng)建遮罩影片剪輯Mask的第i個實(shí)例

this["text"+i]._x = iInitX;

//設(shè)定剛生成的文字影片剪輯text i的初始橫坐標(biāo)

this["text"+i]._y = iInitY;

//設(shè)定剛生成的文字影片剪輯text i的初始縱坐標(biāo)

this["mask"+i]._x = this["text"+i]._x+5;

//設(shè)定剛生成的遮罩影片剪輯mask i的初始橫坐標(biāo)

this["mask"+i]._y = this["text"+i]._y+5;

//設(shè)定剛生成的遮罩影片剪輯mask i的初始縱坐標(biāo)

this["mask"+i]._width = i*5;

//設(shè)定遮罩影片剪輯的寬度

this["mask"+i]._height = i*5;

//設(shè)定遮罩影片剪輯的高度

this["text"+i].setMask("mask"+i);

//將影片剪輯Mask設(shè)定為影片剪輯Text的遮罩

}

　　程序詳解：

　　看到上面密密麻麻的程序是不是有點(diǎn)頭昏了？不急，下面就來分析分析這程序是怎么做事的吧：第1到第12行進(jìn)行的是一些變量的賦值工作。其中第1、3行的變量iInitX和iInitY分別代表了影片剪輯們在舞臺上出現(xiàn)的橫坐標(biāo)和縱坐標(biāo)。

　　1、3兩行中使用到的Stage 對象是Flash MX中的新添加的。這個對象對應(yīng)的是就是Flash舞臺，所以，對Stage對象屬性的讀寫就是對Flash舞臺屬性的操作。本程序中只用到了Stage對象的Width和Height屬性。使用這兩個屬性要注意，當(dāng)Stage.noScale屬性為true，也就是影片沒有被縮小或放大時，返回的就是當(dāng)前播放器的寬度和高度；而在Stage.noScale屬性為false的情況下，返回的就是Flash影片的寬和高了。

　　第5行的變量iMax代表的是影片剪輯的總數(shù)，也就是上面所提到的“紙片”的張數(shù)。第7、9、11行的三個變量在當(dāng)前這一幀里還沒什么用，先放一放。

　　從第13行開始到最后就是這第1幀代碼中最重要的部分了。開始是個for語句，告訴Flash接下去要開始循環(huán)了，而循環(huán)計(jì)數(shù)從1到iMax依次遞加，也就是一共要循環(huán)iMax次。第14行到31行是要不斷重復(fù)做的事情——復(fù)制Text影片剪輯和相應(yīng)的Mask影片剪輯。

　　第14行和第16行使用attachMovie函數(shù)從Library中分別復(fù)制Text和Mask到舞臺上。就拿iMax=30，i=1時來說吧，它所代表的意思就是，“復(fù)制Library中Text影片剪輯到第2*30-2*(1-1)=60層，然后將此實(shí)例命名為text1；然后復(fù)制Library中Mask影片剪輯到第2*30-2*(1-1)-1=59層，然后將此實(shí)例命名為mask1”。隨著i的增大，可以看到代表影片剪輯的放置深度參數(shù)2*iMax-2*(i-1)和2*iMax-2*(i-1)-1的值會越來越小，這相當(dāng)于從上到下地放置一張張“紙片”（不知道為什么要這么做嗎？把參數(shù)前面的“2*iMax-”部分都去掉試試看）。

　　第18行到29行是分別設(shè)置上一步復(fù)制出來的texti和maski的屬性。這里要注意一下的是第26、28行設(shè)置遮罩高寬（也就是大?。┑恼Z句，因?yàn)檎谡值拇笮『陀捌糨嬁倲?shù)iMax共同決定了扭曲效果的逼真度，換言之，遮罩越小，影片剪輯總數(shù)越大，表現(xiàn)的扭曲效果就越好。不過，在確定這兩個值的時候還得考慮考慮系統(tǒng)的感受，因?yàn)樾Ч玫拇鷥r就是速度的下降。為了在后面更方便、更快速地預(yù)覽效果，建議在第一幀最后加上一句_quality="LOW" ，將影片的質(zhì)量設(shè)為低，然后在影片發(fā)布時將這一句注釋掉或刪掉。

　　第30行就是通過SetMask方法告訴Flash把影片剪輯mask i指定為影片剪輯text i的遮罩。

　　3．單擊選中第二幀，選擇“插入/空白關(guān)鍵幀”菜單命令或直接按F6，插入一個空白關(guān)鍵幀，然后在Action面板上輸入以下代碼：

for (i=1; i<=iMax; i++) {

　　　this["text"+i]._rotation = i*iCounter;

　　　//旋轉(zhuǎn)文字影片剪輯Text的實(shí)例

}

iDirection = (iCounter>iBound || iCounter<-1*iBound) ? (-1*iDirection) : iDirection;

//確定轉(zhuǎn)動方向

iCounter += iDirection;

//計(jì)數(shù)器增一或減一

　　程序詳解：

　　經(jīng)過第1幀中一堆代碼的努力，現(xiàn)在舞臺上應(yīng)該已經(jīng)形成了如圖1所示的那種結(jié)構(gòu)了。下面該是第2幀和第3幀共同努力讓這一堆東西轉(zhuǎn)起來的時候了。

　　第1到第4行又是一個循環(huán)，它的作用是依次設(shè)定從第一個Text實(shí)例起到第iMax個Text實(shí)例的_rotation屬性（也就是旋轉(zhuǎn)的角度）。其中第2行里的變量iCounter，它在這個循環(huán)體里的作用不僅是確定旋轉(zhuǎn)的方向（因?yàn)樗姓胸?fù)），同時也和循環(huán)變量i一起決定了每個Text實(shí)例的轉(zhuǎn)動角度。

　　第5行的iDirection變量相當(dāng)于一個確定轉(zhuǎn)動方向的標(biāo)志，它只有-1和1兩個值。這里用到了“表達(dá)式1?表達(dá)式2:表達(dá)式3”的條件操作來確定iDirection的值為1還是-1。當(dāng)問號前面的表達(dá)式1的值為真時，也就是當(dāng)-iBound≤iCounter≤iBound時，iDirection的值就等于表達(dá)式2的值，也就是用-1乘上iDirection。知道變量iDirection只有絕對值相等符號相反的兩個值，所以，乘上-1后iDirection就會變?yōu)橄喾吹闹?。否則當(dāng)表達(dá)式1的值為假的時候，iDirection的值就等于表達(dá)式3的值，這里也就是等于變量iDirection本身不變。

　　第6行的程序就等于iCounter=iCounter+iDirection。當(dāng)iDirection等于1的時候，iCounter的值不斷增加，直到iCounter的值超出邊界iBound的值；而當(dāng)iDirection等于-1時，加上個-1就等于減去一個1，所以，iCounter的值就不斷減小，直到iCounter的值超出邊界-iBound的值。

　　值得注意的是不要將諸如-1*iBound之類的語句寫成-iBound，在ActionScript里可沒有直接在變量前面加個減號做負(fù)號的規(guī)矩。

　　單擊選中第三幀，同樣按F6插入一個空白關(guān)鍵幀并輸入以下代碼：

gotoAndPlay(_currentframe-1);

//重復(fù)前一幀，實(shí)現(xiàn)動畫的循環(huán)播放效果。

　　程序詳解：

　　這第3幀的內(nèi)容就比較簡單了，用一個gotoAndPlay語句將第3幀和第2幀組成了一個循環(huán)的結(jié)構(gòu)。其中_currentframe屬性返回的是當(dāng)前幀的幀號，將它的值減去1，很明顯就是指當(dāng)前幀前面一幀的幀號了。

　　5.選擇“控制/測試影片”菜單命令或直接按Ctrl+Enter觀看效果，即可看到扭曲的文字。