30
บทที3 การออกแบบและพัฒนางานสื่อการสอน การศึกษาข้อมูลเบื ้องต ้น 1. ศึกษาหางานแอนิเมชั่นตามแหล่งต่างๆ เช่น ศึกษาวีดีโอจากสื่อออนไลน์ ผลงาน แอนิเมชันของการส่งประกวดของมหาวิทยาลัยราชภัฎสุรินทร์ เป็นต้น 2. ศึกษาแนวทางการวาดภาพ การใช้เส้นเพื่อให้ฉากแอนิเมชันออกมาให้สมจริงจากสื่อการ เรียนการสอนของมหาวิทยาลัยราชภัฎพิบูลสงคราม 3. ศึกษาเกี่ยวกับการสร้างงานแอนิเมชั่นของสื่อการเรียนการสอนมหาวิทยาลัยราชภัฎ หมู่บ้านจอมบึง 4. ศึกษาข้อมูลที่เกี่ยวกับการทางานแอนิเมชัน 2 มิติของสื่อการเรียนการสอน มหาวิทยาลัยเชียงใหม่ 5. ศึกษาการเคลื่อนไหวของตัวการ์ตูนให้มีความเป็นธรรมชาติของสื่อการเรียนการสอน มหาวิทยาลัยกรุงเทพ การเก็บรวบรวมข้อมูล 1. เก็บรวบรวมข้อมูล และเรียบเรียงเนื ้อเรื่องให้สอดคล้องกับเรื่องราวของการสอน ภาษาญี่ปุ ่ นที่เกิดขึ ้นจริง 2. ออกแบบตัวละคร โดยสร้างโครงร่างตัวการ์ตูนจากตัวการ์ตูนญี่ปุ ่ นด้วยโปรแกรม Adobe Flash Professional CS6 3. ออกแบบฉากและปุ ่ มต่างๆ เพื่อนามาใช้งานในสื่อการเรียนการสอนด้วยโปรแกรม Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน การทา Storyboard เพื่อกาหนดการ ดาเนินเรื่อง การสร้างฉาก และการสอดแทรกแอนิเมชั่น 5. รวบรวมข้อมูลเทคนิคการใช้โปรแกรม Adobe Flash Professional CS6 การแก้ไขปัญหา ในเคลื่อนไหวของตัวละคร เพื่อที่จะให้การเคลื่อนไหวของตัวละครนั ้นเป็นธรรมชาติ มากที่สุด 6. เก็บรวบรวมเสียงต่างๆ เพื่อนามาใช้ประกอบฉากด้วยโปรแกรม Adobe Audition CS6

บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

บทท 3

การออกแบบและพฒนางานสอการสอน

การศกษาขอมลเบองตน

1. ศกษาหางานแอนเมชนตามแหลงตางๆ เชน ศกษาวดโอจากสอออนไลน ผลงานแอนเมชนของการสงประกวดของมหาวทยาลยราชภฎสรนทร เปนตน

2. ศกษาแนวทางการวาดภาพ การใชเสนเพอใหฉากแอนเมชนออกมาใหสมจรงจากสอการเรยนการสอนของมหาวทยาลยราชภฎพบลสงคราม

3. ศกษาเกยวกบการสรางงานแอนเมชนของสอการเรยนการสอนมหาวทยาลยราชภฎหมบานจอมบง

4. ศกษาขอ มล ท เก ยวกบการท างานแอน เมชน 2 ม ตของ สอการเรยนการสอนมหาวทยาลยเชยงใหม

5. ศกษาการเคลอนไหวของตวการตนใหมความเปนธรรมชาตของสอการเรยนการสอนมหาวทยาลยกรงเทพ

การเกบรวบรวมขอมล

1. เกบรวบรวมขอมล และเรยบเรยงเนอเรองใหสอดคลองกบเรองราวของการสอนภาษาญปนทเกดขนจรง

2. ออกแบบตวละคร โดยสรางโครงรางตวการตนจากตวการตนญปนดวยโปรแกรม Adobe Flash Professional CS6

3. ออกแบบฉากและปมตางๆ เพอน ามาใชงานในสอการเรยนการสอนดวยโปรแกรม Adobe Photoshop CS6

4. ศกษาขอมลเกยวกบการท าสอการเรยนการสอน การท า Storyboard เพอก าหนดการด าเนนเรอง การสรางฉาก และการสอดแทรกแอนเมชน

5. รวบรวมขอมลเทคนคการใชโปรแกรม Adobe Flash Professional CS6 การแกไขปญหาในเคลอนไหวของตวละคร เพอทจะใหการเคลอนไหวของตวละครนนเปนธรรมชาตมากทสด

6. เกบรวบรวมเสยงตางๆ เพอน ามาใชประกอบฉากดวยโปรแกรม Adobe Audition CS6

Page 2: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

18

ออกแบบและพฒนางานสอการสอน

1. การออกแบบตวละคร

ภาพท 3.1 ตวละครหญง

ตวละครหญงจะเปนหนงในตวละครหลกของสอการเรยนการสอนภาษาญปนเบองตน มหนาทในการบรรยายขอความตางๆ ในสอการสอนภาษาญปนเบองตน แตงกายเครองแบบนกเรยนหญงมธยมตนของญปน ในฤดรอน

Page 3: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

19

ภาพท 3.2 ตวละครชาย

ตวละครชายจะเปนหนงในตวละครหลกของสอการเรยนการสอนภาษาญปนเบองตน มหนาทในการบรรยายขอความตางๆ ในสอการสอนภาษาญปนเบองตน แตงกายเครองแบบนกเรยนชายมธยมตนของญปน ในฤดรอน

Page 4: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

20

2. การออกแบบฉาก

ภาพท 3.3 ออกแบบฉากเมนหลก

หนาเมนหลก ออกแบบใหมเมนหลก 4 เมน จากทงหมด 8 เมน มตวละครหลกประกอบฉาก

ทงหมด 2 ตวละคร มปมกดไปหนาเมนถดไป และ ปมออกจากเมน

Page 5: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

21

ภาพท 3.4 ออกแบบฉากเมนหลกหนาท 2

หนาเมนหลกหนาท 2 จะออกแบบเหมอนเมนหลกหนาแรก มปมเมน 4 เมน ตวละครหลก

ประกอบฉาก 2 ตวละคร ปมกดกลบหนาเมนหลกหนาแรก และ ปมออกจากโปรแกรม

ภาพท 3.5 ออกแบบฉากแนะน าอกษรพนฐานญปน

ฉากนจะบรรยายถงประเภทและการใชตวอกษรภาษาญปนโดยใชตวละครชายประกอบฉาก

และบรรยาย มปมกดหนาถดไป ปมกดเรมเลนใหม และ ปมกดกลบไปหนาเมนหลก

Page 6: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

22

ภาพท 3.6 ออกแบบฉากหนาอกษรฮรางานะ และ คะตะคะนะ หนาท 1

ฉากนออกแบบจะโดยแสดงอกษรฮรางานะ และ คะตะคะนะ พรอมแสดงวธการเขยนเมอม

การกดคลกทปมตวอกษรจะมเสยงและแสดงวธการเขยนทางดานขวา มปมกดหนาถดไป ปมกด

กลบไปหนาทแลว และ ปมกดกลบไปเมนหลก

ภาพท 3.7 ออกแบบฉากหนาอกษรฮรางานะ และ คะตะคะนะ หนาท 2

ฉากนออกแบบโดยจะแสดงอกษรฮรางานะ และ คะตะคะนะ พรอมแสดงวธการเขยนเมอม

การกดคลกทปมตวอกษรจะมเสยงและแสดงวธการเขยนทางดานขวา และ มปมกดเชนเดยวกบหนา

ตวอกษรฮรางานะ และ คะตะคะนะ

Page 7: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

23

ภาพท 3.8 ออกแบบฉากหนาอกษรฮรางานะ และ คะตะคะนะ หนาท 3

ฉากนออกแบบโดยจะแสดงอกษรฮรางานะ และ คะตะคะนะ พรอมแสดงวธการเขยนเมอม

การกดคลกทปมตวอกษรจะมเสยงและแสดงวธการเขยนทางดานขวาเชนเดยวกบหนาอกษรฮรางานะ

และ คะตะคะนะ ท 1 และ 2 มปมกดกลบไปหนาทแลว และ ปมกดกลบไปหนาเมนหลก

ภาพท 3.9 ออกแบบฉากการกลาวค าสวสดตอนเชา

ฉากนจะเปนบรรยายการกลาวค าทกทาย สวสดตอนเชา พรอมค าอธบายลกษณะการใชค าใน

เวลาตางๆ โดยใชตวละครหญงประกอบฉากและบรรยาย มปมกดเรมเลนใหม ปมกดหนาถดไป

ปมกดกลบไปหนาทแลว และ ปมกดกลบไปเมนหลก

Page 8: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

24

ภาพท 3.10 ออกแบบฉากการกลาวค าสวสดตอนบาย

ฉากนจะเปนบรรยายการกลาวค าทกทาย สวสดตอนบาย พรอมค าอธบายลกษณะการใชค าใน

เวลาตางๆ โดยใชตวละครหญงในการบรรยาย มปมกดเรมเลนใหม ปมกดหนาถดไป ปมกดกลบไป

หนาทแลว และ ปมกดกลบไปเมนหลก

ภาพท 3.11 ออกแบบฉากการกลาวค าสวสดตอนเยน

ฉากนจะเปนบรรยายการกลาวค าทกทาย สวสดตอนเยน พรอมค าอธบายลกษณะการใชค าในเวลาตางๆ โดยใชตวละครหญงประกอบฉากและบรรยาย มปมกดเรมเลนใหม ปมกดหนาถดไป ปมกดกลบไปหนาทแลว และ ปมกดกลบไปเมนหลก

Page 9: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

25

ภาพท 3.12 ออกแบบฉากการกลาวค าแนะน าตวเอง

ฉากนจะเปนการกลาวแนะน าตวเอง พรอมค าอธบายลกษณะการใชค าตางๆ เชนการแนะน าชอ

ตนเอง โดยตวละครชายประกอบฉากและบรรยาย มปมกดเรมเลนใหม และ ปมกดกลบไปหนาท

แลว

ภาพท 3.13 ออกแบบฉากการกลาวค าอ าลา

ฉากนเปนการกลาวค าวา “ลากอน” พรอมค าอธบายลกษณะการใชค าอ าลา โดยตวละครชาย

ประกอบฉากและบรรยาย มปมกดเรมเลนใหม ปมกดหนาถดไป และ ปมกดกลบไปเมนหลก

Page 10: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

26

ภาพท 3.14 ออกแบบฉากการกลาวค าไวพบกนใหม

ฉากนเปนการกลาวค าวา “ไวพบกนใหม” พรอมค าอธบายลกษณะการใชค าอ าลาอกแบบหนง

โดยตวละครชายจะเปนผบรรยาย

ภาพท 3.15 ออกแบบฉากการกลาวค าราตรสวสด

ฉากนเปนการกลาวค าวา “ราตรสวสด” พรอมค าอธบายลกษณะการใชค าอ าลาอกแบบหนง

โดยตวละครชายประกอบฉากและบรรยาย มปมกดเรมเลนใหม ปมกดกลบไปหนาทแลว และ ปมกด

กลบไปเมนหลก

Page 11: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

27

ภาพท 3.16 ออกแบบฉากการกลาวค าขอโทษ

ฉากนเปนฉากการกลาวค าวา “ขอโทษ” แบบสภาพ พรอมค าอธบายลกษณะการใชค าในแบบ

ตางๆ โดยตวละครหญงจะประกอบฉากและบรรยาย มปมกดเรมเลนใหม ปมกดหนาถดไป และ

ปมกดกลบไปเมนหลก

ภาพท 3.17 ออกแบบฉากการกลาวค าวาขออภย

ฉากนเปนฉากการกลาวค าวา “ขอโทษ” แบบทวไป พรอมค าอธบายลกษณะการใชค าในแบบ

ตางๆ โดยตวละครหญงจะประกอบฉากและบรรยาย มปมกดเรมเลนใหม ปมกดหนาถดไป ปมกด

กลบไปหนาทแลว และ ปมกดกลบไปเมนหลก

Page 12: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

28

ภาพท 3.18 ออกแบบฉากการกลาวค าไมตองเกรงใจ

ฉากนเปนฉากการกลาวค าวา “ไมตองเกรงใจ” พรอมค าอธบายลกษณะการใชค าแบบตางๆ

โดยตวละครหญงประกอบฉากและบรรยาย มปมกดเรมเลนใหม ปมกดหนาถดไป ปมกดกลบไป

หนาทแลว และ ปมกดกลบไปเมนหลก

ภาพท 3.19 ออกแบบฉากการกลาวค าขอบคณ

ฉากนเปนฉากการกลาวค าวา “ขอบคณ” พรอมค าอธบายลกษณะการใชค าในแบบตางๆ โดย

ตวละครหญงประกอบฉากและบรรยาย มปมกดเรมเลนใหม ปมกดกลบไปหนาทแลว และ ปมกด

กลบไปเมนหลก

Page 13: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

29

ภาพท 3.20 ออกแบบฉากการกลาวค าวาสบายดไหม

ฉากนเปนฉากการกลาวถามสขภาพค าวา “สบายดไหม” พรอมค าอธบายลกษณะการใชค าใน

แบบตางๆ โดยตวละครชายประกอบฉากและบรรยาย มปมกดเรมเลนใหม ปมกดหนาถดไป และ

ปมกดกลบไปเมนหลก

ภาพท 3.21 ออกแบบฉากการกลาวค าวาสบายด

ฉากนเปนฉากการกลาวถามสขภาพค าวา “สบายด” พรอมค าอธบายลกษณะการใชค าในแบบ

ตางๆ โดยตวละครชายประกอบฉากและบรรยาย ม ปมกดเรมเลนใหม ปมกดหนาถดไป ปมกด

กลบไปหนาทแลว และ ปมกดกลบไปเมนหลก

Page 14: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

30

ภาพท 3.22 ออกแบบฉากการกลาวค าวาไมสบาย

ฉากนเปนฉากการกลาวถามสขภาพค าวา “ไมสบาย” พรอมค าอธบายลกษณะการใชค าในแบบ

ตางๆ โดยตวละครชายประกอบฉากและบรรยาย มปมกดเรมเลนใหม ปมกดกลบไปหนาทแลว และ

ปมกดกลบไปเมนหลก

ภาพท 3.23 ออกแบบฉากค าศพทนาร

ฉากนเปนฉากค าศพทนาร ประกอบดวยค าศพทท งหมด 4 ค า เมอกดเลอกค าจะมเสยงพดประกอบ มปมกดหนา และ ปมกดกลบไปเมนหลก

Page 15: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

31

ภาพท 3.24 ออกแบบฉากค าศพทนาร หนาท 2

ฉากนเปนฉากค าศพทนารหนาท 2 ประกอบดวยค าศพทท งหมด 4 ค า เมอกดเลอกค าจะม

เสยงพดประกอบ มปมกดหนาถดไป ปมกดกลบไปหนาทแลว และ ปมกดกลบไปเมนหลก

ภาพท 3.25 ออกแบบฉากค าศพทนาร หนาท 3

ฉากนเปนฉากค าศพทนารหนาท 3 ประกอบดวยค าศพทท งหมด 4 ค า เมอกดเลอกค าจะม

เสยงพดประกอบ มปมกดหนาถดไป ปมกดกลบไปหนาทแลว และ ปมกดกลบไปเมนหลก

Page 16: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

32

ภาพท 3.26 ออกแบบฉากค าศพทนาร หนาท 4

ฉากนเปนฉากค าศพทนารหนาท 4 ประกอบดวยค าศพทท งหมด 4 ค า เมอกดเลอกค าจะม

เสยงพดประกอบ มปมกดหนาถดไป ปมกดกลบไปหนาทแลว และ ปมกดกลบไปเมนหลก

ภาพท 3.27 ออกแบบฉากค าศพทนาร หนาท 5

ฉากนเปนฉากค าศพทนารหนาท 2 ประกอบดวยค าศพทท งหมด 4 ค า เมอกดเลอกค าจะม

เสยงพดประกอบ มปมกดกลบไปหนาทแลว และ ปมกดกลบไปเมนหลก

Page 17: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

33

ภาพท 3.28 ออกแบบฉากแบบทดสอบหนาลอคอน

ฉากนเปนฉากแบบทดสอบทมแบบทดสอบใหเลอก 2 แบบ เปนแบบเลอกค าตอบและแบบเตม

ค า สามารถกรอกชอผทดสอบได ตวอยางเชน กรอกชอ test เปนตน มปมกดกลบไปเมนหลก และ

ปมเรมใหม

ภาพท 3.29 ออกแบบฉากแบบทดสอบแบบตวเลอกขอท 1

ฉากนเปนฉากแบบทดสอบแบบตวเลอก หนาท 1 เปนการท าแบบทดสอบแบบเลอกค าตอบท

ถกตองทสด โดยค าถามนจะถามเกยวกบภาษาญปนวา ขอใด “ไมใช” ภาษาญปน มปมกดกลบไปเมน

หลก และ ปมเรมใหม

Page 18: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

34

ภาพท 3.30 ออกแบบฉากแบบทดสอบแบบตวเลอกขอท 2

ฉากนเปนฉากแบบทดสอบแบบตวเลอก หนาท 2 เปนการท าแบบทดสอบแบบเลอกค าตอบท

ถกตองทสด โดยค าถามนจะถามเกยวกบภาษาญปนวา ตวอกษรคะตะคะนะ เหมาส าหรบการใชแบบ

ใดมากทสด ภาษาญปน มปมกดกลบไปเมนหลก และ ปมเรมใหม

ภาพท 3.31 ออกแบบฉากแบบทดสอบแบบตวเลอกขอท 3

ฉากนเปนฉากแบบทดสอบแบบตวเลอก หนาท 3 เปนการท าแบบทดสอบแบบเลอกค าตอบท

ถกตองทสด โดยค าถามนจะถามเกยวกบภาษาญปนวา การทกทายตอนเชาแบบใด มความสภาพและ

ถกตองมากทสด มปมกดกลบไปเมนหลก และ ปมเรมใหม

Page 19: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

35

ภาพท 3.32 ออกแบบฉากแบบทดสอบแบบตวเลอกขอท 4

ฉากนเปนฉากแบบทดสอบแบบตวเลอก หนาท 4 เปนการท าแบบทดสอบแบบเลอกค าตอบท

ถกตองทสด โดยค าถามนจะถามเกยวกบภาษาญปนวา การทกทายกบผอนในชวงเวลาบาย เราใช

ประโยคไหนมากทสด มปมกดกลบไปเมนหลก และ ปมเรมใหม

ภาพท 3.33 ออกแบบฉากแบบทดสอบแบบตวเลอกขอท 5

ฉากนเปนฉากแบบทดสอบแบบตวเลอก หนาท 5 เปนการท าแบบทดสอบแบบเลอกค าตอบท

ถกตองทสด โดยค าถามนจะถามเกยวกบภาษาญปนวา การบอกกลาวค าอ าลากอนเขานอนหรอการ

บอกราตร-สวสดคอขอใด มปมกดกลบไปเมนหลก และ ปมเรมใหม

Page 20: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

36

ภาพท 3.34 ออกแบบฉากแบบทดสอบแบบตวเลอกขอท 6

ฉากนเปนฉากแบบทดสอบแบบตวเลอก หนาท 6 เปนการท าแบบทดสอบแบบเลอกค าตอบท

ถกตองทสด โดยค าถามนจะถามเกยวกบภาษาญปนวา การกลาวค าขอโทษกอนจะขออนญาตผอน

ควรพดค าใด มปมกดกลบไปเมนหลก และ ปมเรมใหม

ภาพท 3.35 ออกแบบฉากแบบทดสอบแบบตวเลอกขอท 7

ฉากนเปนฉากแบบทดสอบแบบตวเลอก หนาท 7 เปนการท าแบบทดสอบแบบเลอกค าตอบท

ถกตองทสด โดยค าถามนจะถามเกยวกบภาษาญปนวา ค าวา Douzo yoroshiku ใชในการท าอะไร ม

ปมกดกลบไปเมนหลก และ ปมเรมใหม

Page 21: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

37

ภาพท 3.36 ออกแบบฉากแบบทดสอบแบบตวเลอกขอท 8

ฉากนเปนฉากแบบทดสอบ หนาท 8 เปนการท าแบบทดสอบแบบเลอกค าตอบทถกตองทสด

โดยค าถามนจะถามเกยวกบภาษาญปนวา ภาษาญปนค าใดมความหมายวา “สบายดไหม” มปมกด

กลบไปเมนหลก และ ปมเรมใหม

ภาพท 3.37 ออกแบบฉากแบบทดสอบแบบตวเลอกขอท 9

ฉากนเปนฉากแบบทดสอบแบบตวเลอก หนาท 9 เปนการท าแบบทดสอบแบบเลอกค าตอบท

ถกตองทสด โดยค าถามนจะถามเกยวกบภาษาญปนวา การเตม Desu ลงทายในบางประโยคเพอชวย

ในเรองใด มปมกดกลบไปเมนหลก และ ปมเรมใหม

Page 22: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

38

ภาพท 3.38 ออกแบบฉากแบบทดสอบแบบตวเลอกขอท 10

ฉากนเปนฉากแบบทดสอบแบบตวเลอก หนาท 10 เปนการท าแบบทดสอบแบบเลอกค าตอบท

ถกตองทสด โดยค าถามนจะถามเกยวกบภาษาญปนวา ค าวา Ohayou อานออกเสยงวาอยางไร ม

ปมกดกลบไปเมนหลก และ ปมเรมใหม

ภาพท 3.39 ออกแบบฉากแบบทดสอบแบบเตมค าขอท 1

ฉากนเปนฉากแบบทดสอบแบบเตมค า หนาท 1 เปนฉากแบบทดสอบแบบเตมค าในชองวาง

โดยจะมค าใบจ านวน 3 ค า ดานลางสามารถน ามาใสเปนค าตอบได ค าใบ 1 ใน 3 ค าจะมเพยง 1 ค าท

ถกตอง ค าถามขอนจะถามเกยวกบค าทกทายในภาษาญปน มปมกดกลบไปเมนหลก และ ปมเรมใหม

Page 23: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

39

ภาพท 3.40 ออกแบบฉากแบบทดสอบแบบเตมค าขอท 2

ฉากนเปนฉากแบบทดสอบแบบเตมค า หนาท 2 เปนฉากแบบทดสอบแบบเตมค าในชองวาง

โดยจะมค าใบจ านวน 3 ค า ดานลางสามารถน ามาใสเปนค าตอบได ค าใบ 1 ใน 3 ค าจะมเพยง 1 ค าท

ถกตอง ค าถามขอนจะถามเกยวกบค าอ าลาในภาษาญปน มปมกดกลบไปเมนหลก และ ปมเรมใหม

ภาพท 3.41 ออกแบบฉากแบบทดสอบแบบเตมค าขอท 3

ฉากนเปนฉากแบบทดสอบแบบเตมค า หนาท 3 เปนฉากแบบทดสอบแบบเตมค าในชองวาง

โดยจะมค าใบจ านวน 3 ค า ดานลางสามารถน ามาใสเปนค าตอบได ค าใบ 1 ใน 3 ค าจะมเพยง 1 ค าท

ถกตอง ค าถามขอนจะถามเกยวกบค าอ าลาในภาษาญปน มปมกดกลบไปเมนหลก และ ปมเรมใหม

Page 24: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

40

ภาพท 3.42 ออกแบบฉากแบบทดสอบแบบเตมค าขอท 4

ฉากนเปนฉากแบบทดสอบแบบเตมค า หนาท 4 เปนฉากแบบทดสอบแบบเตมค าในชองวาง

โดยจะมค าใบจ านวน 3 ค า ดานลางสามารถน ามาใสเปนค าตอบได ค าใบ 1 ใน 3 ค าจะมเพยง 1 ค าท

ถกตอง ค าถามขอนจะถามเกยวกบการแนะน าตวเอง มปมกดกลบไปเมนหลก และ ปมเรมใหม

ภาพท 3.43 ออกแบบฉากแบบทดสอบแบบเตมค าขอท 5

ฉากนเปนฉากแบบทดสอบแบบเตมค า หนาท 5 เปนฉากแบบทดสอบแบบเตมค าในชองวาง

โดยจะมค าใบจ านวน 3 ค า ดานลางสามารถน ามาใสเปนค าตอบได ค าใบ 1 ใน 3 ค าจะมเพยง 1 ค าท

ถกตอง ค าถามขอนจะถามเกยวกบการแนะน าตวเอง มปมกดกลบไปเมนหลก และ ปมเรมใหม

Page 25: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

41

ภาพท 3.44 ออกแบบฉากแบบทดสอบแบบเตมค าขอท 6

ฉากนเปนฉากแบบทดสอบแบบเตมค า หนาท 6 เปนฉากแบบทดสอบแบบเตมค าในชองวาง

โดยจะมค าใบจ านวน 3 ค า ดานลางสามารถน ามาใสเปนค าตอบได ค าใบ 1 ใน 3 ค าจะมเพยง 1 ค าท

ถกตอง ค าถามขอนจะถามเกยวกบค าขอโทษในภาษาญปน มปมกดกลบไปเมนหลก และ ปมเรมใหม

ภาพท 3.45 ออกแบบฉากแบบทดสอบแบบเตมค าขอท 7

ฉากนเปนฉากแบบทดสอบแบบเตมค า หนาท 7 เปนฉากแบบทดสอบแบบเตมค าในชองวาง

โดยจะมค าใบจ านวน 3 ค า ดานลางสามารถน ามาใสเปนค าตอบได ค าใบ 1 ใน 3 ค าจะมเพยง 1 ค าท

ถกตอง ค าถามขอนจะถามเกยวกบค าขอโทษในภาษาญปน มปมกดกลบไปเมนหลก และ ปมเรมใหม

Page 26: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

42

ภาพท 3.46 ออกแบบฉากแบบทดสอบแบบเตมค าขอท 8

ฉากนเปนฉากแบบทดสอบแบบเตมค า หนาท 8 เปนฉากแบบทดสอบแบบเตมค าในชองวาง

โดยจะมค าใบจ านวน 3 ค า ดานลางสามารถน ามาใสเปนค าตอบได ค าใบ 1 ใน 3 ค าจะมเพยง 1 ค าท

ถกตอง ค าถามขอนจะถามเกยวกบการกลาวถามสขภาพในภาษาญปน มปมกดกลบไปเมนหลก และ

ปมเรมใหม

ภาพท 3.47 ออกแบบฉากแบบทดสอบแบบเตมค าขอท 9

ฉากนเปนฉากแบบทดสอบแบบเตมค า หนาท 9 เปนฉากแบบทดสอบแบบเตมค าในชองวาง

โดยจะมค าใบจ านวน 3 ค า ดานลางสามารถน ามาใสเปนค าตอบได ค าใบ 1 ใน 3 ค าจะมเพยง 1 ค าท

ถกตอง ค าถามขอนจะถามเกยวกบค าอ าลาในภาษาญปน มปมกดกลบไปเมนหลก และ ปมเรมใหม

Page 27: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

43

ภาพท 3.48 ออกแบบฉากแบบทดสอบแบบเตมค าขอท 10

ฉากนเปนฉากแบบทดสอบแบบเตมค า หนาท 10 เปนฉากแบบทดสอบแบบเตมค าในชองวาง

โดยจะมค าใบจ านวน 3 ค า ดานลางสามารถน ามาใสเปนค าตอบได ค าใบ 1 ใน 3 ค าจะมเพยง 1 ค าท

ถกตอง ค าถามขอนจะถามเกยวกบค าขอบคณในภาษาญปน มปมกดกลบไปเมนหลก และ ปมเรม

ใหม

ภาพท 3.49 ออกแบบฉากสรปผลการทดสอบ

ฉากนเปนฉากแบบทดสอบ เปนฉากสรปผลการทดสอบจะแสดงคะแนนผลการทดสอบ เมอ

ท าแบบทดสอบทเลอกไวในหนาแรก มปมกดกลบไปเมนหลก และ ปมเรมใหม

Page 28: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

44

3. การพฒนาสอการสอน 3.1 การออกแบบตวละคร โดยใชโปรแกรม Adobe Flash Professional CS6

ภาพท 3.50 การใสสใหกบตวละครหญง

Page 29: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

45

3.2 การออกแบบฉาก

โดยใชโปรแกรม Adobe Flash Professional CS6

ภาพท 3.51 ฉากเมนหลก

Page 30: บทที่ 3 การออกแบบและพัฒนางานสื่อการสอน...Adobe Photoshop CS6 4. ศึกษาข้อมูลเกี่ยวกับการทาสื่อการเรียนการสอน

46

3.3 การใสเสยงใหงานสอการสอน

โดยใชโปรแกรม Adobe Audition CS6

ภาพท 3.52 หนาจอโปรแกรม Adobe Audition CS6