Tạo hiệu ứng bóng nước sóng sánh lung linh

Bình thườngTuyệt vời

Có rất nhiều bạn quan tâm đến hiệu ứng này, vậy hôm này mình sẽ hướng dẫn các bạn làm nó nhé. Chắc chắn xem xong tut này 90% các bạn mới học flash đều làm được vì nó quá đơn giản đến bất ngờ. :)

Nguyên vật liệu cho bài tập này chỉ là một tấm hình mà bạn muốn tạo hiệu ứng sóng nước, bạn nên dùng qua photoshop để chỉnh cho phù hợp. Mình là mình chọn luôn cái ảnh này đỡ phải chỉnh nhiều:

Ah nhân tiện mình sẽ hướng dẫn luôn các bạn cách tạo, anh nền qua photoshop trước khi làm nguyên vật liệu cho Flash.

Có rất nhiều các tạo bóng nước nhưng mình chỉ xin giới thiệu 2 cách thôi nhé, các cách khác các bạn nghiên cứu thêm.

Cách 1: Tạo nước bằng Filter.

Vidu: Mình có 1 bức ảnh như vậy:

Giờ ta sẽ tiến hành tạo nước cho nó ở bên dưới qua Photoshop.

sau khi đã cho bức ảnh vào trong Photoshop bạn chọn công cụ Rectangular marquee Tool (M), Kéo ở đoạn dưới bức ảnh như hình dưới:

Tiếp đó bạn chọn như trong hình:

Nó sẽ ra 1 bảng nữa, Bạn nhấn OK.

Tiếp theo bạn vào Filter > Stylize > Wind, thiết lập như hình dưới:

OK. Cuối cùng ta sẽ được như kết quả như sau:

Cách 2: Đảo ngược ảnh và tạo bóng nước

Tương tự như trên chỉ khác là, cái bóng dưới nước là hình ảnh đảo ngược của ảnh như hình dưới:

Và kết quả tương tự cách 1 ta sẽ có:

Đây là cách đơn giản chúng ta là bóng nước trong Photoshop. Nhưng chúng không đẹp và trông buồn tẻ quá. Vậy chúng ta sẽ bắt đầu với flash để xem nó khác biệt thế nào nhé. Nhớ giữ lại bức ảnh dưới để ta sẽ sử dụng trong Flash nhé:

Ok bắt đầu nào.

Bước 1:

Tạo 1 tài liệu Flash mới Ctrl + N, nhấn Ctrl + J để tùy chỉnh các thông số cho bài flash này như sau: (tùy theo kích thước bức anh hay yêu cầu mà bạn điều chỉnh cho phù hợp nhé, mình chọn thiết đặt như vậy vì bức ảnh của mình có kích thước 450x320).

Bước 2:

Import bức ảnh vào flash, File > Import > Import to Stage... (Ctrl + R), Sau đó bạn điều chỉnh bức ảnh cho vừa với khung hiển thị của flash bằng cách mở bảng Align: Window > Align (Ctrl + K) và điều chỉnh như hình sau:

Bước 3:

Sử dụng công cụ Selection Tool (V), Click chuột phải vào tấm hình chọn Break Apart.

Bước 4:

Bạn click vào vùng xám (vùng không hiển thị của flash), giữ chuột và béo sang bên phải sao cho tạo thành 1 khung như hình dưới, (bạn cố gắng kéo đúng điểm giao phân cách trong ảnh nền giữ phần trên mặt nước và dưới mặt nước).

Sau khi bạn kéo xong sẽ được kết quả: (Phần mình khoanh đỏ là phần bạn vừa kéo chọn ở trên).

Bước 5:

Tiếp theo nhấn luôn F8 bạn nhé để covert nó thành Movie Clip, đặt tên cho movie clip này là: aloflash

Bước 6:

Tạo 1 layer mới Click vào frame đầu tiên trên layer mới này và nhấn F9, bạn chèn vào đoạn code sau:

ripple = new flash.display.BitmapData(aloflash._width, aloflash._height);

offset = new flash.geom.Point(0, 0);

speed = 0.5;

this.onEnterFrame = function() {

offset.y -= speed;

ripple.perlinNoise(150, 6, 2, 1.1, true, true, 1, true, offset);

aloflash.filters = [new flash.filters.DisplacementMapFilter(ripple, ripple, 0, 1, 30, 30)];

};

Ok thế là xong rồi, quá đơn giản phải không các bạn. Hãy nhấn Ctrl + Enter để thưởng thức nhé.

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

Theo aloflash.com

Download

Read more »

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

Read more »