Flash CS4 - Bài 9: Tạo trò chơi bóng bàn đơn giản

Trong bài này, bạn sẽ sử dụng motion tween để tạo một trò chơi bóng bàn đơn giản. Các bước thực hành như sau:
1. Chuyển về vùng làm việc mặc định.
Bạn bấm chọn vùng Essentials để chọn lại vùng làm việc mặc định của Flash, tiếp đến bấm chọn Reset Essentials để khôi phục vùng làm việc mặc định này và bắt đầu vào bài thực hành 9. (Xem bài thực hành 1 về vùng làm việc)
2. Tạo mới một flash document. (Xem bài thực hành 1 về tạo một flash document)
3. Lưu một flash document. (Xem bài thực hành 1 về lưu một flash document)
Chọn folder FLASH CS4 ONLINE, sau đó lưu file này lại với tên 009_pingpong.fla
4. Import hình vẽ guide để làm đường dẫn cho motion tween.
4.1. Chọn File > Import > Import to Stage… từ menu:

4.2. Trong hộp thoại Import, trỏ đến file guide.jpg và bấm nút Open: (file guide.jpg được đính kèm theo bài có kích cỡ 550x400 pixel để sử dụng)

Bạn thu được hình của các đường dẫn giúp bạn tạo motion tween cho quả bóng và hai cây vợt sau này:

Phân tích hình vẽ:
Trong hình vẽ trên, hai đường thẳng đứng màu đỏ tượng trưng cho ranh giới di chuyển của quả bóng. Quả bóng chỉ được chạm vào hai đường này chớ không được vượt qua.
Đường màu xanh thể hiện đường đi của quả bóng. Theo đường này, quả bóng di chuyển từ vị trí 1 đến vị trí 2, 3, 4 và trở về vị trí 5, trong đó vị trí 1 và 5 trùng nhau. Đường màu đen bên trái thể hiện đường đi của vợt trái, vợt trái di chuyển từ vị trí 1, đến vị trí hai để đón quả bóng và trở về vị trí 3, trong đó vị trí 1 và 3 trùng nhau.
Đường màu đen bên phải thể hiện đường đi của vợt phải, vợt phải di chuyển từ vị trí 1, đến vị trí hai để đón quả bóng, kế đến di chuyển tiếp đến vị trí 3, quay lại vị trí 4 để đón quả bóng và trở về vị trí 5, trong đó vị trí 1 và 5 trùng nhau.
Như vậy, quả bóng và vợt phải sử dụng 5 keyframe, vợt trái sử dụng 3 keyframe.
5. Tạo motion tween cho quả bóng.

5.1. Bấm đúp vào Layer 1 để đổi tên thành Guide:

5.2. Bấm vào nút New Layer ở Timeline để thêm một layer:

5.3. Flash thêm một layer mới với tên mặc định Layer 2. Bấm đúp vào Layer 2 để đổi tên thành Ball:

5.4. Đưa chuột sang thanh công cụ. Bấm chuột vào Rectangle Tool và giữ chuột vài giây cho menu phụ hiện ra. Bấm chọn Oval Tool (xem thêm phần Tìm hiểu về Oval Tool ở cuối bài):

5.5 Bấm chuột vào ô Stroke color để chọn màu viền cho hình oval:

5.6. Bảng màu hiện ra, bạn bấm chọn vào ô bên phải có dấu chéo màu đỏ. Ô này dùng để thiết lập giá trị không màu cho đường viền, tức là đối tượng được vẽ sẽ không có viền:

5.7 Bấm chuột vào ô Fill color để chọn màu ruột cho hình oval:

5.8. Bảng màu hiện ra. Bạn chọn mẫu màu đỏ ở khu vực chứa màu gradient:

Bạn thu được kết quả như sau:

5.10. Đưa chuột vào góc trên, nơi xuất phát đường đi màu xanh của quả bóng, giữ phím Shift và kéo chuột xuống sang phải một đoạn để vẽ hình tròn.

Nhả chuột ra bạn thu được quả bóng tròn với màu gradient như sau:

5.11 Bấm chọn vào Selection Tool trên thanh công cụ bên phải:

5.12 Bấm chuột vào quả bóng vừa vẽ. Khi đã được chọn, quả bóng chuyển sang dạng hạt li ti, đồng thời phía dưới chuột xuất hiện mũi tên bốn chiều:

5.13. Bạn chọn Modify>Convert to Symbol… từ menu (hoặc bấm phím tắt F8) để chuyển quả bóng thành symbol:

Hộp thoại Convert to Symbol xuất hiện. Bạn gỏ vào tên ball ở ô Name, chọn Type là Movie Clip và bấm OK để đóng hộp thoại lại. Quả bóng được chuyển thành Movie Clip.

5.14 Bấm phím phải chuột vào quả bóng cho xuất hiện menu ngữ cảnh và chọn Create Motion Tween:

Flash tạo một motion tween cho quả bóng với 24 frame (tương đương 1 giây), đồng thời di chuyển Playhead đến frame 24. Bạn bổ sung thêm frame để thời gian hoạt động của quả bóng đủ dài để bạn quan sát. Bạn sẽ bổ sung cho quả bóng hoạt động đến frame 60.
5.15 Đưa chuột đến frame 24 của layer Ball đến khi chuột biến thành mũi tên hai chiều:

5.16 Kéo chuột đến frame 60 thì nhả chuột ra. Bạn thu được motion tween cho quả bóng với 60 frame:

5.17 Tuy nhiên frame 60 vẫn chưa phải là keyframe. Để nội dung của keyframe đầu và keyframe cuối của quả bóng trùng nhau, bạn dùng phím mũi tên Up (mũi tên đi lên) và mũi tên Down (mũi tên đi xuống) trên bàn phím. Bạn bấm mũi tên Up, quả bóng di chuyển lên trên 1 pixel, kế đến bạn bấm mũi tên Down, quả bóng di chuyển xuống dưới 1 pixel, Flash tự động bổ sung keyframe tại frame 60, đồng thời vị trí quả bóng vẫn không thay đổi do đã được bù trừ:

5.18 Bấm chọn frame 60 của layer Guide:

5.19 Bấm phím tắt F5 để bổ sung thêm cho đủ 60 frame để các layer khác có thể nhìn thấy đường dẫn đang nằm trên layer Guide để dễ thao tác:

5.20 Như đã phân tích ở trên, quả bóng sử dụng 5 keyframe. Bạn bổ sung thêm các keyframe như sau: Rê chuột đến frame 15 trên Timeline:

5.21 Bấm chuột để chuyển Playhead đến frame 15 (chú ý: bấm vào số 15, không bấm vào frame trên layer):

5.22 Nắm chuột kéo quả bóng từ vị trí 1 đến vị trí 2 thì thả xuống. Flash tự động thêm keyframe tại frame 15 trên layer Ball:

5.23 Rê chuột đến frame 30 trên Timeline và bấm chuột để chuyển Playhead đến frame 30:

5.24 Kéo quả bóng đến vị trí số 3. Flash tự động thêm keyframe tại frame 30 trên layer Ball:

5.25 Rê chuột đến frame 45 trên Timeline và bấm chuột để chuyển Playhead đến frame 45:

5.26 Kéo quả bóng đến vị trí số 4. Flash tự động thêm keyframe tại frame 45 trên layer Ball:

Bạn thu được motion tween hoàn chỉnh cho quả bóng với motion path màu tím như hình minh họa:

Tạo motion tween cho cây vợt bên trái.
6.1 Bấm vào nút New Layer ở Timeline để thêm một layer:
<table class="tLegend" style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.2 Flash thêm một layer mới với tên mặc định Layer 3. Bấm đúp vào Layer 3 để đổi tên thành Left paddle:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.3 Đưa chuột sang thanh công cụ. Bấm chuột vào Oval Tool và giữ chuột vài giây cho menu phụ hiện ra. Bấm chọn Rectangle Tool:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.4 Bấm chuột vào ô Fill color để chọn màu ruột cho hình chữ nhật:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.5 Bảng màu hiện ra. Bạn chọn mẫu màu xanh:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
Bạn thu được kết quả như sau (màu viền vẫn là không màu):
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.6 Đưa chuột vào Stage, bấm chuột vào góc trên vị trí xuất phát của quả bóng, kéo ngược sang trái một đoạn rồi nhả chuột ra để thu được một hình chữ nhật, như hình minh họa dưới đây:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.7 Bấm chọn Selection Tool trên thanh công cụ:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.8 Bấm chọn vào hình chữ nhật vừa vẽ.Khi đã được chọn, hình chữ nhật chuyển sang dạng hạt li ti, đồng thời phía dưới chuột xuất hiện mũi tên bốn chiều:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.9 Bạn chọn Modify>Convert to Symbol…từ menu (hoặc bấm phím tắt F8) để chuyển hình chữ nhật thành symbol:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.10 Hộp thoại Convert to Symbol xuất hiện. Bạn gõ vào tên paddle ở ô Name, chọn Type là Movie Clip và bấm OK để đóng hộp thoại lại. hình chữ nhật được chuyển thành Movie Clip.
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.11 Bấm phím phải chuột vào hình chữ nhật cho xuất hiện menu ngữ cảnh và chọn Create Motion Tween. Flash tạo motion tween cho hình chữ nhật trên layer Left paddle với 60 frame:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.12 Rê chuột đến frame 60 trên Timeline và bấm chuột để chuyển Playhead đến frame 60:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.13 Frame 60 vẫn chưa phải là keyframe. Bạn bấm mũi tên Up, hình chữ nhật di chuyển lên trên 1 pixel, kế đến bạn bấm mũi tên Down, hình chữ nhật di chuyển xuống dưới 1 pixel, Flash tự động bổ sung keyframe tại frame 60, đồng thời vị trí hình chữ nhật vẫn không thay đổi do đã được bù trừ:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.14 Rê chuột đến frame 30 trên Timeline và bấm chuột để chuyển Playhead đến frame 30:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
6.15 Giữ phím Shift và kéo hình chữ nhật đến vị trí số 2, nơi có quả bóng nằm sẵn (phím Shift giúp bạn di chuyển theo đường thẳng đứng, không bị lệch sang phải hoặc trái):
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
Vậy là bạn đã hoàn thành motion tween cho cây vợt bên trái (tức hình chữ nhật).
7. Tạo motion tween cho cây vợt bên phải.
7.1 6.1 Bấm vào nút New Layer ở Timeline để thêm một layer:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
7.2 Flash thêm một layer mới với tên mặc định Layer 4. Bấm đúp vào Layer 4 để đổi tên thành Right paddle:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
7.3 Bấm chọn thẻ Library để mở Libray Panel:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
7.4 Từ Library Panel, bạn kéo Movie Clip paddle vào Stage, thả vào vị trí 1 của cây vợt phải như hình minh họa:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
7.5 Bấm phím phải chuột vào cây vợt bên phải (tức hình chữ nhật) cho xuất hiện menu ngữ cảnh và chọn Create Motion Tween.
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
7.6 Rê chuột đến frame 60 trên Timeline và bấm chuột để chuyển Playhead đến frame 60:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
7.7 Frame 60 vẫn chưa phải là keyframe. Bạn bấm mũi tên Up, hình chữ nhật di chuyển lên trên 1 pixel, kế đến bạn bấm mũi tên Down, hình chữ nhật di chuyển xuống dưới 1 pixel, Flash tự động bổ sung keyframe tại frame 60, đồng thời vị trí hình chữ nhật vẫn không thay đổi do đã được bù trừ:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
7.8 Rê chuột đến frame 15 trên Timeline và bấm chuột để chuyển Playhead đến frame 15:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
7.9 Giữ phím Shift và kéo cây vợt đến nơi quả bóng đang nằm ở vị trí số 2:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
7.10 Rê chuột đến frame 30 trên Timeline và bấm chuột để chuyển Playhead đến frame 30:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
7.11 Giữ phím Shift và kéo cây vợt đến vị trí số 3 như hình minh họa:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
7.12 Rê chuột đến frame 45 trên Timeline và bấm chuột để chuyển Playhead đến frame 45:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
7.13 Giữ phím Shift và kéo cây vợt đến nơi có quả bóng ở vị trí số 4 như hình minh họa:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
Vậy là bạn đã hoàn thành motion tween cho cây vợt bên phải.
8. Chuyển layer Guide thành Guide Layer.
Layer Guide đã hoàn thành nhiệm vụ. Bạn có thể xóa layer này đi. Tuy nhiên bạn có thể giữ lại để tham khảo bằng cách chuyển nó sang Guide Layer:
8.1 Bấm phím phải chuột vào layer Guide cho xuất hiện menu ngữ cảnh và chọn Guide:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
Flash đổi biểu tượng của layer Guide thành cây búa. Bằng cách này, nội dung của layer Guide sẽ không được xuất ra theo Flash Movie, không làm tăng kích thước tác phẩm của bạn.
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
8.2 Chọn Control > Test Movie từ menu (hoặc phím tắt Ctrl+Enter) để xem kết quả:
Flash sẽ xuất thành file 009_pingpong.swf như sau:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
9. Di chuyển motion path
Nếu bạn thực hiện các thao tác đúng như hướng dẫn, khi Test Movie bạn sẽ thấy vợt trái chưa chạm vào quả bóng. Bạn sẽ di chuyển motion path của vợt trái cho vợt chạm vào quả bóng (bạn có thể lấy file mẫu đính kèm để thực hành bước này)
9.1. Rê chuột đến frame 30 trên Timeline và bấm chuột để chuyển Playhead đến frame 30:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
Bạn nhìn thấy vợt trái cách quả bóng một đoạn:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
9.2 Bấm chọn vào vợt trái cho xuất hiện motion path:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
9.3 Bấm đúp vào motion path:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
9.4 Bạn kiểm tra trên Property Inspector phải có biểu tượng Motion Tween để chắc rằng bạn đã chọn motion path, không phải đối tượng nào khác:
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
9.5 Dùng phím mũi tên sang phải (Right) trên bàn phím để di chuyển vợt sang phải đến khi vợt chạm vào quả bóng. Mỗi lần bạn bấm phím Right, đối tượng di chuyển 1 pixel, nếu bạn giữ phím Shift kèm theo thì đối tượng di chuyển 10 pixel.
<table style="border-collapse: separate;" align="center" border="0" cellpadding="0" cellspacing="0" width="40"><tr><td></td></tr></table>
Bạn có thể thực hiện cách tương tự để áp dụng cho cây vợt bên phải.
Bài tập gợi ý:
Làm lại bài trên với hình hướng dẫn thay đổi như minh họa dưới đây. Lần này cả hai vợt đều di chuyển với các vị trí keyframe được đánh dấu trên hình minh họa. Bạn có thể tải hình minh họa guide2.jpg và file kết quả mẫu 009_pingpong2.fla để tham khảo.