Bài giảng Thực hành Nhập môn công nghệ thông tin - Phần 3: Tạo ra một đoạn phim hoạt hình về con cá vàng và cô tiên - Dương Thành Phết

Nội dung text: Bài giảng Thực hành Nhập môn công nghệ thông tin - Phần 3: Tạo ra một đoạn phim hoạt hình về con cá vàng và cô tiên - Dương Thành Phết

1. TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔNG TIN THỰC HÀNH NHẬP MÔN CÔNG NGHỆ THÔNG TIN TẠO RA MỘT ĐOẠN PHIM HOẠT HÌNH VỀ CON CÁ VÀNG & CÔ TIÊN Thời gian: 2 tiết Giảng viên: ThS. Dương Thành Phết 1
2. Bước 1: Chọn nền  Khởi động Alice, chọn một khung nền tại ngăn template  Chọn khung nền water 2
3. Bước 2: Thêm và Định vị đối tượng Thêm đối tượng Con cá vàng  Chọn một object (đối tượng) cho Alice World: Bấm vào nút Add Objects  Bấm chọn vào thư mục đối tượng animals (động vật) .  Tìm Goldfish (cá vàng) Add Instance to World.  Bấm vào nút Done 3
4. Bước 2: Thêm và Định vị đối tượng(tt) Thêm đối tượng Cô tiên  Chọn một object (đối tượng) cho Alice World: Bấm vào nút Add Objects  Bấm chọn vào thư mục đối tượng Fantasy Faeries.  Tìm LichenZenspider Add Instance to World.  Bấm vào nút Done 4
5. Bước 2: Thêm và Định vị đối tượng(tt) Các đối tượng tại Object Tree Đã xuất hiện trong danh sách bên tay trái màn hình của 2 đối tượng trong thế giới: con cá và cô tiên. 5
6. Bước 2: Thêm và Định vị đối tượng(tt) Định vị đối tượng Bên phải màn hình: Tất cả các nút có hình mặt người sẽ giúp bạn định vị được đối tượng. Click white arrow, và click vào cô tiên và di chuyển: Hãy di chuyển cô tiên sao cho cô tiên đứng bên phải con cá vàng như trong hình. 6
7. Bước 2: Thêm và Định vị đối tượng(tt) Định vị đối tượng – Up & down Nút với hình mũi tên lên và xuống sẽ di chuyển đối tượng lên và xuống. Nhấn vào nó và di chuyển cô tiên sao cho cô ta lơ lửng trên mặt nước 7
8. Bước 2: Thêm và Định vị đối tượng(tt) Định vị đối tượng – Spin Nút này được dùng để xoay đối tượng (spin). Xoay con cá vàng sao cho nó song song với màn hình. Bất kể lúc nào làm sai có thể nhấn vào nút Undo 8
9. Bước 2: Thêm và Định vị đối tượng(tt) Định vị đối tượng – Tilt Nút tile sẽ xoay nhân vật về phía sau hoặc phía trước. Sử dụng nó để làm cho cô tiên nghiêng nhẹ về phía trước. 9
10. Bước 2: Thêm và Định vị đối tượng(tt) Định vị đối tượng – Tumble Nút tumble: Di chuyển đối tượng đến tất cả các nơi. Hãy di chuyển cô tiên sao cho cô tiên hướng mặt về phía con cá. 10
11. Bước 2: Thêm và Định vị đối tượng(tt) Định vị đối tượng – Resize Nút này làm cho đối tượng lớn hoặc nhỏ hơn. Hãy làm cho con cá vàng lớn hơn cô tiên. Di chuyển con cái xuống. Sao cho con cá hơi nhô lên khỏi mặt nước (như hình bên) 11
12. Bước 2: Thêm và Định vị đối tượng(tt) Định vị đối tượng – Copy X Nút copy sẽ copy đối tượng đối tượng. 12
13. Bước 2: Thêm và Định vị đối tượng(tt) Nhấn “done” để thoát khỏi thư viện đối tượng. 13
14. Bước 2: Thêm và Định vị đối tượng(tt) Những việc cần làm với đối tượng đã xong. Tiếp tục thiết kế Camera! 14
15. Bước 3: Thiết kế Camera giả Giới thiệu: Dummy Camera được thiết kế để lưu lại vị trí camera trong lúc di chuyển camera xung quanh. Tại cửa sổ định vị đối tượng. Nhấn vào nút “more controls >>”. 15
16. Bước 3: Thiết kế Camera giả Thiết kế Camera giả Sau khi nhấn vào nút “more controls” xuất hiện menu xổ xuống. Nhấn vào “drop dummy at camera”. 16
17. Bước 3: Thiết kế Camera giả Thiết kế Camera giả Khi thả camera giả vào. Nhấn vào dấu + bên cạnh thư Một thư mục sẽ xuất hiện mục Dummy Objects, danh trong object tree được sách các camera giả sẽ xuất gọi là “Dummy Objects.” hiện. Lúc này, chỉ có một camera 17 thêm vào, gọi là “Dummy”.
18. Bước 3: Thiết kế Camera giả Đổi tên Camera Nhấn phải chuột ở “Dummy” và chọn rename để đổi tên camera. Hãy đổi tên nó thành “Start.” 18
19. Bước 3: Thiết kế Camera giả Di chuyển Camera Để di chuyển camera đến vị trí khác bằng cách sử dụng mũi tên tím phía dưới màn hình. Di chuyển camera sao cho nó lại gần với cô tiên. 19
20. Bước 3: Thiết kế Camera giả Đổi khung nhìn Hãy thả vào một Dummy Camera khác tại vị trí của cô tiên và đặt tên nó là “Fairy.” Nhấn phải chuột vào camera trong object tree 20
21. Bước 3: Thiết kế Camera giả Đổi khung nhìn(tt) Click phải chuột vào Camera và chọn “methods”, “camera set point of view to” “Dummy Objects”, “Start”. Điều này giúp đặt camera về vị trí ban đầu. 21
22. Bước 3: Thiết kế Camera giả Hãy tạo camera cho con cá và đặt tên “Fish.” 22
23. Bước 3: Thiết kế Camera giả Cuối cùng, đặt vị trí của camera ban đầu quay về vị trí “Start”. Nhấn vào “Done” ở góc dưới phải để thoát khỏi màn hình “add objects”. 23
24. Bước 3: Thiết kế Camera giả Những việc cần làm với camera đã xong, chúng ta xây dựng các hành động cho nhân vật! 24
25. Bước 4: Xây dựng Hành động Cửa sổ “Method Editor.” Method editor được sử dụng để thêm hành động cho nhân vật. 25
26. Bước 4: Xây dựng Hành động Tại cửa sổ object tree và chọn thẻ methods: Liệt kê tất cả các hành động mà cô tiên có thể làm. Mội nhân vật đã sẵn có một số hành động. Hãy thử cho cô tiên thực hiện các hành động này. 26
27. Bước 4: Xây dựng Hành động Hành động – Camera Thay vì nhấn phải chuột, kéo camera set point of view to vào method editor. Đặt khung nhìn của camera thành “Fairy.” 27
28. Bước 4: Xây dựng Hành động Hành động – Fairy Nhấn vào lichenZenspider để quay trở lại các hành động của cô tiên. Nhấn vào hành động có tên là “Wink,” kéo và thả vào khung method editor. 28
29. Bước 4: Xây dựng Hành động Hành động – Play  Khi nhấn play, cô tiên sẽ nháy mắt phải.  Đóng cửa sổ “World Running” khi đoạn phim chạy xong.  Hãy thử kéo và thả vào các hành động khác nhau, sau đó nhấn play để xem chúng làm gì. Lưu ý: hành động “flap wing” yêu cầu duration và amount. Chọn số cho cả 2 và 29 xem kết quả.
30. Bước 4: Xây dựng Hành động Hành động – Delete Nếu muốn xóa dòng bất nhấn phải chuột ngay dòng đó và chọn “delete.” Nhấn vào dotted tab bên trái của dòng đó và kéo thả nó vào thùng rác. Thả chuột khi thùng rác được tô xanh. 30
31. Bước 4: Xây dựng Hành động Hành động – Đơn giản Đây là những hành động đơn giản mà cô tiên có thể làm. Đây là những hành động mà bằng cách kết hợp chúng, sẽ tạo ra các hành động khác cho cô tiên. 31
32. Bước 4: Xây dựng Hành động Hành động – Nói : Đi đến thẻ methods của cô tiên và chọn nút màu xám “Create new method.” Đặt tên là “Talk.” Một thẻ mới “lichenZenSpider.Talk” sẽ xuất hiện bên cạnh thẻ “world.my first method” method editor. 32
33. Bước 4: Xây dựng Hành động Hành động – Nói Tìm hành động “say” của cô tiên Kéo và thả nó vào khung method editor.  Chọn “other ”, gõ vào “I’m flying!”  Nhấn OK. 33
34. Bước 4: Xây dựng Hành động Hành động – Nói Hãy thử nó một lần nữa nhưng hãy cho nói một gì đó khác. 34 Hãy chạy chương trình?
35. Bước 5: Tạo sự kiện Giới thiệu: Sự kiện là cách để gọi hành động được tạo khi chạy chương trình. Cửa sổ event editor nằm ở góc phải trên màn hình.  Nếu muốn cô tiên nói “I’m flying” và câu còn lại khi nhấn phím space bar.  Để làm điều đó ta sẽ thêm sự kiện và gọi hành động Talk 35 đã tạo.
36. Bước 5: Tạo sự kiện Tạo mới sự kiện  Nhấn vào “create new event”  Xuất hiện danh sách các sự kiện trong cửa sổ events editor.  Chọn “when a key is typed”  Kết quả như hình 36
37. Bước 5: Tạo sự kiện Tạo mới sự kiện Nhấn vào “any key” và chọn Space. Nhấn vào “nothing” và chọn lichenZenSpider -> Talk. Cửa sổ event editor sẽ giống như thế này. 37
38. Bước 5: Tạo sự kiện Hãy thử chạy Mỗi lần nhấn space bar, cô tiên sẽ nói “I’m flying”, và sau đó là “This is fun!” 38
39. Bước 5: Tạo sự kiện Hành động – FairyFly Cho cô tiên bay xung quanh con cá:  Nhấn vào cô tiên trong object tree và vào thẻ methods.  Nhấn nút “create new method.” Khi xuất hiện hộp thoại Hãy đặt tên cho hành động là “FairyFly”. Lúc này, một hành động mới vừa 39 xuất hiện trong khung method editor.
40. Bước 5: Tạo sự kiện Hành động – FairyFly Đầu tiên, chúng ta sẽ đặt camera quay về vị trí ban đầu. Nhấn vào camera trong object tree. Đi đến danh sách các hành động của nó và tìm “camera set point of view to.” Kéo nó vào method editor. Chọn “Dummy Objects” -> “Start”. 40
41. Hành động – FairyFly Hãy cho cô tiên vỗ cánh:  Nhấn vào lichenZenspider trong object tree và chọn thẻ “methods”.  Kéo hành động flapWings vào. Vỗ cánh 6 lần trong 2 giây 41
42. Hành động – FairyFly Khi cần kiểm tra thử, ta cần thay đổi trong cửa sổ events editor cho hành động FairyFly được thực hiện. Để thay đổi sự kiện “when the world starts” thành hành động “FairyFly”: Nhấn vào mũi tên kế bên chữ “world.my first 42 method” và chọn “lichenZenSpider” -> “FairyFly”.
43. Hãy thử chạy chương trình. Camera của sẽ quay về vị trí ban đầu và cô tiên sẽ vỗ cánh. NNhư vậy chưa hộp lý. Chúng ta phải cho cô tiên bay xung quanh con cá 43 thay về bay ở 1 chỗ.
44. Quay trở lại các hành động của cô tiên và chọn “turn”, kéo thả nó vào khung method editor. Cho cô tiên turn left 1 revolution. 44
45. Chương trình hiện tại như sau: Chạy chương trình: Cô tiên sẽ vẫy cánh và quay tại chỗ. Ta cần sửa lại 2 chỗ:  Cô tiên vẫy cánh trong khi cô ta quay và 45  Cô tiên bay xung quanh con cá thay vì chỉ quay 1 chỗ.
46.  Đầu tiên, hãy cho cô tiên vẫy cánh và quay cùng 1 lúc.  Nhìn vào phía dưới màn hình và tìm nút “Do Together.” Kéo và thả vào method editor. Sau đó đặt đoạn “flap wings” và đoạn “turn” vào trong đó. Hãy thử chạy chương trình 46
47. Để làm cho cô tiên bay xung quanh con cá, chúng ta cần chọn “more” bên cạnh đoạn code “Turn”. Xuất hiện menu Chọn “asSeenBy” -> “goldfish” -> “the entire goldfish”. 47
48. Nó sẽ làm cho cô tiên quay xung quanh con cá. Hãy chạy thử chương trình. Hãy viết thêm một hành động nữa. Hãy làm cho cô tiên cưỡi lên lưng con cá sau khi đã bay xung quanh. 48
49. Hành động cô tiên cưỡi cá – RideFish  Tạo hành động mới và đặt tên nó là “RideFish.”  Nhấn vào “lichenZenspider”, chọn thẻ “methods”.  Nhấn “create new method” và đặt tên là “RideFish.”  Bên trong method editor, kéo lệnh “move to” và chọn “goldfish” -> “the entire goldfish.”  Kết quả như sau: 49
50. Lúc này để dán cô tiên và con cá vàng để khi con cá vàng di chuyển, cô tiên sẽ di chuyển theo nó. Sử dụng vehicle property. Tìm thấy nó trong thẻ properties của cô tiên.  Kéo thuộc tính vehicle vào khung method editor và chọn goldfish -> the entire goldfish.  Kết quả sẽ đặt con cá vàng như là một phương tiện của cô 50 tiên. Vì thế khi con cá di chuyển, cô tiên sẽ di chuyển theo.
51. Sự kiện  Nhấn vào “create new event” trong cửa sổ events editor.  Chọn “let the arrow keys move subject.”  Nó sẽ tự động đặt là camera. 51  Để thay đổi: Nhấn vào, chọn goldfish -> the entire goldfish.
52.  Có thể đặt chúng vào cùng với nhau.  Lúc ban đầu hành động trong method editor, có một hành động tên là “World.myfirstmethod.”  Hành động này dành cho việc nói lên cốt truyện của bạn. Hãy lưu ý rằng có rất nhiều thẻ ở bên trên. Bạn có thể xem từng hành động bằng cách nhấn vào các thẻ đó. Nhấn vào thẻ “world.my first method”. Đây là thẻ mà chúng ta đặt toàn bộ code chính. Code của bạn sẽ trông khác với của tôi. 52
53. Sự kiện Đầu tiên chúng ta sẽ đặt camera trong “world.myfirstmethod” vào “Start”. Kéo vào “camera set point of view to” và chọn “Dummy Objects” -> “Start” 53
54. Sự kiện – Gọi hành động Nếu bạn nhìn vào bên dưới các hành động của cô tiên, bạn sẽ thấy các hành động mà bạn đã viết. Chúng ta có thể đặt chúng vào world.myfirstmethod để nói lên câu chuyện. Hãy đặt vào hành động cô tiên bay xung quanh và sau đó là cưỡi lên con cá. Kéo “FairyFly” và “Ridefish” vào World.myfirstmethod. 54
55. Sự kiện – Gọi hành động Bây giờ chúng ta sẽ sử dụng sự kiện “When the world starts” để gọi nó. Nhấn vào mũi tên để thay đổi thành “my first method.” Lúc này bạn sẽ thấy khi bạn chạy chương. trình, cô tiên sẽ bay xung quanh con cá và sau đó đậu lên lưng nó. Bạn có thể làm cho cô tiên nói bằng cách nhấn space bar và di chuyển con cá bằng các phím mũi tên. Hãy chạy thử chương trình. 55
56. Khi cho con cá di chuyển ra khỏi camera, sẽ không còn nhìn thấy nữa. Hãy đặt camera thành một vehicle của con cá!  Tìm thuộc tính vehicle của camera và kéo thả nó vào giữa 2 dòng “FairyFly” và “RideFish”.  Đặt nó thành “goldfish” -> “the entire goldfish”. 56
57. Thuộc tính Vehicle Đã hoàn tất, hãy thử chạy chương trình. Nếu muốn gỡ cô tiên ra khỏi con cá hoặc gỡ camera:  Để gỡ cô tiên ra khỏi con cá, đặt thuộc tính vehicle của cô tiên trờ về “world”.  Để gỡ camera ra khỏi con cá, cũng đặt thuộc tính vehicle 57 của nó trở về “world.”
58. Bài tập Luyện tập lại những gì mà bạn đã học bằng cách làm bài tập này. Bắt đầu với con cá và cô tiên mà bạn đã hoàn thành ở trên. 1. Kéo thả island từ thư mục environments. 2. Cho con cá bơi xung quanh hòn đảo. 3. Gỡ cô tiên ra khỏi con cá và cho cô ta di chuyển đến hòn đảo bằng câu lệnh move over. 4. Thử dán camera vào cô tiên thay vì con cá. 58
59. Congratulations! You have just made your first Alice World. Come back and see me soon! 59