AloFlash ! Cộng đồng flash Việt Nam



You are here: Tutorials  AS 1.0 - 2.0 Tạo khói bốc lên bằng ActionScript trong flash

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

Email In PDF.
Xem kết quả: / 15
Bình thườngTuyệt vời 

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_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.2Y = 163.7 (như hình dưới) thì mình điền vào trong code này là _x = 195_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.
 
aloflash.com
 
Bình luận (21)Add Comment
..., Bình luận đánh giá cao nhất [Hiện ra]
0
...
được viết bởi cố lên, Tháng mười 14, 2010
Bạn có chia sẻ cho mọi người được gì không mà sao bạn chửi người ta ngu thế, mình rất ghét những loại người ăn sẵn rồi lại chửi người khác, có những người như bạn, xã hội thật khó mà phát triển, người ta buồn ngủ mai người ta viết tiếp thì có gì đâu. Đừng để ý những phần tử nhỏ này Admin nhé, cố gắng viết nhiều tut hay cho mọi người học, mình ủng hộ bạn hết mình. smilies/wink.gif
0
...
được viết bởi doccogiang, Tháng mười 14, 2010
Đã đóng góp đc cái gì cho xã hội chưa mà chửi người khác, đúng là cái đồ vô văn hóa.
0
...
được viết bởi Rocky, Tháng mười 14, 2010
Thanks ban. Bài tut rất là chi tiết cho những newbie như mình. Keep it up.smilies/kiss.gif
0
...
được viết bởi sting, Tháng mười 21, 2010
hay day, tiep tuc phat huy nhe admin
@Viet: vo van hoa, ngu con to ra nguy hiem. Neu thong minh thi may' phai hieu lam flash la khong de
0
...
được viết bởi tuan, Tháng mười 21, 2010
Bạn đừng chấp nhứt cái thằng mất dạy ấy. Ngu như con bò bày đặt ta đây. Ngon thì viết cái tut cái coi. Tao mà có đứa pà con như mày à thằng mất dạy
0
...
được viết bởi banhmiopla, Tháng mười 23, 2010
thanks u so much! ^_^ useful for all
0
...
được viết bởi Ph¡m Hi¿u, Tháng mười 25, 2010
thanks Linh , co gang tinh than share nhe :> , bai tut rat good
0
...
được viết bởi Hoàng Anh, Tháng mười hai 05, 2010
Cái loại đéo chia sẻ được cái đéo gì cho mọi người mà còn mở mồm ra mà chê bai. Chết mẹ đi cho đẹp đời cái.
0
...
được viết bởi leolai, Tháng mười hai 24, 2010
bài viết này hay nhưng đóng góp 1 phần không nhỏ vào Ô NHIÊM MÔI TRƯỜNG anh Linh ơi smilies/grin.gif
0
...
được viết bởi nguyenhailogo, Tháng một 20, 2011
mùa lẩu đang tới ấm lòng giá rét. Tút của bạn làm nồi lẩu nóng
0
...
được viết bởi Thanh, Tháng ba 03, 2011
thanks! admin
@viet:dung la do vo van hoa
0
...
được viết bởi tienltq, Tháng ba 07, 2011
hay quá adim ơi
0
...
được viết bởi NH, Tháng chín 02, 2011
Cam on admin
0
...
được viết bởi thang ngu, Tháng mười một 16, 2011
làm theo tut chẳng được
0
...
được viết bởi DoThieuXuyen, Tháng mười hai 13, 2011
mong duoc Amin lam nhieu hon de hoc hoi ! cam on bang LONG CHAN THANH .
0
...
được viết bởi otxeng, Tháng hai 23, 2012
good, thanks nhé
0
...
được viết bởi pro - me, Tháng ba 10, 2012
thanks a Linh, bài viết tuyệt vời
0
...
được viết bởi sdfdf, Tháng một 07, 2013
hay lắm đang cần
0
...
được viết bởi Mr Star, Tháng hai 14, 2014
làm sao để tăng tốc độ khói bay admin? mình thử thay thông số trong code tăng thêm hoặc giảm bớt nhưng vẫn không tăng tốc độ lên được, còn giảm số frame để tăng tốc thì nó bay lên không mượt
0
...
được viết bởi lemabi, Tháng năm 25, 2014
cho mình hỏi chút nha.. cai lần convert sang movie clip lần thu 2 của đám khói trắng minh vẫn đặt tên như lần một là smk lun ha?

Viết bình luận
nhỏ hơn | lớn hơn

busy