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

In
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

Share