Bài 14: Classic Tween và trò chơi bập bênh đơn giản - p2

Bài 14: Classic Tween và trò chơi bập bênh đơn giản - p2

Tự học flash cs4 đơn giản. Trong bài này, chúng ta sử dụng Classic Tween để tạo một trò chơi bập bênh đơn giản. Các bước thực hành tiếp theo như sau:
8659/10

Tự học Adobe Flash CS4

Bài 14: Classic Tween và trò chơi bập bênh đơn giản - p2

Tự học flash cs4 đơn giản. Trong bài này, chúng ta sử dụng Classic Tween để tạo một trò chơi bập bênh đơn giản. Các bước thực hành tiếp theo như sau:

8. Xóa đường viền và chuyển tấm ván thành Symbol.

8.1  Bấm chọn Selection Tool ở thanh công cụ bên phải:

8.2 Đưa chuột vào một đường thẳng bất kỳ:

8.3 Bấm đúp chuột để chọn đường thẳng này, các đường thẳng khác cũng được chọn theo:

8.4 Bấm phím Delete để xóa các đường viền:

8.5 Chọn Edit > Select All từ menu (hoặc phím tắt Ctrl+A):

Toàn bộ tấm ván được chọn (xuất hiện các hạt li ti):

8.6 Chọn Modify > Convert to Symbol… từ menu (hoặc phím tắt F8);

Hộp thoại Convert to Symbol xuất hiện:

8.7 Ở ô Name: gõ vào tên tam van (tấm ván), Type: chọn Movie Clip, Registration: chọn điểm giữa. Tiếp theo bấm nút OK để đóng hộp thoại lại.

Tấm ván được chuyển thành Symbol với viền chữ nhật màu xanh:

9. Tạo bục gỗ cho tấm ván tựa lên.

9.1. Bấm chuột vào nút New Layer để bổ sung một layer dành chứa bục gỗ:

Flash bổ sung Layer 2 vào Timeline.

9.2 Bấm chọn vào Rectangle Tool trên thanh công cụ bên phải và giữ chuột vài giây cho menu phụ hiện ra. Bấm chọn PolyStar Tool:

9.3 Bấm chuột vào ô Stroke color để chọn màu viền cho PolyStar Tool:

9.4 Bấm vào nút No color để chọn không màu:

9.5 Bấm chuột vào ô Fill color để chọn màu ruột cho PolyStar Tool:

9.6 Chọn màu gỗ nằm ở bên phải của dãy màu gradient:

9.7 Bấm vào nút Options… ở Property Inspector:

Hộp thoại Tool Settings xuất hiện:

9.8 Ở mục Style: chọn polygon, ở mục Number of Sides: gõ vào số 3. Bấm OK để đóng hộp thoại lại:

9.9 Giữ phím Shift, kéo chuột từ ô lưới trung tâm thứ nhất lên ô lưới trung tâm thứ hai như minh họa:

Bạn thu được một bục gỗ hình tam giác như sau:

Lưu ý: Nếu thấy bục gỗ vượt lên phủ qua tấm ván, bạn phải chọn bục gỗ và di chuyển xuống một chút, hoặc chuyển cho layer chứa bục gỗ xuống dưới layer chứa tấm ván.

10. Tạo Classic Tween cho tấm ván chuyển động.

10.1. Bấm chuột vào Gradient Transform Tool trên thanh công cụ và giữ vài giây cho xuất hiện menu phụ, chọn Free Transform Tool (Free Transform Tool sẽ được giới thiệu ở các bài thực hành tiếp theo):

10.2. Đưa chuột vào tấm ván, dưới chuột xuất hiện mũi tên bốn chiều:

10.3 Bấm chuột để chọn tấm ván. Xung quanh tấm ván xuất hiện một khung chữ nhật với một vòng tròn rỗng ruột màu trắng ở giữa và tám núm điều chỉnh xung quanh:

10.4 Vòng tròn rỗng ruột màu trắng dùng để định vị tâm xoay của tấm ván. Bạn cần chuyển tâm xoay này xuống mép dưới tấm ván để thao tác xoay tấm ván quanh bục gỗ được phù hợp với thực tế. Đưa chuột vào vòng tròn rỗng ruột màu trắng cho xuất hiện vòng tròn nhỏ bên cạnh chuột:

10.5 Kéo vòng tròn rỗng ruột màu trắng xuống sát mép dưới tấm ván:

10.6 Đưa chuột đến núm điều khiển phía trên bên phải đến khi chuột chuyển thành mũi tên xoay tròn:

10.7 Xoay chuột sang trái cho tấm ván chếch lên một góc như hình minh họa:

Bạn thu được kết quả tấm ván chếch lên một góc:

10.8. Bạn cần tạo hai Tween. Tween thứ nhất cho tấm ván xoay sang phải, Tween thứ hai cho tấm ván xoay ngược lại. Bấm chuột vào frame 24 trên Layer 1 chứa tấm ván:

10.9. Bấm phím F6 để bổ sung keyframe:

10.10. Bấm chuột vào frame 48 trên Layer 1 chứa tấm ván:

10.11. Bấm phím F6 để bổ sung keyframe:

10.12. Bấm chọn frame 24:

10.13. Đưa chuột đến núm điều khiển phía trên bên phải tấm ván đến khi chuột chuyển thành mũi tên xoay tròn:

10.14. Xoay chuột sang phải cho tấm ván chếch một góc ngược lại như hình minh họa:

10.15. Bấm phím phải chuột vào keyframe 24 cho xuất hiện menu ngữ cảnh và chọn Create Classic Tween:

10.16. Bấm phím phải chuột vào keyframe 1 cho xuất hiện menu ngữ cảnh và chọn Create Classic Tween:

10.17. Bạn thu được màu xanh nhạt đặc trưng của Classic Tween với mũi tên từ frame 2 đến frame 23 cho tween đầu và mũi tên từ frame 25 đến frame 47 cho tween còn lại. Để có thể nhìn thấy bục gỗ từ đầu đến cuối Timeline, bạn cần bổ sung frame cho bục gỗ. Bạn bấm chọn frame 48 trên Layer 2 chứa bục gỗ:

10.18. Bấm phím tắt F5 để bổ sung frame:

10. Xuất file thành flash movie để xem thử.

Bạn chọn Control > Test Movie từ menu, Flash sẽ xuất thành file 011_classic_tween.swf:

11. Điều chỉnh Tween để hiệu ứng không bị chậm lại.

Nếu để ý, bạn sẽ thấy tốc độ chuyển đổi của tấm ván chậm lại khi chuyển tiếp từ frame 48 về lại frame 1. Đó là do vị trí của tấm ván ở frame 48 và frame 1 trùng nhau. Để loại trừ sự trùng lặp này bạn thực hiện như sau:

11.1. Bấm chọn frame 47 của Layer 1 chứa tấm ván:

11.2. Bấm phím tắt F6 để bổ sung keyframe, bạn thu được vị trí tấm ván ở keyframe 47 đã khác với vị trí tấm ván ở keyframe 48:

11.3. Đưa chuột vào frame 48, nơi đánh dấu các frame của Timeline:

11.4. Bấm chuột để chuyển PlayHead đến frame 48:

11.5. Chọn Edit > Timeline > Remove Frames từ menu (hoặc phím tắt Shift+F5):

Flash xóa bớt một frame cho cả hai layer:

11.6. Bấm chuột để chuyển PlayHead đến frame 45:

11.7. Bấm phím tắt F5 để bổ sung một frame cho đủ 48 frame.

Bạn chọn Control > Test Movie từ menu để xem lại kết quả.

Một số bài tập gợi ý

* Sử dụng phương pháp tương tự để tạo chuyển động cho chiếc xích đu. Bạn cần chuyển tâm xoay của xích đu lên mép trên để thao tác xoay xích đu quanh trục được phù hợp với thực tế. So sánh với bài mẫu đính kèm.

* Sử dụng phương pháp tương tự để tạo chuyển động cho con lắc đồng hồ. Bạn cần chuyển tâm xoay của con lắc lên mép trên để thao tác xoay con lắc quanh trục được phù hợp với thực tế. Chú ý mỗi tween chỉ chiếm 12 frame để mỗi chu kỳ con lắc hoạt động là 24 frame, tương đương với 1 giây. So sánh với bài mẫu đính kèm.

* Bổ sung hai nhân vật vào bập bênh cho chuyển động theo bập bênh. So sánh với bài mẫu đính kèm.

Nguồn từ nhipsongso.tuoitre.vn


Công ty thiết kế website, lập trình phần mềm NEVICOM

Công ty thiết kế website, lập trình phần mềm NEVICOM

Bình luận

Top