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



You are here: Tutorials  AS 1.0 - 2.0 Làm mưa sao rơi với AS2

Làm mưa sao rơi với AS2

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

Nhiều bạn có hỏi mình về hiệu ứng sao rơi liên tục trong flash. Hôm nay mình viết tut này hướng dẫn các bạn nhé, cái này cũng tương tự như hiệu ứng tuyết rơi thôi chỉ khác thay bông tuyết là những ánh sao.

Nguyên vật liệu cho bài tập này là một bức ảnh nền có màu tối tối 1 chút để nổi bật những ngôi sao, mình chọn tấm ảnh này làm hình nền:

Sau khi bạn đã chọn xong 1 bức ảnh thích hợp chúng ta sẽ tiến hành làm nhé.

Bước 1:

Tạo 1 file flash mới Ctrl + N chọn loại Action Script 2.0, nhấn Ctrl + J để mở bảng Document Setting điều chỉnh thông số cho phù hợp với yêu cầu của bạn như chiều rộng chiều cao tốc độ frame hình.

Bước 2:

Import bức ảnh làm nền vào file flash của bạn bằng cách vào File > Import > Import to Stage... (Ctrl + R), sau khi Import xong sử dụng công cụ Selection Tool (V) Click vào bức ảnh mở bảng Align: Window > Align (Ctrl + K), căn bức ảnh vào giữa khung hiển thị flash như trong hình dưới:

Làm xong bạn khóa layer này lại nhé.

Bước 3:

Tạo một layer mới, Nhấn Ctrl + để phóng to khung hình, sử dụng công cụ công cụ PolyStar Tool như hình:

Khi bạn chọn công cụ này thì phần thiết lập bên phải sẽ hiện ra, ở mục Tool Setting bạn Click vào Options.. nó hiện ra 1 bảng để bạn nhập giá tri như hình dưới:

OK, bạn chọn màu Fill là màu trắng và màu Stroke là trong suốt nhé, giờ bạn vẽ vào khung hiển thị Flash một hình sao nó sẽ có 4 cạnh trong lúc vẽ giữ phím Shift để được hình tuyệt đối. như hình:

Sử dụng công cụ Selection Tool (V) click chuột vào hình ngôi sao 4 cạnh vừa vẽ Giữ phím Alt và kéo nó ra bên cạnh để copy thêm 1 ngôi sao nữa như trong hình:

Sử dụng công cụ Free Transform Tool (Q), giữ Shift và kéo nhỏ hình sao vừa copy ra lại.

Tiếp tục Giữ Shift quay 1 góc 45 độ như hình:

Click vào ngôi sao bên trái kéo hẹp nó lại như hình:

Click chọn ngôi sao nhỏ xếp đè lên ngôi sao to như hình:

Vậy là ta đã được hình ngôi sao rồi :)

Bước 4:

Click vào layer chứa ngôi sao nhấn phím F8 và convert nó thành dạng Movie Clip,

Sử dụng công cụ Selection Tool (V) click đúp vào movie clip ngôi sao vừa tạo để vào trong. Lần lượt Click vào frame thứ 10 và thứ 20 nhấn phím F6. như hình:

Click trở lại frame thứ nhất, sử dụng công cụ Selection Tool (V), click vào hình ngôi sao chọn màu cho nó là màu xanh, rồi dùng công cụ Free Transform Tool (Q) giữ Shift kéo ngôi sao nhỏ lại, như hình:

Click vào Frame thứ 20, rồi Click vào hình ngôi sao chọn màu Fill để Alpha = 0% như hình mình đã khoanh đỏ:

Giờ bạn click vào bất cứ nơi nào giữa 2 frame 1 đến 10 và 10 đến 20 nhấn chuột phải và chọn: Create Shape Tween

Kết quả:

Vậy là ta đã hoàn thành các bước thiết kế cơ bản.

Bước 5:

Trở lại Scene ban đầu bằng cách nhấn vào 1 trong những phần mình khoanh đỏ ở hình dưới:

Bước 6:

Mở bảng Libraly bằng cách vào Window > Libraly (Ctrl + L), bạn chọn Symbol ngôi sao nhấp chuột phải chọn Properties...

Nó sẽ hiện ra 1 bảng, bạn tích dấu kiểm vào 2 ô Export for ActionScriptExport in frame 1, sau đó đặt tên trong phần Identifier là: star

OK, giờ bạn xóa ngôi sao ở trong stage đi.

Bước 7:

Click vào frame 1 trên layer sao bạn vừa xóa đi chèn vào đoạn code sau:

i = 0;
soLuong = 100;
function createStar() {
_root.attachMovie("star", "star"+i, i);
scale = random(60)+10;
_root["star"+i]._x = Math.random()*Stage.width;
_root["star"+i]._xscale = scale;
_root["star"+i]._yscale = scale;
_root["star"+i].yspeed = Math.random()*3+1;
_root["star"+i].onEnterFrame = function() {
if (this._y>Stage.height) {
this._x = Math.random()*Stage.width;
this._y = 0;
} else {
this._y += this.yspeed;
}
};
i = (i<soLuong) ? i+1 : 0;
}
setInterval(createStar, 100);

Vậy là đã xong bài tập này rồi, muốn cho bao nhiêu sao thì bạn thay đổi ở soLuong nhé, như code trên nó sẽ tạo ra 100 ngôi sao.

Giờ chỉ việc nhấn Ctrl + Enter và xem kết quả của bạn.

Chúc mọi người làm tốt.

aloflash.com

Download

Bình luận (16)Add Comment
0
...
được viết bởi thietkeweb4vn, Tháng mười một 09, 2010
tuyet voi , thank ban nhieu .
0
...
được viết bởi huy ánh, Tháng mười một 30, 2010
admin ơi hôm nào hướng dẫn làm pháo hoa đi
0
...
được viết bởi Thanks, Tháng ba 20, 2011
Minh dang can
0
...
được viết bởi hue, Tháng ba 27, 2011
smilies/wink.gif. Tuyet !!
0
...
được viết bởi Quyên, Tháng bảy 20, 2011
Cảm ơn bạn rất nhiều! Bài viết này thật hữu ích với mình.
0
...
được viết bởi Quang Vinh, Tháng chín 07, 2011
bạn ơi cho mình hỏi nếu muốn ngôi sao rơi nằm trong vùng nhỏ hơn so với toàn vùng thì làm sao hả bạn?
vd: vùng chử nhật (0,0,1000,106). muốn ngôi sao chỉ rơi trong vùng chử nhật (500,0,1000,106) (left,top,width,height)
Rất hay. Xin cám ơn bạn nhiều.
0
...
được viết bởi ...ThuanDv, Tháng mười hai 24, 2011
hihi Thanks anh nhieu .em da lam dc roai` nhung bay gio khong bit Save lai nhu the' nao` ca? hic
0
...
được viết bởi hải yến, Tháng sáu 06, 2012
admin ơi cho em xin link phần mềm này đc không?em muốn học woa mà ko có phần mềm để làm.smilies/kiss.gif
0
...
được viết bởi lina, Tháng tám 22, 2012
chang hieu cai nach j het smilies/angry.gifsmilies/angry.gifsmilies/angry.gifsmilies/angry.gifsmilies/angry.gifsmilies/angry.gifsmilies/sad.gifsmilies/sad.gifsmilies/sad.gifsmilies/sad.gifsmilies/sad.gifsmilies/sad.gifsmilies/cry.gifsmilies/cry.gifsmilies/cry.gifsmilies/cry.gifsmilies/cry.gifsmilies/cry.gif
0
...
được viết bởi dung_hn94, Tháng chín 03, 2012
Em muon tao ngoi sao o trong 1 movie clip ma khong phai tren stage thi lam the nao
0
...
được viết bởi thobeo, Tháng chín 10, 2012
Ban tao xong voi copy tat cac cac frame va pase trong frame dau tien cua Movieclip do.smilies/grin.gif
0
...
được viết bởi eun, Tháng chín 18, 2012
add ơi chèn frame kiur gì tớ không làm được.add chỉ rõ hơn giúp tớ với.thanks add nhìu.smilies/kiss.gif
0
...
được viết bởi nhim xu, Tháng mười 19, 2012
m sai cái j mà k dc hjxxx
0
...
được viết bởi việt, Tháng ba 27, 2013
Thay đổi độ rộng và dài của sao rơi như thế nào vậy AD, ví dụ như bức ảnh to hơn bức ảnh của AD cho sẵn làm sao cho sao rơi toàn bộ bức ảnh đó đc ạ?
0
...
được viết bởi tú mi, Tháng tư 08, 2013
likeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeesmilies/grin.gifsmilies/grin.gifsmilies/grin.gifsmilies/grin.gifsmilies/grin.gif
0
...
được viết bởi Hoàng Viễn, Tháng năm 29, 2013
mình mới bắt đầu tập làm mà không biết dow phần mềm nào và phiên bản bao nhiêu cho hợp lí. có bạn nào có thể chỉ mình không? cảm ơn nhiều

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

busy