網頁設計

關於網頁設計的技術或相關資訊分享

FLASH AS3.0 解決慢速變化停頓現象

  在進行網頁設計時,常常需要運用到FLASH和ActionScript3.0。有時為了在網頁設計上呈現出圖片質感,會讓圖片進行緩慢的縮放或移動。由於FLASH是以像素為單位,所以當每個影格的變化量小於一個像素時,整個動畫就有可能產生停頓現象。

要解決這個問題,可以用ActionScript3.0中對點陣圖的平滑化設定。但因為從外部讀入的檔案,不能直接設定平滑化的屬性。所以我們必須多一道填色手續,參考程式碼如下:

var mc:MovieClip=new MovieClip(); //這是用來裝圖的外部容器 var loader:Loader=new Loader(); //宣告用來讀外部圖片的變數 loader.load(new URLRequest("001.jpg")); //讀外部圖片 loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete); //載入完成後,執行loadComplete function loadComplete(event:Event):void { //宣告loadComplete var bitData:BitmapData = new BitmapData(loader.width,loader.height); //宣告BitmapData,將長寬設的和載入的圖片一致 bitData.draw(loader); //將圖片存入BitmapData var gra:Graphics = mc.graphics; //宣告在mc中填入圖片 gra.beginBitmapFill(bitData, null, false, true); /*設定gra的填色資訊。最後方的true,即是開啟平滑化*/ gra.drawRect(0,0,loader.width,loader.height); //設定gra為長方形,長寬即為圖片長寬 gra.endFill(); //結束填色 addChild(mc); //將mc放至舞臺 }

由於這個方法是利用ActionScript的平滑設定,所以設定平滑的位置,到實際執行動畫效果的容器之間,不可以再套用濾鏡之類的效果。不然就會失失去功用了。

完成後,我們可以比較一下設定前和設定後的差別。左方是未設定,右方是設定後的結果。動畫均為20秒時間,長寬同時放大105%,影格每秒24格。

因為Flash 不支援嘍,因此這邊就不嵌入SWF了。