1 แบบทดสอบก่อนเรียน เล่มที่ 2 เรื่อง ออกแบบตัวละคร คำชี้แจง ให้นักเรียนเลือกคำตอบที่ถูกต้องที่สุดเพียงคำตอบเดียว แล้วกากบาท (x) ลงในกระดาษคำตอบ จำนวน 10 ข้อ (ใช้เวลา 15 นาที) 1.จากภาพ เรียกว่าอะไรในโปรแกรม Scratch ก. กลุ่มบล็อกคำสั่ง ข. พื้นที่เขียนสคริปต์ (Script) ค. ตัวละคร ง. ข้อมูลของเวที หรือตัวละครที่ถูกเลือก (Sprite Header Pane) 2.จากรูป คือองค์ประกอบใดของโปรแกรม Scratch ก. แถบเมนูเครื่องมือ (Toolbar) ข. รายการตัวละคร ค. บล็อกคำสั่งในกลุ่มที่เลือก ง. เครื่องมือเวที
2 3.จากรูป ผู้เขียนกำลังเขียนบล็อกคำสั่งให้กับตัวละครหมายเลขใด ก. หมายเลข 1 ข. หมายเลข 2 ค. หมายเลข 3 ง. หมายเลข 4 4.ข้อใดต่อไปนี้กล่าวถูกต้อง ก. ต้องติดตั้งโปรแกรม Microsoft Word ก่อน ติดตั้งโปรแกรม Scratch ข. โอเปอร์เรชัน (Operation) คือกลุ่มคำสั่งควบคุม ค. การทำงานของตัวละครแต่ไม่จําเป็นต้องเริ่มหรือจบสคริปต์พร้อมกัน ง. ไม่มีข้อใดกล่าวถูก 5. จากภาพ เครื่องมีนี้มีหน้าทำงานอย่างไร ก. ปุ่มประทับตราตัวละคร ข. ปุ่มลดขนาดตัวละคร ค. ปุ่มลบตัวละคร ง. ปุ่มเพิ่มขนาดตัวละคร 6. จากภาพ เครื่องมีนี้มีหน้าทำงานอย่างไร ก. ปุ่มประทับตราตัวละคร ข. ปุ่มลดขนาดตัวละคร ค. ปุ่มลบตัวละคร ง. ปุ่มเพิ่มขนาดตัวละคร 7. คำสั่งกู้บล็อก สคริปต์ หรือตัวละครที่เพิ่งถูกลบ อยู่ในกลุ่มเมนูใด ก. เมนู File ข. เมนู Edit ค. เมนู Share ง. เมนู Help
3 8. คำสั่ง Duplicate มีประโยชน์อย่างไร ก. ใช้ย่อตัวละครให้เล็กลง ข. ใช้ขยายตัวละครให้ใหญ่ขึ้น ค. ใช้ลบ ตัวละคร ชุดตัวละคร เสียง บล็อกคำสั่ง ง. ใช้ทำซ้ำ ตัวละคร ชุดตัวละคร เสียง บล็อกคำสั่ง 9. จากภาพ ถ้าหากต้องการเปลี่ยนภาษาในโปรแกรม Scratch ต้องเลือกหมายเลขใด ก. หมายเลข 1 ข. หมายเลข 2 ค. หมายเลข 3 ง. หมายเลข 4 10. เมื่อสร้างโปรแกรมเสร็จแล้วต้องการเผยแพร่ผลงานควรใช้คำสั่งใด ก. Export Sprite ข. Project Notes ค. Go To Scratch Website ง. Share This Project Online
4 กระดาษคำตอบแบบทดสอบก่อนเรียน แบบฝึกทักษะการเขียนโปรแกรม scratch เพื่อส่งเสริมความคิดสร้างสรรค์สำหรับนักเรียน ชั้นมัธยมศึกษาปีที่ 1 รายวิชาเทคโนโลยี (วิทยาการคำนวณ) กลุ่มสาระการเรียนรู้วิทยาศาสตร์และเทคโนโลยี ชื่อ – นามสกุล ...................................................................ชั้น...................เลขที่.............. ข้อ ก ข ค ง 1 2 3 4 5 6 7 8 9 10 คะแนนเต็ม 10 คะแนนที่ได้ เกณฑ์การประเมิน คะแนนระหว่าง 9-10 อยู่ในเกณฑ์ ดีมาก คะแนนระหว่าง 7-8 อยู่ในเกณฑ์ ดี คะแนนระหว่าง 5-6 อยู่ในเกณฑ์ ปานกลาง คะแนนระหว่าง 0-4 อยู่ในเกณฑ์ ปรับปรุง ผลการประเมิน ดีมาก ดี ปานกลาง ปรับปรุง (ลงชื่อ).........................................ผู้ประเมิน (นางสาวรสสุคนธ์ อัศวภูมิ) วันที่.........เดือน.......................พ.ศ. .............
5 ใบความรู้ที่ 2.1 หลักการทำงานของเวทีและตัวละคร เวที คือ พื้นที่แสดงผลลัพธ์การทำงานของสคริปต์ เสียง หรือพื้นหลัง ของโปรแกรมตามโค้ดที่ได้เขียนไว้ เวทีมีขนาดกว้าง 480 หน่วย สูง 360 หน่วย ถ้าพื้นหลังมีขนาดใหญ่กว่าโปรแกรม Scratch จะลดขนาดพื้นหลังนั้น อัตโนมัติเพื่อให้พอดีกับขนาดของเวที 1. การสร้างฉากพื้นหลังของเวที การสร้างฉากพื้นหลังของเวที ที่เรียกว่า backdrop มี 2 วิธี ดังนี้ วิธีที่ 1 นำเมาส์เลื่อนไปที่ปุ่ม เพื่อสร้างฉากพื้นหลังของเวที วิธีที่ 2 ให้คลิกกรอบสี่เหลี่ยม จากนั้นให้คลิกที่แท็บ Backdrop แล้วนำเมาส์เลื่อนไปที่ปุ่ม เพื่อเลือกสร้างฉากพื้นหลังของเวทีดังรูป 1 1
6 ทั้งนี้ สามารถเลือกสร้างฉากพื้นหลังของเวทีได้หลายรูปแบบ ดังนี้ Choose a Backdrop คือการสร้างฉากพื้นหลังของเวทีจาก Backdrop Library ซึ่งเป็นคลังภาพพื้น หลังต่าง ๆ ที่ Scratch ได้จัดเตรียมไว้ให้แล้ว ดังรูป หากเราต้องการใช้ภาพไหนให้คลิกเลือกภาพนั้นจาก พื้นหลังของเวทีก็จะถูกสร้างขึ้นมาตามภาพที่เลือก ปรากฏหน้าต่างพื้นหลังดังภาพ Upload Backdrop Surprise Paint Choose a Backdrop 2
7 Paint คือการวาดตกแต่งฉากพื้นหลังของเวทีด้วยตนเองโดยจะมีเครื่องมือต่าง ๆ ให้เลือกใช้มากมาย ดังรูป Surprise คือโปรแกรม scratch จะสุ่มเลือกจากพื้นหลังขึ้นมาให้โดยอัตโนมัติ เราสามารถแก้ไขฉากพื้น หลังได้โดยจะมีเครื่องมือต่าง ๆ ให้เลือกใช้มากมาย ดังรูป Upload Backdrops คือการเลือกอัพโหลดไฟล์รูปภาพที่ต้องการใช้สร้างเป็นฉากพื้นหลังของเวที มีเครื่องมือให้เลือกใช้ส ำหรับ สร้ำงฉำกพื้นหลังด้วยตนเอง
8 2. การแก้ไขชื่อฉากพื้นหลังของเวที เมื่อสร้างฉากพื้นหลังของเวทีแล้วเราสามารถแก้ไขชื่อฉากพื้นหลังของเวทีได้ ดังนี้ ขั้นที่ 1 คลิกที่ Stage ขั้นที่ 2 คลิกที่แท็บ Backdrops แล้วเลือกฉากหลังที่ต้องการเปลี่ยนชื่อ ขั้นที่ 3 พิมพ์ชื่อใหม่ลงไปจากนั้นกดคีย์ Enter 1 2 3
9 3. การลบฉากพื้นหลังของเวที (Delete Stage) การลบฉากพื้นหลังของเวทีสามารถทำได้ 2 วิธี ดังนี้ วิธีที่ 1 คลิกขวาที่ฉากที่ต้องการลบ แล้วเลือก delete ดังรูป วิธีที่ 2 คลิกปุ่มกากบาทที่มุมบนขวา ของฉากที่ต้องการลบดังรูป 4. การสร้างฉากพื้นหลังใหม่โดยคัดลอกจากฉากเดิม (Clone Stage) เราสามารถคัดลอกฉากเดิมนำมาสร้างเป็นฉากใหม่ได้ โดยคลิกขวาที่ฉากแล้วเลือก duplicate ดังรูป
10 5. การปรับขนาดการแสดงผลของฉากพื้นหลังเวที เราสามารถปรับขนาดของฉากพื้นหลังเวทีได้ 3 รูปแบบดังนี้ คือ การปรับขนาดการแสดงผลของฉากพื้นหลังเวทีให้แคบลง และขยายขนาดส่วนของ Code (โค้ด) ให้กว้างขึ้น ดังรูป 1 2 3 1 ปรากฏหน้าต่างพื้นหลังดังภาพ
11 คือ การปรับขนาดการแสดงผลของฉากพื้นหลังเวทีให้กว้างขึ้น และบีบส่วนของโค้ดให้แคบลง ดังรูป คือ การปรับขนาดการแสดงผลของฉากพื้นหลังเวทีให้กว้างขึ้น และบีบส่วนของโค้ดให้แคบลง ดังรูป 2 ขยายขนาดส่วนของเวที 3
12 Sprite (ตัวละคร) ตัวละคร คือ วัตถุที่ถูกสร้างขึ้นมาเพื่อให้แสดงบทบาทต่าง ๆ บนเวที เช่น ถ้าเราสร้างโปรแกรมเกมปลา ใหญ่กินปลาเล็ก ตัวละครในที่นี้ ก็คือ ปลาใหญ่และปลาเล็กนั่นเอง ซึ่งในโปรแกรมหนึ่งจะมีตัวละครตัวเดียวหรือ หลายตัวก็ได้ ตัวละครจะประกอบด้วยคุณสมบัติ 2 ประการ คือ คุณลักษณะ และพฤติกรรม - คุณลักษณะ คือ สิ่งที่บ่งบอกลักษณะทั่วไปของวัตถุเช่นชื่อตัวละครเครื่องแต่งกายของตัว ละครท่าทางของตัวละครเป็นต้น - พฤติกรรม คือ สิ่งที่วัตถุสามารถกระทำออกมาได้เช่นวิ่งเดินหน้าถอยหลังเป็นต้น สำหรับ Scratch ตัวละครหลักที่เราจะเห็นทุกครั้งเมื่อเปิดโปรแกรมขึ้นมาก็คือเจ้าแมวเหมียว น้อยตัวนี้นั่นเอง 1. การสร้างตัวละครใหม่ (Add New Sprite) เราสามารถสร้างตัวละครใหม่ ๆ ลงบนเวทีได้โดยนำเมาส์เลื่อนไปที่ปุ่ม เพื่อสร้างตัว ละครทั้งนี้ สามารถเลือกสร้างตัวละครได้หลายรูปแบบดังนี้ - Choose a Sprite คือการเลือกสร้างตัวละครจาก Sprite Library ซึ่งเป็นคลังภาพตัวละครต่าง ๆ ที่โปรแกรม Scratch ได้จัดเตรียมไว้ให้แล้ว หากต้องการสร้างตัวละคร ใดลงเวทีให้คลิกเลือกภาพนั้น Upload Backdrop Surprise Paint Choose a Backdrop
13 - Paint คือ การวาดตัวละครใหม่ด้วยตนเองโดยจะมีเครื่องมือต่าง ๆ ให้เลือกใช้มากมาย ดังรูป - Surprise คือ โปรแกรม Scratch จะสุ่มเลือกสร้างตัวละครขึ้นมาบนฉากเวทีให้โดยอัตโนมัติ - Upload Sprite คือ การเลือกอัพโหลดไฟล์รูปภาพที่ต้องการใช้สร้างเป็นตัวละคร 2. การกำหนดรายละเอียดให้กับตัวละคร (Sprite Info) เราสามารถกำหนดรายละเอียดต่าง ๆ ให้กับตัวละครได้ เช่น ชื่อตัวละคร ตำแหน่งการแสดงผล ของตัวละคร ได้ดังนี้ คือ ชื่อของตัวละคร ซึ่งเราสามารถแก้ไขชื่อของตัวละครได้ ตัวอย่างเช่น เริ่มต้นตัวละครชื่อ Sprite1 มีเครื่องมือให้เลือกใช้ ส ำหรับสร้ำงตัวละครใหม่ ด้วยตนเอง 1 2 3 4 5 1
14 ให้พิมพ์ชื่อใหม่ของตัวละครเป็น My Sprite1 และกดคีย์ Enter แล้วชื่อละครจะถูกเปลี่ยนเป็นชื่อใหม่ ดังนี้ 2 x: 0 y: 0 คือ ตำแหน่งการแสดงผลของตัวละคร โดยเริ่มต้นตัวละครจะแสดงผลที่ตำแหน่ง (0,0) ซึ่งก็คือตำแหน่งกลางเวทีนั่นเอง
15 เมื่อเราขยับตำแหน่งตัวละครไปยังตำแหน่งต่าง ๆ บนเวทีค่าพิกัด (x, y) ก็จะเปลี่ยนไปตาม ตำแหน่งที่ตัวละครอยู่หรือถ้าเรากำหนดค่าพิกัด (x, y) เป็นค่าใด ตัวละครก็จะไปอยู่ในตำแหน่งตามค่า พิกัดที่กำหนด ขนาดหน้าจอการแสดงผลของโปรแกรม Scratch เป็นดังรูป Y X 180 -240 240 -180
16 คือ การกำหนดว่าจะให้ตัวละครนั้น ๆ แสดงผลบนเวทีหรือไม่ ตัวละครจะถูกแสดงบนเวที ตัวละครจะถูกซ่อน ไม่แสดงให้เห็นบนเวที คือ การกำหนดขนาดให้ตัวละคร ตัวอย่างเช่น คือ การกำหนดทิศทางการหมุนตัวละครไปในทิศทางต่าง ๆ ดังนี้ 3 4 4
17 สามารถหมุนตัวละครได้รอบทิศแบบ 360 องศา เช่น ถ้าปรับหมุนทิศทางโดยการกำหนด Direction เป็น - 90 องศา จะทำให้ตัวละครกลับหัวทิ่มลง เป็นต้น สามารถหมุนตัวละครได้เฉพาะหมุนซ้ายไปขวา หรือขวาไปซ้าย เท่านั้น เช่น ถ้าปรับหมุนทิศทางโดยกำหนด Direction เป็น - 90 องศา จะทำให้ตัว ละคร เปลี่ยนจากหันหน้าไปทางขวา เป็นหันหน้ามาทางซ้าย เป็นต้น ไม่สามารถหมุนตัวละครไปในทิศทางใดๆ ได้
18 2. การลบตัวละคร (Delete Sprite) การลบตัวละครสามารถทำได้ 2 วิธีดังนี้ วิธีที่ 1 คลิกปุ่มกากบาทที่มุมบนขวาของตัว ละครที่ต้องการลบ ดังรูป วิธีที่ 2 คลิกขวาที่ตัวละครที่ต้องการลบแล้ว เลือก delete ดังรูป 3. การสร้างตัวละครใหม่โดยคัดลอกจากตัวละครเดิม (Clone Sprite) เราสามารถคัดลอกตัวละครเดิมนำมาสร้างเป็นตัวละครใหม่ได้โดยคลิกขวาที่ตัวละครแล้วเลือก Duplicate ดังรูป
19 แบบฝึกทักษะที่ 2.1 เพิ่ม ลบ และหมุนตัวละคร ชื่อ.................................................................ชั้น.....................เลขที่……………….. 1. ศึกษาใบความรู้ที่ เรื่อง เวทีและตัวละคร 2. สร้างโปรเจกต์ใหม่ จากนั้นให้ลบตัวละครแมว โดยลบตัวละครแมวออกไป 3. เพิ่มตัวละครอะไรก็ได้ จากที่มีอยู่ดังรูป 4. ให้ลดขนาดตัวละคร เป็น ขนาด 90 5. ให้ย้ายตัวละครแมวบนเวทีไปที่ตำแหน่งใกล้เคียง X : 100 , Y : 100 6. ทดลองคลิกปุ่มรูปแบบการหมุนทั้ง 3 ลักษณะ ( ) แล้ว สังเกตผลลัพธ์ จากนั้นวงกลม ล้อมรอบ รูปตัวละครที่เป็นผลลัพธ์หลังชนขอบเวที รูปแบบการหมุน หลังจากชนขอบด้านขวา หลังจากชนขอบด้านซ้าย 6.1 1 2
20 6.2 6.3 7. บันทึกโปรเจกต์ชื่อ MyfirstProject
21 ใบความรู้ที่ 2.2 ออกแบบตัวละคร ตัวละคร sprite (สไปรต์)เป็นเหมือนนักแสดงที่เรานำมาสร้างไว้ในละครหรือภาพยนตร์แต่ sprite ของ scratch นั้นก็จะเป็นรูปภาพ ต่างๆ เช่น สัตว์, ภาพคน, สิ่งของ ที่นำมาวางบนเวที (stage) แล้วสร้างการเคลื่อนไหว ให้วิ่ง,เดินหรือกระโดดย้ายตำแหน่งไปมา ตามโค้ดการควบคุณหรือสร้างเหตุการณ์ให้ทำอะไร โดยภาพที่นำมาใช้ทำ สไปรต์จะเป็นภาพ Bitmap (บิตแมป) และภาพ vector (แวคเตอร์) แต่จะนิยมเป็นแบบเวคเตอร์มากกว่า เพราะ จะทำพื้นหลังโปร่งใส มองเห็นรูปร่างตัดกับฉากหลัง (Backdrop) ได้ดีกว่า 1. Sprite Costume (สไปรต์คอสตูม) จากการเพิ่ม Sprite เข้ามาแสดงในเวที จากคอลเล็คชันสไปร์ตที่โปรแกรมมีให้ สไปรต์หลายๆ ตัวจะมี หลายอิริยาบท หรือหลายท่วงท่า ซึ่งใน Scratch จะเรียกว่า Costume (คอสตูม) เหมือนเครื่องแต่งตัว หรือการ แต่งกายของตัวละคร เช่น เจ้าแมวเหมียวน้อยจะมีอยู่ 2 ท่าคือ ท่าก้าวเดินกับวิ่ง 1. คลิกเลือกสไปรต์ 2. คลิดแท็บ costumes (คอสตูม) 3. คลิกเลือกคอสตูม 1 1 2 3 รูปร่าง/ท่าทางของคอสตูม 1
22 2. การเลือกคอสตูมเมนูภาษาไทย หน้าจอการเลือกคอสตูมภาษาไทย จะทำได้เหมือนกันเลือกภาษาอังกฤษเครื่องมือการออกแบบ หรือแก้ไขก็จะอธิบายเป็นภาษาไทยทำให้ใช้งานง่ายเหมาะสำหรับเด็กๆที่ยังอ่านเขียนภาษาอังกฤษไม่ ค่อยคล่อง รูปร่าง/ท่าทางของคอสตูม 2 คลิกเลือกคอสตูม 2 คลิกเลือกสไปรต์ สไปรต์บางตัวอาจมีหลายคอสตูม
23 3. Duplicate sprite การทำซ้ำหรือก๊อปปี้สไปรต์ สไปรต์แต่ละตัวจะมีคอสตูมไม่เท่ากันบางตัวมี 3-4 คอสตูม บางสไปรท์ก็มีแค่ 1 หรือ 2 คอสตูม เริ่มแรก จะแสดงที่คอสตูม หมายเลข 1 ด้านบนสุดเสมอ หากคุณต้องการให้แสดงที่ตัวไหนก่อนก็คลิกเลือกได้หรือสร้างคอ สตูม เพิ่มด้วยการ copy หรือ ทำซ้ำด้วยการคลิกขวาที่คอสตูมที่มีอยู่แล้ว เลือกคำสั่ง Duplicate (ทำซ้ำ) และ นำมาตกแต่งเป็นคอสตูมตัวใหม่ได้ เครื่องมือปรับแต่งคอสตูม พื้นที่ปรับแต่งคอสตูม • เทคนิคการเพิ่มคอสตูมง่ายๆ คือ ทำซ้ำแล้ว ดัดแปลงรูปร่างหรือเปลี่ยนแปลงสีสันให้ แตกต่างกัน 1.คลิกขวาบนคอสตูม แล้วเลือก ทำซ้ำ
24 2. คลิกเลือกคอสตูม รูปร่าง/ท่าทางของคอสตูม 2 หมุนแขน หรือทำซ้ำคอสตูมตัวอื่นๆ
25 4. เพิ่มคอสตูม (Choose a costume) ในมุมมองของลุงเราสามารถเพิ่มคอสตูมตัวใหม่เข้ามาเพิ่มได้ในกรณีที่วาดรูปเอาไว้หลายอิริยาบถหรือ เลือกภาพที่ต้องการเปลี่ยนแปลงรูปร่างก็คลิกเลือก Choose a costume แล้วไปเลือกรูปภาพที่จะนำมาทำ Costume เพิ่มได้หรือน้ำสไปรท์ตัวอื่นมาทำ Costume ดังตัวอย่างจะใช้เมนูภาษาไทยเพื่อเลือกคอสตูมดังนี้ 1. คลิกปุ่ม Choose a costume (เลือกคอสตูม) คอสตูมที่เพิ่มเข้ามา 2. เลือกคอสตูมที่ต้องการ
26 5. ปรับแต่งดัดแปลงคอสตูมเดิม การปรับแต่งการแสดงของคอสตูมเพิ่มเติม เช่น กลับด้าน (Flip) การก๊อปปี้คอสตูม (copy) และการ เปลี่ยนสีพื้น สีเส้นของคอสตูมใหม่ เพื่อสร้างคอสตูมเพิ่ม หรือแก้เปลี่ยนแปลงคอสตูมให้เป็นตัวละครใหม่ในท่าทาง ที่ต้องการได้ Flip Horizontal : พลิกกลับด้านคอสตูมแนวนอน 1. เลือกคอสตูม 2. คลิกปุ่ม Flip Horizontal (พลิกแนวนอน) Flip Vertical : พลิกกลับด้านคอสตูมแนวตั้ง 1. เลือกคอสตูม 2. คลิกปุ่ม Flip Vertical (พลิกแนวตั้ง)
27 การคัดลอกและวางคอสตูมจะคล้ายคล้ายกับการเลือกทำซ้ำ (Duplicate) คอสตูม แต่การคัดลอกและวาง จะวาง คอสตูมชุดสำเนาในพื้นที่เดียวกับคอสตูมต้นแบบ หลังจากวางแล้วเราต้องเลือกและย้ายตำแหน่งปรับขนาด หรือเปลี่ยนแปลงสีได้ตามต้องการ • การคัดลอกบางส่วนของคอสตูมอาจจะนำมาออกแบบหรือตกแต่งคอสตูมเพิ่ม เช่น ดังตัวอย่าง เราคัดลอกปีกผีเสื้อแล้วนำมาวางข้างๆ และหมุนปรับตำแหน่งแล้วตกแต่งสีสันใหม่เพื่อสร้างตัว ละครตัวใหม่หรือดัดแปลงตัวละครขึ้นมาใช้งานเพิ่มได้ Copy/paste : คัดลอกและวางคอสตูม 1. คลิกเลือกชิ้นส่วนของคอสตูม 2.คลิกปุ่ม Copy (คัดลอก) อ 3.คลิกปุ่ม Paste (วาง) อ
28 4.คลิกลากหมุนให้สวยงาม 5.คลิกเลือกส่วนที่จะเปลี่ยนสี 6.เลือกสีที่ต้องการ ปรับขนาด และหมุนคอสตูม 1.คลิกเครื่องมือ Select (เลือก) 2.คลิกลากคลุมเลือกคอสตูม 3.คลิกลากหมุน
29 4.หมุนปรับทิศทาง ง 5.คลิกลากขยายขนาด ง 6.คลิกลากย่อขนาด ง 7.หรือคลิกลากขยาย ง
30 คอสตูม หรือตัวละครที่นำมาใช้งานคือ รูปภาพรูปหนึ่งอาจถูกสร้างจากการวาดภาพแบบบิตแมป (Bitmap) หรือวาดเส้นแบบเวกเตอร์ (Vecter) ถ้าเราจะแก้ไขเปลี่ยนแปลง เช่น เปลี่ยนสีเปลี่ยนท่าทางของตัว ละคร เราต้องเลือกพื้นที่หรือส่วนประกอบของคอสตูมก่อนว่า จะทำงานกับพื้นที่ตรงไหน เช่น จะเปลี่ยนสีปีกผีเสื้อ ก็ต้องเลือกปีกผีเสื้อก่อน แล้วก็ไปเลือกสีหรือจะทำให้แมวเปลี่ยนท่าเดิน จะก้าวขาข้างซ้าย เราจะเลือกขาแมว แล้วหมุนให้เป็นยกขาแบบวิ่ง เป็นต้น ซึ่งต้องเลือกให้ถูกจุดที่จะแก้ไขก่อน จะมีเครื่องมือเลือก 2 ตัวคือ Select (เลือก) ใช้เลือกพื้นที่แบบเดียวหรือแบบกลุ่ม และ Reshape (จัด รูปร่างใหม่) ใช้เลือกแบบละเอียดเพื่อปรับแต่งรูปทรงของคอสตูม การเลือกพื้นที่ในคอสตูม (Select) จุดปรับรูปทรงคอสตูม ง 1.คลิกเครื่องมือ Select (เลือก) ง 2.คลิกเลือกพื้นที่คอสตูม ง 3.คลิกเลือกที่วัตถุ ง 4.คลิกเลือกสีพื้น ง 5.คลิกเครื่องมือ Reshape ง 6.คลิกเลือกพื้นที่คอสตูม ง
31 • การใช้เครื่องมือ Reshape (จัดรูปร่าง) เมื่อคลิกรูปทรงใหญ่จะปรากฏจุดขึ้นบนเส้นพาธ (Path) หรือทางการวาดภาพแบบเวคเตอร์จะเรียกว่า จุดแองเคอร์ (Anchor Point) เพื่อให้เราสามารถ คลิกลาก หรือคลิกเพิ่มจุดบนเส้น และถ้าคลิกที่จุดปรากฏเส้นที่เป็นแขน ของจุดแอง เคอร์ให้คลิกลากหมุนเพื่อดัดรูปร่างของเส้นให้เป็นเส้นโค้งได้ 7.คลิกเพื่อขยายมุมมอง ง 8.คลิกลากจุดปรับรูปทรง ง 9.คลิกย้ายจุดปรับหรือดัดเส้น ง
32 แบบฝึกทักษะที่ 2.2 เรื่อง ออกแบบตัวละคร ชื่อ.......................................................................ชั้น..............เลขที่.................. คำชี้แจง : ให้นักเรียนตอบคำถามต่อไปนี้ให้ถูกต้องและสมบูรณ์ที่สุด (5 คะแนน) 1.ให้นักเรียนอธิบายความหมายของSprite (ตัวละคร) .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... 2.ให้นักเรียนบอกคุณสมบัติของSprite (ตัวละคร) มาตามความเข้าใจ .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... 3.ให้นักเรียนบอกขั้นตอนการเพิ่ม Sprite (ตัวละคร) เข้ามาแสดงในเวที .......................................................................................................................................................................... .......................................................................................................................................................................... .......................................................................................................................................................................... ..........................................................................................................................................................................
33 ใบความรู้ที่ 2.3 พื้นหลังและตัวละคร 1. Group/ungroup :จัดกลุ่มแยกกลุ่มรูปร่าง คอสตูมแต่ละตัวจะมีชิ้นส่วนของรูปทรงหลายชิ้น เพื่อประกอบกันเป็นรูปร่างของคอสตูม 1 ตัว เช่น รูป แมวก็จะมีตัว, หัว, แขน, ขาแยกออกจากกัน เพื่อสามารถนำมาตัดแปลงรูปร่างของตัวละครในอิริยาบทต่างๆ ได้ เช่น วิ่ง, เดิน, นั่ง หรือกระโดด โดยเริ่มจากโครงสร้างพื้นฐานก่อน แล้วนำมาตัดแปลงเพิ่มเติมในมุมมองคอสตูม การเลือกส่วนประกอบแต่ละชิ้นก็จะสำคัญในการแก้ไข • ส่วนประกอบหลักที่เลือกบางทีอาจจะมาจากชิ้นส่วนเล็กๆ หลายๆ ชิ้นประกอบกันเป็นรูปร่าง แต่ นำมารวมกลุ่มเป็นชิ้นเดียวกันด้วยคำสั่งการรวมกลุ่ม (Group) เราสามารถแก้ไขแต่ละชิ้นส่วนได้ แต่ต้องใช้คำสั่งแยกกลุ่ม (Ungroup) ยกเลิกการรวมกลุ่มก่อน จากนั้นก็เลือกแก้ไขรูปทรงแต่ละ ชิ้นได้ 1.คลิกเครื่องมือ Select ง 2.คลิกเลือกรูปร่าง ง 3.ย้าย/หมุนรูปทรง ง 4.คลิกปุ่ม Ungroup เพื่อยกเลิกกลุ่ม ง 5.เลือกรูปตา ง
34 6.เลือกปาก ง 7.เลือกสีปาก ง 8.เลือกหัวแมว ง 9.คลิกเลือกสีเส้น Line เส้นขอบ 10.เลือกชิ้นส่วน 11.คลิกปุ่ม Copy 12.คลิกปุ่ม Paste ชุดสำเนาของคอสตูม
35 2. การอัพโหลดคอสตูมจากรูปภาพที่มี นอกเหนือจากคอสตูมหลักของสไปรค์ที่เลือกแล้ว คุณสามารถเพิ่มคอสตูมเข้ามา โดยเลือกนำมาจากไฟล์ รูปภาพที่มีภายในเครื่อง ไฟล์ภาพ *.svs, .jps, .gif, .png ซึ่งขอแนะนำให้เป็นไฟล์แบบโปร่งใส .gif หรือ .png เพื่อให้สามารถมองเห็นฉากหลัง (Backdrop) ได้ 1.คลิกปุ่ม อัปโหลดคอสตูม 2.เลือกไฟล์รูป 3.คลิกปุ่ม Open 4.คลิกเลือกคอสตูมใหม่ 5.ย่อ/ขยาย หรือปรับแต่งคอสตูม
36 รูปภาพที่เลือกอัพโหลด (Upload) เพิ่มเป็นคอสตูมเข้ามา ไม่ว่าจะเป็นไฟล์ประเภทใด เริ่มแรกจะแสดงใน โหมดบิตแมป (Bitmap) โดยจะแสดงรูปภาพเป็นพิกเซล การแก้ไขเราอาจจะใช้แปรงระบายสี, ถังสี ใส่สีในบริเวณ ที่ต้องการ และใช้เครื่องมือยางลบ (Eraser) มาลบสีที่ไม่ต้องการออก แต่ต้องทำด้วยความระวัง โดยให้ตกแต่งทีละ จุด การตกแต่งในโหมดบิตแมป (Bitmap) หรือจะคลิกปุ่ม แปลงเป็นแวกเอตร์ (conver to vector) ถ้าคลิกปุ่ม Convert to vector แล้วการปรับแต่งรูปภาพคอสตูมจะทำได้ทั้งชิ้น เช่น หมุน หรือปรับขนาดของภาพคอสตูม ปรับรูปร่างคอสตูม หมุนปรับทิศ
37 4. ใส่ข้อความลงในคอสตูม ต้องการใส่ข้อความลงไปในภาพคอสตูม เพื่อแสดงข้อความกำกับตัวละคร ก็ใช้เครื่องมือ Text พิมพ์ข้อลง ไปในกราฟิกของตัวละครได้ แต่ข้อความนั้นจะฝังลงไปในกราฟิกคอสตูมของตัวละครแบบถาวร 1.คลิกเลือกเครื่องมือ Text 2.คลิกวางเคอร์เซอร์ 3.พิมพ์ข้อความที่ต้องการ 4.เลือกฟอนต์ 5.คลิกเลือกสีข้อความ ***ฟอนต์ภาษาอังกฤษจะมีมากกว่าฟอนต์ ภาษาไทย ข้อความที่ได้
38 5. พื้นหลัง (Backdrop) Backdrop (ฉากหลัง) คือ ฉากที่ตัวละครของเราจะโลด แล่นไป อาจจะเป็นฉากที่พัก ห้องนอน สวนสาธารณะ ป่าเมือง หรือสถานที่ต่างๆ ที่เรานำมาสร้างเป็นฉากหลังของเกม,เรื่องเล่า และภาพเคลื่อนไหว โดยแอพ Scratch จะมีฉากหลังให้เลือก มากมายหลายหมวด และเราสามารถสร้างสระขึ้นมาใหม่ด้วย การวาด หรือโหลดไฟล์รูปภาพจากเครื่องคอมของเราก็ได้เช่นกัน การเลือก Backdrop จะเลือกได้หลายๆ ฉาก ขึ้นอยู่กับ บทละครของเราว่าจะให้สลับฉากหลังเมื่อไหร่ เช่น วิ่งไปถึงขอบ และเปลี่ยนฉากหลัง หรือเล่นเกมผ่านด่านที่ 1 ไปยังด่านที่ 2 ให้ เปลี่ยนฉากหลังเป็นต้น 1.คลิกปุ่ม Choose a Backdrop 2.เลือกหมวดฉากหลัง 3.คลิกเลือกฉากหลัง หรือคลิกเลือก All แสดงทั้งหมด
39 เราจะใส่ฉากหลังกี่ฉากก็ได้ตามต้องการ แต่การเปลี่ยนฉากหลังจะใช้โค้ด ควบคุมการเปลี่ยน เช่น เล่นเกมส์เก็บคะแนนได้ 10 คะแนนให้เปลี่ยนฉากหลัง หรือวิ่ง 20 ก้าว เปลี่ยนฉากหลัง เป็นต้น 6. Upload Backdrop : อัพโหลดภาพฉากหลัง นอกจากการเลือกภาพ Backdrop พี่แอฟมีการให้ นักเรียนสามารถเลือกรูปภาพของตนเองมาใส่ได้โดย จะเลือกรูปภาพในเครื่องโดยคลิกปุ่ม Upload Backdrop แล้วเลือกรูปภาพที่ต้องการนำมาทำฉากหลังได้ตาม ต้องการ หรือคลิกปุ่ม Surprise สุ่มเลือกฉากหลังมาใส่ คลิกเพิ่มฉากหลังใหม่ Backdrop หรือฉากหลังที่ได้ Surprise สุ่มเลือกฉากหลัง 1. คลิกปุ่ม Upload Backdrop 2.เลือกรูป 3.คลิกปุ่ม Open
40 7. สำหรับการใช้งาน Backdrop Backdrop สามารถแทรกเข้ามาได้หลายๆภาพทุกครั้งที่คลิก Choose a Backdrop แล้วเลือกภาพ จะ เป็นการเพิ่มฉากหลังเข้ามาเปลี่ยนฉากเป็นภาพใหม่ แต่ภาพเดิมยังอยู่ เพื่อใช้ในการสลับการแสดงในกรณีที่งาน จำนวนฉากหลังที่เลือกมา เครื่องมือที่ใช้ปรับแต่งฉากหลัง คลิกเลือก Backdrop จะแสดงพื้นที่ฉากหลัง แท็บ Backdrops 2.คลิกเลือก Backdrop ที่จะใช้ งาน 3.คลิกในช่อง Backdrop
41 ของคุณต้องมีการเปลี่ยนฉากหลัง เราก็จะเลือกฉากหลังที่ต้องการใช้ทั้งหมดเข้ามาแต่จะให้แสดงตอนไหนก็ใช้โค้ด กำหนด วาดฉากหลังใหม่ บางทีนักเรียนอาจจะต้องการออกแบบฉากหลังเอง ให้เหมาะสมกับเรื่องราวที่กำลังสร้างก็สามารถทำได้ โดยคลิกเปิดแท็บ Backdrop ฉากหลัง แล้วคลิกเลือก paint (วาดรูป) จากนั้นก็แสดงพื้นที่ว่างๆ พร้อมกับ เครื่องมือวาดรูปขึ้นมาให้วาดรูปได้ตามจินตนาการ โหมดการวาดภาพฉากหลังจะมี 2 โหมดคือการวาดภาพแบบ Bitmap (บิตแมป) การวาด ระบายสีลงใน พิกเซล Pixel เป็นจุดสีเล็กๆ การแก้ไขก็ต้องทำทีละจุด ส่วนการวาดภาพแบบ Vector ( เวกเตอร์ )คือการวาดโดย ใช้หลักคำนวณทางวิทยาศาสตร์ วาดเส้น หรือรูปวัตถุทรงเรขาคณิตเป็นลักษณะเส้นพาธ (Path) การย่อ/ขยาย หรือ แก้ไขก็ทำในจุดเส้นพาธ ทำให้ดัดแปลงเส้นหรือรูปร่างได้ง่าย คลิกสลับโหมดการวาดภาพแบบบิตแมป หรือ เวคเตอร์
42 การสร้างฉากหลังในเมนูภาษาไทยก็ คลิกปุ่ม วาดรูป ก็จะแสดงตัวเลือก เครื่องมือเป็นภาษาไทย ส่วนการใช้งาน ก็เหมือนภาษาอังกฤษทุกอย่าง หรือคลิกเลือกจากตรงนี้ 1.คลิกปุ่ม paint (วาดรูป) พื้นที่วาดภาพ (ตารางพิกเซล) 3.คลิกเลือกสีพื้น 2.คลิกปุ่ม Covert to victor จะวาดแบบเวคเตอร์ 4.คลิกปุ่ม Fill สีพื้น 5.คลิกเทสีพื้น
43 6.คลิกเลือกสีของกรอบสีเหลี่ยม 7.คลิกปุ่ม Rectangle (สี่เหลี่ยม) 8.วาดรูปสี่เหลี่ยม 9.คลิกเลือกสีของเส้น 10.คลิกปุ่ม Brush (แปรง) 11.เลือกขนาดของเส้น 12.คลิกลากวางเส้น 13.คลิกปุ่ม Fill 14.คลิกเติมสี 15.คลิกเลือกสีของแปรง 16.คลิกปุ่ม Line (เส้น) 17.คลิกลากวางเส้น
44 18.คลิกปุ่ม Circle (วงกลม) 19.คลิกวาดรูปวงกลม ฉากหลังใหม่ที่วาดขึ้นมาเอง
45 แบบฝึกทักษะที่ 2.3 สร้างและสลับพื้นหลัง ชื่อ.................................................................ชั้น.....................เลขที่……………….. 1.เปิดโปรเจกต์ MyfirstProject 2.เพิ่มพื้นหลังของเวที ดังนี้ 1.คลิกที่ Stage 2.คลิกแท็บ Backgrounds 4.การเลือกพื้นหลังจากไฟล์ 5.คลิกปุ่ม Choose a Backdrop จะปรากฏหน้าต่าง Choose a Backdrop ซึ่งมีพื้นหลังหมวดต่างๆ ในที่นี้ ให้เลือกภาพ ที่นักเรียนต้องการ ดังนี้ 1 2
46 6.ลบพื้นหลัง background1 โดยคลิกปุ่ม สิ่งที่ปรากฏคือ........................................................................... 7.สร้าง background ตามจินตนาการตัวเอง 8.บันทึกโปรเจกต์ 1 1 2
47 ใบความรู้ที่ 2.4 การใช้Effect (เอฟเฟ็กต์) กับตัวละคร การกำหนดเอฟเฟ็กต์พิเศษในการแสดงของตัวละคร จะให้โค๊ดในการเปลี่ยน เช่น เปลี่ยนสี (Color) ทำ ภาพตาปลา (fisheye) หมุนวนภาพ (whirl) เป็นต้น ด้วยการเลือกจากบล็อก และเลือกการตั้ง ค่าเอฟเฟ็กต์เพิ่มจาก ได้ เช่น ทำให้ตัวละครเป็นภาพตาปลาแหละหมุนวน ก็จะได้ 2 เอฟ เฟ็กต์ เปลี่ยนเอฟเฟ็กต์ทีละเท่าไร ตั้งค่าเอฟเฟ็กต์เพิ่ม/ทีละ ล้างค่าเอฟเฟ็กต์กลับไปที่ค่าเริ่มต้น เลือกเอฟเฟ็กต์ เลือกเอฟเฟ็กต์ โค๊ดภาษาไทย 1.วางบล็อกเอฟเฟ็กต์ เลือกเอฟเฟ็ก ตาปลา และตั้งค่าเอฟเฟ็กต์เปลี่ยนสีตัวละคร ค่าตัวละครเริ่มต้น
48 ตัวอย่างการเปลี่ยนสีตัวละคร ตัวอย่างการเปลี่ยนสีตัวละครอีกแบบหนึ่ง จะใช้บล็อกโค๊ดปลี่ยนสี โดยไม่ต้องไปแก้ไขทีคอสตูมตัวละคร ให้ยุ่งยาก เอฟเฟ็กต์ตาปลา ตั้งค่าตำแหน่งสีที่ 10 ให้ทำซ้ำ 5 รอบ เปลี่ยนสี 5 สี แสดงข้อความพูด เลือกเอฟเฟ็กต์เปลี่ยนสีทีละ 50 ให้แยกพิเซลเป็น 30 ค่าตัวละครเริ่มต้น 1.วางบล็อกโค๊ตทั้งหมด 2.คลิกปุ่ม GO รันโค๊ด
49 แบบฝึกทักษะที่ 2.4 ใส่เอฟเฟ็กต์และเปลี่ยนสีตัวละคร ชื่อ.................................................................ชั้น.....................เลขที่……………….. 1.สร้างโปรเจกต์ใหม่ 2.ให้นักเรียนเพิ่มตัวละครแล้วใส่เอฟเฟ็กต์เปลี่ยนสีตัวละคร เมื่อกดธงแล้ว ให้ทำซ้ำ 5 รอบ แสดงข้อความ ว่า “สวัสดี” เลือกเอฟเฟ็กต์เปลี่ยนสีทีละ 50 ให้แยกพิเซลเป็น 20 แล้วจดบันทึกว่ามีการเปลี่ยนแปลงอย่างไรบ้าง ............................................................................................................................. ....................................................... .................................................................................................................................................................................... ............................................................................................................................. ....................................................... ............................................................................................................................. ....................................................... ............................................................................................................................................................................ ........ ........................................................................................................................... ......................................................... ............................................................................................................................. ....................................................... ................................................................................................................................................ .................................... .................................................................................................................................................................................... ............................................................................................................................. ....................................................... ............................................................................................................................. ....................................................... .................................................................................................................................................................................... ............................................................................................................................. ....................................................... ............................................................................................................................. ....................................................... ................................................................................................................................................................... ................. .................................................................................................................. .................................................................. ............................................................................................................................. ....................................................... ....................................................................................................................................... .............................................
50 แบบทดสอบหลังเรียน เล่มที่ 2 เรื่อง ออกแบบตัวละคร คำชี้แจง ให้นักเรียนเลือกคำตอบที่ถูกต้องที่สุดเพียงคำตอบเดียว แล้วกากบาท (x) ลงในกระดาษคำตอบ จำนวน 10 ข้อ (ใช้เวลา 15 นาที) 1.จากภาพ เรียกว่าอะไรในโปรแกรม Scratch ก. กลุ่มบล็อกคำสั่ง ข. พื้นที่เขียนสคริปต์ (Script) ค. ตัวละคร ง. ข้อมูลของเวที หรือตัวละครที่ถูกเลือก (Sprite Header Pane) 2.จากรูป คือองค์ประกอบใดของโปรแกรม Scratch ก. แถบเมนูเครื่องมือ (Toolbar) ข. รายการตัวละคร ค. บล็อกคำสั่งในกลุ่มที่เลือก ง. เครื่องมือเวที