Giọt nước rơi bên cửa sổ flash AS2

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

Bạn thử di chuột vào những giọt nước bên cửa sổ xem nhé. Đây là hiệu ứng mà bạn có thể sử dụng để làm tăng thêm độ sinh động cho bức ảnh. Chúng ta hãy cùng nghiên cứu nó nhỉ.

Nguyên vật liệu cho bài tập này là 1 bức ảnh, bạn có thể bảo người iu ngồi bên cửa sổ làm mẫu rùi bạn chụp, còn mình không có người iu nên đành lấy hình cô gái này (chưa kịp xin quyền tác giả tấm ảnh :P).

OK. giờ chúng ta đi vào từng bước thực hành.

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 +) để chúng ta chuẩn bị vẽ giọt nước. Sử dụng công cụ Oval Tool (O) vẽ 1 hình elip như hình sau:

Sử dụng công cụ Selection Tool (V), click vào hình elip vừa vẽ rồi mở bảng Swatches bằng cách vào: Window > Swatches (Ctrl + F9), Chọn loại màu như trong hình dưới mình đã khoanh đỏ:

Sau đó bạn mở bảng màu Color bằng cách vào Window > Color (Shift + F9) Rồi thiết đặt lại màu như sau:

Bạn tưởng tưởng chúng ta đang vẽ bóng đổ cho giọt nước nên cần màu đen nhạt dần ra ngoài, nên 2 cái khóa màu mình khoanh tròn đỏ bạn để độ alpha0% nhé.

Tiếp tục sử dụng công cụ Oval Tool (O), vẽ 1 hình elip nhỏ hơn hình vừa rồi bên cạnh đó rồi đổ các khóa màu là trắng hết, sắp xếp theo thứ tự như hình dưới, các khóa màu mình không khoanh màu đỏ thì các bạn để Alpha là 0%, còn khóa màu mình khoanh tròn bạn để Alpha là 30% nhé.

Sau khi vẽ xong hình elip này bạn đặt chồng lên hình elip trước ta sẽ được:

Ngoài ra bạn có thể tùy chỉnh dải Radial bằng cách sử dụng công cụ: Gradient Transform Tool (F), click vào hình để xoay hay tùy chỉnh dải màu theo ý thích.

Bước này mình làm sơ sơ để các bạn hình dung cách thiết kế giọt nước, còn đây là file gốc giọt nước các bạn hãy download về và sử dụng đỡ mất công thiết kế, bạn nào muốn sáng tạo theo kiểu riêng thì tự làm nhé.

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 công cụ Free Transform Tool (Q), Giữ phím Shift kéo 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 công cụ Selection Tool (V) ở 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.

Ta được:

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. Ta sẽ được như hình dưới:

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 Ta được như hình dưới:

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. Còn layer ảnh và layer giọt nước ở frame 3 các bạn nhấn F5 để được như hình dưới:

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é.

Ý nghĩa của bài tập này là tạo 1 chuyển động, và dùng code để nhân ngẫu nhiên chuyển động đó ra và trong 1 khoảng thời gian nó sẽ mất đi và xuất hiện lại với vị trí khác nhau. các bạn có thể dựa trên bài tập này để nghĩ ra ý tưởng áp dụng cho riêng mình.

Thực ra bài tập này chỉ là cơ bản, vì nó khá dài nên mình không thể hướng dẫn chi tiết cụ thể được, các bạn hãy xem trong file gốc đính kèm mình gửi để hiểu cách làm nhé. Mình làm giọt nước to ra để các bạn xem cách thiết kế giọt nước cho dễ, khi áp dụng thì các bạn thu nhỏ giọt nước lại cho phù hợp với file của mình nhé.

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

aloflash.com

Download

Share