Giọt nước đọng trên lá - Adobe Flash CS6

Bước 1:

Tạo 1 file file mới Ctrl + N, chọn loại Action Script 2.0 nhé. Có thể nhấn Ctrl + J để mở bảng Document Setting sau đó thiết đặt các tham số chiều rộng, chiều cao, tốc độ frame cho file flash của bạn.

Bước 2:

Import bức ảnh nền mà bạn định làm hiệu ứng này vào flash bàng cách vào: File > Import > Import to Stages (Ctrl + R), sau khi Import vào bạn có thể vào bảng Align để căn hình theo ý của mình, nếu bạn muốn hình bạn Import vào nằm giữa vùng hiển thị của flash thì bạn vào: Window > Align (Ctrl +K) rồi thiết đặt như hình dưới.

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

Bước 3:

Tạo 1 layer mới, phóng to file flash lên (Ctrl +) để vẽ giọt nước, bạn có thể vẽ bằng Photoshop, nếu không có hãy import file ảnh đính kèm cuối bài vào Library như bước trên.

Bước 4:

Nhấn Ctrl + A chọn toàn bộ giọt nước rồi bạn nhấn F8 để Convert nó thành dạng Movie Clip, nháy đúp 2 lần vào giọt nước để vào bên trong. Tiếp tục nhấn Ctrl + A một lần nữa rồi nhấn F8 để Convert giọt nước thành Movie Clip lần thứ 2.

Ở đây bạn Click vào Frame thứ 16 nhấn phím F6 để tạo các Keyframe, rồi bạn sử dụng lệnh Ctrl+T scale hình giọt nước to lên:

Tiếp tục lần lượt nhấn F6 ở các frame thứ 17, 18, 19, 20 và 21để tạo thêm các Keyframe.

Sử dụng lệnh Ctrl+T ở các frame thứ 17, 18, 19, 20 và 21 bạn thay đổi vị trí của giọt nước đôi chút để tạo ra sự lắc lư cho nó.

Rồi sau đó Click vào frame thứ 35 nhấn F6 để chèn thêm Keyframe, ở frame này bạn click vào giọt nước kéo thẳng nó xuống phía dưới để chúng ta sẽ làm nó rơi xuống.

Tiếp tục click chuột phải vào bất kỳ nơi nào giữa frame 1 -16 và 21 -35 chọn Create Classic Tween.

Bước 5:

Tạo 1 layer mới, trên layer này ở frame 16, 17 bạn nhấn F6 và ở frame 50 bạn nhấn F5.

Click vào frame đầu tiên, bạn sẽ thấy ở bên phải có 1 bảng và bạn hãy đặt tên cho Frame này trong ô Name là start

Tiếp tục click vào frame thứ 17 đặt tên cho nó là over. Giờ bạn Click chuột vào frame thứ 16 nhấn phím F9 mở bảng ActionScript chèn vào đoạn code sau:

stop();

Nhấn F9 để tắt bảng ActionScript, tiếp tục Click vào frame thứ 17 (Frame over) nhấn phím F9 để mở bảng ActionScript và chèn vào đoạn code sau:

starttime = getTimer()+8000+radomtime;

Tạo 1 layer mới, sử dụng công cụ Oval Tool (O) vẽ 1 hình elip bao quanh hình giọt nước rồi nhấn F8 để Convert nó thành dạng Button. nhấn F9 mở bảng ActionScript rồi chèn vào đoạn code này trên Button.

on (release, rollOver) {

gotoAndPlay("over");

}

Sau đó nhấn F9 để tắt bảng ActionScript, Click vào frame 17 nhấn F6 rồi nhấn phím Delete. Nháy đúp vào Button để vào bên trong, ở frame Hit bạn nhấn F6 rồi click vào frame Up nhấn phím delete.

Bước 6:

Trở lại 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:

Ta sẽ thấy có 2 layer mà ta đã làm ở đầu bài là layer chứa ảnh và layer giọt nước.

Click vào Movie Clip giọt nước, bạn đặt tên cho nó là bol nhé.

Giờ bạn tạo thêm 1 layer mới, ở frame 1, 2 và 3 lần lượt nhấn F6.

Bước 7:

Giờ chúng ta sẽ viết code cho bài tập này.

Click vào frame 1 nhấn F9 để mở bảng ActionScript chèn vào đoạn code sau:

i = 1;

Nhấn F9 tắt bảng ActionScript, click vào frame thứ 2 nhấn F9 mở bảng ActionScript chèn vào đoạn code sau:

radomscale = (random(4)+2)*26;

duplicateMovieClip("bol", "bol"+i, i);

setProperty("bol"+i, _x, random(450));

setProperty("bol"+i, _y, random(320));

setProperty("bol"+i, _xscale, radomscale);

setProperty("bol"+i, _yscale, radomscale);

i++;

Trong đó: 450 và 320 là chiều rộng và chiều cao khu vực gọt nước sẽ xuất hiện.

Nhấn F9 để thoát bảng ActionScript, click vào frame thứ 3 và mở bảng ActionScript chèn lên frame này đoạn code:

if (i<=45) {

gotoAndPlay(2);

} else {

stop()

}

Đóng bảng ActionScript, sử dụng công cụ Selection Tool (V), click vào Movie clip giọt nước mà bạn đặt tên là bol ở trên nhấn F9 mở bảng ActionScript chèn vào đoạn code sau:

onClipEvent (load) {

radomtime = random(5);

starttime = getTimer()+8000+radomtime;

}

onClipEvent (enterFrame) {

Timercheck = starttime-getTimer();

if (Timercheck<=0) {

this.gotoAndPlay("over");

}

}

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

Xem thử: http://megaswf.com/file/2569702.swf

Link tải file mẫu .fla: http://www.mediafire.com/?7faa55le1dnbliz