Chào các bạn hôm nay mình xin giới thiệu các bạn cách làm hiệu ứng lửa trong Flash AS3 rất đơn giản.

Bài này tương tự như bài làm thác nước: http://aloflash.com/thuc-hanh-flash/hieu-ung/558-lam-thac-nuoc-trong-flash.html nên các bạn hãy làm theo các bước như ở bài Thác Nước nhé.

Khác với bài tập thác nước bạn hãy chèn đoạn code này như ở bước 3 của bài thác nước nhé:

 //aloflash.com
import com.flashandmath.dg.GUI.ScrollingPerlinNoise;
import flash.events.Event;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.filters.DisplacementMapFilter;
import flash.geom.Point;
import flash.geom.ColorTransform;
import flash.display.BitmapDataChannel;
import flash.filters.DisplacementMapFilterMode;
import flash.filters.ColorMatrixFilter;
import flash.geom.Matrix;
import flash.filters.BlurFilter;
import flash.display.BlendMode;
import flash.display.Shape;
import flash.geom.Rectangle;

var posX:Number;
var posY:Number;
var displayWidth:Number;
var displayHeight:Number;
var clouds:ScrollingPerlinNoise;
var clouds2:ScrollingPerlinNoise;
var dmfClouds:ScrollingPerlinNoise;
var displayBitmapData:BitmapData;
var displayBitmap:Bitmap;
var dmfSource:BitmapData;
var shapeGrad:Shape;
var dmf:DisplacementMapFilter;
var cmf:ColorMatrixFilter;
var origin:Point;
var preBlur:BlurFilter;
var postBlur:BlurFilter;

stage.scaleMode = StageScaleMode.NO_SCALE;

init();

//Tọa độ bắt đầu và chiều rộng chiều cao của khu lửa
function init():void {
    posX = 10; //Tọa độ bắt đầu khu lửa X
    posY = 10; //Tọa độ bắt đầu khu lửa Y
    displayWidth = 450; //Chiều rộng khu lửa
    displayHeight = 320; //Chiều cao khu lửa
//Kết thúc     
    displayBitmapData = new BitmapData(displayWidth,displayHeight,true,0x00000000);
    displayBitmap = new Bitmap(displayBitmapData);
    displayBitmap.x = posX;
    displayBitmap.y = posY;
    this.addChild(displayBitmap);
    
    origin = new Point(0,0); //Được sử dụng trong bộ lọc. Nên để mặc định là 0,0

    clouds = new ScrollingPerlinNoise(displayWidth,displayHeight, 1, -5, true, 0x000000, 5, 30,150,true); //Màu viền xung quanh lửa 0x00000 là màu đen bạn có thể thay = màu khác
    clouds2 = new ScrollingPerlinNoise(displayWidth,displayHeight, -1, -6, true, 0x000000, 5, 40,100,true); //Màu viền xung quanh lửa 0x00000 là màu đen bạn có thể thay = màu khác
    //Độ tương phản của những khói xung quanh lửa:
    var contrast:ColorMatrixFilter = new ColorMatrixFilter([4,0,0,0,-400,
                                                            4,0,0,0,-400,
                                                             4,0,0,0,-400,
                                                            0,0,0,1,0]);
    
    clouds.cloudsBitmapData.applyFilter(clouds.cloudsBitmapData,clouds.cloudsBitmapData.rect,origin,contrast);
    clouds2.cloudsBitmapData.applyFilter(clouds2.cloudsBitmapData,clouds2.cloudsBitmapData.rect,origin,contrast);
    
    //Sự dịch chuyển ngẫu nhiên của lửa.
    dmfClouds = new ScrollingPerlinNoise(displayWidth,displayHeight, 3, -14, true,0x800000, 5, 120,200,false);
    
    dmfSource = new BitmapData(displayWidth,displayHeight,false,0x000000);
    
    //Viền của khu lửa
    shapeGrad = new Shape();
    var mat:Matrix = new Matrix();
    var gw:Number = displayWidth;
    var gh:Number = 2*displayHeight;
    mat.createGradientBox(gw,gh,0,0.5*(displayWidth - gw),0);
    shapeGrad.graphics.beginGradientFill("radial",[0xFFFFFF,0],[0,1],[0,255],mat);
    shapeGrad.graphics.drawRect(0,0,displayWidth,displayHeight);
    shapeGrad.graphics.endFill();                    
    dmfSource.draw(shapeGrad);
    
    var frame:Shape = new Shape();
    frame.graphics.lineStyle(1,0x222222); //Độ dầy viền của khu lửa và màu của viền tương đương 1 và 0x222222, nếu bạn không muốn có viền thay 1 = 0
    frame.graphics.drawRect(0,0,displayWidth,displayHeight);
    frame.x = posX;
    frame.y = posY;
    this.addChild(frame);
    
    preBlur = new BlurFilter(3,10);
    postBlur = new BlurFilter(2,2);
    dmf = new DisplacementMapFilter(dmfSource, new Point(), BitmapDataChannel.RED, BitmapDataChannel.BLUE, 120, 500, DisplacementMapFilterMode.COLOR,0x000000,0);
    
    var a:Number = 16;
    var d:Number = -1024;
    cmf = new ColorMatrixFilter([a*1,0,0,0,d,
                                 a*0.6,0,0,0,d,
                                 a*0.4,0,0,0,d,
                                 2.4,0,0,0,0]);
    
    clouds.startScroll();
    clouds2.startScroll();
    dmfClouds.startScroll();
    
    this.addEventListener(Event.ENTER_FRAME, onEnter);
}

function onEnter(evt:Event):void {
    var rect:Rectangle = new Rectangle(0,0,displayWidth, displayHeight);
    
    dmfSource.draw(dmfClouds);    
    
    displayBitmapData.lock();
    
    displayBitmapData.draw(clouds);
    displayBitmapData.draw(clouds2,null,null,BlendMode.ADD);
    displayBitmapData.draw(shapeGrad);
    
    displayBitmapData.applyFilter(displayBitmapData, rect, origin, cmf);
    displayBitmapData.applyFilter(displayBitmapData, rect, origin, preBlur);
    displayBitmapData.applyFilter(displayBitmapData, rect, origin, dmf);
    displayBitmapData.applyFilter(displayBitmapData, rect, origin, postBlur);
    
    displayBitmapData.unlock();    
}

Và chúng ta Download file này về máy (com_hieu_ung_lua.rar).

Và khi Lưu file chúng ta cũng lưu cùng với thư mục com như trong bài thác nước

Có thắc mắc gì các bạn để lại Comment nhé.

Chúc mọi người vui vẻ và thành công !