Bai 16 Tao tro choi bong ban don gian

<span class='text_page_counter'>(1)</span><div class='page_container' data-page=1>

<b>Flash CS4 : Tạo trị chơi bóng bàn đơn giản</b>

<b>TTO - 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. </b>
<b>Các bước thực hành như sau:</b>

<b>1. Chuyển về vùng làm việc mặc định.</b>

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
<b>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>
bài thực hành 1 về vùng làm việc)

<b>2. Tạo mới một flash document. (Xem bài thực hành 1 về tạo một flash document)</b>
<b>3. Lưu một flash document. (Xem bài thực hành 1 về lưu một flash document)</b>
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)

</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>

<b>Phân tích hình vẽ:</b>

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.
<b>5. Tạo motion tween cho quả bóng. </b>

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

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

</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>

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:

</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>

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:

</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>

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:

</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>

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 <b>Convert to Symbol</b> xuất hiện. Bạn gỏ vào tên <b>ball </b>ở ô 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.

</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>

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
<i><b>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></i>
bạn quan sát. Bạn sẽ bổ sung cho quả bóng hoạt động đến frame 60.

<b>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:</b>

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ừ:

</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>

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):

</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>

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

</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>

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:

</div>

<!--links-->