2013年11月19日 星期二

Flash AS3製作的煙霧動態效果

        利用AS3製作煙霧效果的方法很多,以下是我利用兩個元件,再利用亂數所製作的隨機煙霧,你也可以更改AS3裡的參數,產生不同的效果。



1.先在舞台上繪製一個會冒煙的主體。
image

2.製作一個黑白漸層的圓球圖像元件pt,大小可以自行控製,本例中為10×10。
image

3.利用pt元件,製作一個移動補間動畫的元件「煙」,移動的方向由下到上,本例移動約70pix(0~-70),路徑可以小幅左右移動,pt的不透明度(alpha值)由大到小,再由小到大,最後為0,產生消失效果。
image

image

4.打開元件庫,在元件「煙」上按滑鼠右鍵,點選「屬性」。

image

5.勾選「匯出給ActionScript使用」,並將「類別」名稱設定為smok_mc,以便作為ActionScript中調用元件使用。
image

6.仿照步驟2、3、4、5的過程角製作一個元件「煙2」,並將類別名稱設定為fog_mc

image

7.將下列ActionScript加入影格1。
import flash.display.MovieClip;
this.addEventListener(Event.ENTER_FRAME,smokShow); 
//建立舞台上的偵聽動作,進入影格就執行smokShow
function smokShow(event:Event):void
{
    var xLocat:int; 
    var yLocat:int; 
    xLocat = 230;  //設定煙霧的起點杯口的左側位置
    yLocat = 280;  //設定煙霧的起點杯口的位置
   
    var fog= new fog_mc();    
//將fog設定為fog_mc這個類別以引用「煙」元件
    fog.x = xLocat + Math.random() * 180;  
//將「煙」散布的範圍隨機設定在左側到右側的間距之間
    fog.y = yLocat + Math.random() * 10;   
//將「煙」散布的範圍隨機設定在杯口向上10pix間距之間
    fog.scaleY = Math.random()* 1.5;      
 //將「煙」的高度隨機設定在0到1.5的內的倍率
    fog.scaleX = Math.random();           
 //將「煙」的寬度隨機設定在0到1的內的倍率
    fog.alpha = 0.2;                      
 //將「煙」的透明度降至20%
    var smok= new smok_mc();              
    smok.x = xLocat + Math.random() * 180; 
//放置「煙2」製造和「煙」交織的效果
    smok.y = yLocat + Math.random() * 10; 
    smok.scaleY = Math.random()*1.5;
    smok.scaleX = Math.random();
    smok.alpha = 0.2;
   
    this.addChild(smok);                  //將smoke加至舞台上
    this.addChild(fog);                   //將fog加至舞台上
   
    if (this.numChildren >= 500)         //將舞台上的元件控制在500個以內,會影響煙霧看起來的濃度
    {
                           this.removeEventListener(Event.ENTER_FRAME,smokShow); 

 //取消舞台上的偵聽動作,停止smokShow

    }
}
stop();

8.測試影片,就可以看到下列的結果。

沒有留言:

張貼留言