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ộ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:
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:
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:
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:
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:
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:
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:
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:
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:
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:
6. Tô màu ruột cho tấm ván6.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):
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:
Ô 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:
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:
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:
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:
6.7 Hai mặt của tấm ván đã được tô màu gỗ:
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án7.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):
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:
7.3 Các núm điều chỉnh màu bitmap xuất hiệ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ồ:
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:
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:
8. Xóa đường viền và chuyển tấm ván thành
Symbol.
8.1 Bấm chọn
Selection Tool ở thanh công cụ bên phải:
8.2 Đưa chuột vào một đường thẳng bất kỳ:
8.3 Bấm đúp chuột để chọn đường thẳng này, các đường thẳng khác cũng được chọn theo:
8.4 Bấm phím
Delete để xóa các đường viền:
8.5 Chọn
Edit > Select All từ menu (hoặc phím tắt
Ctrl+A):
Toàn bộ tấm ván được chọn (xuất hiện các hạt li ti):
8.6 Chọn
Modify > Convert to Symbol… từ menu (hoặc phím tắt
F8);
Hộp thoại
Convert to Symbol xuất hiện:
8.7 Ở ô
Name: gõ vào tên tam van (tấm ván),
Type: chọn
Movie Clip, Registration: chọn điểm giữa. Tiếp theo bấm nút
OK để đóng hộp thoại lại.
Tấm ván được chuyển thành
Symbol với viền chữ nhật màu xanh:
9. Tạo bục gỗ cho tấm ván tựa lên.9.1. Bấm chuột vào nút
New Layer để bổ sung một layer dành chứa bục gỗ:
Flash bổ sung Layer 2 vào
Timeline.
9.2 Bấm chọn vào
Rectangle Tool trên thanh công cụ bên phải và giữ chuột vài giây cho menu phụ hiện ra. Bấm chọn
PolyStar Tool:
9.3 Bấm chuột vào ô
Stroke color để chọn màu viền cho
PolyStar Tool:
9.4 Bấm vào nút
No color để chọn không màu:
9.5 Bấm chuột vào ô
Fill color để chọn màu ruột cho
PolyStar Tool:
9.6 Chọn màu gỗ nằm ở bên phải của dãy màu gradient:
9.7 Bấm vào nút
Options… ở
Property Inspector:
Hộp thoại
Tool Settings xuất hiện:
9.8 Ở mục
Style: chọn polygon, ở mục
Number of Sides: gõ vào số 3. Bấm
OK để đóng hộp thoại lại:
9.9 Giữ phím
Shift, kéo chuột từ ô lưới trung tâm thứ nhất lên ô lưới trung tâm thứ hai như minh họa:
Bạn thu được một bục gỗ hình tam giác như sau:
Lưu ý: Nếu thấy bục gỗ vượt lên phủ qua tấm ván, bạn phải chọn bục gỗ và di chuyển xuống một chút, hoặc chuyển cho layer chứa bục gỗ xuống dưới layer chứa tấm ván.
10. Tạo Classic Tween cho tấm ván chuyển động.10.1. Bấm chuột vào
Gradient Transform Tool trên thanh công cụ và giữ vài giây cho xuất hiện menu phụ, chọn
Free Transform Tool (Free Transform Tool sẽ được giới thiệu ở các bài thực hành tiếp theo):
10.2. Đưa chuột vào tấm ván, dưới chuột xuất hiện mũi tên bốn chiều:
10.3 Bấm chuột để chọn tấm ván. Xung quanh tấm ván xuất hiện một khung chữ nhật với một vòng tròn rỗng ruột màu trắng ở giữa và tám núm điều chỉnh xung quanh:
10.4 Vòng tròn rỗng ruột màu trắng dùng để định vị tâm xoay của tấm ván. Bạn cần chuyển tâm xoay này xuống mép dưới tấm ván để thao tác xoay tấm ván quanh bục gỗ được phù hợp với thực tế. Đưa chuột vào vòng tròn rỗng ruột màu trắng cho xuất hiện vòng tròn nhỏ bên cạnh chuột:
10.5 Kéo vòng tròn rỗng ruột màu trắng xuống sát mép dưới tấm ván:
10.6 Đưa chuột đến núm điều khiển phía trên bên phải đến khi chuột chuyển thành mũi tên xoay tròn:
10.7 Xoay chuột sang trái cho tấm ván chếch lên một góc như hình minh họa:
Bạn thu được kết quả tấm ván chếch lên một góc:
10.8. Bạn cần tạo hai Tween. Tween thứ nhất cho tấm ván xoay sang phải, Tween thứ hai cho tấm ván xoay ngược lại. Bấm chuột vào frame 24 trên Layer 1 chứa tấm ván:
10.9. Bấm phím
F6 để bổ sung keyframe:
10.10. Bấm chuột vào frame 48 trên Layer 1 chứa tấm ván:
10.11. Bấm phím
F6 để bổ sung keyframe:
10.12. Bấm chọn frame 24:
10.13. Đưa chuột đến núm điều khiển phía trên bên phải tấm ván đến khi chuột chuyển thành mũi tên xoay tròn:
10.14. Xoay chuột sang phải cho tấm ván chếch một góc ngược lại như hình minh họa:
10.15. Bấm phím phải chuột vào keyframe 24 cho xuất hiện menu ngữ cảnh và chọn
Create Classic Tween:
10.16. Bấm phím phải chuột vào keyframe 1 cho xuất hiện menu ngữ cảnh và chọn
Create Classic Tween:
10.17. Bạn thu được màu xanh nhạt đặc trưng của Classic Tween với mũi tên từ frame 2 đến frame 23 cho tween đầu và mũi tên từ frame 25 đến frame 47 cho tween còn lại. Để có thể nhìn thấy bục gỗ từ đầu đến cuối Timeline, bạn cần bổ sung frame cho bục gỗ. Bạn bấm chọn frame 48 trên Layer 2 chứa bục gỗ:
10.18. Bấm phím tắt
F5 để bổ sung frame:
10. Xuất file thành flash movie để xem thử.
Bạn chọn
Control > Test Movie từ menu, Flash sẽ xuất thành file
011_classic_tween.swf:
11. Điều chỉnh Tween để hiệu ứng không bị chậm lại.
Nếu để ý, bạn sẽ thấy tốc độ chuyển đổi của tấm ván chậm lại khi chuyển tiếp từ frame 48 về lại frame 1. Đó là do vị trí của tấm ván ở frame 48 và frame 1 trùng nhau. Để loại trừ sự trùng lặp này bạn thực hiện như sau:
11.1. Bấm chọn frame 47 của Layer 1 chứa tấm ván:
11.2. Bấm phím tắt F6 để bổ sung keyframe, bạn thu được vị trí tấm ván ở keyframe 47 đã khác với vị trí tấm ván ở keyframe 48:
11.3. Đưa chuột vào frame 48, nơi đánh dấu các frame của Timeline:
11.4. Bấm chuột để chuyển
PlayHead đến frame 48:
11.5. Chọn
Edit > Timeline > Remove Frames từ menu (hoặc phím tắt
Shift+F5):
Flash xóa bớt một frame cho cả hai layer:
11.6. Bấm chuột để chuyển PlayHead đến frame 45:
11.7. Bấm phím tắt
F5 để bổ sung một frame cho đủ 48 frame.
Bạn chọn
Control > Test Movie từ menu để xem lại kết quả.
Một số bài tập gợi ý
* Sử dụng phương pháp tương tự để tạo chuyển động cho chiếc xích đu. Bạn cần chuyển tâm xoay của xích đu lên mép trên để thao tác xoay xích đu quanh trục được phù hợp với thực tế. So sánh với bài mẫu đính kèm.
* Sử dụng phương pháp tương tự để tạo chuyển động cho con lắc đồng hồ. Bạn cần chuyển tâm xoay của con lắc lên mép trên để thao tác xoay con lắc quanh trục được phù hợp với thực tế. Chú ý mỗi tween chỉ chiếm 12 frame để mỗi chu kỳ con lắc hoạt động là 24 frame, tương đương với 1 giây. So sánh với bài mẫu đính kèm.
* Bổ sung hai nhân vật vào bập bênh cho chuyển động theo bập bênh. So sánh với bài mẫu đính kèm.
