Hiệu ứng tạo mặt nước chuyển động trong flash.

Bài này mình sẽ giới thiệu tới các bạn một hiệu ứng làm mặt nước chuyển động tự nhiên, với một đoạn code trong flash là bạn có thể làm được một hiệu ứng mới rồi, hiệu ứng này có thể áp dụng làm các baner về phong cảnh vv... Chúc các bạn thành công.

Bước 1:

Tạo 2 layer: Layer1: Đặt tên là mặt nước

Layer2: Đất và trời

Bước 2 :

Tại layer1, các bạn import một bức ảnh vào làm đối tượng để thực hành. Vào menu File > Import > Import to Stage (Ctrl +R) để đưa 1 bức ảnh bạn đã chuẩn bị sẵn vào phần thiết kế.

Bước 3 :

Tại layer1 click chuột phải vào bức ảnh ở khung trình chiếu và chọn "Break Apart" (Ctrl +B)

Bước 4 :

Vẫn ở phần layer1 các bạn sử dụng công cụ Lasso Tool (L) và chọn tất cả những phần mà chúng ta không muốn làm hiệu ứng trên đó.( vẽ ra những phần không làm) Mình vẽ như hình bên dưới :

- Sau khi đã chọn xong các bạn Copy (Ctrl + C), chọn Layer "Đất & Trời" và Paste vào đó (Edit Paste in Place)

Bước 5 :

Bây giờ chúng ta chọn lại Layer "Mặt Nước" và convert bức ảnh ở khung trình chiếu sang Movie Clip. Modify > Convert to Symbol,( Ấn phím f8 nó cũng chuyển sang dạng symbol đặt tên là matnuoc_mc.

Sau đó các bạn vào phần menu ở phía bên dưới có chữ Properties bạn kick vào đó chọn trong phần texbox chữ Movie clip rồi thay xóa chữ Instance Name và viết bằng chữ matnuoc_mc.

Chú ý : Phần này bạn phải ghi đúng tên để khi vào đoạn code flash còn phải gọi tên này ra, nếu bạn ghi sai tên là mặt nước không chuyển động được, tên này phải trùng với tên khi bạn gọi ra trong đoạn code thì nó mới hiển thị được đoạn code. Hình minh họa bên dưới Hình 1a

Hình 1a

Bước 6 :

Các bạn hãy tạo thêm 1 Layer mới (gọi là Action Script).

- Click chọn Frame đầu tiên, ấn F9 để mở cửa sổ Action Script và dán đoạn mã sau vào :

import flash.display.*;
import flash.geom.*;
import flash.filters.*;
myBitmap = new BitmapData(390,293,false,0);
pt = new Point(0,0);
mpoint = new Point(0,0);
myDispl = new DisplacementMapFilter(myBitmap, mpoint,1,2,10,50);
matnuoc_mc.myList = new Array();
matnuoc_mc.myList.push(myDispl);
matnuoc_mc.filters = matnuoc_mc.myList;
i = 1;
this.onEnterFrame = function()
{
filterList = matnuoc_mc.filters;
offset = new Array();
offset[1] = new Object();
offset[1].x = i;
offset[1].y = i/8;
myBitmap.perlinNoise(45,5,3,50,true,false, 7,true,offset);
filterList.mapBitmap = myBitmap;
matnuoc_mc.filters = filterList;
i++;
}

Bước7:

Bây giờ sản phẩm của chúng mình đã xong, các bạn chỉ cần ấn Ctrl + Enter để kiểm tra kết quả. Chúc các bạn thành công.

Hình 1: Sản phẩm sau khi làm xong

Posted in: Sóng nước, Thực hành code