AloFlash ! Cộng đồng flash Việt Nam



You are here: Tutorials  Hiệu ứng Hiệu ứng lửa trong Flash AS3

Hiệu ứng lửa trong Flash AS3

Email In PDF.
Xem kết quả: / 83
Bình thườngTuyệt vời 

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 !

Bình luận (21)Add Comment
0
...
được viết bởi lala, Tháng năm 07, 2012
cho minh hoi cac cong ty lam web bay gio nguoi ta con hay dung Flash khong vay ha Admin.minh dang phan van khong biet nen hoc flash khong
0
...
được viết bởi aloflash, Tháng năm 07, 2012
Theo mình thấy, ở trên thế giới các website của các hãng lớn đều làm bằng Flash hoặc có 1 phần là Flash ví dụ như:
Hãng Intel: http://www.intel.com/museumofme/en_US/r/index.htm
Hãng Toyota: http://www.buyatoyota.com/Rese...cing.aspx?
Hãng Honda: http://automobiles.honda.com/
Hãng LG: http://www.lg.com/vn/
Ngoài ra còn rất rất nhiều hãng nổi tiếng khác.
Nhiều người dùng FLash bởi khả năng tương tác rất tốt, dung lượng file nhẹ, và có thể thay cho hoạt hình.
Bạn có thể xem 1 số website này để thấy sự tương tác mạnh mẽ của nó:
http://www.mono-1.com/monoface/main.html
http://www.wechoosethemoon.org/
http://moodstream.gettyimages.com/
http://www.syfy.com/tinman/oz/
Mình nghĩ là bạn nên học FLash, nếu không làm việc thì cũng có thể làm thiệp tặng cho người bạn yêu cũng khá thú vị.
Chúc bạn vui vẻ và tìm cho mình 1 hướng đi tốt cho tương lai !
0
...
được viết bởi lala, Tháng năm 07, 2012
cam on ban. minh la design web.html css jquery kha on roi.nhung flash con kem qua.nhung bai tut cua ban that bo ich.rat mong ban cho them nhieu bai nuasmilies/grin.gif
0
...
được viết bởi langtu, Tháng năm 25, 2012
smilies/smiley.gifsmilies/angry.gifsmilies/grin.gif không đơn giản
0
...
được viết bởi Thai Binh, Tháng sáu 02, 2012
Good ! nhưng học thuộc hơi khó ^^
0
...
được viết bởi jinyan, Tháng sáu 19, 2012
:x:x:x:x hix.hix... giỏi qo' ngưỡng mộ qo' smilies/cry.gif
0
...
được viết bởi messi, Tháng bảy 04, 2012
Tut này có phải bạn viết từ A-Z không thế. Nghi lắm ah nhasmilies/grin.gifsmilies/grin.gifsmilies/grin.gif
0
...
được viết bởi Trang, Tháng tám 20, 2012
hi.
sao bạn hok hướng dẫn cách làm chùm sáng quay nhỉ?
thanks
0
...
được viết bởi dung_thu, Tháng tám 24, 2012
có cách nào đơn giản hơn k bạn? nếu mình muốn làm hiệu ứng quạt thông gió thổi ra 1 luồng khí bay thì làm thế nào?
0
...
được viết bởi phan thanh, Tháng mười 10, 2012
hieu ung chieu sang, lam ntn vay ban
0
...
được viết bởi Hiệu ưng này hay, Tháng mười 12, 2012
Hiệu ưng này hay quá mà ko lấy ddc huhu bạn nào lấy mã nguồn cho tôi xin với
http://www.flash-filter.net/ra...ect.phtml
Địa chỉ email này đã được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó.
0
...
được viết bởi Nguyễn Văn Khánh, Tháng mười 29, 2012
Bạn Linh ah! hôm nào rảnh chỉ cho tớ vài chiêu nhé!
0
...
được viết bởi ng�c, Tháng mười hai 11, 2012
Mình tên NGỌC mình đang cần hỏi một vài thứ về hiệu ứng trong Actionscript bạn nào có thể giúp mình ko.
Mình cám ơn nhiều.
nick của mình là: thaongocbt
0
...
được viết bởi mimi kute, Tháng mười hai 18, 2012
Mún cho lửa nhỏ lại làm sao z bạn?
0
...
được viết bởi đào nhung, Tháng tư 10, 2013
tớ đã làm như trên mà ko đk ,tớ muốn làm cảnh rừng cháy mà
0
...
được viết bởi tèo adam, Tháng năm 02, 2013
làm chả được gì hết
0
...
được viết bởi tèo adam, Tháng năm 02, 2013
mình làm hoài mà nó k hiện thứ j hết vậy
0
...
được viết bởi matamune, Tháng mười 17, 2013
làm sai thì sao mà nó hiện lên , lúc các bạn giải nén ra thư mục com nó tới 2 cái thư mục com lận ( ở trong và ở ngoài ) nếu save to cái FL thì phải save vào bên trong của thư mục com // hoặc cut/coppy thư mục com bên trong ra ngoài rồi mới save to được .
0
...
được viết bởi matamune, Tháng mười 17, 2013
cho hỏi thêm làm sao có thể làm mất cái viền của khung lửa đi được không ?
0
...
được viết bởi Lộc, Tháng năm 12, 2014
file com lửa đó hình như bị hư rồi mấy bạn mình lấy về dùng không được nhưng khi dùng Sothink SWF tách từ file gốc ra thì dùng được smilies/smiley.gif

Viết bình luận
nhỏ hơn | lớn hơn

busy