CtrlZ

CtrlZ
 
RegisterRegister  HomeHome  CalendarCalendar  FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  Log inLog in  


Flash CS4 - Bài 11: Classic Tween và trò chơi bập bênh đơn giảnView previous topic View next topic Go down

Copy đường link dưới đây gửi đến nick yahoo bạn bè!

Mon Nov 08, 2010 10:51 am
[Sáng Tạo] -

Points : 0
Join date : 1970-01-01


PostSubject: Flash CS4 - Bài 11: Classic Tween và trò chơi bập bênh đơn giản
View user profile

Nguồn :http://ctrlz.123.st/t53-flash-cs4-bai-11-classic-tween-va-tro-choi-bap-benh-on-gian

Tiêu Đề : Flash CS4 - Bài 11: Classic Tween và trò chơi bập bênh đơn giản

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 gridSnap 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á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):
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á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):
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.







Flash CS4 - Bài 11: Classic Tween và trò chơi bập bênh đơn giản

View previous topic View next topic Back to top
Page 1 of 1
* Viết tiếng Việt có dấu, là tôn trọng người đọc.
* Chia sẻ bài sưu tầm có ghi rõ nguồn, là tôn trọng người viết.
* Thực hiện những điều trên, là tôn trọng chính mình.
-Nếu chèn smilies có vấn đề thì bấm A/a trên phải khung viết bài
Permissions in this forum:You cannot reply to topics in this forum
CtrlZ :: Đồ Họa :: Flash :: Căn Bản-
pingText link: Xem Phim Nhanh


Ctrlz.123.st | KINGDOM OF DREAMS
Copyright S4U - All rights reserved
Copyright 2010
Powered by vBulletin Version 4.0.7 licensed
Xem tốt nhất với độ phân giải 1024x768 và trình duyệt Firefox
Free forum | © phpBB | Free forum support | Contact | Report an abuse | Forumotion.com