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



You are here: Tutorials  AS 1.0 - 2.0 Làm hiệu ứng sóng sánh trong flash AS2

Làm hiệu ứng sóng sánh trong flash AS2

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

Hi all. Hôm nay mới rảnh để viết tut, làm nhiều demo quá nên giờ thanh lý cũng hơi mệt. Cái tut này cũng khá hay, bạn có thể làm lá cờ bay phấp phới chẳng hạn, hay làm cái logo trang web của bạn sóng sánh cho hoành tráng. ngoài ra còn rất nhiều ý tưởng cho các bạn khám phá.

Buôn nhiều quá giờ mình tiến hành làm nhé.

Bước 1:

Tạo 1 file flash mới Ctrl + N chọn loại Action Script 2.0, Bạn có thể nhấn Ctrl + J mở bảng Document Setting để thiết đặt các thông số cho flash của bạn.

Bước 2:

Sử dụng công cụ Rectangle Tool (R), vẽ 1 ô chữ nhật hoặc ô tròn phần mà bạn muốn làm hiệu ứng sóng sánh trong đó.

Sau đó sử dụng công cụ Selection Tool (V), click chuột vào hình vừa vẽ, vào Window > Swatches (Ctrl + F9) để mở bảng Swathches và chọn bảng màu như sau:

Sau đó vào Window > Color (Shift + F9) để mở bảng Color và bạn thiết đặt theo tham số ở hình dưới, bạn click vào cái khóa mầu bên trái chọn màu đỏ và cái khóa màu bên phải chọn màu trắng để Alpha cho nó là 0% như hình nhé:

OK. tiếp tục chọn hình vừa vẽ nhấn phím F8 để Convert nó thành dạng MovieClip. Đặt tên cho MovieClip này là: ramp

Nhấn F8 1 lần nữa để Convert tiếp nó thành dạng MovieClip 1 lần nữa đặt tên cho nó là: displace_mc

Làm xong bạn khóa layer này lại nhé.

Bước 3:

Tạo 1 layer mới (đây là layer các bạn có thể chèn hình ảnh logo của bạn, hay đoạn chữ bạn muốn làm hiệu ứng sóng sánh) mình sẽ chèn logo aloflash vào (nếu là ảnh bạn nhớ để là file PNG dạng trong suốt nhé).

Vào File > Import > Import to Stages... Sử dụng công cụ Selection Tool (V) chọn hình ảnh vừa Import vào rồi đặt hình ảnh  vào vị trí thích hợp bạn muốn.

Click chọn hình logo hay đoạn Text bạn vừa Import hoặc tạo ra. Nhấn F8 để Convert nó thành dạng MovieClip và đặt tên cho MovieClip này là: flag_mc

OK vậy là xong giai đoạn thiết kế.

Bước 4:

Tạo 1 layer mới click vào frame đầu tiên nhấn phím F9 để mở bảng ActionScript và chèn vào đoạn code sau:

Stage.scaleMode = "noScale";
displace_mc.createEmptyMovieClip("perlin", 1);
var ramp = displace_mc.ramp;
ramp.swapDepths(2);
var speed = 1;
var channel = 1;
var flapX = 20;
var flapY = 5;
var mode = "clamp";
var offset = new flash.geom.Point(0, 0);
var displaceBitmap = new flash.display.BitmapData(ramp._width, ramp._height);
var displaceFilter = new flash.filters.DisplacementMapFilter(displaceBitmap, offset, channel, channel, flapX, flapY, mode);
var baseX = 5;
var baseY = 5;
var octs = 1;
var seed = Math.floor(Math.random() * 20);
var stitch = true;
var fractal = true;
var gray = false;
var noiseBitmap = new flash.display.BitmapData(500, 1);
noiseBitmap.perlinNoise(baseX, baseY, octs, seed, stitch, fractal, channel, gray);
var shift = new flash.geom.Matrix();
onEnterFrame = function ()
{
    shift.translate(speed, 0);
    with (displace_mc.perlin)
    {
        clear();
        beginBitmapFill(noiseBitmap, shift);
        moveTo(0, 0);
        lineTo(ramp._width, 0);
        lineTo(ramp._width, ramp._height);
        lineTo(0, ramp._height);
        lineTo(0, 0);
        endFill();
    } // End of with
    displaceBitmap.draw(displace_mc);
    flag_mc.filters = [displaceFilter];
};
onMouseDown = function ()
{
};
onMouseUp = function ()
{
    displace_mc._visible = false;
};
onMouseUp();

Trong đó: 

var speed = 1; là tốc độ sóng sánh của hình 1 là nhỏ nhất. 

var channel = 1; nếu = 1 thì nó sẽ chéo xuống dưới, = 2 nó sẽ chéo chếch lên trên.

var flapX = 20; và var flapY = 5; đây là 2 thông số thiết lập giao động của sóng theo trục X và Y.

var baseX = 5; và var baseY = 5; là độ lăn tăn của sóng, càng lớn thì sóng càng to.

var octs = 1; là độ răng cưa của sóng, thiết lập càng cao răng cưa càng nhiều.

Các bạn cỏ thể thay đổi các thông số trên để test

Tạm mấy cái chính thế nhỉ. Những code khác các bạn tự mày mò nhé.

Giờ thì đã OK rồi, bạn hãy nhấn Ctrl + Enter để xem thành quả của mình nào.

Nếu theo code trên thì kết quả nó sẽ ra thế này:

Chúc các bạn thành công

aloflash.com

Download

Bình luận (12)Add Comment
0
...
được viết bởi anỉo, Tháng mười hai 03, 2010
?? đang post bài sao lại thôi vậy bạn smilies/cry.gifsmilies/cry.gif
0
...
được viết bởi Quoc Long, Tháng tư 01, 2011
Mình đã làm theo bạn nói rùi nhưng mà khi copy code vào nó báo code bị lỗi chán quá
0
...
được viết bởi ..., Tháng tư 10, 2011
smilies/sad.gif code bi lỗi rồi .chỉnh lai giúp mình di host oi
0
...
được viết bởi du, Tháng tư 10, 2011
uh. minh cũng chạy không được
0
...
được viết bởi Pham minh Dun, Tháng tư 21, 2011
chay khong dc roi smilies/angry.gif
0
...
được viết bởi nguyen van toa, Tháng mười 07, 2011
ode bi die roi ,chay ko duoc .sua gium minh di
tiec wa
0
...
được viết bởi nguyen van toa, Tháng mười 07, 2011
monh duoc thu som .thank you
0
...
được viết bởi yeu do hoa, Tháng mười 19, 2011
khong chay dc ban oi...
0
...
được viết bởi yeu do hoa, Tháng mười 19, 2011
Chan Qua thui
0
...
được viết bởi hang, Tháng một 20, 2012
sao chi co chu nhap nhay thoi nhi the con la co thi changr thay dau
0
...
được viết bởi vu, Tháng tám 06, 2012
lam sao de la co bay tu phai sang trai vay ban
0
...
được viết bởi 5th7, Tháng chín 05, 2014
Edit code như nào để có thể sóng theo chiều dọc được ạ?

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

busy