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



You are here: Tutorials  Chuyển động Tạo nhân vật di chuyển theo phím mũi tên

Tạo nhân vật di chuyển theo phím mũi tên

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

Đây là một bài hướng dẫn Action Script cơ bản. Bài tập này không dùng để làm một hình ảnh hoạt động mà là bài cơ bản hướng dẫn việc điểu khiển hướng đi tương quan của nhân vật, đồ vật...

 

Thông thường bạn có thể áp dụng bài tập này để bước đầu tập làm phần hoạt động di chuyển của nhân vật game. Lưu ý là phần nhân vật bạn có thể tự tạo hoặc lấy theo hình mẫu của bài.



Bước 1:

Vào [b]File > New[/b] (Ctrl + N) và chọn [b]Flash Document[/b] để mở một file flash mới.

Bước 2:

Điều chỉnh kích thước file sao cho phù hợp bằng cách vào [b]Modify > Document[/b] (Ctrl + J) và thiết lập chiều rộng, chiều cao. Bài tập này sẽ chọn kích thước file là 400 x 300 pixel.



Bước 3:

Điều đầu tiên cần làm là bạn phải tạo một nhân vật với 4 hướng khác nhau: nhìn từ bên trái, bên phải, trước và sau. Những hình ảnh này sẽ minh hoạt hoạt động của nhân vật. Bạn có thể lấy 4 hình sau làm mẫu để tạo ra nhân vật tương tự (lưu ý là những hướng nhân vật này sau khi được tạo phải chuyển sang dạng Movie clip và lưu trên Library):



Bước 4:

Sau khi đã có 4 hình tượng nhân vật, bạn cần đặt chúng chung vào một movie clip để điều khiển di chuyển. Tại frame 1 của movie chính (frame trống), vào [b]Insert > New Symbol[/b] (Ctrl + F8) để tạo một Movie clip mới. Tại ô Name bạn nhập vào tên phù hợp (trong trường hợp bài này đặt là mc_character, chọn Movie Clip và kích OK. Trong movie clip mới này, bạn tạo thêm 2 layer mới với tên là actions và laybels lên trên layer character ban đầu



Bước 5:

Vào frame 20 của cả 3 layer và nhấn phím F5. Tại frame 5, 10 và 15 của cả 3 layer, nhấn F6. Kích vào frame 1 của layer labels, tại phần Properties (Ctrl + F3) đặt tên frame này là right



Bước 6:

Tại frame 5 của layer labels, đặt tên là left, frame 10 đặt là up, frame 20 đặt là down. Kết quả bạn sẽ có như hình sau:



Lưu ý: Ta có thể đặt 4 frame chính này trên 4 frame liên tiếp, tuy nhiên như vậy rất khó để nhìn tên frame nên bài hướng dẫn này đặt trên 4 frame là 1, 5, 10 và 14

Bước 7:

Tại frame 1 của layer character, kéo hình nhân vật hướng sang phải vào. Bạn có thể căn giữa hình này bằng thành phần Align palette (Ctrl + K). Đảm bảo nút To Stage được chọn và kích vào 2 nút căn giữa theo chiều ngang và chiều dọc.



Bước 8:

Tại frame 5 của layer character, kéo hình nhân vật hướng sang trái vào và tiếp tục căn giữa. Thực hiện tương ứng với các frame 10 (đằng sau) và 15 (đằng trước).



Bước 9:

Bước cuối cùng là thêm mã Action Script vào. Lần lượt trên frame 1, 5, 10 và 15 của layer actions, thêm đoạn code sau vào (Ctrl + F9):
stop();


Bước 10:

Trở lại timeline chính, kéo movie clip mc_character từ thư viện Library vào vùng làm việc.



Chọn thành phần vừa kéo, vào phần Action Script và đưa vào đoạn code sau:
onClipEvent (enterFrame) { if (Key.isDown(Key.RIGHT)) { this._x += 5; this.gotoAndStop("right"); } if (Key.isDown(Key.LEFT)) { this._x -= 5; this.gotoAndStop("left"); } if (Key.isDown(Key.UP)) { this._y -= 5; this.gotoAndStop("up"); } if (Key.isDown(Key.DOWN)) { this._y += 5; this.gotoAndStop("down"); } }

Cuối cùng là thử hoạt động của nhân vật. Bạn có thể download file nguồn tại đây.

Bình luận (8)Add Comment
0
...
được viết bởi Camilla, Tháng mười 11, 2010
Link down của bạn died rồi.
Nhưng ko sao, mình làm được rồi smilies/smiley.gif
À, bạn có tài liệu gì học AS thì share cho mình với. Thanks much.
0
...
được viết bởi trinhbkpro, Tháng chín 28, 2011
link die rui hjc hjc
0
...
được viết bởi 22222, Tháng mười một 21, 2011
viet tiep bai tut di anh linh oi
0
...
được viết bởi Yeu do hoa, Tháng ba 20, 2012
Mình vẫn ko lam đc.
Ngay đoạn giữa đó bạn.
Đoạn 4 nhân vật và lại thêm một mc_character đó, đoạn này mình không hiểu.
Bạn có thể làm rõ hơn không?
Xin cảm ơn nhiều.
0
...
được viết bởi dsdrgdgd, Tháng một 03, 2013
smilies/cheesy.gifsmilies/cheesy.gifsmilies/smiley.gifsmilies/wink.gifsmilies/smiley.gifsmilies/wink.gifsmilies/smiley.gifsmilies/grin.gifsmilies/angry.gifsmilies/cool.gifsmilies/cry.gifsmilies/cry.gifsmilies/tongue.gifsmilies/tongue.gifsmilies/cry.gifsmilies/kiss.gif
0
...
được viết bởi Bùi Nội, Tháng mười 10, 2013
anh ơi anh chỉ em cách làm cho hạt đậu nảy mầm thành cây với ạ.....cảm ơn anh nhiều
0
...
được viết bởi bach lien trai, Tháng mười 18, 2016
Thánh tut ơi, sao minh lam xong roi kiem thu no tu chay chu ko kich theo huong mui ten dc

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

busy