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



You are here: Tutorials  Chuyển động Làm xe chạy trên đường bằng animation trong flash

Làm xe chạy trên đường bằng animation trong flash

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

Ô tô, xe máy là những phương tiện đi lại phổ biến nhất, các bạn muốn làm xe chạy 1 cách sống động thì có lẽ bài tập này sẽ rất hữu ích. Trong bài này mình sẽ hướng dẫn cho bánh xe quay và cho xe dập dình như đang bị sóc.

Các bạn có thể tham khảo thêm bằng link này: http://aloflash.com/images/flash/banner-xe-bus.swf

Nguyên vật liệu cho bài tập này là hình những chiếc xe, và 1 chiếc bánh xe nhớ là cần tách nền thành file PNG nhé. Mình chọn chiếc xe này và tách bánh của nó ra như hình dưới:

Bánh xe:

Hình nền:

Cộng thêm một tấm hình nền, bạn nên thiết kế nó dài 1 chút để tạo phong cảnh nền khi xe di chuyển. (có thể xử lý qua photoshop).

Mình sẽ gửi các bạn các file ô tô và bánh xe mình tách ra cho các bạn tiện áp dụng khi nào rảnh. Tạm thời bạn dùng tạm cái xe này để làm xong bài tập này nhé.

Chúng ta bắt tay vào công việc nhỉ.

Bước 1:

Tạo 1 file tài liệu flash mới, Ctrl + N đây là hiệu ứng Animation nên bạn chọn loại ActionScript nào cũng được 2.0 hay 3.0 đều OK hết :).

Bước 2:

Import hình nền dài vào trong flash bằng cách vào File > Import > Import to Stages... mở bảng Align để căn cho hình nền vào giữa vùng hiển thị của Flash bằng cách vào Window > Align (Ctrl +K), và thiết đặt như hình dưới:

Ta sẽ được như hình:

Bước 3:

Sử dụng công cụ Selection Tool (V), click chọn hình nền vừa Import vào, Giữ phím Alt kéo ra để nhân thêm 1 hình nữa (trong lúc kéo bạn có thể giữ phím Shift để có thể kéo song song với hình gốc)

Như vậy là ta đã được 1 chiếc hình nền (các bạn có thể làm sinh động hơn bằng cách sử dụng Photoshop đây là cách làm hình nên đơn giản nhất mà hình giới thiệu).

Bước 4:

Nhấn Ctrl + A để chọn toàn bộ hình nền rồi nhấn F8 để Convert nó sang dạng Movie Clip. Nháy đúp vào Movie Clip vừa tạo để vào bên trong lại nhấn Ctrl + A rồi nhấn F8 1 lần nữa để Convert nó thành dạng Movie Clip.

Bước 5:

Click vào frame thứ 80 nhấn phím F6 rồi chọn hình nền kéo nó sang bên phải sao cho mép bên phải của Movie Clip bạn tạo trùng với mép bên phải của vùng hiển thị Flash.

Bước 6:

Click vào bất kỳ nơi nào giữa 2 frame 1 và 80 bạn nhấn chuột phải và chọn Create Classic Tween. để tạo chuyển động cho hình nền.

Bước 7:

Giờ bạn trở lại Scene đầu tiên bằng cách nhấn vào 1 trong những vùng mình đã khoanh đỏ ở hình dưới:

Sau đó bạn khóa layer chứa hình nền này lại nhé.

Bước 8:

Tạo 1 layer mới bây giờ thì bạn sẽ Import hình chiếc xe vào layer này bằng cách vào File > Import > Import to Stages... ta được:

Bạn sử dụng công cụ Free Transform Tool (Q) để kéo chiếc ô tô to nhỏ phù hợp với file flash của bạn nhé (Trong lúc co giãn giữ phím Shift để tránh làm méo hình).

Mình co nó nhỏ như hình trên. Còn tùy các bạn. :D

Bước 9:

Sử dụng công cụ Selection Tool (V), click chọn hình ô tô rồi nhấn F8 để Convert nó thành dạng Movie Clip, Nháy đúp vào Movie Clip bạn vừa tạo để vào trong, Tiếp tục chọn hình ô tô và nhấn F8 để Convert nó thành dạng Movie Clip một lần nữa.

Click vào frame thứ 2 và 3 lần lượt nhấn F6 để tạo thêm 2 Keyframe. Rồi click vào frame thứ 2 nhấn phím mũi tên lên 1 lần (Công đoạn này để tạo cho chiếc xe sóc lên 1 cái)

Bước 10:

Click đúp vào Movie Clip chiếc xe để vào trong. Khóa layer chứa chiếc xe lại và tạo 1 layer mới.

Bạn tiến hành Import hình bánh xe vào layer này. bằng cách vào File > Import > Import to Stages...

Giờ bạn nhấn Ctrl + để phóng to file flash lên. Click vào hình bánh xe vừa Import vào, chọn công cụng Free Transform Tool (Q) kéo hình bánh xe và đặt nó vừa khít lên cái bánh xe của chiếc ô tô.

Bạn nhấn F8 để Convert chiếc bánh xe này thành dạng Movie Clip nhé. Nháy đúp vào nó để vào bên trong tiếp tục nhấn F8 lần nữa để Convert nó sang dạng Movie Clip, sau đó bạn click vào frame thứ 5 (nếu bạn muốn bánh xe quay chậm hơn thì có thể chọn frame 10 hoặc 15 hay 20) nhấn F6 để chèn vào 1 keyframe, click chuột phải vào bất cứ nơi nào giữa frame 1 và frame 5 chọn: Create Classic Tween.

Bạn nhìn luôn sang bên phải sẽ thấy bảng Tweening, ở phần Rotale: bạn chọn là CW nhé (nếu bạn muốn bánh xe quay ngược chiều kim đồng hồ thì chọn CCW).

Giờ quay trờ lại Scene bên ngoài, bằng cách nháy đúp 1 lần vào vùng không hiển thị của flash hoặc click vào nơi mình khoanh tròn ở hình dưới:

Giờ chúng ta đã ra bên ngoài, sử dụng công cụ Selection Tool (V) bạn chọn cái bánh mà ở phần trên ta đã làm Giữ phím Alt rồi kéo ra để nhân ra thêm 1 cái bánh xe nữa. bạn đặt vừa khít vào cái bánh trước của hình ô tô như hình dưới này nhé.

Vậy là chúng ta đã hoàn thành bài tập này, Rất đơn giản phải không, giờ bạn hãy nhấn Ctrl + Enter xem thành quả của mình nào.

Nếu làm như trên chúng ta sẽ được kết quả như vậy:

Các bạn có thể tham khảo thêm bằng link này: http://aloflash.com/images/flash/banner-xe-bus.swf

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

aloflash.com

Download

Bình luận (23)Add Comment
0
...
được viết bởi Ngoc Hoa, Tháng chín 01, 2011
Cam on rat nhieu
0
...
được viết bởi tony, Tháng chín 10, 2011
bạn ơi! cho minh hỏi bạn đang sử dụng phần mêm gì vậy?
0
...
được viết bởi tai, Tháng mười 17, 2011
thanks you
0
...
được viết bởi Duong Tuan Anh, Tháng mười 21, 2011
Cho em hỏi a (c) dùng phần mềm gì vậy à ?
0
...
được viết bởi Duong Tuan Anh, Tháng mười 21, 2011
e muốn học flash như vậy mà không biết sử dụng phần mềm gì > mong a(c) chỉ bảo hyhy
thank nhiều na!!!!!!!!!!!!!!!!!smilies/smiley.gif)
0
...
được viết bởi nguyen van toan.HELP ME!, Tháng mười 29, 2011
tao sao em copy anh chiec xe ve roi import vao ko duoc
chi em voi .duoc chu
lam sao ma bo anh ko co nen vao duoc chu
0
...
được viết bởi Công hậu, Tháng mười một 12, 2011
cảm ơn bạn nhiều.nhưng mà minh không chạy được nền nhỉ?chỉ giúp mình đi............................................
0
...
được viết bởi lien, Tháng mười hai 23, 2011
ban co the giup minh lam xe oto con chay tren duong duoc khong?
0
...
được viết bởi le phong hau, Tháng một 14, 2012
sao minh lam cho hinh nen ma khong duoc?
0
...
được viết bởi Thuy Duong, Tháng hai 02, 2012
ban tao movi cho hinh, sau do cho hinh chay tu phai sang trai
0
...
được viết bởi truc , Tháng ba 18, 2012
abobe flash pro
0
...
được viết bởi huong lan, Tháng tư 06, 2012
cam ơn bác nhiều, mình đang tự học cần nhiều đoạn như vậy
0
...
được viết bởi dingdong, Tháng năm 01, 2012
hic hic, bác này mở lớp ở HN chắc em đăng ký học quá. Thanks
0
...
được viết bởi TienTM, Tháng năm 08, 2012
cảm ơn anh rất nhiều, em đã làm được rồi
0
...
được viết bởi Lê Đức Mạnh, Tháng sáu 26, 2012
Các bác cho e hỏi là e tạo xe ô tô trên symbol move clip làm tất cả các hiệu ứng rồi đưa ra Secen tạo tiếp chuyển động cho nó và tạo khung cảnh cho xe chạy trên đường gồ ghề, sử dụng tiếp nút dùng AS 2.0 tạo cho nó "Stop", "Play" trên 2 nút nhưng e mốn hỏi dùng AS để khi bấm vào nút "Stop" thì nó dừng cả bánh.
0
...
được viết bởi donphuong, Tháng tám 31, 2012
chuyển động bị giật, không mượt như cái đầu tiên
0
...
được viết bởi toan, Tháng năm 16, 2013
ssao phien ban flash 8 ko co Create Classic Tween vay?
0
...
được viết bởi help, Tháng chín 27, 2013
Các bác cho e hỏi tại sao e làm chữ chạy trong adobe flash cs3 rồi publish ra gif thì chữ không chạy. E đã thử dùng phần mềm chuyển đổi file *.swf sang *.gif thì chữ vẫn không chạy. Các bác giúp e với, e cảm ơn
0
...
được viết bởi Dư, Tháng mười 20, 2013
rất hay, cái nền chạy mà lúc đầu tưởng cái xe chạy
0
...
được viết bởi nguyenduclen, Tháng mười một 20, 2014
admin oi em lam mai buoc 5 ma khong duoc .hinh nen no cu chay di dau mat
0
...
được viết bởi nguyenduclen, Tháng mười một 20, 2014
thực sự em làm không đc bước 5 ai giúp em với
0
...
được viết bởi Phương, Tháng bảy 14, 2015
Bạn ơi mình tạo một đống movie clip như bạn hướng dẫn không ra được gì cả bạn ơi, có mấy chỗ làm ở trong movie clip nào ghi không rõ ràng gì cả làm bấm lung tung. Theo như bài bạn hướng dẫn mình làm ra tới movie clip symbol 6 luôn, quá trời là nhiều mà có thấy gì đâu bạn ==

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

busy