Flash制作文字扭曲的效果

　　本例通過使用動態遮罩綁定以及簡單的影片剪輯復制來實現文字扭曲的效果。至於本例的實現原理，示意如圖1：

　　圖1　原理示意圖

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

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

　　圖2 單個instance的制作原理

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

　　圖3 最終效果圖

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

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

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

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

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

　　圖5 導入後的圖片

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

　　修復一提的是為什麼一定要在字的後面加背景呢?這個問題是這樣的。知道，圖層就好像透明的玻璃一樣，可以透過一層看到下面的一層。如果這裡不使用什麼東西做背景的話，那麼你寫的字就會象剪紙一樣有镂空的地方，那麼，在下一步進行“紙片”重疊旋轉的時候就會露餡兒了。所以，字的後面一定得有背景，不管你所用的是圖片還是色塊。另外，其實這裡並不一定要使用兩個圖層。因為文字和圖片或者色塊都是獨立的對象，就算把它們都堆在一起也是不會有影響的(除非你把文字和圖片打散)。但是，請記住，把不同的對象放在不同的層是一個能讓你受益匪淺的好習慣。如果操作系統中沒有這樣的字體，是看不到如圖6的效果的。

　　圖6 加上文字後的圖片

　　二.制作遮罩

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

　　圖7 圓中央放到舞台中心

　　三.編寫代碼

　　1.回到主場景在時間軸中選中第一幀。選擇“窗口/動作”或直接按F9，打開“動作”面板，按F11，打開“庫”面板，單擊 按鍵，從彈出的功能菜單中選擇“聯接”，打開“聯接屬性”對話框。不必修改什麼選項，直接按確定按鈕將“Text”元件導出，“標識符”為Text，將元件導出是為後面代碼中“attachMovie”函數所服務的，因為此函數的一個參數要求必須使用元件的導出標識符。用同樣的方法，將Mask元件也導出。

　　2.輸入如下Action代碼(注釋號“//”及其後面的文字可以不輸)：

　　iInitX = Stage.width/2;

　　//初始橫坐標

　　iInitY = Stage.height/2;

　　//初始縱坐標

　　iMax = 30;

　　iDirection = 1;

　　//旋轉方向

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

　　iCounter = 1;

　　//旋轉計數器

　　iBound = 3;

　　//旋轉終止界限 i++) {

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

　　//通過捆綁復制創建文字影片剪輯Text的第i個實例

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

　　//通過捆綁復制創建遮罩影片剪輯Mask的第i個實例

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

　　//設定剛生成的文字影片剪輯text i的初始橫坐標

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

　　//設定剛生成的文字影片剪輯text i的初始縱坐標

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

　　//設定剛生成的遮罩影片剪輯mask i的初始橫坐標

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

　　//設定剛生成的遮罩影片剪輯mask i的初始縱坐標

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

　　//設定遮罩影片剪輯的寬度

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

　　//設定遮罩影片剪輯的高度

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

　　//將影片剪輯Mask設定為影片剪輯Text的遮罩

　　}

　　程序詳解：

　　看到上面密密麻麻的程序是不是有點頭昏了?不急，下面就來分析分析這程序是怎麼做事的吧：第1到第12行進行的是一些變量的賦值工作。其中第1、3行的變量iInitX和iInitY分別代表了影片剪輯們在舞台上出