Tạo khói bốc lên bằng ActionScript trong flash

Mình thấy nhiều bạn rất quan tâm đến ActionScript tạo hiệu ứng khói bốc lên. Thực ra để viết AS rất mất thời gian và tỉ mỉ, nếu để áp dụng với nhiều loại khác nhau thì cũng rất khó khăn, như khói nhà máy bốc lên lại kiểu khác, khói ly cà phê tỏa ra lại kiểu khác, khói tuy thế nhưng muôn hình muôn vẻ...

 Tạm thời mình hướng dẫn các bạn làm AS cho khói nhà máy nhé. Còn mấy cái kia để mình nghiên cứu từ từ. Nếu bạn nào có ý tưởng hay muốn chia sẻ cho mọi người cùng học tập xin hãy gửi bài viết trong diễn đàn, bài nào hữu ích mình sẽ đăng ra đây. Cảm ơn. Chúc các bạn thành công.
Giờ chúng ta quay lại bài học. Để làm hiệu ứng này nguyên vật liệu chúng ta cần là một nhà máy có ống khói vút lên tận trời :D, nghe ô nhiễm môi trường quá.

Bước 1:
Tạo 1 tài liệu Flash mới với kích thước bằng kích thước tấm ảnh nền, như mình chọn là 450x320 tốc độ frame: 15 FPS.
Bạn Import bức ảnh nền vào trong Flash bằng cách chọn File > Import > Import to Stage... (Ctrl +R).
Sau đó điều chỉnh nó vừa với khung hiển thị của flash bằng cách mở bảng Align: Window > Align hoặc nhấn Ctrl + K và chỉnh như hình dưới.

Làm xong bạn khóa layer này lại để tránh đụng chạm nhé.
Bước 2:
Tạo 1 layer mới, bạn nhấn Ctrl + để zoom hình lên tầm đủ nhìn thấy miệng ống khói như hình dưới là OK. Vì chúng ta sẽ vẽ khói vừa với miệng ống nên zoom to lên để dễ so sánh.

Bước 3:
Sử dụng công cụ Oval Tool (O), vẽ 1 hình bầu dục như hình dưới kích thước vừa với miệng ống khói nhé (mình đã khoanh dấu vòng tròn đỏ vào những điểm chú ý). Màu Fill là trắng và Stroke là trong suốt.

Bước 4:
Sử dụng công cụ Subselection Tool (A), Click chuột vào mép của hình bầu dục bạn vẽ rồi giữ chuột kéo nó thành 1 hình dạng đặc biệt như hình dưới (ùy bạn kéo sao cho đặc biệt 1 tý để lúc tạo hiệu ứng nó sẽ chuyển dộng thật hơn).

Bước 5:
Sau khi đã vẽ được 1 hình dạng ưng ý, bạn sử dụng công cụ Selection Tool (V), click chuột vào hình bạn vừa tạo nhấn F8 để convert nó thành dạng Movie Clip. Đặt tên cho nó là: smk

Sau khi đã convert xong bạn nháy đúp (click 2 lần liên tục) vào Movie Clip này, chúng ta sẽ tạo chuyển động khói ở trong movie clip đó.

Tiếp tục Convert nó thành Movie Clip lần nữa, bằng cách nhấn F8, Click chuột vào frame thứ 255 nhấn F6.

Sử dụng công cụ Free Transform Tool (Q), Kéo nó to ra.

Bước 6:
Sau đó bạn chọn công cụ Selection Tool (V), click vào hình vừa kéo ra, ở bên phải sẽ hiện bảng tùy chọn bạn tìm ô Filters click chọn hiệu ứng Blur.

Tùy chỉnh các tham số như sau:

Bạn xem đã giống đám khói chưa. :P
Tiếp tục click vào frame 1 (Frame đầu tiên), rồi click vào hình đám khói làm tương tự như những bước trên bạn tìm phần Filter và chọn Blur.

Thiết đặt tham số là 5 là ok rồi. (vì hình này nhỏ hơn hình kia nên tham số nhỏ hơn hi hi).

Bước 7: 
Click vào bất cứ nơi nào giữa frame 1 và frame 255 bạn nhấp chuột phải và chọn Create Classic Tween.

Làm xong bạn khóa layer này lại nhé.
Bước 8:
Ok vậy là ta đã xong đám khói, giờ ta tạo bóng cho đám khói để nhìn nó thật thật 1 chút.
Tạo 1 layer mới. Sử dụng công cụ Oval Tool (O), màu của Fill là màu xám bạn nhé rồi vẽ hình dạng như hình dưới. Tương tự như các bước ở trên bạn chọn công cụ Subselection Tool (A), click chuột vào mép của hình để kéo nó sao cho loàng ngoằng 1 tý (như hình dưới là ổn) rồi đặt nó cao hơn cái đám khói trắng bạn làm từ các bước trước 1 chút.

Chọn công cụ Selection Tool (V) click vào hình bạn vừa vẽ Convert nó thành Movie Clip bằng cách nhấn phím F8 chọn loại Movie Clip.
Click vào frame thứ 255 ở layer này bạn nhấn F6. kéo to nó ra như cuối bước 5 và làm tương tự các bước tiếp theo y như bước 6.
Bước 9:
Sau khi đã OK bạn kéo layer trên (layer đám khói xám) xuống dưới layer đám khói trắng. Ta sẽ được như hình sau:

OK vậy là chúng ta đã hoàn thành xong bước làm khói cho bài tập này, giờ chỉ còn việc chèn code cho nó nữa thôi.
Bước 10:
Trở lại Scene (cảnh) ngoài cùng nơi làm việc đầu tiên. bằng cách bạn có thể Click đúp vào ngoài vùng làm việc của flash hoặc click đúp vào nơi mình đánh đánh dấu đỏ trong hình và chon Scene 1.

Bước 11:
Giờ ta có 2 layer bên ngoài là layer nền và layer khói, mình đặt tên thế để các bạn dễ hình dung.
Sử dụng công cụ Selection Tool (V), Click vào đám khói nhấn F9 và chèn vào đoạn code sau:

onClipEvent (load) {

_alpha = 100;

_x = 195;

_y = 166;

yspeed = (random(5)/10)+0.6;

_yscale = 70+random(40);

_xscale = 70+random(40);

_rotation = random(360);

}

onClipEvent (enterFrame) {

_alpha -= 0.3;

if (_alpha<50) {

_alpha -= 0.4;

}

if (_alpha<1) {

this.removeMovieClip();

}

_y = _y-yspeed;

}

Trong đoạn code này bạn lưu ý 2 điểm là _x = 195 và _y = 166 đây là toạn độ mà đám khói sẽ hiển thị điểm mốc để bốc lên, mình sẽ lấy ví dụ minh họa bằng hình ảnh cho các bạn dễ hiểu:

Ví dụ: đám khói của mình muốn bốc lên từ vị trí X = 195.2 và Y = 163.7 (như hình dưới) thì mình điền vào trong code này là _x = 195 và _y = 164 (bạn có thể làm tròn).

 

 

Bước 12:

 

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

 

 

var count:Number = 0;

var delay:Number = 0;

onEnterFrame = function () {

delay++;

if (delay>4) {

delay = 0;

smokename = "smoke"+count;

smk.duplicateMovieClip(smokename, count);

count++;

}

};

 

 

Trong đó smk là tên Movie Clip khói.

 

P/S: Mình quên 1 công đoạn tạo tâm cho Movie Clip nữa để ActionScript hiểu, giờ bạn nháy đúp vào Movide Clip khói nhé nó sẽ vào bên trong chứa 2 layer mà kéo dài 225 frame, bạn tiếp tục Click đúp vào layer khói trắng để vào trong, chọn công cụ Free Transform (Q), kéo hình sao cho chấm tròn vừa khít với dấu + con con như 2 hình dưới đây:

 

 

Làm tương tự như vậy với đám khói xám bạn nhé.

 

Công đoạn cho bài tập này đã kết thúc bạn thử nhấn Ctrl + Enter để xem nhà máy của bạn có xả khói không nào. :D, Viết tút này cũng hơi dài, híc có bạn vào comment chẳng ra sao nhìn cũng nản, hi những được các bạn khác nhiệt tình hưởng ứng nên lại cố gắng chịu khó post thôi. cảm ơn mọi người.

 

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

Posted in: Hiệu ứng