Scratch-Act2

การเขยี นโปรแกรม Scratch กจิ กรรมท่ี 2 การสรา้ งภาพเคล่ือนไหว

กิจกรรมท่ี 2
การสร้างภาพเคล่อื นไหว

1. ผลการเรยี นรู้

1.1 ใชค้ าสัง่ พ้ืนฐานในการเขยี นโปรแกรม

2. สาระการเรยี นรู้

2.1 สร้างพื้นหลังใหม่ และสลับพ้ืนหลัง

2.2 การบอกตาแหนง่ ใดๆ บนเวที และรปู แบบการหมุนตวั ละคร

2.3 ย้ายตัวละครไปยังตาแหนง่ ทร่ี ะบุ

2.4 เพิม่ ตัวละครใหม่ และ export ตวั ละครออกไปเปน็ ไฟล์

2.5 การลบพ้นื หลังและตวั ละคร

3. จดุ ประสงค์ ใหผ้ ู้เรียนสามารถ

3.1 เพมิ่ และสรา้ งตวั ละครใหม่ดว้ ย Paint Editor และ export ตวั ละครออกไปเปน็ ไฟล์

3.2 เพิ่มและสลับพน้ื หลงั ดว้ ยบล็อก next background และ switch to background ในกลุ่มบลอ็ ก

Looks

3.3 ลบตัวละครและพ้ืนหลงั

3.4 ระบตุ าแหนง่ ดว้ ยคา่ (x, y) และรูปแบบการหมุนของตวั ละคร

4. แนวคดิ

ตัวละครในโปรเจกต์มีได้หลายตัว โดยตัวละครแต่ละตัวจะมีสคริปต์การทางานท่ีเป็นของตนเอง การ

เพิ่มตัวละครอาจทาได้ท้ังการนาเข้าจากไฟล์ตัวละครที่มีอยู่แล้ว หรือวาดขึ้นใหม่เอง นอกจากนี้ยังสามารถ

ส่งออกตวั ละครท่มี ีอยู่ในโปรเจกตอ์ อกไปเปน็ ไฟล์ เพ่อื การนาไปใช้งานต่อไปได้ดว้ ย

เวทีจะมีได้เพียงหนึ่งเวที แต่สามารถเปล่ียนภาพพื้นหลังของเวทีได้หลายภาพ การเปลี่ยนชุดตัวละคร

รวมไปถึงการเปลี่ยนภาพพื้นหลังน้ี สามารถเขียนสคริปต์ให้ตัวละครหรือพ้ืนหลังแยกส่วนกัน เพ่ือสั่งงานให้เกิด

เหตุการณท์ ต่ี า่ งกัน แต่แสดงผลการทางานไปพร้อมๆ กัน

5. สือ่ อุปกรณ์

5.1 ใบงาน

ใบงานที่ เร่ือง เวลา (นาท)ี

2.1 สรา้ งและสลับพื้นหลัง 5

2.2 เพมิ่ ลบ และหมนุ ตัวละคร 15

5.2 ใบความรู้

- ใบความรูท้ ี่ 2.1 เร่ือง พนื้ หลังและตวั ละคร

สถาบนั ส่งเสริมการสอนวทิ ยาศาสตรแ์ ละเทคโนโลยี 20

การเขียนโปรแกรม Scratch กจิ กรรมที่ 2 การสรา้ งภาพเคลอ่ื นไหว

6. วธิ ีดาเนินการ
6.1 การจัดเตรียม
6.1.1 ใบงานที่ 2.1- 2.2 ตามจานวนผเู้ รยี น
6.1.2 ใบความร้ทู ่ี 2.1 ตามจานวนผเู้ รยี น
6.2 ข้นั ตอนการดาเนนิ การ
6.2.1 ผู้สอนตั้งคาถามให้ผู้เรียนคิดว่า “การที่ตัวละครเคลื่อนไหวและเปล่ียนทิศทางเกิดข้ึนได้
อย่างไร ผู้เรียนสังเกตเห็นอะไรเปลี่ยนแปลงอีกบ้าง” และพูดกระตุ้นผู้เรียนว่าผู้เรียน
สามารถสรา้ งช้นิ งานเหมอื นตวั อย่างได้ด้วยโปรแกรม Scratch
6.2.2 ผู้เรียนศึกษาใบความรู้ท่ี 2.1 เรื่องพ้ืนหลังและตัวละคร และทาใบงานท่ี 2.1 เรื่อง สร้างและ
สลบั พน้ื หลัง
6.2.3 ผ้สู อนและผูเ้ รยี นร่วมกนั เฉลยคาตอบในใบงานที่ 2.1
6.2.4 ผู้เรยี นทาใบงานที่ 2.2 เรอ่ื ง เพ่มิ ลบ และหมุนตวั ละคร
6.2.5 ผู้สอนสุ่มผู้เรียนนาเสนอคาตอบในใบงานที่ 2.2 โดยสุ่มผู้เรียนเพ่ือนาเสนอคาตอบแต่ละข้อ
ไมใ่ ห้ซา้ คนเดมิ จนครบทกุ ข้อ
6.2.6 ผเู้ รียนและผู้สอนรว่ มกันสรุปความร้เู ร่อื งการสร้างพน้ื หลัง และตัวละคร

7. การวดั ผลประเมินผล
7.1 ตรวจคาตอบในใบงานและผลงาน
7.2 สงั เกตการทางานและการทากจิ กรรมร่วมกันในชั้นเรียน

8. แหล่งข้อมลู เพิ่มเตมิ
8.1 http://scratch.mit.edu/ (22/05/56)
8.2 http://scratched.media.mit.edu (22/05/56)
8.3 http://info.scratch.mit.edu/Support/Reference_Guide_1.4 (22/05/56)
8.4 http://scratched.media.mit.edu/sites/default/files/CurriculumGuide-v20110923.pdf
(22/05/56)

9. ข้อเสนอแนะ
9.1 ให้ผู้เรียนสังเกตช้ินงานตัวอย่างท่ีสร้างด้วยโปรแกรม Scratch ช่วยให้ผู้เรียนสามารถสร้างช้ินงาน
เลยี นแบบตัวอย่างได้

สถาบันส่งเสรมิ การสอนวิทยาศาสตรแ์ ละเทคโนโลยี 21

การเขยี นโปรแกรม Scratch กิจกรรมท่ี 2 การสรา้ งภาพเคลอื่ นไหว

ใบงานท่ี 2.1
สร้างและสลับพ้นื หลัง

ช่อื -สกลุ ……………………………………………………………………………..…………………………เลขท…ี่ ……………….

1. เปิดโปรเจกต์ MyfirstProject ทส่ี ร้างจากใบงานที่ 1.2
2. เพิ่มพนื้ หลงั ของเวที ดังนี้

 คลิกที่ Stage

 คลกิ แทบ็ Backgrounds




สถาบนั ส่งเสริมการสอนวทิ ยาศาสตรแ์ ละเทคโนโลยี 22

การเขียนโปรแกรม Scratch กจิ กรรมท่ี 2 การสร้างภาพเคล่ือนไหว

การเลือกพ้ืนหลังจากไฟลภ์ าพ

3. คลิกปมุ่ จะปรากฏหนา้ ต่าง Import Background ซ่ึงมโี ฟลเดอรภ์ าพกลุ่มต่างๆ ในทน่ี ี้ให้

เลอื กภาพ beach-malibu จากโฟลเดอร์ Nature ดังน้ี

 ดับเบลิ คลกิ ท่ีโฟลเดอร์ Nature จะปรากฏภาพต่างๆ ที่เปน็ ภาพธรรมชาติ



 คลิกท่ภี าพ beach-malibu
 คลกิ ป่มุ ภาพพน้ื หลังที่เลอื กจะปรากฏบนเวที และรายการพนื้ หลัง



สถาบนั ส่งเสรมิ การสอนวทิ ยาศาสตรแ์ ละเทคโนโลยี 23

การเขยี นโปรแกรม Scratch กิจกรรมท่ี 2 การสรา้ งภาพเคล่อื นไหว

4. ลบพ้ืนหลงั background1 โดยคลิกปุม่ สงิ่ ทปี่ รากฏคอื ……………………………………………………



5. เพ่มิ พ้ืนหลังจากไฟล์ช่ือ boardwalk จากโฟลเดอร์ Backgrounds\Outdoors ด้วยวิธกี ารเช่นเดียวกบั
ขอ้ 3 ทีผ่ า่ นมา

6. เขียนสคริปตใ์ หก้ ับเวทดี ังน้ี

ผลลัพธ์

เพมิ่ สครปิ ต์

ผลลพั ธ์

6.1 ให้เปลย่ี นค่า wait เป็น 10 คลกิ ผลลัพธ์ท่ีได้
...................................................................................
6.2 ให้เปลี่ยนค่า wait เป็น 1 คลกิ ผลลพั ธ์ทไี่ ด้
..................................................................................
7. บันทึกเป็นโปรเจกต์ใหม่ ชื่อ activity2_1

สถาบันสง่ เสรมิ การสอนวิทยาศาสตรแ์ ละเทคโนโลยี 24

การเขยี นโปรแกรม Scratch กจิ กรรมท่ี 2 การสร้างภาพเคลอ่ื นไหว

ใบงานท่ี 2.2
เพิ่ม ลบ และหมนุ ตวั ละคร

ชือ่ -สกลุ ……………………………………………………………………………..…………………………เลขท…ี่ ……………….

1. ศกึ ษาใบความรู้ท่ี 2.1 เรอื่ ง พื้นหลงั และตัวละคร
2. สรา้ งโปรเจกต์ใหม่ จากนั้นให้ลบตวั ละครแมว โดยใชเ้ ครอ่ื งมือ ลบตวั ละครแมวออกไป
3. เพิ่มตัวละครจากไฟล์ภาพ ดังนี้

 คลิกท่ีป่มุ (Choose new sprite from file) จะปรากฏหนา้ ตา่ ง New Sprite ดังรปู

2.1

2.2 
2.3

2.4


 ดบั เบลิ คลกิ โฟลเดอร์ Animals แล้วเลือกชดุ ตวั ละครรปู ผเี สื้อทช่ี ื่อ Butterfly1-a
 คลิกปุ่ม
4. เปล่ียนช่อื Sprite1 เปน็ ผเี สอ้ื
5. เพิ่มชุดตัวละครที่ชื่อ Butterfly1-b ให้กับตัวละครผีเสื้อ แล้วสร้างสคริปต์เพ่ิมเติมให้กับตัวละครผีเสื้อ
เพอ่ื ให้ขยบั ปีกได้ ตามวธิ ีการในใบงานที่ 1.2

สถาบันส่งเสริมการสอนวิทยาศาสตรแ์ ละเทคโนโลยี 25

การเขียนโปรแกรม Scratch กิจกรรมท่ี 2 การสร้างภาพเคล่ือนไหว

6. สง่ ออกชุดตัวละครผีเส้ือ โดยคลิกขวาที่ตัวละคร เลือก export this sprite ให้นาไปจัดเก็บไว้ในโฟลเดอร์
Costumes\Animals

7. ชอื่ ตัวละครทส่ี ่งออกคอื .............................................................................................ม.ี ...............ชดุ ตวั ละคร
8. ให้เพิม่ ตวั ละครโดยให้เลือกตัวละครท่ีเพ่ิงส่งออกไป ช่อื ตวั ละครท่ไี ด้คือ ......................................................

สังเกตวา่ ตวั ละครทีเ่ พม่ิ ข้นึ ใหม่น้ี มสี ครปิ ตม์ าใหด้ ้วยเลยหรอื ไม่ ..................................................................
ผเู้ รยี นคดิ วา่ ประโยชน์ของการสง่ ออกตวั ละครคืออะไร ...............................................................................
.......................................................................................................................................................................
.......................................................................................................................................................................
9. เพ่มิ ตวั ละครแบบวาดขึ้นเอง โดยคลิกที่ปมุ่ จะปรากฏหน้าตา่ ง Paint Editor ให้สรา้ งตัวละครใหม่
เปน็ รปู ตัวย้มิ และตง้ั ช่อื ตวั ละครเปน็ smile ดังรูป

9.1. เพิม่ ชุดตวั ละคร ให้กบั ตัวละคร Smile ดังน้ี

คลิกปุ่ม เพื่อสร้างชุดตัวละครใหม่

รปู วงกลมเหมอื นกับชุดตัวละคร costume1

คลิกปุ่ม เพื่อแก้ไขชุดตัวละคร

costume2 จะปรากฏหน้าตา่ ง Paint Editor

ปรับแก้ชุดตัวละครตามภาพ แล้วคลิก

เครื่องมือ เพอื่ ขยายขนาดรปู ภาพ

คลิกปมุ่ 

สถาบนั ส่งเสรมิ การสอนวทิ ยาศาสตรแ์ ละเทคโนโลยี 26

การเขยี นโปรแกรม Scratch กจิ กรรมท่ี 2 การสร้างภาพเคล่อื นไหว

 


9.2. เพิ่มสครปิ ต์ให้กับตวั ละคร smile ทเ่ี พง่ิ สร้างขน้ึ ใหส้ ลับชุดตวั ละครได้ ดังทไ่ี ดท้ ามาแล้วในใบงาน

1.2 เพ่อื ให้ตวั ละคร smile มกี ารยดื หดสลับกันตลอดเวลา
9.3. ส่งออกตวั ละครโดยนาไปจัดเก็บไว้ที่โฟลเดอร์……………….…............…ชื่อชดุ ตวั ละคร

คือ………………….

สถาบนั ส่งเสริมการสอนวทิ ยาศาสตรแ์ ละเทคโนโลยี 27

การเขยี นโปรแกรม Scratch กจิ กรรมที่ 2 การสรา้ งภาพเคลือ่ นไหว

10. ถ้าตวั ละครอย่ใู นตาแหนง่ ต่อไปน้ี
11.1 x = -200 และ y = 60
11.2 x = 100 และ y = -20
11.3 x = -50 และ y = -120

ให้ทาเครื่องหมาย × ระบุตาแหน่งตามทโ่ี จทย์กาหนดให้

สถาบนั ส่งเสริมการสอนวิทยาศาสตร์และเทคโนโลยี 28

การเขียนโปรแกรม Scratch กิจกรรมที่ 2 การสร้างภาพเคล่ือนไหว

11. วาดเสน้ ทิศทางของตัวละคร ตามทร่ี ะบลุ งในช่องผลลัพธ์ ผลลพั ธ์
ทศิ ทาง

12.1 -45 องศา

12.2 75 องศา

12. คลิกตวั ละคร smile เพ่อื เขียนสคริปต์ใหก้ ับตัวละคร smile ดงั นี้

13. เพิ่มสคริปต์ต่อไปนใี้ ห้กับตัวละคร smile สังเกตผลที่ได้เม่อื คลิกป่มุ
จะต้องคลิก ...........ครั้ง ตัวละครจะกลับมาอยู่
ตาแหนง่ เดมิ

14. ปรบั ปรงุ สครปิ ตใ์ หก้ บั ตัวละคร smile สังเกตผลที่ไดเ้ ม่ือคลกิ ปุ่ม
จะตอ้ งคลกิ ...........ครงั้ ตัวละครจะกลับมาอยู่
ตาแหนง่ เดมิ

สถาบันสง่ เสริมการสอนวิทยาศาสตรแ์ ละเทคโนโลยี 29

การเขยี นโปรแกรม Scratch กิจกรรมที่ 2 การสร้างภาพเคลอ่ื นไหว

การใชค้ าสัง่ และ แตกต่างกนั อย่างไร

……………………………………….……………………………………………………….……………………………………….…………

……………………………………….……………………………………………………….……………………………………….…………

15. บันทกึ เปน็ ไฟลใ์ หม่ ช่ือ activity2_2

สถาบนั สง่ เสริมการสอนวทิ ยาศาสตรแ์ ละเทคโนโลยี 30

การเขียนโปรแกรม Scratch กิจกรรมที่ 2 การสรา้ งภาพเคล่อื นไหว

ใบความร้ทู ่ี 2.1
พน้ื หลงั และตัวละคร

การสร้างโปรเจกต์เพ่ือให้มีการเปลี่ยนภาพพ้ืนหลังของเวทีได้หลายภาพ และการทาให้ตัวละคร
สามารถเคลื่อนที่ไปได้ในทิศทางต่างๆ สามารถเขียนสคริปต์ให้ตัวละครหรือพื้นหลังแยกส่วนกัน เพ่ือสั่งงาน
ให้เกดิ เหตุการณ์ที่ตา่ งกัน แต่แสดงผลการทางานไปพร้อมๆ กัน ซึ่งบลอ็ กทใ่ี ช้มดี ังตอ่ ไปน้ี

1. บลอ็ กในกลมุ่ บล็อก Looks ของเวที เพ่ือสลับพน้ื หลัง

สลับพนื้ หลงั ตวั อยา่ ง สลับพ้ืนหลังเปน็ พนื้ หลัง background1

สลับพน้ื หลังเปน็ พ้ืนหลงั ถดั ไปท่มี ีอยู่ในรายการ

2. บลอ็ กในกลุ่มบลอ็ ก Motion เพอื่ ให้ตัวละครเคล่ือนท่ไี ปในทิศทางต่างๆ

หมุนตามเข็มนาฬิกา ตวั อยา่ ง หมนุ ตามเข็มนาฬิกา 15 องศา

หมุนทวนเขม็ นาฬกิ า ตวั อย่าง หมุนทวนเขม็ นาฬิกา 15 องศา

ระบุทิศทางทต่ี ้องการ ตวั อยา่ ง ระบทุ ศิ ทาง 90 องศา

ไปทตี่ าแหน่ง (x, y) บนเวที ตวั อยา่ ง ไปตรงกลางเวที (x=0, y=0)

ตงั้ คา่ ตาแหน่งตัวละครไปด้านซ้ายหรือขวา
ตัวอย่าง ตัง้ คา่ ตวั ละครไปที่ตาแหน่ง x = 0 คอื กลางเวที

x = 240 คอื ขอบขวาสุด
x = -240 คือ ขอบซ้ายสดุ

ตัง้ ค่าตาแหน่งตวั ละครไปด้านบนหรือด้านล่าง
ตวั อย่าง ตัง้ ค่าตัวละครไปท่ตี าแหนง่ y = 0 คือ กลางเวที

y = 180 คอื ขอบบนสุด
y = -180 คอื ขอบลา่ งสุด

สถาบนั สง่ เสริมการสอนวิทยาศาสตรแ์ ละเทคโนโลยี 31

การเขียนโปรแกรม Scratch กจิ กรรมที่ 2 การสรา้ งภาพเคลื่อนไหว

การกาหนดทศิ ทางและตาแหน่งการเคลอื่ นที่ของตัวละคร

เส้นสีน้าเงินเป็นตัวกาหนดทิศทางการเคล่ือนท่ีของตัวละคร ในภาพแมวมีทิศทางการเคล่ือนท่ี
108 องศา ทศิ ทางการเคลื่อนที่ทร่ี ะบุในโปรแกรม Scratch เชน่

0

-90 90 0 องศาจะมที ศิ ทางการเคลื่อนทไี่ ปด้านบน
-180 180 90 องศาจะมีทศิ ทางการเคล่อื นทไี่ ปทางขวา
-90 องศาจะมที ศิ ทางการเคลอ่ื นทีไ่ ปทางซ้าย
180, -180 องศาจะมที ศิ ทางการเคลอื่ นทไ่ี ปดา้ นล่าง

ตวั อย่าง ตวั ละครแมวอยบู่ นเวทที ่ี ตาแหนง่ x: 100 y:100 บนเวที และมีทิศทางการเคล่ือนที่ 108 องศา

สถาบันส่งเสรมิ การสอนวิทยาศาสตรแ์ ละเทคโนโลยี 32

การเขยี นโปรแกรม Scratch กิจกรรมที่ 2 การสรา้ งภาพเคลื่อนไหว

การหมุนของตัวละคร ถ้าค่าเป็นบวก จะเป็นการหมุนตามเข็มนาฬิกา ถ้าค่าเป็นลบจะหมุนทวน
เข็มนาฬกิ า เช่น -180 มีทิศทางการเคลื่อนที่ไปด้านล่างเหมือนกับทิศ 180 องศา แต่เป็นการหมุนทวนเข็ม
นาฬิกา

ตัวอย่าง การระบทุ ิศทางของตวั ละครในโปรแกรม Scratch

เหนือ (อดุ ร)
0 องศา

ตะวนั ตกเฉยี งเหนือ (พายพั ) ตะวันออกเฉยี งเหนอื (อสี าน)

ตะวันตก (ประจิม) -90 องศา 90 องศา ตะวนั ออก(บรู พา)
ตะวันตกเฉยี งใต้ (หรดี) (เหนือ)

ตะวนั ออกเฉยี งใต้ (อาคเนย์)

180 องศา
ใต้ (ทักษิณ)

การเคล่อื นทไี่ ปได้ในทิศทางต่างๆ ของตวั ละครจะไม่เก่ียวข้องกับลักษณะการ
หันหน้าของตัวละคร ดังนั้นในการทาให้ตัวละครเคลื่อนท่ี ผู้เรียนควรทาความเข้าใจกับ
ประเด็นน้ี เพ่ือให้การแสดงผลการเคล่ือนที่ของตัวละครมีลักษณะเป็นธรรมชาติมาก
ท่ีสดุ

สถาบันส่งเสริมการสอนวิทยาศาสตร์และเทคโนโลยี 33