Học Adobe Flash CS4 cơ bản Flash CS4

Học Adobe Flash CS4 cơ bản

Flash CS4 - Bài 11: Classic Tween và trò chơi bập
bênh đơn giản
TTO - Trong bài này bạn 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 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 11 (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
011_classic_tween.fla.
4. Cho hiện Grid (khung lưới) để dễ định vị các nét vẽ.
4.1 Chọn View > Grid > Edit Grid từ menu (hoặc phím tắt Ctrl+Alt+G) (xem thêm
phần Tìm hiểu về Grid ở cuối bài):


Học Adobe Flash CS4 cơ bản

Hộp thoại Grid hiện ra với các thông số mặc định như sau:

4.2 Bạn sửa số 10 thành 25 vào hai ô thông số của Grid , bấm chọn các ô Show
grid và Snap to grid. Tiếp theo bấm nút OK để chấp nhận các giá trị mới này:


Học Adobe Flash CS4 cơ bản

Trên Stage xuất hiện khung lưới như sau:

5. Vẽ tấm ván dùng cho trò chơi bập bênh.
5.1 Bấm chọn Line Tool trên thanh công cụ bên phải:


Học Adobe Flash CS4 cơ bản

5.2 Bấm vào ô Stroke color để chọn màu cho Line Tool:

5.3 Bạn chọn màu xanh cho đường viền để không trùng màu với màu Grid:


Học Adobe Flash CS4 cơ bản

5.4 Đưa chuột vào khoảng giữa trên Stage, kéo chuột sang góc dưới bên trái để
vẽ đường thẳng:

5.5 Bạn thu được đường thẳng nghiêng màu xanh đầu tiên. Đưa chuột vào
khoảng giữa trên Stage, kéo chuột sang góc dưới bên phải để vẽ đường thẳng thứ
hai:


Học Adobe Flash CS4 cơ bản

5.6 Bạn thu được đường thẳng nghiêng màu xanh thứ hai. Bạn giữ phím Shift và
kéo chuột từ giao điểm của đường thẳng nghiêng bên trái với ô lưới thứ ba từ
dưới lên, sang giao điểm của đường thẳng nghiêng bên phải với Grid như hình
sau:

Học Adobe Flash CS4 cơ bản

5.7 Bạn thu được một đường thẳng nằm ngang màu xanh cắt hai đường thẳng
nghiêng đã vẽ trước đó. Bạn vẽ thêm một đường thẳng song song với đường
thẳng đã vẽ bằng cách giữ phím Shift, và kéo chuột từ giao điểm của đường thẳng
nghiêng bên trái với ô lưới thứ tư từ dưới lên sang giao điểm của đường thẳng
nghiêng bên phải với Grid như hình sau:


Học Adobe Flash CS4 cơ bản

5.8 Bạn thu được đường thẳng nằm ngang thứ hai. Từ giao điểm của đường
thẳng nằm ngang dưới cùng và đường thẳng nghiêng bên trái, bạn kéo xuống một
ô lưới để vẽ một đường thẳng ngắn:


Học Adobe Flash CS4 cơ bản

5.9 Bạn thu được đường thẳng đứng thứ nhất. Từ giao điểm của đường thẳng
nằm ngang dưới cùng và đường thẳng nghiêng bên phải, bạn kéo xuống một ô
lưới để vẽ một đường thẳng ngắn:


Học Adobe Flash CS4 cơ bản

5.10 Bạn thu được đường thẳng đứng thứ hai. Kéo chuột nối đầu mút của hai
đường thẳng đứng vừa vẽ như hình minh họa:


Học Adobe Flash CS4 cơ bản

5.11 Bạn thu được hình dáng một tấm ván có một mặt đang hướng về phía bạn,
mặt trên nghiêng, hai mặt bên gặp nhau ở cuối đường, nơi giao của hai đường
thẳng nghiêng:


Học Adobe Flash CS4 cơ bản

6. Tô màu ruột cho tấm ván
6.1 Để tô màu ruột cho tấm ván, bạn sử dụng màu lấy từ hình bitmap có hoa văn
gỗ import từ ngoài vào. Bạn chọn Window > Color từ menu (hoặc phím tắt
Shift+F9):


Học Adobe Flash CS4 cơ bản

Color Panel xuất hiện với màu viền đang được chọn (ô màu với cây bút chì đang
lõm xuống):

Bạn bấm chuột vào thùng nước sơn để chuyển sang chọn màu ruột:


Học Adobe Flash CS4 cơ bản

Ô màu với thùng nước sơn lõm xuống - dấu hiệu đang chọn màu ruột:

6.2 Ở ô Type bạn bấm cho menu xổ xuống và chọn Bitmap:


Học Adobe Flash CS4 cơ bản

6.3 Hộp thoại Import to Library xuất hiện. Bạn chuyển đến folder chứa ảnh
wood.jpg (file wood.jpg được cung cấp kèm theo bài), bấm chọn file ảnh này và
chọn nút Open :

Color Panel được cập nhật như sau:


Học Adobe Flash CS4 cơ bản

6.4 Bấm chọn Paint Bucket Tool trên thanh công cụ bên phải, công cụ này dùng
để tô màu ruột cho đối tượng:


Học Adobe Flash CS4 cơ bản

6.5 Chuột đổi sang thành thùng nước sơn. Đưa chuột vào mặt trên của tấm ván
và bấm vào để tô màu gỗ cho mặt trên:

6.6 Mặt trên tấm ván được tô màu gỗ. Bạn bấm tiếp vào mặt trước tấm ván đối
diện bạn:


Học Adobe Flash CS4 cơ bản

6.7 Hai mặt của tấm ván đã được tô màu gỗ:


Học Adobe Flash CS4 cơ bản

Bạn bấm dấu chéo ở góc trên bên phải của Color Panel để đóng lại.
7. Dùng Gradient Transform Tool để chỉnh màu ruột tấm ván
7.1 6.1 Bấm chuột vào Free Transform Tool và giữ vài giây cho xuất hiện menu
phụ và chọn Gradient Transform Tool (xem thêm phần Tìm hiểu về Gradient
Transform Tool ở cuối bài):


Học Adobe Flash CS4 cơ bản

Chuột đổi thành mũi tên có ruột màu trắng.
7.2 Đưa chuột vào vùng ruột phía mặt trên tấm ván, phía dưới chuột xuất hiện
một hộp chữ nhật biểu hiện màu tô chuyển. Bấm chuột vào vùng này của tấm
ván:


Học Adobe Flash CS4 cơ bản

7.3 Các núm điều chỉnh màu bitmap xuất hiện:


Học Adobe Flash CS4 cơ bản

7.4 Đưa chuột vào núm điều chỉnh góc trên bên phải, chuột đổi thành vịng trịn
có bốn mũi tên xoay theo chiều kim đồng hồ:


Học Adobe Flash CS4 cơ bản

7.5 Nắm kéo chuột xoay sang phải để đường viền của màu ruột song song với
đường thẳng nghiêng bên trái:

Học Adobe Flash CS4 cơ bản

7.6 Thả chuột ra, bạn thu được kết quả tấm ván đã nghiêng một bên như sau:


Học Adobe Flash CS4 cơ bản

(Còn tiếp)