Bài 9(P3): Tìm hiểu về Oval Tool

Flash CS4 - Bài 9: Tìm hiểu về Oval Tool

Phần lý thuyết bổ sung cho bài thực hành 9

Tìm hiểu về Oval Tool

Để chọn Oval Tool, bạn bấm vào biểu tượng Rectangle Tool trên thanh công cụ và giữ chuột vài giây cho menu phụ hiện ra. Bấm chọn Oval Tool:

Sau khi chọn Oval Tool, chuột sẽ chuyển sang hình dấu +. Để vẽ, bạn bấm chuột vào vị trí đầu, kéo chuột đến vị trí cuối và nhả chuột ra để thu được một hình oval. Nếu giữ phím Shift trong khi vẽ, bạn sẽ thu được một hình tròn. Bạn cũng có thể vẽ hình vành khăn hoặc một phần của hình tròn hoặc hình vành khăn bằng cách điều chỉnh các thông số trên Property Inspector.

Property Inspector sẽ tự động cập nhật để cung cấp các thông tin liên quan đến Oval Tool như sau:
	Ngay dưới Property Inspector là biểu tượng một hình oval kèm dòng chữ cho biết bạn đang chọn Oval Tool
	Ngay dưới phần Fill and Stroke là phần chọn màu cho viền (Stroke - bên trái) và ruột (Fill - bên phải). Bạn chọn màu từ bảng màu khi bấm vào ô màu đen kế bên cây bút chì để thiết lập màu cho viền, hoặc ô màu xanh bên phải kế bên thùng nước sơn để thiết lập màu cho ruột của hình oval:
	Kế đến là chọn độ lớn của đường viền. Bạn có thể nắm kéo thanh trượt nằm ngay bên phải chữ Stroke hoặc gõ số trực tiếp vào ô bên phải. Khi bạn kéo thanh trượt, ô bên phải sẽ cập nhật giá trị tùy theo vị trí thanh trượt.
	Phần tiếp theo là chọn kiểu dáng cho đường viền. Nếu bấm vào hình tam giác đen kế bên cây bút chì, bạn có thể chọn một trong các kiểu đường viền sau đây:   Nếu bạn bấm vào cây bút chì, bạn có thể tùy biến thêm các thông số phụ cho đường viền trong hộp thoại sau đây: Bạn có thể thử nghiệm để tìm cho mình một kiểu dáng đường viền ưng ý. Tuy nhiên cần lưu ý một điều là kiểu dáng phức tạp sẽ làm tăng kích thước cuối cùng của tác phẩm.
	Phần Scale giúp hiển thị đường viền khi được phóng to hoặc thu nhỏ. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây:   Normal: thay đổi theo giá trị scale. Horizontal: chỉ scale theo chiều ngang. Vertical: chỉ scale theo chiều dọc. None: không thay đổi theo giá trị scale. Nếu chọn ô Hinting, Flash sẽ tự điều chỉnh để làm tròn giá trị stroke, tránh xuất hiện những nét nhòe.
	Tùy chọn Cap giúp bạn thể hiện kiểu dáng đầu mút của đường tròn không khép kín. Nếu bấm vào hình tam giác đen, bạn sẽ có các tùy chọn sau đây:
	Join giúp bạn thể hiện kiểu dáng chỗ giao nhau của các đường. Bạn sẽ thu được các chọn lựa sau đây khi bấm vào hình tam giác đen:
	Oval Options giúp bạn điều chỉnh các thông số khi muốn vẽ hình vành khăn hoặc vẽ một phần của hình tròn hoặc hình vành khăn. Bạn có thể kéo thanh trượt để thay đổi giá trị hoặc gõ số trực tiếp vào các ô bên phải. Start angle: giá trị khởi đầu của cung tròn. Giá trị này có thể từ 0 - 360 tính theo chiều kim đồng hồ. Giá trị 0 bắt đầu từ mép phải của hình tròn. End angle: giá trị kết thúc của cung tròn. Giá trị này có thể từ 0 - 360 tính theo chiều kim đồng hồ. Giá trị 0 bắt đầu từ mép phải của hình tròn. Inner radius: giá trị bán kính trong của hình vành khăn. Tính theo phần trăm của bán kính ngoài. Giá trị chấp nhận từ 0 - 99. Close path: thiết lập nét vẽ kín hoặc hở. Nếu đánh dấu chọn thì nét vẽ kín. Để trả về các giá trị mặc định ban đầu của Oval Tool, bạn bấm vào nút Reset.
	Ví dụ hình oval với giá trị thiết lập bên trái:
	Ví dụ hình oval với giá trị thiết lập bên trái:
	Ví dụ hình oval với giá trị thiết lập bên trái:
	Ví dụ hình oval với giá trị thiết lập bên trái:
	Ví dụ hình oval với giá trị thiết lập bên trái:
	Ví dụ hình oval với giá trị thiết lập bên trái:
	Ví dụ hình oval với giá trị thiết lập bên trái:
	Ví dụ hình oval với giá trị thiết lập bên trái:
	Ví dụ hình oval với giá trị thiết lập bên trái:
	Ví dụ hình oval với giá trị thiết lập bên trái:
	Ví dụ hình oval với giá trị thiết lập bên trái:
	Ví dụ hình oval với giá trị thiết lập bên trái:

Nguồn: Tuoitre.vn

GV TRƯƠNG VĂN NĂNG
Công ty TNHH Khải Thiên (KTC Co., Ltd)

Bài 9(P2): Tạo trò chơi bóng bàn đơn giản

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

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:

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:

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: 

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

6.5 Bảng màu hiện ra. Bạn chọn mẫu màu xanh:

Bạn thu được kết quả như sau (màu viền vẫn là không màu):

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:

6.7 Bấm chọn Selection Tool trên thanh công cụ:

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: 

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:

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.

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:

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

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

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

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

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: 

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:

7.3 Bấm chọn thẻ Library để mở Libray Panel:

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:

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.

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

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

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

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: 

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

7.11 Giữ phím Shift và kéo cây vợt đến vị trí số 3 như hình minh họa:

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

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:

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:

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.

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:

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:

Bạn nhìn thấy vợt trái cách quả bóng một đoạn:

9.2 Bấm chọn vào vợt trái cho xuất hiện motion path:

9.3 Bấm đúp vào motion path:

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:

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.

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.

Nguồn: Tuoitre.vn

GV TRƯƠNG VĂN NĂNG
Công ty TNHH Khải Thiên (KTC Co., Ltd)