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

In
Xem kết quả: / 32
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 !

Share