Scratch – Ideas #1 Animate a Name
Như đã đề cập trong nội dung Scratch – Phương án khai thác triệt để các nguồn tài nguyên có sẵn, từ phần này, tôi sẽ tập trung khai thác đám tài nguyên từ phần Ideas để thử nghiệm các tính năng của Scratch trước khi xắn tay vào xây dựng các project phức tạp hơn.
#1. Giới thiệu nhanh về giao diện của Scratch
Về cơ bản, cũng tương tự như ScratchJr, Scratch cũng bố trí các Coding Block như Motion (Chuyển động), Looks (Hình ảnh), Sound (Âm thanh), Events (Sự kiện), Control (Điều khiển), …nằm ở bên trái với các màu sắc phân biệt khác nhau.
Điểm khác ở đây là sự xuất hiện của các dòng chữ mô tả chi tiết code block thay cho các hình ảnh minh họa đơn thuần của ScratchJR. Ngoài ra, để phục vụ các tính năng phức tạp hơn, Scratch cũng có thêm các Coding Block mới như Sensing (Tương tác), Operators (Phép toán),…
Vì các lí do nói trên, với Scratch, tôi sẽ không giới thiệu một lèo kiểu như nội dung Làm gì trước khi bắt tay vào luyện ScratchJr? (nếu tôi vẫn chơi kiểu đó thì có khi bạn sẽ ngủ gật trước khi đọc hết bài???). Thay vào đó, tôi sẽ giới thiệu lồng ghép các nội dung liên quan trong các phần demo để bạn có thể vừa đọc vừa động tay chân cho dễ thấm.
#2. Demo Ideas #1 – Animate a Name
Ý đồ thiết kế trong Educator Guide (bạn nên download về xem song song với nội dung này) của Ideas #1 – Animate a Name khá rõ. Cái Ideas #1 sẽ tập trung vào việc trải nghiệm coding trên Scratch với các hiệu ứng cho các ký tự chữ cái.
Và không cần phải chờ đợi lâu, tôi xin phép vào việc ngay và luôn.
#2.1 Color Clicker – Click nhân vật để đổi màu
Đầu tiên, tôi sẽ cần chọn Sprite (nhân vật) bằng cách di chuyển chuột xuống góc dưới, bên phải và chọn chỗ “mặt mèo” hoặc “kính lúp” để mở “Choose a Sprite”.
Lúc này, tôi sẽ truy cập được một mớ các thể loại Sprite như Animals, People, Fantasy, Dance, …Tuy nhiên, để theo sát tinh thần demo tôi sẽ múc đám Letters ở cuối cùng và chọn chữ “A” tương ứng với Sprite Block-A.
Trước khi xử lý coding cho cái Sprite Block-A mới, tôi cần dọn dẹp Sprite1 mặc định (là con mèo vàng bên dưới) cho gọn đẹp. Để mần vụ này, tôi sẽ cần chọn con mèo rồi chọt vô chỗ biểu tượng thùng rác.
Kế tiếp, tôi tiến hành chọn Backdrop (phông nền). Phần này cũng tương tự như phần Sprite khi tôi cho thể chọt vô cái “khung ảnh” hoặc “kính lúp” để mở “Choose a Backdrop”.
Ở đây có một mánh nhỏ đó là thay vì kéo chuột và căng mắt ra tìm các Backdrop, tôi có thể chỉ cần chọn vô chỗ kính lúp ở góc trên bên trái và gõ cái tên tương ứng (Boardwalk trong trường hợp này).
Sau khi chọn xong Sprite và Backdrop, tôi đã có thể bắt đầu nhiệm vụ chính là lập trình với các khối lệnh. Đầu tiên, tôi di chuyển xuống Events Blocks và drag (thao tác kéo thả) cái block “when this sprite clicked” vào khu vực lập trình tương ứng của Sprite (Block-A trong trường hợp này). Với thiết lập này, phần code cho Block-A sẽ chạy khi tôi click vào nó.
Tiếp theo, để tạo hiệu ứng hình ảnh, tôi di chuyển xuống Looks Blocks và drag cái “change color effect by 25”. Phần này sẽ tạo hiệu ứng đổi màu cho Block-A 25 đơn vị cho mỗi lần click vào nó.
Lưu ý: Con số 25 trong change color effect by 25 là có thể thay đổi tùy ý. Việc này cũng đúng cho con số trong các code block khác.
#2.2 Pin – Click nhân vật để xoay
Chuyển sang phần demo tiếp theo với Block-B. Ở đây tôi sẽ không nhắc lại phần chọn Sprite và block “when this sprite clicked”. Điểm mới ở đây là việc sử dụng block “repeat 10” của Control Blocks (nghĩa là tôi sẽ lập lại “thứ gì đó” 10 lần khi click vào Block-B).
Trong phần minh họa “Pin”, “thứ gì đó” nói trên sẽ là “turn clockwise direction 15 degrees” thuộc Motion Blocks (tức là cho Block-B xoay theo chiều kim đồng hồ 15 độ).
Lưu ý: code block “turn counter-clockwise direction 15 degrees”bên dưới sẽ làm Block-B xoay ngược chiều kim đồng hồ 15 độ;
Nếu bạn thích có thiết lập để phục hồi vị trí cho Block-B nằm ngay hàng thẳng lối sau khi thử nghiệm chán chê thì có thể quất cái block “when green flag clicked” (tức là chạy code khi click vào biểu tượng lá cờ xanh) của Events Blocks và block “point in direction 90” của Motion Blocks như sau.
#2.3 Play a Sound – Click nhân vật để phát âm thanh
Ở phần demo “Play a Sound”, tôi sẽ sử dụng sprite là C-Block. Tuy nhiên, trước khi tác chiến, tôi sẽ cần lấy âm thanh ra trước. Để làm việc này, tôi sẽ cần di chuyển từ Code tab mặc định sang Sounds tab rồi chọn vào chỗ cái loa (hoặc “kính lúp”) để mở “Choose a Sound” và chọn 1 âm thanh cụ thể.
Ở phần “Choose a Sound”, tôi có thể dùng chức năng Search hoặc lăn chuột tìm cái sound yêu thích (tôi sẽ demo nhanh với “A Bass” như bên dưới).
Sau khi, chọn xong, đối tượng vừa được chọn sẽ xuất hiện như bên dưới.
Lúc này, tôi có thể quay về Code tab mặc định và tiến hành lập trình cho sprite.
Để phát âm thanh, tôi có thể quất cái “when this sprite clicked” và sau đó di chuyển và Sound Blocks để chọn “play sound A Bass until done” (nghĩa là phát âm thanh A Bass cho đến hết).
Lưu ý: tôi có thể thay đổi thiết lập âm thanh bằng cách click vào tam giác nhỏ kế bên A Bass và thay đổi (với điều kiện tôi đã lấy âm thanh tương ứng trong Sounds tab như ở đoạn đầu).
#2.4 Dancing Letter – Click nhân vật để di chuyển và phát nhạc
Ở phần demo “Dancing Letter”, tôi sẽ cần múc cái Extension ra trước.
Từ đây, tôi sẽ click chọn để lượm cái Music Extension.
Lúc này, quay về Code tab, tôi đã có thể truy cập các block của Music extension.
Quay trở lại với nhiệm vụ thử nghiệm Dancing Letter, tôi có thể sử dụng Events block là “when this sprite clicked” kèm theo 2 cái “move <x> step” của Motion Block (dấu “-“ là để đi theo chiều ngược lại). Xen giữa 2 cái “move <x> step”, tôi có thể quất 2 cái “play drum <x> for <y> beats”.
#2.5 Change Size – Click nhân vật để thay đổi kích thước
Ở phần Change Size, tôi cũng vẫn dùng Events block “when this sprite clicked” cho sprite là E-Block. Phần mấu chốt ở đây là cái “change size by <x>” của Looks block (tương tự phần Motion block, dấu trừ sẽ tạo hiệu ứng ngược lại là thu nhỏ).
Ngoài ra, để hiệu ứng “đẹp mắt”, tôi sẽ quất 2 cái “repeat <x>” thuộc Control Block bao quanh cái “change size by <x>”.
Lưu ý: Nếu không dùng “repeat <x>”, tôi sẽ không quan sát kịp hiệu ứng Change Size. Lúc đó tôi có thể chèn thêm một cái “wait <x> seconds” (cũng thuộc Control Block) vô giữa 2 cái “repeat <x>” để có thể quan sát hiệu ứng. Tuy nhiên, với phương án này, hiệu ứng không được bắt mắt bằng cách dùng “repeat <x>”.
Khi dùng 2 cái “change size by <x>” với 2 giá trị x khác nhau như bên dưới thì kích thước của sprite (E-Block) sẽ bị thay đổi dần dần sau mỗi lần chạy. Tôi có thể bổ sung thêm phần reset cho sprite quay về kích thước ban đầu với “set size to 100%” của Looks Block mỗi khi bấm vào Green Flag.
#2.6 Press a Key – Nhấn phím để xoay và đổi màu cho nhân vật
Ở phần Press a Key này, tôi sẽ dùng sprite F-Block với ý tưởng là mỗi khi ấn 1 phím trên bàn phím (bên dưới tôi dùng phím space – khoảng trắng) thì nhân vật sẽ thực hiện hiệu ứng xoay và đổi màu.
Cụ thể, tôi sẽ dùng “turn clockwise direction 15 degrees” thuộc Motion Blocks và “change color effect by x” của Looks Block.
Tất nhiên, ngoài phím space, tôi có thể dùng các phím khác như đám phím mũi tên lên xuống, trái phải hay một chữ cái nào đấy.
#2.7 Glide Around – Click nhân vật để trượt đến tọa độ đã định
Với phần Glide Around cuối cùng, tôi sẽ dùng sprite là G-Block và cái “when this prite clicked” của Events Block.
Phần điểm nhấn ở đây là “glide <z> secs to x: <x> y: <y>” của Motion Block. Với cái glide, tôi sẽ thấy sprite “lững lờ” trôi đến tọa độ x, y đã định (trong thời gian 1 giây như bên dưới).
Lưu ý: Tôi nhận thấy giải thích hệ tọa độ xOy cho trẻ là việc không đơn giản. Bạn có thể giúp trẻ làm quen bằng cách rê chuột trên backdrop và chỉ cho trẻ sự thay đổi tương ứng của các giá trị x,y để trẻ hình dung sơ bộ về ý nghĩa của cái được gọi là tọa độ.
Để hỗ trợ cho việc thử nghiệm Ideas #1 – Animate a Name, tôi cũng bổ sung thêm phần video demo tổng hợp ở cuối cùng để bạn tiện theo dõi.