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



You are here: Tutorials  AS 1.0 - 2.0 Cá bơi theo chuột trong flash AS2

Cá bơi theo chuột trong flash AS2

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

Chào các bạn lâu lắm rồi mình mới lại có thời gian để viết tut, với bài tut này không chỉ các bạn tạo cho mình con cá di chuyển mà có thể tạo thoải mái các con hay các vật theo óc sáng tạo của bạn.

Từ tiêu đề bài là làm cá, nhưng mình lại làm khác đi để các bạn có thể hình dung ra sự linh động của nó trong ứng dụng nhé. Mình sẽ làm hình logo aloflash di chuyển theo chuột cho nó mấu.

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

Bước 1:

Tạo 1 file flash mới Ctrl + N, chọn loại ActionScript 2.0 nhé. Bạn có thể nhấn Ctrl + J để mở bảng Document Setting tùy chỉnh về chiều dài chiều rộng hay tốc độ frame cho file bạn làm.

Bước 2:

Chọn 1 hình, có thể là file vector hoặc ảnh PNG (Ảnh hình gì, con gì, vật gì là tùy theo ý tưởng của bạn), sau đó bạn kéo vào flash nếu là vector hoặc Import vào nếu là ảnh, để Import bạn vào File > Import > Import to Stage... (Ctrl +R). Ta có kết quả, như hình dưới là mình đã Copy file vector ở bên Illustrator rồi Pase vao flash.

Bước 3:

Giờ bạn sử dụng công cụ Selection Tool (V) click vào hình bạn mới import vào nhấn Ctrl + C để copy rồi Ctrl + V 2 lần để copy nó thêm 2 hình nữa. Hoặc clic chuột giữ phím Alt rồi kéo hình để nhân ra. Ta sẽ có 3 hình logo:

Bước 4:

Click vào từng hình một nhấn phím F8 để Convert nó thành dạng MovieClip, trong phần mình khoanh đỏ ở hình dưới bạn đánh dấu vào 2 ô Export for ActionScript Export to Frame 1, và đặt tên ở Identifier là: mot

Làm tương tự như vậy với hình thứ 2, nhấn phím F8 để Convert nó thành dạng MovieClip, và đặt tên ở Identifier là: hai

Làm tương tự như vậy với hình thứ 3, nhấn phím F8 để Convert nó thành dạng MovieClip, và đặt tên ở Identifier là: ba

* Vậy là khi bạn mở thư viện Libraly bạn sẽ thấy ta có 3 Symbol và đã được Export tương ứng với 3 tên: một, hai và ba (Đây là ta chỉ để kiểm tra xem đã làm đủ chưa, bạn có thể bỏ qua việc mở Libraly).

Bước 5:

(Đây là bước chúng ta sẽ sắp xếp sao cho khi chạy nó sẽ nuột nà, các bạn nào muốn sửa lại tâm MovieClip hình của bạn, hoặc đổi đối tượng có thể làm lại từ bước này nhé.)

Sử dụng công cụ Slection Tool (V), nhấn Ctrl + để phóng to file flash lên, click chọn các Movie Clip bạn vừa tạo, kéo và xắp xếp chúng theo thứ tự từ trái qua phải

Giờ bạn sử dụng công cụ Free Transform Tool (Q) để quay hình cho hợp lý. (Cái logo của mình lấy ý tưởng từ con bọ rùa nên mình sẽ quay đầu nó sang bên trái, bên trái là bên sẽ chạy về chuột).

Tiếp tục với các hình còn lại và mình sẽ sắp xếp cho nó nhỏ dần:

Giờ đã OK hết thì bạn nhấn Ctrl + A chọn tất cả 3 MovieClip đó rồi nhấn phím Delete để xóa chúng đi.

Bước 6:

Mở bảng Libraly bằng cách vào: Window > Libraly (Ctrl + L), Click vào từng Symbol, sử dụng công cụ Free Transform Tool (Q) để phân biệt giữa 2 tâm, bạn phóng to hình lên, để ý 2 vùng mình khoanh đỏ, cái tâm ngoài hình tròn chính là tâm mà ActionScript  sẽ hiểu nó là tâm của đối tượng, do vậy ta sẽ kéo sao cho cái tâm hình logo aloflash vừa khớp vào cái tâm tròn ở ngoài. Như hình dưới:

Làm tương tự với 2 Symbol logo còn lại.

OK như vậy là chúng ta đã hoàn thành bước thiết kế cho nó, giờ chúng ta sẽ chuyển sang bước viết code cho nó.

Bước 7:

lần lượt click vào frame thứ 2 và thứ 3 trên layer nhấn phím F6 để tạo thêm 2 keyframe như hình dưới:

Click vào Frame thứ nhấn nhấn F9 để mở bảng ActionScript bạn chèn vào đoạn code sau:

setProperty("", _quality, "MEDIUM");
N = 20;
R = 12;
C = 2;
A = 2;
var x = new Array();
var y = new Array();
for (i = 0; i < N; i++)
{
    x[i] = 0;
    y[i] = 0;
} // end of for
for (i = 1; i < N; i++)
{
    if (i == 1)
    {
        attachMovie("mot", "Pieza" + i, N + 1 - i);
    }
    else if (i == 4 || i == 14)
    {
        attachMovie("hai", "Pieza" + i, N + 1 - i);
    }
    else
    {
        attachMovie("ba", "Pieza" + i, N + 1 - i);
    } // end else if
    this["Pieza" + i]._x = 142 + x[i - 1];
    this["Pieza" + i]._y = 142 + y[i - 1];
    this["Pieza" + i]._xscale = 102 + A * (1 - i);
    this["Pieza" + i]._yscale = 102 + A * (1 - i);
    this["Pieza" + i]._alpha = 100 - 100 / N * i;
} // end of for

Nhấn F9 để tắt bảng ActionScript, rồi lại Click vào frame thứ 2, nhấn F9 mở bảng ActionScript và chèn vào đoạn code:

x[0] = x[0] + (_xmouse - x[0] - 142) / R;
y[0] = y[0] + (_ymouse - y[0] - 142) / R;
for (i = 1; i < N; i++)
{
    x[i] = x[i] + (x[i - 1] - x[i]) / C;
    y[i] = y[i] + (y[i - 1] - y[i]) / C;
} // end of for
for (i = 1; i < N; i++)
{
    this["Pieza" + i]._x = 142 + (x[i - 1] + x[i]) / 2;
    this["Pieza" + i]._y = 142 + (y[i - 1] + y[i]) / 2;
    this["Pieza" + i]._rotation = 5.729578E+001 * Math.atan2(y[i] - y[i - 1], x[i] - x[i - 1]);
} // end of for

Tương tự như vậy bạn chèn đoạn code này trên frame thứ 3:

gotoAndPlay(2);

OK, vậy là ta đã hoàn thành bài tập này. Giờ bạn thử nhấn Ctrl + Enter xem kết quả nhé. Nếu muốn bạn có thể quay lại bước 5 để chỉnh, hoặc chỉnh tâm lệch đi ở bước 6 để tạo chuyển động xoay.

Đây là demo nếu làm theo bài tập này:

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

aloflash.com

Download

Bình luận (37)Add Comment
0
...
được viết bởi idesign90, Tháng mười hai 31, 2010
hic hic em tuong anh lam roi nen dinh vao down T_T
0
...
được viết bởi anhtuanhp109, Tháng một 03, 2011
anh that la pro smilies/cheesy.gif
0
...
được viết bởi nguyen hòa, Tháng một 04, 2011
hic chẳng hướng dẫn j cả smilies/cry.gif
0
...
được viết bởi Mr.Kien, Tháng một 06, 2011
sao không thấy code của bài này đâu thế hả a admin........smilies/cry.gifsmilies/cry.gif
0
...
được viết bởi Ca Nguyen, Tháng một 08, 2011
smilies/cheesy.gif
Học ,nhung chua lam duoc.
0
...
được viết bởi banhmiopla, Tháng hai 10, 2011
e ko download được tut
0
...
được viết bởi CuVinh, Tháng tư 25, 2011
thnks đẹp đấy ^^
0
...
được viết bởi zen_dragon, Tháng năm 05, 2011
tks so much !smilies/cheesy.gif
0
...
được viết bởi ....., Tháng sáu 15, 2011
seo ko koa' code download ActionScript 2.0 zj mjh kjem tren google hoai ma ko ra
0
...
được viết bởi cadimodo2, Tháng sáu 17, 2011
thật là ngưỡng mộ
0
...
được viết bởi cadimodo2, Tháng sáu 17, 2011
bao giờ cho mình viết dược cod nhỉsmilies/sad.gif
0
...
được viết bởi huynymph, Tháng sáu 22, 2011
hay quá, quá pro luon!!!!
0
...
được viết bởi Trần Anh Tuấn, Tháng bảy 18, 2011
Ngưỡng mộ a thật đấy !
Cố gắng sắp xếp thời gian hướng dẫn a e nhiều nữa nhé !
0
...
được viết bởi Luong Van Hao, Tháng chín 06, 2011
Ôi thật là dễ! mình đã thành công ! haha! smilies/cheesy.gifsmilies/cheesy.gif
0
...
được viết bởi boybh8x, Tháng chín 14, 2011
cho em xin con cá trên hinh đi.nhìn đẹp quá smilies/grin.gif
0
...
được viết bởi hanh, Tháng mười 06, 2011
hj!hay wa.
0
...
được viết bởi quocviet, Tháng mười 12, 2011
cảm ơn anh em chưa thử nhưng củng thích quá
0
...
được viết bởi sơn, Tháng mười một 15, 2011
Cảm ơn anh! em làm được bao nhiều cái là nhờ anh đó
0
...
được viết bởi đại, Tháng mười hai 11, 2011
sao ko có bài làm bằng AS 3 nhi
0
...
được viết bởi Tjny, Tháng mười hai 16, 2011
ANh ơi cho em hỏi sao mà làm cái hình có nền trong suốt được hả anh hay ko có nền gì đó , toàn nền màu tráng hoạt đen ko ak`, chi trong photoshop moi lam dc con trong flash e ko lam dc
0
...
được viết bởi hai, Tháng một 05, 2012
anh làm trên flash bao nhiêu vậy?
0
...
được viết bởi Nguyễn Trần Hung, Tháng hai 09, 2012
or : Địa chỉ email này đã được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó. cảm ơn anh đã đọc
0
...
được viết bởi thanh tam, Tháng ba 23, 2012
đã làm dc smilies/grin.gif cám ơn anh ^.^smilies/tongue.gif
0
...
được viết bởi huuhoa, Tháng tư 17, 2012
bạn nào có phần mềm này cho mình xin với các bạ Địa chỉ email này đã được bảo vệ từ spam bots, bạn cần kích hoạt Javascript để xem nó.
tks
0
...
được viết bởi boymin_it, Tháng tư 29, 2012
ai có file *.fla cho flash 8 k cho mình xin với !!
tks
0
...
được viết bởi sdf, Tháng sáu 16, 2012
sao nó bơi k ngay tâm nhỉ! ai giúp tớ phần đó với
0
...
được viết bởi vinhosmediavn, Tháng bảy 04, 2012
tuyệt thật
0
...
được viết bởi Đức, Tháng bảy 28, 2012
code ko hiểu sao làm
0
...
được viết bởi quyenvan1, Tháng mười 05, 2012
sao minh lam mai cha duoc vay giup minh voi
0
...
được viết bởi hihi, Tháng mười 05, 2012
Chac ban lam sai diem nao roi nen moi khong duoc, minh lam OK ma smilies/grin.gif
0
...
được viết bởi thaohaha, Tháng mười 11, 2012
lam dc roi thank nha
0
...
được viết bởi nhim xu, Tháng mười 22, 2012
m làm cung k dc rui. ở cái phần delete đi là nó mất lun.smilies/sad.gif
0
...
được viết bởi thanhkkien, Tháng năm 19, 2013
Dùng phần mềm Flash Professional cs4 nhé.Có cai link torrent luôn nè:
magnet:?xt=urn:btih:ed2ae382a8b5ce7814158f87725551daca9baa19&dn=Adobe+Flash+CS4+Professional+++Keygen&tr=udp://tracker.openbittorrent.com:80&tr=udp://tracker.publicbt.com:80&tr=udp://tracker.istole.it:6969&tr=udp://tracker.ccc.de:80/quote]
0
...
được viết bởi thong, Tháng mười hai 31, 2013
a ơi nếu mình cho di chuyển ko cần chuột thì làm thế nào a

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

busy