Giọt nước rơi AS2

In
Xem kết quả: / 35
Bình thườngTuyệt vời 

Chào các bạn, nhìn hiệu ứng này cũng khá hấp dẫn hôm nay mình xin hướng dẫn các bạn cách tạo nó. Mong rằng nó sẽ làm bạn thích thú.

Nguyên vật liệu cho bài tập này là 1 hình nền phù hợp bạn có thể chọn 1 tấm hình bạn thích, hoặc bạn có thể thiết kế chuyển động tùy theo ý bạn, cái này nó chỉ phủ trên lớp bề mặt flash nên bạn có thể làm thế nào tùy ý. Mình chọn tấm ảnh này làm nền.

Chúng ta bắt đầu nhé.

Bước 1:

Tạo 1 file flash mới Ctrl + N, chọn loại ActionScript 2.0, bạn có thể nhấn Ctrl + J để mở bảng Document Setting điều chỉnh các thông số phù hợp với file flash bạn làm.

Bước 2:

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

Bước 3:

Sử dụng công cụ Selection Tool (V) click chọn vào bức ảnh nhấn phím F8 để Convert nó thành dạng Movie Clip và đặt tên cho nó là: photo_mc

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

Bước 4:

Tạo 1 layer mới, nhấn Ctrl + để phóng to lên, sử dụng công cụ Oval Tool (O) giữ phím Shift vẽ 1 hình tròn.

Sử dụng công cụ SelectionTool (V) click chọn hình tròn vừa vẽ, vào: Window > Swatches (Ctrl + F9) mở bảng Swatches chọn loại Radial như hình dưới:

Sau đó bạn vào: Window > Color (Shift + F9) để mở bảng Color như hình dưới:

Bạn hãy để ý thanh màu sắc, ở trên ta thấy có 2 màu đen và trắng, giờ bạn hãy Click vào thanh đó để thêm và điều chỉnh màu sắc như hình dưới nhé.

Giờ thì bạn hãy làm như sau, tất cả những ô khóa màu trắng bạn để Alpha là 0% nhé. ta sẽ được như sau:

Giờ bạn sử dụng công cụ Selection Tool (V) Click chọn hình tròn đó rồi nhấn F8 để Convert nó thành dạng Movie Clip. Sau đó bạn Click đúp 2 lần vào movie này để vào bên trong.

Ở trong này bạn Click vào frame thứ 60 nhấn F6 để tạo keyframe tại đây bạn chỉnh mục Color sao cho tất cả khóa màu để Alpha là O% nhé.

Click vào frame đầu tiên, sử dụng công cụ Free Transform Tool (Q) và giữ phím Alt kéo hình tròn nhỏ hết cỡ lại:

Click chuột phải vào bất cứ nơi nào giữa 2 frame 1 và 60 bạn chọn Create Shape Tween.

OK, giờ bạn click vào frame 60 nhấn F9 để mở bảng ActionScript chèn vào đoạn code sau:

this._x = random(Stage.width);
this._y = random(Stage.height);
gotoAndPlay(random(10));

Nhấn F9 để tắt bảng ActionScript ta sẽ được như hình:

OK giờ thì chúng ta hãy quay ra Scene đầu tiên bằng cách nhấn vào 1 trong những vùng mình đã khoanh tròn ở hình dưới:

Sau khi ra ngoài bạn nhấn phím Delete để xoa bỏ MovieClip hình tròn ta vừa tạo, sau đó bạn mở Libraly bằng cách vào: Window > Libraly (Ctrl + L), click chuột phải vào Movie Clip hình tròn ta vừa tạo chọn Propreties...

Thiết lập như hình dưới đặt tên cho nó là:  wave

OK. Giờ bạn Click vào frame đầu tiên trên layer 2, nhấn F9 để mở bảng ActionScript chèn vào đoạn code sau:

 

import flash.filters.DisplacementMapFilter;
import flash.display.BitmapData;
import flash.geom.Point;
this.createEmptyMovieClip("waterHold", this.getNextHighestDepth());
waterHold._visible = false;
var numOfRipples:Number = 65;
var speed:Number = 18;
for (var i:Number = 0; i<numOfRipples; i++) {
var ripple:MovieClip = waterHold.attachMovie("wave", "wave"+waterHold.getNextHighestDepth(), waterHold.getNextHighestDepth(), {_x:random(Stage.width), _y:random(Stage.height)});
ripple.gotoAndPlay(random(65));
}
onEnterFrame = function () {
var bm:BitmapData = new BitmapData(waterHold._width+65, waterHold._height+65, true, 0x50000000);
bm.draw(waterHold);
photo_mc.filters = [new DisplacementMapFilter(bm, new Point(0, 0), -1, 1, 1, speed)];
};

Vậy là đã hoàn tất bài tập này, bạn có thể nhấn Ctrl + Enter để xem kết quả.

Qua bài tập này, nếu bạn nào muốn thay hiệu ứng giọt nước có thể nghĩ ra cách khác để ứng dụng, flash thiên biến vạn hóa, bạn chỉ cần nắm dc cơ bản có thể tạo ra vô vàn điều lý thú trên điều cơ bản đó.

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

aloflash.com

Download

 

Share