Flash中利用ActionScript3.0實現(xiàn)圖像的扭曲效果

陳銀鳳

（內(nèi)蒙古財經(jīng)大學 計算機信息管理學院，內(nèi)蒙古 呼和浩特 010051）

Flash與 Dreamweaver、Fireworks一起被稱作 “網(wǎng)頁制作三劍客”[1]。隨著網(wǎng)絡技術的不斷發(fā)展，F(xiàn)lash已成為當今網(wǎng)絡世界中的熱點技術，其使用者可以充分發(fā)揮自己的想象力，設計和創(chuàng)作出具有圖形、聲音、視頻和動畫的各種交互內(nèi)容，從而使廣告、網(wǎng)站、游戲、賀卡、教學課件及音樂動畫等真正獨具特色。

與其他動畫制作軟件相比，F(xiàn)lash制作的動畫容量小、操作方便、綠色免安裝，非常適合在網(wǎng)絡中傳播。借助ActionScript能夠制作出更為細膩、逼真的動畫。ActionScript是Flash專用的腳本語言，采用面向?qū)ο蟮木幊趟枷?，通常以動畫中的關鍵幀、按鈕實例、影片剪輯實例作為對象來對ActionScript進行定義和編寫，以幫助用戶按照自己的意愿更加精確地創(chuàng)建動畫，實現(xiàn)自己的意圖。ActionScript由Flash Player中的ActionScript虛擬機(AVM)來解釋執(zhí)行，其代碼通常被編譯器編譯成“字節(jié)碼格式”，字節(jié)碼嵌入SWF文件中，SWF文件由運行時環(huán)境Flash Player執(zhí)行。ActionScript的版本已從1.0發(fā)展到如今的3.0，虛擬機也從AVM發(fā)展為支持ActionScript 3.0的新一代AVM2，其執(zhí)行速度是之前ActionScript版本的10倍。ActionScript 3.0旨在方便創(chuàng)建擁有大型數(shù)據(jù)集和面向?qū)ο蟮目芍赜么a庫的高度復雜應用程序。

本文主要闡述在Flash CS3環(huán)境中利用Action-Script3.0的BitmapData類和DisplacementMapFilter濾鏡實現(xiàn)圖像的扭曲效果。Flash CS3是Adobe公司收購Macromedia公司后將Macromedia Flash更名為Adobe Flash后的一款動畫軟件。

1 BitmapData類和DisplacementMapFilter濾鏡

1.1 BitmapData類

使用BitmapData類可以處理Bitmap對象的數(shù)據(jù) (像素)?？梢允褂?BitmapData類的方法創(chuàng)建任意大小的透明或不透明位圖圖像，并在運行時采用多種方式操作這些圖像。也可以訪問使用flash.display.Loader類加載的位圖圖像的BitmapData。此類允許將位圖呈現(xiàn)操作與Flash Player的內(nèi)部顯示更新例程分隔開來。通過直接操作BitmapData對象,用戶可以創(chuàng)建非常復雜的圖像，不會因連續(xù)重新繪制矢量數(shù)據(jù)的內(nèi)容而產(chǎn)生每幀開銷。BitmapData類的方法支持多種無法通過通用濾鏡接口獲得的效果。BitmapData對象包含像素數(shù)據(jù)的數(shù)組。該數(shù)據(jù)可以表示完全不透明的位圖，或表示包含Alpha通道數(shù)據(jù)的透明位圖。以上任一類型的BitmapData對象都作為32 bit整數(shù)的緩沖區(qū)進行存儲。每個32 bit整數(shù)確定位圖中單個像素的屬性。

每個 32 bit整數(shù)都是 4個 8 bit通道值 (從 0～255)的組合，這些值描述像素的Alpha及紅色、綠色、藍色的（ARGB）值。 當將 4個通道（紅色、綠色、藍色和 Alpha）與 BitmapData.copyChannel()方法或 DisplacementMapFilter.componentX屬性和DisplacementMapFilter.componentY屬性一起使用時，這些通道以數(shù)字形式表示，分別為：1（紅色）、2（綠色）、4（藍色）和 8（Alpha）。

(1)構造函數(shù)

BitmapData(width:Number,height:Number,[transparent:Boolean],[fillColor:Number])

(2)公共屬性

height:Number[只讀]：位圖圖像的高度，以像素為單位。

rectangle:Rectangle[只讀]：定義位圖圖像大小和位置的矩形。

transparent:Boolean[只讀]：定義位圖圖像是否支持每個像素具有不同的透明度。

width:Number[只讀]：位圖圖像的寬度,以像素為單位。

1.2 DisplacementMapFilter濾鏡

DisplacementMapFilter類使用指定的 BitmapData對象（稱為置換圖圖像）的像素值執(zhí)行對象置換?？梢允褂么藶V鏡將扭曲或斑點效果應用于從 DisplayObject類中繼承的任何對象， 例如 MovieClip、SimpleButton、TextField、Video對象以及BitmapData對象。

DisplacementMapFilter需要有一個灰度圖像作為置換映射圖像，并基于這個映射圖像的像素對另外一個圖像進行扭曲。映射圖像中比中性灰亮的像素在目標圖像中對應位置上向左上角移動,較暗的像素則向右下角移動。

(1)構造函數(shù)

DisplacementMapFilter(mapBitmap:BitmapData=null,map-Point:Point=null,componentX:uint=0,componentY:uint=0,scaleX:Number=0.0,scaleY:Number=0.0,mode:String="wrap",color:uint=0,alpha:Number=0.0)

(2)公共屬性

2 應用置換映射濾鏡創(chuàng)建圖像扭曲效果

使用 BitmapData對象[1]和 DisplacementMapFilter濾鏡可以實現(xiàn)圖像的扭曲效果。DisplacementMapFilter類使用BitmapData對象（稱為置換圖圖像）中的像素值在新對象上執(zhí)行置換效果。通常，置換圖圖像與將要應用濾鏡的實際顯示對象或BitmapData實例不同。置換效果包括置換過濾的圖像中的像素，也就是說，將這些像素移開原始位置一定距離。

實現(xiàn)步驟：

(1)新建一個Flash文檔,設置其舞臺大小為340×220像素，背景為白色。

(2)選中圖層 1，命名為“圖像層”，導入準備好的一張圖片到舞臺，圖片大小設置為164×220像素，選中該圖片并轉(zhuǎn)化為影片剪輯，元件名為“image”。選中舞臺中的 image影片剪輯實例，命名為“pic”，并在舞臺中靠左放置。從庫中再次拖入一個image影片剪輯實例,無需命名,舞臺中靠右放置（為與扭曲效果作對比）。

(3)菜單欄中點擊 “插入/新建元件”，選擇影片剪輯，元件命名為“displacer”，進入元件編輯環(huán)境。在圖層1中，使用矩形工具繪制一個164×220的無邊框灰色矩形，如圖1所示。新建圖層2，在右下角繪制一個直徑為108像素的正圓，顏色填充為放射狀 （3個色塊均勻分布,從左到右顏色值分別為：#956A89、#6B1452、#000000；Alpha值分別為：100%、50%、0%），如圖 2所示。

(4)回到場景中，新建圖層 2，命名為“displacer層”，將displacer影片剪輯拖入舞臺，影片剪輯實例命名為“dis”。其正好放置在“pic”實例的正上方。

(5)新建圖層 3，命名為“AS”，選中第一幀，打開“動作”面板，輸入如下代碼：

(4)保存文檔，按Ctrl+Enter鍵進行執(zhí)行，測試圖像的扭曲效果。如圖3左側所示，影片剪輯實例pic出現(xiàn)扭曲效果。

由于Flash制作出的動畫體積小，非常適合在網(wǎng)絡中傳播，所以深受廣大網(wǎng)民的喜愛。要想在Flash環(huán)境中制作出效果逼真的動畫，ActionScript是不可或缺的部分。ActionScript是針對Flash Player運行時環(huán)境的編程語言，它用于處理各種人機交互、數(shù)據(jù)交互等功能，目前主要采用的版本是ActionScript3.0。ActionScript3.0與Flash CS3（或以上版本）相結合，可以創(chuàng)建出各種不同的應用特效，實現(xiàn)豐富多彩的動畫效果。本文中正是利用ActionScript3.0的BitmapData類和DisplacementMapFilter濾鏡實現(xiàn)了圖像的扭曲效果。Flash中專業(yè)制作動畫者可以借助 ActionScript3.0，更加充分地發(fā)揮想象力，隨心所欲地制作出交互性極強的復雜動畫，體現(xiàn)美侖美換的意境。

[1]張亞飛.Flash ActionScript 3.0開發(fā)王[M].北京：電子工業(yè)出版社，2008.

[2]王傳華.Flash MX 2004實例教程[M].北京：清華大學出版社，2004.