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 và cô tiên

1 THỰC HÀNH NHẬP MÔN CÔNG NGHỆ THÔNG TIN Giảng viên: ThS. Dương Thành Phết TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔNG TIN Thời gian: 2 tiết TẠO RA MỘT ĐOẠN PHIM HOẠT HÌNH VỀ CON CÁ VÀNG & CÔ TIÊN 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 3 Bước 2: Thêm và Định vị đối tượ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 Thêm đối tượng Con cá vàng 4  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 Thêm đối tượng Cô tiên Bước 2: Thêm và Định vị đối tượng(tt) 5 Đã 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. Các đối tượng tại Object Tree Bước 2: Thêm và Định vị đối tượng(tt) 6 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. Định vị đối tượng Bước 2: Thêm và Định vị đối tượng(tt) 7 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 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 vị đối tượng – Up & down Bước 2: Thêm và Định vị đối tượng(tt) 8 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. Định vị đối tượng – Spin Bất kể lúc nào làm sai có thể nhấn vào nút Undo Bước 2: Thêm và Định vị đối tượng(tt) 9 Sử dụng nó để làm cho cô tiên nghiêng nhẹ về phía trước. Nút tile sẽ xoay nhân vật về phía sau hoặc phía trước. Định vị đối tượng – Tilt Bước 2: Thêm và Định vị đối tượng(tt) 10 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á. Định vị đối tượng – Tumble Bước 2: Thêm và Định vị đối tượng(tt) 11 Nút này làm cho đối tượng lớn hoặc nhỏ hơn. Định vị đối tượng – Resize 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) Bước 2: Thêm và Định vị đối tượng(tt) 12 Nút copy sẽ copy đối tượng đối tượng. X Định vị đối tượng – Copy Bước 2: Thêm và Định vị đối tượng(tt) 13 Nhấn “done” để thoát khỏi thư viện đối tượng. Bước 2: Thêm và Định vị đối tượng(tt) 14 Những việc cần làm với đối tượng đã xong. Tiếp tục thiết kế Camera! Bước 2: Thêm và Định vị đối tượng(tt) 15 Tại cửa sổ định vị đối tượng. Nhấn vào nút “more controls >>”. Bước 3: Thiết kế Camera giả Dummy Camera được thiết kế để lưu lại vị trí camera trong lúc di chuyển camera xung quanh. Giới thiệu: 16 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”. Bước 3: Thiết kế Camera giả Thiết kế Camera giả 17 Khi thả camera giả vào. Một thư mục sẽ xuất hiện trong object tree được gọi là “Dummy Objects.” Nhấn vào dấu + bên cạnh thư mục Dummy Objects, danh sách các camera giả sẽ xuất hiện. Lúc này, chỉ có một camera thêm vào, gọi là “Dummy”. Bước 3: Thiết kế Camera giả Thiết kế Camera giả 18 Nhấn phải chuột ở “Dummy” và chọn rename để đổi tên camera. Hãy đổi tên nó thành “Start.” Đổi tên Camera Bước 3: Thiết kế Camera giả 19 Để 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. Di chuyển Camera Bước 3: Thiết kế Camera giả 20 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 Bước 3: Thiết kế Camera giả Đổi khung nhìn 21 Click phải chuột vào Camera và chọn “methods”,  “camera set point of view to”  “Dummy Objects”,  “Start”. Bước 3: Thiết kế Camera giả Đổi khung nhìn(tt) Điều này giúp đặt camera về vị trí ban đầu. 22 Hãy tạo camera cho con cá và đặt tên “Fish.” Bước 3: Thiết kế Camera giả 23 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”. Bước 3: Thiết kế Camera giả 24 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! Bước 3: Thiết kế Camera giả 25 Cửa sổ “Method Editor.” Method editor được sử dụng để thêm hành động cho nhân vật. Bước 4: Xây dựng Hành động 26 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. 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. Bước 4: Xây dựng Hành động 27 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.” Hành động – Camera Bước 4: Xây dựng Hành động 28 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. Hành động – Fairy Bước 4: Xây dựng Hành động 29  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à xem kết quả. Hành động – Play Bước 4: Xây dựng Hành động 30 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. Hành động – Delete Bước 4: Xây dựng Hành động 31 Đâ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. Hành động – Đơn giản Bước 4: Xây dựng Hành động 32 : Đ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. Hành động – Nói Bước 4: Xây dựng Hành động 33 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. Hành động – Nói Bước 4: Xây dựng Hành động 34 Hãy thử nó một lần nữa nhưng hãy cho nói một gì đó khác. Hãy chạy chương trình? Hành động – Nói Bước 4: Xây dựng Hành động 35 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 đã tạo. Bước 5: Tạo sự kiện Giới thiệu: 36  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 Bước 5: Tạo sự kiện Tạo mới sự kiện 37 Nhấn vào “nothing” và chọn lichenZenSpider -> Talk. Nhấn vào “any key” và chọn Space. Cửa sổ event editor sẽ giống như thế này. Bước 5: Tạo sự kiện Tạo mới sự kiện 38 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!” Bước 5: Tạo sự kiện 39 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 xuất hiện trong khung method editor. Bước 5: Tạo sự kiện Hành động – FairyFly 40 Đầ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”. Hành động – FairyFly Bước 5: Tạo sự kiện 41 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 Hành động – FairyFly 42 Để 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 method” và chọn “lichenZenSpider” -> “FairyFly”. 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. 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á 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. 45 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à  Cô tiên bay xung quanh con cá thay vì chỉ quay 1 chỗ. Chương trình hiện tại như sau: 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 47 Xuất hiện menu  Chọn “asSeenBy” -> “goldfish” -> “the entire goldfish”. Để 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”. 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. 49  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: Hành động cô tiên cưỡi cá – RideFish 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ô tiên. Vì thế khi con cá di chuyển, cô tiên sẽ di chuyển theo. 51  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.  Để thay đổi: Nhấn vào, chọn goldfish -> the entire goldfish. Sự kiện 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. 53 Đầ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” Sự kiện 54 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. Sự kiện – Gọi hành động 55 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ó. Sự kiện – Gọi hành động 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. 56  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”. 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á! 57 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 của nó trở về “world.” Đã hoàn tất, hãy thử chạy chương trình. Thuộc tính Vehicle 58 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á. 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. 59 Congratulations! You have just made your first Alice World. Come back and see me soon!