Options

hiệu ứng bóng nước sóng sánh lung linh | Diễn Đàn Tuổi Trẻ Việt Nam Uhm.VN

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

xuka2030 > 12-09-2011, 06:50 AM

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:
[INDENT] 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)];
};

[/INDENT] 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
aloflash.com
Download
Bài trước Bài tiếp theo

hiệu ứng bóng nước sóng sánh lung linh | Diễn Đàn Tuổi Trẻ Việt Nam Uhm.VN

Index

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