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

Flash CS4: 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.
2. Tạo mới một flash document.
3. 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:

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: