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

In
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

Share