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



You are here: Tutorials  Hiệu ứng Làm điện giật trong Flash - AS3

Làm điện giật trong Flash - AS3

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

Hôm nay trời mưa đang ngồi quán cafe mình lấy cái nguồn Laptop cắm vào ổ điện nó kêu Bụp 1 cái và tóe lửa, sợ quá @@.

Với bài tập này các bạn có thể áp dụng rất linh động nếu biết phối hợp hoặc nghĩ ra thêm ý tượng, mình sẽ minh họa với 1 ví dụ nữa:

và 1 cái nữa:

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

Trước khi bắt đầu có lẽ cho mình xin nói vài lời:

Mình thành thật xin lỗi các bạn, mình đã đưa bài lên mà lại không viết đầy đủ, để mọi người phải nói là lừa đảo. Nhưng thú thật bây giờ mình cũng khá bận, mình đã có gia đình không còn độc thân và rảnh rang như trước nữa, công việc cũng nhiều hơn, lo toan cũng lớn hơn. Trong khi đó mỗi lần viết TUT mình lại mất khá nhiều thời gian, từ Test thử rồi suy nghĩ xem nên viết gì, viết thế nào, tập trung vào đâu cho đơn giản và mọi người dễ hiểu nhất. Vừa làm, vừa chụp hình, chèn chú thích, đôi khi đang mải viết mà quên cả ăn để cố làm hoàn thành TUT.  Mình nói những lời tâm sự này chỉ mong mọi người thông cảm, không phải mình không muốn Share, không muốn viết, hay là lừa đảo, chỉ là do mình không có nhiều thời gian lắm.

Thôi lần sau mình sẽ rút kinh nghiệm, khi nào có thời gian rảnh hẳn 1 ngày mình sẽ ngồi viết TUT để tránh việc đưa bài lên mà lại chưa có hướng dẫn như thế này.

Giờ mình sẽ hướng dẫn các bạn làm như Demo 1 nhé:

Bước 1:

Tạo 1 file flash mới chọn loại ActionScript 3.0.

Bước 2:

Bạn Save 2 file ảnh này về máy để chút ta Import vào Flash:

Nhân tiện các bạn Download luôn file này về và giải nén ra. ( dien-giat)

Bước 3:

Sử dụng công cụ Ractangle Tool (R) vẽ 1 hình chữ nhật, rồi chỉnh bảng Properties của hình chữ nhật này với X, Y = 0 và chiều cao chiều rộng bằng với file Flash của bạn. Mình làm file với kích thước 450x320 nên chọn như hình dưới:

Giờ bạn hãy vào Window > Swatches hoặc nhấn Ctrl +F9 và chọn 1 loại màu trong đó, mình chọn loại Radient đen và tím. như trong hình:

Sau đó bạn có thể sử dụng công cụ Gradient Transform Tool (F) để điều chỉnh màu sắc theo ý muốn. như hình dưới:

Bước 4:

Tạo 1 Layer mới bằng cách nhấn vào Icon như hình dưới:

Import 2 bức ảnh ổ cắm và bàn tay mà bạn đã Save về ở trên vào Flash bằng cách vào: File > Import > Import to Stage... hoặc nhấn (Ctrl + R) sau đó xắp xếp chúng ở vị trí thích hợp. (vị trí này sẽ ảnh hưởng đến đoạn code sau này của bạn, nó sẽ liên quan đến tọa độ X và Y của đối tượng).

Bước 5:

Click chọn bàn tay và Convert nó thành dạng MovieClip, bạn đặt tên cho nó là: fingers như hình dưới:

Bước 6:

Tạo 1 Layer mới, sử dụng công cụ Oval Tool (O) vẽ 1 hình tròn nhỏ vừa phải kích thước khoảng 18x18 là OK. sau đó bạn Click vào bảng màu và chọn độ Alpha % là 0 nhé.

Nhấn F8 để Convert hình tròn này thành MovieClip (đây chính là MovieClip sẽ tạo ra điện, hay điện sẽ xuất hiện từ MovieClip hình tròn này). Vì trong ví dụ này, chúng ta có tất cả là 4 nơi phát điện vậy là chúng ta cần 4 MovieClip này. Bạn hãy Nhấn (Ctrl + C) để Copy và (Ctrl + V) để Pase ra sao cho đủ 4 MovieClip này. Vì nó sẽ trong suốt nên nếu muốn xem các MovieClip này bạn hãy Click vào Layer chúng sẽ hiện ra. Nếu khi Click bất tiện bạn có thể khóa các layer bên dưới lại như hình sau:

Sau đó bạn đặt tên cho từng MovieClip này giống với bàn tay ở bước trên lần lượt là dot1, dot2, dot3, dot4 nhé.

Chú ý đoạn này nhé:

Đặt 2 MovieClip dot1dot2 vào 2 lỗ của ổ cắm.

Bạn chọn cả 2 MovieClip dot3dot4 bằng cách giữ phím Shift sau đó nhấn Ctrl + X để Cắt tạm thời. Click đúp vào MovieClip bàn tay để vào bên trong. Sau đó nhấn Ctrl + V để Pase 2 MovieClip dot3dot4 ra. Sau đó di chuyển 2 MovieClip này đến 2 đầu của phích cắm. Mình Up tạm cái video lên để dễ miêu tả:

Vậy là đã OK bước thiết kế.

Bây giờ chúng ta sẽ ra ngoài khung làm việc chính bằng cách Click chọn vào 1 trong nhưng vùng mình khoanh đỏ dưới đây:

Bước 7:

Tạo 1 Layer mới Click vào Frame đầu tiên nhấn chuột phải chọn Action... hoặc nhấn phím F9 để mở bảng ActionScript và chèn vào đoạn code sau:

import com.oaxoa.fx.Lightning;
import com.oaxoa.fx.LightningFadeType;
 
setChildIndex(fingers, 2);
 
var ix:Number=fingers.x;
addEventListener(MouseEvent.MOUSE_MOVE, onmove);
 
fingers.y=fingers.x/2;  //Khoảng cách bắt đầu của phíc cắm với trục Y.
 
function updatePositions():void {
    ll.endX=fingers.x+fingers.dot1.x;
    ll.endY=fingers.y+fingers.dot1.y;
    ll2.endX=fingers.x+fingers.dot2.x;
    ll2.endY=fingers.y+fingers.dot2.y;
}
 
function onmove(event:MouseEvent):void {
    fingers.x=mouseX-150;
    if(fingers.x<ix) fingers.x=ix;
    if(fingers.x>320) fingers.x=320; //Bạn có thể thay đổi thông số này để tùy biến độ nghiêng
    fingers.y=fingers.x/2; //Khoảng cách bắt đầu của phíc cắm với trục Y.
    updatePositions();
    event.updateAfterEvent();
}
addEventListener(Event.ENTER_FRAME, onframe);
function onframe(event:Event):void {
    ll.update();
    ll2.update();
}
 
var color:uint=0xddeeff;
var ll:Lightning=new Lightning(color, 2);
var ll2:Lightning=new Lightning(color, 2);
ll.blendMode=ll2.blendMode=BlendMode.ADD;
ll.childrenProbability=ll2.childrenProbability=.5;
ll.childrenLifeSpanMin=ll2.childrenLifeSpanMin=.1;
ll.childrenLifeSpanMax=ll2.childrenLifeSpanMax=2;
ll.maxLength=ll2.maxLength=50;
ll.maxLengthVary=ll2.maxLengthVary=200; // 200 Khoảng các xa nhất để tạo sét
 
ll.startX=dot3.x;
ll.startY=dot3.y;
ll2.startX=dot4.x;
ll2.startY=dot4.y;
 
var glow:GlowFilter=new GlowFilter();
glow.color=color;
glow.strength=3.5;
glow.quality=3;
glow.blurX=glow.blurY=10;
ll.filters=ll2.filters=[glow];
addChild(ll);
addChild(ll2);
 
updatePositions();

Ở đoạn code này các bạn lưu ý những phần mình chú thích.

Bước 8:

Các bạn lưu file Flash này cùng cấp với thư mục của file điện giật các bạn download và giải nén về ở trên. (các bạn có thể vào phần cuối bài viết này http://aloflash.com/thuc-hanh-flash/hieu-ung/558-lam-thac-nuoc-trong-flash.html để xem thêm).

Sau đó nhấn Ctrl + Enter để xem kết quả. Nếu chưa đúng tọa độ thì các bạn chỉnh sửa thông số những chỗ mình đã đánh dấu ở đoạn code trên nhé.

Rảnh mình sẽ hướng dẫn làm nốt các Demo sau.

Mong mọi người thông cảm vì quỹ thời gian mình hơi ít.

Chúc cả nhà sức khỏe và thành công !

Bình luận (34)Add Comment
0
...
được viết bởi Bat, Tháng tư 03, 2012
chỉ mình cách làm đi bạnsmilies/grin.gif
0
...
được viết bởi bunb0, Tháng tư 03, 2012
sao toàn lừa tình thế, có í Share thì tut lên đi, k thì thôi......nãnsmilies/angry.gif
0
...
được viết bởi Thuy Trang, Tháng tư 03, 2012
người ta viết TUT vất vả, không cảm ơn hay động viên 1 câu bạn lại nói như vậy, thật là buồn. Mình nghe nói để viết được 1 bài TUT hoàn chỉnh cụ thể thì phải mất cả buổi thật chí cả ngày. Rồi sẽ hoàn thành thôi. Nếu bạn giỏi thì bạn viết đi, có những người như thế này, vào xem có gì hay vọc, download về, rồi ngoảng cổ đi thẳng, không làm được, hoặc không hài lòng thì chửi bới, nói những câu thô tục. Haiz thật là buồn. Mong các bạn đừng để ý để những cá nhân ít ỏi này. Chúc các bạn sức khỏe, thành công và dành nhiều thời gian viết TUT cho mọi người học hỏi. smilies/cheesy.gif Thanks.
0
...
được viết bởi aloso, Tháng tư 03, 2012
Lại 1 đứa tỏ ra nguy hiểm smilies/angry.gif phải không bunb0
0
...
được viết bởi Hoài Thu, Tháng tư 04, 2012
Bác Ô hoành tráng quá smilies/grin.gif
0
...
được viết bởi Mắm tôm, Tháng tư 04, 2012
Đẹp quá ! hay quá ! Viết TUT đi bạn ơi nhìn thèm quá smilies/tongue.gif
0
...
được viết bởi hải, Tháng tư 04, 2012
SÉT giật tung trời, ảo thật smilies/kiss.gif
0
...
được viết bởi HDragon, Tháng tư 04, 2012
viêt tut em học với anh ơi, nhìn thích quá
0
...
được viết bởi bunbo, Tháng tư 05, 2012
nếu có ý định share thì mất gì phải dài dòng, nói thẳng cho vuông. "thuy trang" suy nghĩ cực đoan quá. nhìn vào thực tế đi bạn ơi, chã ai quay lưng vs' người giúp mình cả
0
...
được viết bởi bunbo, Tháng tư 05, 2012
thuy trang đã nói "dành nhiều thời gian viết TUT cho mọi người học hỏi. Thanks." vậy như thuy trang thấy đấy có tut gì đâu. câu này thy trang phải nghỉ lại. mình chẳng có tài gì nhưng mình cũng chẳng làm ntn.
0
...
được viết bởi Thuy Trang, Tháng tư 05, 2012
Mình nghĩ Share thì chẳng có gì, gửi file lên là xong, đằng này anh ấy nói sẽ viết TUT, nghĩa là phải giải trình cho mọi người hiểu, từng bước từng bước. Có bao giờ bạn nghĩ để viết được như vậy mất công thế nào không. Mình cũng từng viết TUT mà chỉ là hướng dẫn sử dụng phần mềm cũng cực khổ lắm huống chi viết để người khác hiểu và làm được flash. Mình vào trang này học cũng lâu rồi, cũng có nhiều lúc anh ấy bận việc không viết được xong thì khi nào anh ấy rảnh lại viết tiếp, mình chờ đợi và chỉ mong nó sớm xong mà học làm. Nếu ai cũng như bạn thì chẳng ai có tinh thần mà viết TUT nữa đâu, người ta đã viết miễn phí cho mình học để tốt cho mình, mà bù lại người ta chẳng được gì nếu lại còn bị nói này nói kia thì thà không viết còn hơn. Ngay cả truyện tranh như truyện Connan, có khi mấy tháng mới có 1 tập, nếu bạn đang xem dở mà nó lại không xuất bản tiếp tập sau thì bạn chửi người ta ah. Thật là vô lý quá mức. Mình chỉ nói vậy thôi, còn hiểu hay không thì tùy bạn. Mình rất quí những người chia sẻ và giúp đỡ cộng đồng nên thấy ai không đóng góp được gì lại nói nhiều là mình ghét lắm.smilies/sad.gif
0
...
được viết bởi Thuy Trang, Tháng tư 05, 2012
Cái bài thác nước trước đó, anh ấy đã hoàn thành rồi đó, ai cũng phải đi làm kiếm sống, có phải ngồi chơi xơi nước cả ngày đâu mà lúc nào cũng rảnh để viết chứ. Người ta đưa Demo trước rồi viết TUT sau thì có gì không đúng đâu, bạn cứ chờ đó rồi sẽ có tut đừng nói những câu như vậy phản cảm lắm. smilies/angry.gif
0
...
được viết bởi bunbo, Tháng tư 05, 2012
chả ai quay lưng với người giúp minh cả, đừng phân biệt đối xữ.smilies/angry.gif .nói chung là I sorry.. !
0
...
được viết bởi bunbo, Tháng tư 05, 2012
àh cám ơn vì đã tut..........
0
...
được viết bởi vo_danh, Tháng tư 05, 2012
hi nhìn thích nhỉ. làm hoài ko ra nhưng làm ra rồi là thít lắm đó. anh ấy chỉ như vậy là mình có thể làm dc rồi
0
...
được viết bởi daovanthanh, Tháng tư 18, 2012
- Mình đến với trang này chưa lâu nhưng thấy trang này thật hấp dẫn và bổ ích. Hấp dẫn vì kỹ xảo hoạt hình thật tuyệt, hình ảnh có tính thẩm mỹ cao, viết hướng dẫn cho mọi người học và làm theo rất kỹ càng. Điều đó chứng tỏ người viết rất giỏi Flash, rất công phu tìm kiếm, chọn lọc hình ảnh chẳng những đẹp lại còn phù hợp với ngữ cảnh trong bài. Để có được một bài viết hướng dẫn như vậy phải vất vả tốn nhiều thời gian, công sức, trí tuệ. Đặc biệt lại viết giúp thiên hạ không lấy công, vô điều kiện. Người viết luôn mong muốn mang đến cho người đọc những điều hữu ích, tốt đẹp- đó là người có đức. Có đức mặc sức mà xài -đó là câu nói của dân gian mang tính triết lý nhân - quả rất đúng. Những người có văn hoá, biết phải trái sẽ luôn biết ơn bạn.
- Cái tốt hơn cũng có khi còn là kẻ thù của cái tốt, huống chi với cái xấu. Trong cuộc sống không thể làm vừa lòng hết mọi người được. Bạn làm việc tốt thì bị kẻ xấu ghét. Bạn làm việc xấu thì nguời tốt ghét. Trong cuộc sống thì người tốt cũng nhiều mà kẻ xấu cũng không ít.. Lòng biết ơn của người đời không phải ai cũng có. Ngay cả chúa Giê_su cũng còn bị chính ngay môn đồ của mình đóng đinh lên cây thập tự. Cuộc sống vốn là như vậy bạn ạ, chẳng hơi sức đâu mà chấp nhặt với người không biết điều. Bạn cứ làm những gì mà bạn cho là đúng , là tốt. Kẻ xấu không mong muốn bạn và mọi người khác tiến bộ, chỉ mong mọi người nản chí, thoái bộ. Nếu bạn nản là rơi đúng vào ý đồ của kẻ xấu đấy. Một số bạn có óc cầu tiến mong muốn bạn sớm có bài viết để học và làm theo. Có óc cầu tiến thì thật đáng khen, nhưng đừng vì quá nôn nóng mà có lời lẽ chưa đúng mực làm người viết phiền lòng, thiệt thòi cho chính các bạn và cho nhiều người khác.
0
...
được viết bởi trangcoi1986, Tháng năm 09, 2012
hay qua anh ah, anh oi the lam sao anh viet code gioi the , lam cach nao co the tu viet code day cac ban oi..........smilies/cry.gifsmilies/cry.gifsmilies/cry.gifsmilies/cry.gifsmilies/cry.gifsmilies/cry.gifsmilies/cry.gif
0
...
được viết bởi trangcoi1986, Tháng năm 10, 2012
smilies/grin.gifsmilies/grin.gifsmilies/grin.gifsmilies/grin.gifsmilies/grin.gifsmilies/grin.gif cac ban dung la munber one.....
minh than phuc qua.
ma sao cac ban viet code gioi the.
co tai lieu nao viet code cho flash ma co the viet duoc nhu bac khong.
cho em link voi.
0
...
được viết bởi Hack, Tháng năm 11, 2012
Biển học vô biên quay đầu là bờ smilies/grin.gif
0
...
được viết bởi TienXu.Flash Giat Dien, Tháng năm 26, 2012
TUYỆT TUYỆT TUYỆT TUYỆT TUYỆT
hâm mộ hâm mộ hâm mộ hâm mộ hâm mộ hâm mộ
thansk bạn đẹp zai nhìu nhe smilies/cool.gif
0
...
được viết bởi regost, Tháng sáu 01, 2012
thanks alot!
0
...
được viết bởi thobeo, Tháng chín 10, 2012
HI bac obama co cai nha^~n ghe gom that. smilies/grin.gif:

Thanks anh Linh nhieu nhe :X

Co len anh, chuc anh suc khoe va thanh cong smilies/wink.gif
0
...
được viết bởi skyllpro, Tháng mười 25, 2012
Phải nói là đẹp và hay.!
0
...
được viết bởi Jaymoon, Tháng mười một 05, 2012
Mỗi người 1 ý, 10 ng 10 ý ko thể nào chiều lòng hết tất cả mọi người được . Mình biết TUT này được lấy từ trang flashandmath , nhưng bạn đây cũng bỏ công ra dịch TUT và sửa lại một chút cho các bạn học flash dễ hiểu. Mong các bạn tôn trọng ng viết một chút. Chúc các bạn thành công !!!!
0
...
được viết bởi vong, Tháng mười một 18, 2012
hay quá..like nhiệt tình
0
...
được viết bởi kani, Tháng mười hai 25, 2012
Anh ơi, có thể chỉ dẫn chi tiết hơn 1 chút không ạ?
Khi em làm nó luôn báo lỗi ở dot3, dot4 dù đã làm đúng các bước theo hướng dẫn smilies/sad.gif
0
...
được viết bởi minh, Tháng mười hai 28, 2012
Đọc comment của bunb0 với Thùy Trang thấy bực cả mìnhsmilies/angry.gif. có thể ban đầu bunb0 nói như vậy với người đã bỏ công viết bài này là ko đúng và Thuy Trang chỉ cần nhắc nhở thôi, nhưng lần này mình thấy Thuy Trang đã có ý xúc phạm bunb0, cho dù là Thuy Trang ko trực tiếp nói ra nhưng mình vẫn cảm thấy điều đó. Còn Thuy Trang có biết khi mừng hụt thì cảm giác thất vọng tràn trề cỡ nào ko mà nói vậy. Có thể bunb0 đã quá nóng nảy nên đã vô tình nói mà ko suy nghĩ thôi nên Thuy Trang cũng đâu càn nói quá đáng như vậysmilies/sad.gif. Mình chỉ chỉ góp ý thế thôi và đồng thời mình cũng thank kuôn người đã bỏ công viết bài nàysmilies/grin.gif.
0
...
được viết bởi linh nguyen, Tháng một 08, 2013
mình rất thích học flash nhưng chưa biết giờ tìm duco975 diện đàng thấy rất có ích nhưng nhìn thấy phải viết code sao mà nản quá, mình rất dốt về code không biết có làm được không
0
...
được viết bởi simpsons3, Tháng bảy 07, 2013
hình như ở bước 6 dot1 và dot2 phải ở trong fingers còn dot3 và dot4 phải ở lỗ cắm chứ
smilies/cry.gif
0
...
được viết bởi Kaka, Tháng tám 09, 2013
thanks!
0
...
được viết bởi thaithuan, Tháng mười 17, 2013
Làm không được thì nóng. Nóng thì nói lung tung. Bạn ấy vẫn muốn làm cho được. Thôi. Cả làng xí xóa hí !
0
...
được viết bởi David, Tháng mười 24, 2013
Cảm ơn bạn vì đã chia sẻ cho mọi người những kiến thức về flash. Mình thực sự học hỏi được rất nhiều từ bạn. Cảm ơn bạn rất nhiều! smilies/smiley.gif
0
...
được viết bởi Lộc, Tháng năm 12, 2014
Mình làm như bạn hướng dẫn thì bị báo lỗi sau:
Scene 1, Layer 'action', Frame 1, Line 421120: Access of undefined property dot3.
Scene 1, Layer 'action', Frame 1, Line 431120: Access of undefined property dot3.
Scene 1, Layer 'action', Frame 1, Line 441120: Access of undefined property dot4.
Scene 1, Layer 'action', Frame 1, Line 451120: Access of undefined property dot3.
Mong được tác giả giúp đỡ smilies/smiley.gif

0
...
được viết bởi ..., Tháng mười 20, 2014
bước 6 nhầm rồi, đổi lại dot1,2 vào fingers, còn dot3,4 nằm ngoài, ko lỗi nữa. ok hết nhé

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

busy