《電子技術(shù)應(yīng)用》
您所在的位置:首頁 > 其他 > 設(shè)計應(yīng)用 > Flash中利用ActionScript3.0實現(xiàn)圖像的扭曲效果
Flash中利用ActionScript3.0實現(xiàn)圖像的扭曲效果
來源:微型機與應(yīng)用2012年第16期
陳銀鳳
(內(nèi)蒙古財經(jīng)大學(xué) 計算機信息管理學(xué)院,內(nèi)蒙古 呼和浩特 010051)
摘要: 主要在Flash CS3環(huán)境中利用ActionScript3.0腳本語言的BitmapData 類和DisplacementMapFilter濾鏡來實現(xiàn)圖像的扭曲效果。
Abstract:
Key words :

摘  要: 主要在Flash CS3環(huán)境中利用ActionScript3.0腳本語言的BitmapData 類和DisplacementMapFilter濾鏡來實現(xiàn)圖像的扭曲效果。
關(guān)鍵詞: Flash; ActionScript; BitmapData; 扭曲

    Flash與Dreamweaver、Fireworks一起被稱作“網(wǎng)頁制作三劍客”[1]。隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展,F(xiàn)lash已成為當(dāng)今網(wǎng)絡(luò)世界中的熱點技術(shù),其使用者可以充分發(fā)揮自己的想象力,設(shè)計和創(chuàng)作出具有圖形、聲音、視頻和動畫的各種交互內(nèi)容,從而使廣告、網(wǎng)站、游戲、賀卡、教學(xué)課件及音樂動畫等真正獨具特色。
    與其他動畫制作軟件相比,F(xiàn)lash制作的動畫容量小、操作方便、綠色免安裝,非常適合在網(wǎng)絡(luò)中傳播。借助ActionScript能夠制作出更為細膩、逼真的動畫。ActionScript是Flash專用的腳本語言,采用面向?qū)ο蟮木幊趟枷?,通常以動畫中的關(guān)鍵幀、按鈕實例、影片剪輯實例作為對象來對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庫的高度復(fù)雜應(yīng)用程序。
     本文主要闡述在Flash CS3環(huán)境中利用ActionScript3.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)建非常復(fù)雜的圖像,不會因連續(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)值。當(dāng)將4個通道(紅色、綠色、藍色和Alpha)與BitmapData.copyChannel()方法或DisplacementMapFilter.componentX屬性和DisplacementMapFilter.componentY屬性一起使用時,這些通道以數(shù)字形式表示,分別為:1(紅色)、2(綠色)、4(藍色)和8(Alpha)。
    (1)構(gòu)造函數(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鏡將扭曲或斑點效果應(yīng)用于從 DisplayObject 類中繼承的任何對象,例如MovieClip、SimpleButton、TextField、Video對象以及BitmapData對象。
     DisplacementMapFilter需要有一個灰度圖像作為置換映射圖像,并基于這個映射圖像的像素對另外一個圖像進行扭曲。映射圖像中比中性灰亮的像素在目標圖像中對應(yīng)位置上向左上角移動,較暗的像素則向右下角移動。
    (1)構(gòu)造函數(shù)
    DisplacementMapFilter(mapBitmap:BitmapData=null, mapPoint: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)公共屬性
     alpha: Number                  //指定對于超出范圍的替換
                               應(yīng)用的Alpha透明度值
     color:uint     //指定對于超出范圍的替換應(yīng)用什么顏色
     componentX:uint              //說明在映射圖像中使用哪個
                               顏色通道來置換x結(jié)果
     componentY:uint          //說明在映射圖像中使用哪個
                          顏色通道來置換y結(jié)果
    mapBitmap:BitmapData             //包含置換映射數(shù)據(jù)的
                                   BitmapData對象
    mapPoint:Point        //一個值,它包含目標顯示對象的左
                      上角相對于映射圖像左上角的偏移量
    mode:String                                 //濾鏡模式
    scaleX:Number            //用于縮放映射計算的x
                              置換結(jié)果的乘數(shù)
     scaleY:Number              //用于縮放映射計算的y
                              置換結(jié)果的乘數(shù)。
2 應(yīng)用置換映射濾鏡創(chuàng)建圖像扭曲效果
    使用BitmapData對象[1]和DisplacementMapFilter濾鏡可以實現(xiàn)圖像的扭曲效果。DisplacementMapFilter類使用BitmapData對象(稱為置換圖圖像)中的像素值在新對象上執(zhí)行置換效果。通常,置換圖圖像與將要應(yīng)用濾鏡的實際顯示對象或BitmapData實例不同。置換效果包括置換過濾的圖像中的像素,也就是說,將這些像素移開原始位置一定距離。
     實現(xiàn)步驟:
     (1)新建一個Flash文檔,設(shè)置其舞臺大小為340×220像素,背景為白色。
    (2)選中圖層1,命名為“圖像層”,導(dǎo)入準備好的一張圖片到舞臺,圖片大小設(shè)置為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”,選中第一幀,打開“動作”面板,輸入如下代碼:
     import flash.display.BitmapData;
    import flash.geom.Point;
  import flash.filters.DisplacementMapFilter;
                    //沿著x軸替換通道1(紅色)上的像素
    var componentX:Number = 1;
                  //沿著y軸替換通道2(綠色)上的像素
    var componentY:Number = 2;
                                   //沿著x軸替換的強度
    var scale_X:Number = -128;
                                  //沿著y軸替換的強度
    var scale_Y:Number = -128;
                  //使用ignore模式可以顯示下面扭曲的圖像
    var mode:String = "ignore";                  //偏移量
    var offset:Point = new Point(0, 0);
                  //構(gòu)建一個空的BitmapData實例,并將影
                  片剪輯實例讀進該實例
    var myBitmapData:BitmapData=new BitmapData(pic.width,
        pic.height);
                  //創(chuàng)建一個DisplacementMapFilter濾鏡實例
    var myFilter:DisplacementMapFilter = new Displacement
        MapFilter(myBitmapData,offset,componentX,componentY,
         scale_X, scale_Y, mode);
    myBitmapData.draw(dis);//為影片剪輯實例pic應(yīng)用濾鏡
      pic.filters = [myFilter];
      dis.visible = false;
    (4)保存文檔,按Ctrl+Enter鍵進行執(zhí)行,測試圖像的扭曲效果。如圖3左側(cè)所示,影片剪輯實例pic出現(xiàn)扭曲效果。

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

此內(nèi)容為AET網(wǎng)站原創(chuàng),未經(jīng)授權(quán)禁止轉(zhuǎn)載。