บุรีนทร์ นรินทร์

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 31 ~ 2.6.3 ขั้นตอนวางกรอบเน้ือหาและเขียนผังงาน (Flowchart Lesson) ผังงานก็คือ ส่วน โครงสร้างของสาระเน้ือหาท่ีกาลังจะพัฒนาซึ่งจะแสดงข้ันตอนการสร้างงาน การเขียนผังงานจะช่วย ให้เข้าใจลาดับการสร้างบทเรียนท่ีชัดเจนและง่ายต่อการตรวจสอบ แก้ไขได้อย่างรวดเร็วในภายหลัง การเขียนผงั งานมหี ลายระดับแตกตา่ งกันไปแล้วแตค่ วามละเอียดของแตล่ ะเนื้อหาบทเรยี น นอกจากน้ี ยังสามารถนาผังงานมาพิจารณาความเหมาะสมต่อการเรียนรู้ การเขา้ ถงึ เน้ือหา เพราะหากบทเรียนมี ความลึกมาก ก็อาจจะเป็นอปุ สรรคและปญั หาของการควบคุมลาดับขน้ั ตอนการเรียนรู้ได้ 2.6.4 ขั้นตอนการสร้างหน้าเอกสารเว็บ (Create Web-page) ข้ันตอนนี้เป็นกระบวนการ เปลี่ยนต้นฉบับหรือโครงร่างให้เป็นหน้าเอกสารเว็บ ซึ่งในขั้นตอนน้ีผู้ออกแบบบทเรียนจะต้องรู้จัก เลือกใช้โปรแกรมการเขียนเอกสารเว็บท่ีถนัดและเหมาะสมกับตนเอง ซ่ึงมีอยู่หลากหลาย อาทิ Adobe Dreamweaver, Namo Editor, Edit Plus นอกจากน้ียังจะต้องมีความรู้ในการใช้โปรแกรม ประเภท Image editor หรือโปรแกรมสาหรับตกแต่ภาพ โปรแกรมสร้าง animation รวมถึงต้อง เข้าใจภาษา html ภาษาสคริปต์ (Script) เป็นต้น เสน่ห์สาคัญของบทเรียนออนไลน์ ท่ีไม่มีในส่ือการเรียนรู้ประเภทอ่ืน ๆ ก็คือ ผู้สร้างสามารถ ท่ีจะปรบั แตง่ เปลยี่ นแปลง เพม่ิ เติม ลดทอนสาระเนือ้ หาได้โดยง่าย 2.6.5 ขั้นตอนการเผยแพร่ทดสอบ (Publish) ข้ันตอนนี้เป็นกระบวนการนาเอาสาระการ เรียนรู้ที่ได้สร้างขึ้น นาเข้าสู่ระบบ ซึ่งกลไกการเข้าสู่ระบบ มีหลายวิธีการ ได้ทั้งการ upload ผ่าน โปรแกรมประเภท file transfer ตา่ ง ๆ หรอื ผา่ นระบบของ web-based learning ท่ีได้ออกแบบไว้ 2.6.6 ข้ันตอนการประเมินหรือปรับปรุง (Evaluate and Revise) ในช่วงสุดท้าย บทเรียน และเอกสารประกอบทั้งหมด ควรท่ีจะได้รับการประเมิน โดยเฉพาะการประเมินในส่วนของการ นาเสนอและการทางานของบทเรียน ในช่วงการนาเสนอนั้นผู้ที่ควรจะทาการนาเสนอก็คือผู้ท่ีมี ประสบการณ์ในการออกแบบมาก่อน ในการประเมินการทางานของบทเรียนนั้น ผู้ออกแบบควรที่จะ ทาการสงั เกตพฤติกรรมของผ้เู รียน ในขณะทใี่ ช้บทเรียนหรือสัมภาษณ์ผู้เรียนหลังการใช้บทเรียน โดย ผู้เรียนจะต้องมาจากผู้เรียนกลุ่มเป้าหมาย ข้ันตอนนี้อาจครอบคลุมการทดสอบนาร่องและการ ประเมนิ จากผูเ้ ชยี่ วชาญได้ 2.7 สรปุ การออกแบบการเรียนการสอนมีจุดม่งุ หมายท่มี ีความเฉพาะเจาะจง ม่งุ เน้นเพื่อแก้ปัญหาการ เรียนรู้อย่างใดอย่างหนึ่งของนักเรียน จากกรวยประสบการณ์ของ เอดการ์ เดล ได้จาแนกส่ือเป็น 3 ประเภท คือ ส่ือประเภทวัสดุ สื่อประเภทอุปกรณ์ และสื่อประเภทเทคนิควิธีการ กระบวนการ ออกแบบและพัฒนารูปแบบการสอนที่นิยมนามาใช้ในการพัฒนาส่ือการเรียนการสอนเนื่องจากมี รูปแบบที่ง่ายและมีขั้นตอนชัดเจน สามารถนามาใช้ในการออกแบบและพัฒนาสื่อบทเรียน เอกสารประกอบการสอนวิชา การออกแบบและพฒั นาส่ืออเิ ลก็ ทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 32 ~ คอมพิวเตอร์ช่วยสอนหรือส่ืออิเล็กทรอนิกส์ได้เป็นอย่างดีคือ ADDIE Model ในการออกแบบการ เรียนการสอนมีแนวคิดท่ีนิยมนามาใช้ในการพัฒนาสื่ออิเล็กทรอนิกส์ อีกแนวคิดหนึ่งคือแนวคิดการ เรยี นรู้ 9 ขนั้ ของ กาเย่ 2.8 แบบฝกึ หดั ทา้ ยบท 2.7.1 จงอธบิ ายถึงหลกั สาคญั ของการออกแบบ 2.7.2 ใหน้ ักศึกษาจาแนกส่ือการเรียนรู้ตามกรวยประสบการณ์ (Cone of Experience) ของ เอดการ์ เดล Edgar Dale 2.7.3 รูปแบบการสอนตามแนวทางของ ADDIE Model ประกอบไปด้วยข้ันตอนอะไรบ้าง จงอธิบาย 2.7.4 แนวคิดการเรยี นรู้ 9 ขน้ั ของ กาเย่ ประกอบไปด้วยอะไรบา้ ง จงอธิบาย เอกสารประกอบการสอนวชิ า การออกแบบและพัฒนาสอ่ื อิเล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 33 ~ 2.9 เอกสารอ้างองิ กรมวชิ าการ กองวิจัยทางการศึกษา. (2543). รายงานการสังเคราะหเ์ อกสารเรื่อง วิธสี อนและ รูปแบบการเรยี นการสอน วิชา ภาษาไทย ภาษาอังกฤษ คณติ ศาสตร์ และวิทยาศาสตร์. กรุงเทพมหานคร : โรงพิมพก์ ารศาสนา. กิดานันท์ มลทิ อง. (2543). เทคโนโลยที างการศึกษาและนวัตกรรม. พมิ พ์ครงั้ ท่ี 2 ฉบบั ปรบั ปรุง เพิม่ เตมิ . กรุงเทพมหานคร : หา้ งหุ้นสว่ นจากัด อรณุ การพิมพ์. บรรพต นอกตาจัน่ . (2564). แนวคิด หลักการและการจาแนกสื่อการเรยี นการสอนของ Edgar Dale. สืบค้นเมอ่ื 4 มิถุนายน 2564 จาก https://www.gotoknow.org/posts/674944 ธานี ภ่นู พคุณ. (). 5 ส่วนประกอบทสี่ าคัญของการออกแบบ (จดุ , เส้น). สืบคน้ เม่อื 4 มถิ นุ ายน 2564, จาก https://www.gotoknow.org/posts/155330 นรรัชต์ ฝันเชยี ร. (2563). มารู้จักหลักการสอน 9 ข้ันของกาเย่ (Gagne). สบื คน้ เมื่อ 4 มิถุนายน 2564, จาก https://www.trueplookpanya.com/blog/content/82909/-blog- teamet- ศกั ดค์ิ เรศ ประกอบผล. (2563). การออกแบบและพัฒนาบทเรยี นคอมพวิ เตอรช์ ่วยสอนโดยใช้ แอดด้โี มเดลและแนวคิดของกาเย่. วารสารครศุ าสตรส์ าร. ปีท่ี 14 ฉบับท่ี 1. จากเว็บไซต์ http://edujournal.bsru.ac.th/storage/1023/02.pdf สมจิต จันทร์ฉาย. (2557). การออกแบบและพัฒนาการเรยี นการสอน. คณะครุศาสตร์ มหาวิทยาลัย ราชภฏั นครปฐม. อดิศักด์ิ ทิสานนท์. (2556). หลักการสรา้ งและออกแบบส่อื อิเลก็ ทรอนิกส์. สืบค้นเมือ่ 4 มถิ นุ ายน 2564 จาก http://kruoong.blogspot.com/2013/11/blog-post.html เอกสารประกอบการสอนวิชา การออกแบบและพัฒนาสอื่ อิเล็กทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 34 ~ แผนบรหิ ารการสอนประจาบทที่ 3 หัวข้อเน้อื หา 1. ความหมายของโครงร่างเร่ืองราว 2. หลกั การเขยี นโครงร่างเรื่องราว 3. ศัพทเ์ ทคนคิ เกี่ยวกบั โครงร่างเรือ่ งราว 4. ขน้ั ตอนพน้ื ฐานของการเขียนโครงรา่ งเรือ่ งราว 5. ลักษณะของภาพพน้ื ฐานในโครงร่างเรื่องราว 6. ข้นั ตอนการสรา้ งโครงร่างเรอื่ งราว 7. โครงรา่ งเรอื่ งราวสาหรับส่อื อิเล็กทรอนิกส์ 8. การเขยี นโครงร่างเรื่องราวสาหรับส่ืออิเล็กทรอนิกส์ วัตถปุ ระสงคเ์ ชงิ พฤติกรรม เมือ่ นักศกึ ษาเรยี นบทนี้แลว้ 1. นกั ศึกษาสามารถบอกความหมายของโครงรา่ งเร่ืองราวได้ 2. นกั ศึกษาสามารถปฏบิ ัติการเขยี นโครงรา่ งเร่ืองราวสาหรับผลิตส่ือได้ วธิ สี อนและกิจกรรมการเรยี นการสอน 1. วธิ สี อน 1.1 การบรรยายประกอบสไลด์ 1.2 การแสดงตวั อยา่ งประกอบการบรรยาย 2. กิจกรรมการเรียนการสอน 2.1 การคน้ ควา้ โดยอสิ ระ 2.2 การตอบคาถาม 2.3 การทาแบบฝึกหัดทา้ ยบท สอ่ื การเรยี นการสอน 1. สไลดป์ ระกอบการบรรยาย 2. ตวั อยา่ งภาพแต่ละรูปแบบสาหรับการเขยี นโครงร่างเร่ืองราว 3. เอกสารประกอบการสอนรายวิชาการออกแบบและพฒั นาส่อื อเิ ล็กทรอนิกส์

~ 35 ~ การวดั ผลและการประเมนิ ผล 1. การสงั เกตพฤติกรรม ความสนใจ และการมีสว่ นร่วมในกิจกรรมการเรียน 2. การประเมินผลจากการสง่ งานเขา้ สู่ห้องเรียนเสมอื น Google Classroom 3. การประเมินจากการทาแบบฝึกหดั ท้ายบท มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง บทท่ี 3 การจัดทาโครงรา่ งเรื่องราว ในการออกแบบและพัฒนาส่ืออิเล็กทรอนิกส์ควรมีการวางลาดับโครงร่างเร่ืองราว หรือสตอรี บอร์ด (Storyboard) ของเนื้อหาเพ่ือให้สะดวกรวดเร็วและประหยัดเวลาในการพัฒนาสื่อ อิเล็กทรอนิกส์ โครงร่างเร่ืองราวก็คือการเขียนกรอบแสดงเรื่องราวของสื่อการเรียนรู้แต่ละเรื่อง โดย จะมกี ารแสดงรายละเอียดที่จะเกิดข้ึนในแตล่ ะหนา้ จอ เชน่ ภาพ ขอ้ ความ เสียง ภาพเคลื่อนไหว และ วิดีโอที่ใช้ในการพัฒนาสื่อ ก่อนที่จะดาเนินการสร้างโครงร่างเร่ืองราว จึงจาเป็นต้องมีความเข้าใจใน เรื่องตา่ ง ๆ ทเี่ กีย่ วข้อง ดังนี้ 3.1 ความหมายของโครงรา่ งเร่ืองราว โครงร่างเรื่องราว หรือ สตอรีบอร์ด (Storyboard) คือ การเขียนภาพน่ิงเพื่อสร้างเป็น ภาพเคล่ือนไหวในรูปของสื่อมัลติมีเดีย หรือส่ือประสม เป็นการใช้ส่ือในหลายรูปแบบทั้งข้อความ เสียง รูปภาพ หรือภาพเคลื่อนไหว เพ่ือกาหนดแนวทางให้ทีมผู้ผลิตเกิดความเข้าใจไปในแนวทาง เดียวกัน ในการถ่ายทาเป็นภาพเคล่ือนไหวรูปแบบต่าง ๆ ได้แก่ ภาพยนตร์ ภาพยนตร์โฆษณา ภาพยนตร์สั้น ภาพยนตร์การ์ตูน ภาพยนตร์สารคดี หรือแม้แต่การทาผลงาน โดยแสดงออกถึงความ ต่อเน่ืองของการเล่าเร่ือง จุดประสงค์ของ สตอรีบอร์ด คือ เพื่อไว้ศึกษาการเล่าเร่ือง ลาดับเร่ือง มุม กล้อง ภาพไม่จาเป็นต้องละเอียดมาก แค่พอบอกองค์ประกอบสาคัญได้ เช่น ตาแหน่งตัวละครที่ สัมพันธ์กับฉากและตัวละครอื่น ๆ มุมกล้อง แสงเงา แบบคร่าว ๆ เป็นการสเก็ตซ์ภาพของเฟรม (Shot) ต่าง ๆ จากบท มีลักษณะเหมือนการ์ตูนช่อง แต่ไม่ใช่การ์ตูน การสร้างสตอรีบอร์ดจะช่วยให้ ผู้พัฒนา และผู้กากับได้เห็นภาพของรายการท่ีจะถ่ายทาเป็นรูปธรรมชัดเจนขึ้นในแต่ละเฟรมที่จะ ดาเนนิ การ (สวุ รรณา อรรถชิตวาทนิ , 2564) ภาพที่ 3.1 ตัวอยา่ งของโครงร่างเรอ่ื งราว (Storyboard) ทมี่ า https://image.freepik.com/free-vector/storyboard-about-love-concept_23- 2148671648.jpg

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 37 ~ 3.2 หลักการเขยี นโครงรา่ งเร่อื งราว รูปแบบของโครงร่างเรื่องราวหรือสตอรี่บอร์ด จะประกอบไปด้วย 2 ส่วนคือ ส่วนภาพกับ ส่วนเสียง โดยปกติการเขียนโครงร่างเรื่องราว ก็จะวาดภาพในกรอบสี่เหลี่ยม ต่อด้วยการเขียนบท บรรยายภาพหรือบทการสนทนา และส่วนสุดท้ายคือการใส่เสียงซ่ึงอาจจะประกอบด้วยเสียงสนทนา เสียงบรรเลง และเสียงประกอบต่าง ๆ ส่ิงสาคัญทีอ่ ยภู่ ายในโครงร่างเรอื่ งราว ประกอบดว้ ย 3.2.1 ตวั ละครหรอื ฉาก ไม่วา่ จะเป็นคน สัตว์ สง่ิ ขอ สถานท่ี หรอื ตัวการ์ตูน และทีส่ าคญั คือมี การเคล่อื นไหวอยา่ งไร 3.2.2 มุมกลอ้ ง ทั้งในเรือ่ งของขนาดภาพ มมุ ภาพ และการเคลอื่ นกลอ้ ง 3.2.3 เสียงการสนทนากันระหว่างตวั ละคร มีเสียงประกอบหรอื เสยี งดนตรีอยา่ งไร 3.3 ศัพทเ์ ทคนิคเกีย่ วกบั โครงร่างเรื่องราว 3.3.1 ช็อต (Shot) หมายถึง ลักษณะภาพท่ีเกิดจากการถ่ายภาพต้ังแต่เริ่มถ่ายไปจนถึงการ หยดุ เดินกล้อง เรียกวา่ 1 ช็อต หรอื 1 เทค (Take) ซ่ึงอาจมีการถ่ายภาพซ้ากันมากกวา่ 1 ครั้งในช็อต เดยี วกัน และถ้าหากมีความผดิ พลาดเกดิ ข้ึนในแต่ละครัง้ สามารถถา่ ยใหม่ เรยี กวา่ ถ่ายซา้ (retake) 3.3.2 ซนี (Scene) หมายถงึ สถานที่ หรือ ฉาก ที่จดั ขึ้น หรือดดั แปลงข้ึนเพ่ือใชใ้ นการแสดง เพ่อื การถา่ ยทา หรอื การนาเอาช็อตหลาย ๆ ชอ็ ต มารวมกัน ซง่ึ เปน็ ช็อตท่เี หตุการณเ์ กดิ ขนึ้ ในสถานที่ เดยี วกัน เวลาเดยี วกนั หรือมีความต่อเน่ืองทางเนื้อหา ซึง่ ในแต่ละซีน อาจมีหลายช็อตหรอื ชอ็ ตเดียวก็ ได้ ขน้ึ อยู่กับความเข้าใจของผชู้ ม 3.3.3 ซเี ควนท์ (Sequence) หมายถงึ ตอน หรอื ชว่ งเหตุการณห์ นึ่ง เปน็ การรวบรวมเอาฉาก หลายๆ ฉากที่มีความสัมพันธ์กันมาต่อเน่ืองกันเข้า และเมื่อรวมต่อเข้ากันแล้วจะเกิดผลสมบูรณ์ของ เนื้อหาอยู่ในตัวเอง สามารถจบ เหตุการณ์ในช่วงน้ัน ๆ ลงโดยท่ีผู้ชมเข้าใจได้ ซ่ึงในซีเควนซ์หนึ่ง ๆ อาจประกอบดว้ ยซนี เดยี ว หรือหลายซีนกไ็ ด้ 3.4 ขน้ั ตอนพ้นื ฐานของการเขียนโครงรา่ งเรอื่ งราว 3.4.1 วางโครงเรื่องหลกั ไม่ว่าจะเปน็ Theme, ตัวละครหลัก, ฉาก ฯลฯ 3.4.1.1 แนวเร่อื ง การวางโครงเร่ืองมกี ารดาเนนิ เร่อื งตัง้ แต่เรม่ิ นาเรื่องจนถึงปลายของ เรื่องหรือที่เรียกว่า ไคลแมกซ์ (Climax) และจบเรื่องลงโดยให้ผู้อ่านเข้าใจและมีความรู้สึกตามเน้ือ เรือ่ ง 3.4.1.2 ฉาก ต้องมีการบรรยายสภาพและบรรยากาศของสถานที่ หรือการพรรณนา ภาพอยา่ งใดอย่างหน่งึ เพื่อนาความคดิ ของผู้อ่านใหซ้ าบซงึ้ ในท้องเร่ือง ให้เห็นภาพฉากที่วาดดว้ ยภาพ หรอื ตัวอักษรน้ันให้ชัดเจน เอกสารประกอบการสอนวิชา การออกแบบและพัฒนาส่ืออเิ ล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 38 ~ 3.4.1.3 เนือ้ เรื่องย่อ 3.4.1.4 Theme/แกน่ (ข้อคดิ /สง่ิ ทต่ี ้องการจะสอ่ื ) 3.4.1.5 ตวั ละคร ส่ิงสาคัญคือกาหนดรูปลักษณ์ของตัวละครแตล่ ะตวั ให้โดดเดน่ ไม่ คล้ายกันจนเกิน ไป ควรออกแบบรูปลักษณ์ของตวั ละครให้โดดเดน่ แตกต่างกนั และมองแล้วสามารถ สอ่ื ถึงลักษณะนิสยั ของตัวละครได้ทันที 3.5 ลักษณะของภาพพื้นฐานในโครงร่างเรอื่ งราว 3.5.1 ภาพระยะไกลมาก (Extreme Long Shot: ELS) ถ้าใช้ในงานถ่ายภาพ หรืองานวิดีโอ คือการถ่ายภาพที่อยู่ในระยะไกลมาก เพื่อให้เห็นถึงบรรยากาศโดยรอบของสถานท่ีหรือ สภาพแวดล้อม ไมม่ กี ารเน้นสิง่ ใดส่งิ หนึ่ง ภาพท่ี 3.2 ภาพระยะไกลมาก (Extreme Long Shot: ELS) ท่ีมา : https://image.freepik.com/free-photo/extreme-long-shot-two-people-sitting-top- dune_23-2148194013.jpg 3.5.2 ภาพระยะไกล (Long Shot: LS) คือการถ่ายภาพวัตถุในระยะไกลเพื่อแสดงที่ต้ังหรือ ส่วนประกอบในฉาก หรือแสดงสัดส่วนของขนาดวัตถุเปรยี บเทียบกับสว่ นประกอบอ่ืน ๆ ในฉาก เชน่ ภาพเตม็ ตวั ภาพที่ 3.3 ภาพระยะไกล (Long Shot: LS) ทีม่ า : (ภาพโดยผู้เขียน, 2564, มกราคม 9) เอกสารประกอบการสอนวิชา การออกแบบและพัฒนาสอ่ื อเิ ลก็ ทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 39 ~ 3.5.3 ภาพระยะไกลปานกลาง (Medium Long Shot: MLS) คือการถ่ายภาพวัตถุใน ระยะไกลทีแ่ สดงใหเ้ หน็ ถึงรายละเอยี ดของวตั ถุ ภาพท่ี 3.4 ภาพระยะไกลปานกลาง (Medium Long Shot: MLS) ทม่ี า : https://sites.google.com/site/nonawake/_/rsrc/1414431242034/imagesize4/4- 1.jpg 3.5.4 ภาพระยะปานกลาง (Medium Shot: MS) คือการถ่ายภาพวัตถุในระยะปานกลาง เพื่อตัดฉากหลงั และรายละเอียดอ่นื ๆ ทีไ่ ม่จาเป็นออกไป เป็นการถา่ ยภาพวัตถใุ ห้เห็นภาพทใ่ี หญ่ กว่าเดมิ เน้นสว่ นรายละเอียดมากขึน้ ตัวอย่างเชน่ ภาพคร่ึงตัว ภาพที่ 3.5 ภาพระยะปานกลาง (Medium Shot: MS) ที่มา : (ภาพโดยผเู้ ขียน, 2564, มกราคม 9) เอกสารประกอบการสอนวิชา การออกแบบและพฒั นาสื่ออิเล็กทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 40 ~ 3.5.5 ภาพระยะปานกลางใกล้ (Medium Close Up Shot: MCU) คือการถ่ายภาพวัตถุใน ระยะปานกลางท่ีถ่ายเน้นรายละเอียดของวตั ถุให้เขา้ ใกลม้ าอีก ภาพที่ 3.6 ภาพระยะปานกลางใกล้ (Medium Close Up Shot: MCU) ทม่ี า : https://s.studiobinder.com/wp-content/uploads/2019/04/Medium-Close-Up-_- MCU-_-Mission-Impossible-2.jpeg?resolution=1440,1 3.5.6 ภาพระยะใกล้ (Close UP: CU) คือการถ่ายภาพระยะใกล้วัตถุเพ่ือเน้นวัตถุหรือ บางส่วนของวัตถุ ขจัดสิ่งท่ีไม่ต้องการแสดงออกไป ขยายให้เห็นรายละเอียดเฉพาะของวัตถุใหช้ ัดเจน มากขึ้น เชน่ ภาพครึง่ หน้าอก ภาพที่ 3.7 ภาพระยะใกล้ (Close UP: CU) ทีม่ า : https://sites.google.com/site/nannienice265202/_/rsrc/1414655155445/kar- wikheraah-phaphyntr-kar-chi-khnad-phaph/close-up-cu/Close%20up1.jpg 3.5.7 ภาพระยะใกล้มาก (Extreme Close UP: ECU) คอื การถา่ ยภาพทีเ่ น้นใหเ้ หน็ ส่วนใด สว่ นหน่งึ ของวัตถุอยา่ งชดั เจน เชน่ นัยน์ตา เพือ่ แสดงอารมณ์ของผูท้ ่ีอยู่ในภาพ เอกสารประกอบการสอนวชิ า การออกแบบและพัฒนาสอื่ อเิ ล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 41 ~ ภาพท่ี 3.8 ภาพระยะใกลม้ าก (Extreme Close UP: ECU) ทมี่ า : https://sites.google.com/site/nannienice265202/_/rsrc/1414655568677/kar- wikheraah-phaphyntr-kar-chi-khnad-phaph/extreme-close-up-xcu-ecu/Extreme- Close%20up%201.jpg 3.6 ขนั้ ตอนการสร้างโครงร่างเรอื่ งราว การจัดทาโครงร่างเร่ืองราวหรือสตอรีบอร์ดมีกระบวนการและข้ันตอนในการสร้างที่เป็น ลาดับขั้น เพ่ือให้การผลิตเป็นไปอย่างถูกต้อง ประกอบไปด้วย 6 ข้ันตอน คือ การวางโครงเรื่อง การ ลาดับเหตุการณ์ การกาหนดจานวนหน้าของโครงร่างเร่ืองราว การแต่งบทบรรยายหรือบทสนทนา การสร้างโครงร่างเรื่องราว และการตรวจสอบความถูกต้องโดยผู้เชี่ยวชาญด้านเนื้อหา แต่ละข้ันจะมี กระบวนการดังต่อไปนี้ 3.6.1 การวางโครงเรอ่ื ง มีความสาคญั มาก เพราะเปน็ เค้าโครงความคดิ หรือแผนผงั ทีจ่ ะบอก ว่างานช้นิ นี้จะส่อื ถงึ อะไร การวางโครงเรื่องทีด่ จี ะเปน็ การชว่ ยเสรมิ สรา้ งใหเ้ น้ือเร่ืองนา่ สนใจมากย่ิงข้ึน ทาให้ทางานได้ง่ายข้นึ เนอื้ หาของเรื่องราวทตี่ ้องการจะส่ือจะไมห่ ลงประเดน็ ส่วนประกอบสาคัญของ โครงเรื่องคือ ช่ือเรื่อง ส่วนนาเร่ือง ขอบเขตของเนื้อหา ประเด็นหลักของเรื่อง ประเด็นย่อย และ บทสรุปของเร่ืองราวท้ังหมด 3.6.2 การลาดับเหตุการณ์ก่อน-หลัง การลาดับเหตุการณ์หรือการลาดับภาพ เป็นขั้นตอนใน การจาลองเหตุการณ์ท่ีจะเกิดข้ึนต้ังแต่ต้นจนจบ เช่น ใคร ทาอะไร ท่ีไหน อย่างไร การเขียนลาดับ เหตุการณ์โดยละเอียดจะทาให้ทีมผลิตมองเห็นปัญหาในเบ้ืองต้น และเตรียมการแก้ปัญหาที่อาจ เกิดข้ึนได้ ควรระมัดระวังในเร่ืองของเน้ือหาความถูกต้อง หากลาดับเร่ืองราวชัดเจน จะส่งผลให้ กระบวนการผลิตทางานได้ง่าย และมีข้อผิดพลาดน้อยลง การสื่อสารภายในทีมงานคล่องตัวขึ้น ลด ปัญหาการทางานซ้าซ้อน 3.6.3 การกาหนดจานวนหน้าของโครงร่างเร่ืองราว ก่อนที่จะเริ่มสร้างโครงร่างเร่ืองราว ให้ ทาการเตรียม Template Storyboard หรือเตรียมกระดาษเปล่า จานวนของกรอบสี่เหลี่ยมไม่มีการ เอกสารประกอบการสอนวิชา การออกแบบและพัฒนาสอ่ื อเิ ลก็ ทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 42 ~ กาหนดตายตัว ขึ้นอยู่กับความถนัดของผู้วาด และปริมาณของเน้ือหาของเร่ืองราวท่ีต้องการนาเสนอ หากเรือ่ งราวที่ต้องการนาเสนอมีความซบั ซ้อนมาก ควรจัดเรยี งและใส่หมายเลขในการลาดับเรื่องราว ให้ชดั เจน หมายเลขในโครงรา่ งเร่ืองราวจะเป็นการกาหนดลาดับในการถา่ ยทาวิดีโอ ทาให้ทางทีมงาน ได้ทราบจานวนฉากท่ีต้องการถ่ายทาท้ังหมด และเมื่อถึงขั้นตอนการตัดต่อวิดีโอจะสามารถทางานได้ สะดวกมากยง่ิ ข้ึน 3.6.4 การแตง่ บทบรรยายหรือบทสนทนา การผลิตวีดทิ ัศนห์ รือส่ือไมว่ ่าจะสร้างในรูปแบบใด ก็ตาม หากมีบทบรรยายหรือบทสนทนาอยู่ในเน้ือเร่ืองด้วย ควรเขียนบทบรรยายหรือบทสนทนาโดย ละเอียด และควรตรวจสอบในเรื่องของการอ่านออกเสียงให้ถูกต้อง จุดไหนที่มีความเส่ียงควรทาการ บนั ทกึ ไวใ้ นช่องหมายเหตุ เพอ่ื ใหส้ ังเกตไดง้ า่ ยสาหรับการตรวจสอบความถกู ต้องของเน้ือหาทั้งหมด 3.6.5 การสร้างโครงร่างเรื่องราว หรือการสร้างสตอรีบอร์ดเป็นการสร้างขึ้นมาเพื่อร่างภาพ ลงไปตามลาดับขั้นตอนของเร่ืองตั้งแต่ต้นจนจบ เพื่อให้มองเห็นภาพรวมของงานทั้งหมดท่ีกาลงั จะลง มือทา หากมีข้อผิดพลาดหรือสิ่งท่ีจะต้องแก้ไข ก็จะสามารถปรับปรุงเปล่ียนแปลงได้ สตอรีบอร์ดจะ เป็นตัวกาหนดการทางานในข้ันตอนอ่ืน ๆ ไปในตัว ลักษณะของการวาดภาพในโครงร่างเรื่องราวมี 2 แบบ คอื 3.6.5.1 การวาดแบบครา่ ว ๆ เป็นการกาหนดกรอบและแนวความคดิ โครงสรา้ งของ เรื่องท้ังหมดเพ่ือเสนอกับทีมผเู้ กี่ยวข้อง ในขั้นตอนนี้ไม่จาเป็นต้องวาดให้สวยงาม เพียงแค่ว่าให้เข้าใจ ไดว้ ่ามฉี ากอะไรบ้าง ลักษณะของมุมภาพเป็นแบบไหน ช่วยให้เห็นภาพท่ีมาจากจนิ ตนาการให้ออกมา เป็นรูปธรรม และช่วยสร้างใหเ้ กิดความเข้าใจให้ตรงกันภายในทีมงาน จนกระท่ังสามารถนาไปพฒั นา ต่อได้ การวาดแบบคร่าว ๆ เหมาะสาหรับงานวีดทิ ัศน์ท่วั ไปท่ีมเี นือ้ หาไมซ่ บั ซ้อน 3.6.5.2 การวาดแบบละเอียด การสร้างสตอรีบอร์ดที่มีเน้ือหาซับซ้อนควรวาดแบบ ละเอียด โดยจาลองมุมการถ่ายทาให้เสมือนจริง และเรียงลาดับการนาเสนอภาพให้ชัดเจน เป็นการ ตรวจสอบความถูกต้องเบ้ืองต้น รายละเอียดของนักแสดงหลักที่ต้องมีการสวมใส่เสื้อผ้าที่มีลักษณะ พิเศษ หรือเคร่ืองมือท่ีมีลักษณะเฉพาะเจาะจง สตอรีบอร์ดแบบละเอียดจะทาให้ตรวจสอบได้ง่าย หากมจี ดุ ไหนทีต่ อ้ งระวังเปน็ พิเศษ ทางทีมงานจะได้เตรยี มความพร้อมก่อนเร่ิมดาเนนิ การถ่ายทา 3.6.6 การตรวจสอบความถูกต้องโดยผู้เช่ียวชาญด้านเนื้อหา ผู้เชี่ยวชาญในการประเมิน คุณภาพจะต้องเป็นผู้มีความรู้ทางการแพทย์เป็นอย่างดี มมีประสบการณ์ในเรื่องท่ีเกี่ยวข้อง สามารถ ให้คาปรึกษาในรายละเอียด ลาดับความยากง่ายและความต่อเน่ืองของเน้ือหาได้ หากมีเน้ือหาท่ี เกี่ยวข้องกับผู้ท่ีป่วย เด็ก หรือพิการ ควรปรึกษานักกฎหมายเพื่อทาบันทึกยินยอมให้ใช้ภาพก่อนเร่ิม ถ่ายทาวิดีทัศน์ เพือ่ ปกปอ้ งสทิ ธิใหก้ บั ผปู้ ว่ ย ปอ้ งกนั ปญั หาทอ่ี าจจะเกดิ ขึ้นตามมาในภายหลัง เอกสารประกอบการสอนวชิ า การออกแบบและพฒั นาสื่ออิเลก็ ทรอนิกส์ CE58609

~ 43 ~ 3.7 โครงรา่ งเร่ืองราวสาหรับส่อื อเิ ล็กทรอนกิ ส์ ในการออกแบบสื่ออิเล็กทรอนิกส์ มีความจาเป็นที่ผู้พัฒนาจะต้องออกแบบโครงร่างเร่ืองราว สาหรับสื่ออิเล็กทรอนิกส์เพ่ือเป็นการประหยัดเวลาในการทางาน โดยโครงร่างเร่ืองราวสาหรับส่ือ อิเล็กทรอนิกส์จะออกแบบได้ง่ายกว่า ไม่ซับซ้อนเหมือนภาพยนตร์ เน่ืองจากการนาเสนอสื่ออิเล็ก ทรอกนกิ ส์ จะมลี กั ษณะนาเสนอทลี ะหน้าจอ โดยมรี ูปแบบการนาเสนอดงั น้ี 3.7.1 แบบเชงิ เส้น (Linear Progression) เปน็ รปู แบบการนาเสนอคล้ายกบั หนา้ หนังสือ โดย แต่ละเฟรมจะเรียงลาดับกันไปตั้งแต่เฟรมเร่ิมต้นจนถึงเฟรมสุดท้าย มีลักษณะการนาเสนอแบบ Guide Tour ท่ีใช้ข้อความเป็นหลักในการดาเนินเร่ือง แต่ก็สามารถใส่ ภาพน่ิง เสียง ภาพเคลื่อนไหว และภาพวดิ ีทศั น์ลงไปได้ มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง 12 3 4 5 ภาพที่ 3.9 รูปแบบการนาเสนอแบบเชงิ เสน้ ทีม่ า : (หัสนัย ริยาพันธ์, มปป) 3.7.2 แบบอิสระ (Perform Hyperjumpping) เป็นรูปแบบการนาเสนอท่ีผู้ใช้สามารถข้าม ไปมาระหว่างเฟรมใดเฟรมหนึ่งได้โดยอิสระ วิธีการนาเสนอในรูปแบบนี้ต้องระมัดระวังไม่ให้การข้าม ไปมาเกิดการหลงทาง นับเป็นจุดอ่อนประการสาคัญของรูปแบบนี้ รูปแบบอิสระจึงเหมาะสาหรับ ข้อมูลที่มีความสัมพันธ์กัน ผู้ออกแบบจะต้องวิเคราะห์ข้อมูลทั้งหมดก่อนที่จะนาเสนอและจะต้องมี แผนการนาเสนอทีช่ ัดเจน 24 13 5 7 6 ภาพท่ี 3.10 รูปแบบการนาเสนอแบบอสิ ระ ทม่ี า : (หสั นยั ริยาพันธ์, มปป) เอกสารประกอบการสอนวชิ า การออกแบบและพัฒนาสอื่ อเิ ลก็ ทรอนกิ ส์ CE58609

~ 44 ~ 3.7.3 แบบวงกลม (Circular Paths) การนาเสนอในรูปแบบวงกลมประกอบด้วยการนาเสนอ แบบเชิงเส้นชุดเล็ก ๆ จานวนหลายชุดเช่ือมต่อกันเป็นชุดใหญ่ที่ทางานคล้ายกับวงกลมซ่ึงหมายถึง เป็นการวนครบรอบโดยอาจจัดไวเ้ ปน็ กลุ่มเดยี วกันในรายการให้เลอื กของโปรแกรมก็ได้ ดังนั้นรายการ ให้เลือกจึงเป็นจุดที่รวมเฟรมการนาเสนอหลาย ๆ ชุดเข้าด้วยกัน รูปแบบน้ีเหมาะสาหรับข้อมูลท่ี สัมพนั ธใ์ นแตล่ ะส่วนย่อย ๆ แต่จาแนกออกเปน็ หลายหวั ข้อ มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง เมนู ภาพที่ 3.11 การนาเสนอแบบวงกลม ทีม่ า : (หสั นัย ริยาพนั ธ์, มปป) 3.7.4 แบบฐานข้อมูล (Database) เป็นรูปแบบการนาเสนอท่ีใช้หลักการจัดการฐานข้อมูล เป็นหลัก โดยใช้ดัชนีคาเป็นตัวค้นหาข้อมูลที่เกี่ยวข้องซ่ึงจะเช่ือมโยงไปยังข้อความ ภาพนิ่ง ภาพเคล่ือนไหวหรือเสียง จึงเหมาะสาหรับการนาเสนอพจนานุกรมศัพท์ ในปัจจุบันมีการพัฒนา โปรแกรมหรือเคร่ืองมือท่ีใช้ค้นหาข้อมูลจากฐานข้อมูล โดยใช้ดัชนีคาส่ังซึ่งเรียกเคร่ืองมือเหล่านี้ว่า Search Engine Text Image Index Animation Sound ภาพที่ 3.12 การนาเสนอแบบฐานขอ้ มลู ท่มี า : (หสั นยั รยิ าพนั ธ์, มปป) เอกสารประกอบการสอนวชิ า การออกแบบและพฒั นาสอ่ื อิเล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 45 ~ 3.7.5 แบบผสม (Compound) เป็นรูปแบบท่ีนาเอาจุดเด่นของแต่ละรูปแบบมาผสมผสาน กนั ขน้ึ อยูก่ ับผ้อู อกแบบระบบงานว่าจะยึดรูปแบบใดเป็นโครงสรา้ งหลกั และรูปแบบใดเปน็ โครงสร้าง รอง ซึ่งอาจกล่าวได้ว่าเป็นรูปแบบท่ีใช้แพร่หลายมากท่ีสุด เนื่องจากสามารถประยุกต์ใช้งานได้ หลากหลาย 3.8 การเขียนโครงรา่ งเรื่องราวสาหรับสื่ออิเล็กทรอนิกส์ สาหรับส่ืออิเล็กทรอนิกส์ จะมีการเขียนโครงร่างเร่ืองราวท่ีไม่ซับซ้อนเท่ากับการผลิตวีดิทศั น์ เนื่องจาก สว่ นประกอบของสอื่ อิเลก็ ทรอนกิ ส์ มี 8 ข้อ ดงั นี้ 3.8.1 สว่ นนา (Title) เป็นส่วนนาเสนอชอื่ เรอ่ื งของบทเรียนนั้น ๆ โดยเนน้ สรา้ งความนา่ สนใจ และดึงดูดใจด้วยข้อความสั้น ๆ ภาพเคลื่อนไหว เสียง และสีสัน เพื่อเร่งเร้าให้ผู้เรียนกระตือรือร้นใน การเรยี นรู้ ภาพที่ 3.13 แสดงสว่ นนาเข้าสูบ่ ทเรียน ที่มา : (ภาพโดยผู้เขียน, 2564, มีนาคม 9) 3.8.2 ส่วนช้ีแจงบทเรียน (Introduction) เป็นส่วนท่แี จ้งใหผ้ ู้เรียนทราบถึงวธิ ีการใช้บทเรียน และการควบคุมบทเรียน เชน่ การใช้ป่มุ แป้นพิมพ์ การคลกิ เลือกรายการต่าง ๆ เป็นตน้ ภาพที่ 3.14 แสดงส่วนช้แี จงบทเรียน ทม่ี า : (ภาพโดยผ้เู ขยี น, 2564, มีนาคม 9) เอกสารประกอบการสอนวชิ า การออกแบบและพฒั นาส่ืออเิ ลก็ ทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 46 ~ 3.8.3 ส่วนแจ้งวัตถุประสงค์การเรียนเรียนรู้ (Objectives) เป็นส่วนสาหรับแจ้งวัตถุประสงค์ ของบทเรียนเพื่อให้ผู้เรียนทราบเป้าหมายของการเรียนในครั้งน้ัน ซึ่งเขียนอยู่ในรูปของวัตถุประสงค์ เชิงพฤตกิ รรมท่ีสามารถวัดและประเมินผลได้อยา่ งชัดเจน และสอดคล้องกบั เน้ือหาที่จะนาเสนอ ภาพที่ 3.15 แสดงสว่ นแจง้ วตั ถุประสงค์การเรยี นเรยี นรู้ ทม่ี า : (ภาพโดยผู้เขยี น, 2564, มีนาคม 9) 3.8.4 ส่วนเมนูเน้ือหา (Menu) ทาหน้าที่เช่ือมโยงเนื้อหาย่อยบทต่าง ๆ ทั้งหมดในบทเรียน เพื่อให้ผู้เรียนได้มีโอกาสเลือกเรียนตามความสนใจก่อนหรือหลังได้ตามความต้องการ โดยอาจใช้ ข้อความ หรือภาพประกอบท่ีสื่อความหมายเกีย่ วกับเรื่องนน้ั ๆ ภาพที่ 3.16 ภาพแสดงส่วนเมนเู นอ้ื หา ที่มา : (ภาพโดยผู้เขยี น, 2564, มนี าคม 9) 3.8.5 ส่วนเน้ือหา (Content) เป็นหัวใจสาคัญของบทเรียนอิเล็กทรอนิกส์ โดยอาศัยการ นาเสนอทชี่ ่วยให้ผู้เรียนเข้าใจไดง้ ่าย อาจใช้ภาพกราฟิก ตาราง ภาพเคลื่อนไหว เสยี ง หรือวีดิทศั น์เข้า เอกสารประกอบการสอนวชิ า การออกแบบและพัฒนาสื่ออเิ ลก็ ทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 47 ~ มาประกอบ โดยเฉพาะเน้ือหาท่ีมีความซับซ้อนหรือยากแก่การเข้าใจ อาจใส่เสยี งบรรยายประกอบลง ไปด้วย ภาพที่ 3.17 ภาพแสดงสว่ นเมนูเน้อื หา ทม่ี า : (ภาพโดยผู้เขียน, 2564, มนี าคม 9) 3.8.6 ส่วนแบบฝึกหัด (Practice) เป็นส่วนสาหรับการทบทวนความรู้ท่ีผู้เรียนได้ศึกษาจาก บทเรียน โดยมีการนาเสนอในหลากหลายรูปแบบ เช่น มีสถานการณ์จาลอง การเล่นเกม การทา แบบฝึกหัดประเภทจับคู่ แบบฝึกหัดแบบตัวเลือก เป็นต้น ท้ังน้ีต้องมีผลย้อนกลับทันทีเพ่ือเป็นการ เสรมิ แรงให้กับผเู้ รียน และทาใหผ้ ู้เรียนสนใจมากข้นึ ภาพท่ี 3.18 แสดงส่วนเมนูแบบฝึกหัด ท่มี า : (ภาพโดยผู้เขียน, 2564, มีนาคม 9) 3.8.7 ส่วนสรุปบทเรียน (Summary) เป็นการสรุปเนื้อหาในประเด็นสาคัญเพื่อให้ผู้เรียน จดจาเน้อื หาสว่ นนั้นไปใช้งานต่อไป ในกรณีทผ่ี ู้เรียนประสบปัญหาในการเรียน เชน่ ทาแบบทดสอบไม่ เอกสารประกอบการสอนวชิ า การออกแบบและพฒั นาส่อื อิเล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 48 ~ ผ่านเกณฑ์บทเรียนอาจให้หน้าเนื้อหาเพิ่มเติมหรือใช้ส่ืออย่างอื่นเพ่ือช่วยเหลือและแนะแนวทางการ เรียนรู้ให้แก่ผู้เรยี นได้ปรับความรคู้ วามเข้าใจกอ่ นทจี่ ะเข้าสู่เนือ้ หาช่วงตอ่ ไปได้ 3.8.8 ส่วนแบบทดสอบ (Test) เป็นส่วนท่ีใช้วัดผลการเรียนรู้ด้านต่าง ๆ ตามวัตถุประสงค์ท่ี กาหนดไว้ หลงั จากผู้เรยี นได้ศกึ ษาเนื้อหาบทเรยี นจบแลว้ มกี ารวัดและประเมนิ ผลโดยรวมของเน้ือหา ทัง้ บทเรียน ซึง่ เรียกวา่ แบบทดสอบหลงั เรียน (Post-Test) สว่ นใหญ่ใช้เปน็ แบบทดสอบแบบตัวเลือก หรือจบั คู่ ภาพท่ี 3.19 แสดงสว่ นแบบทดสอบ ท่ีมา:http://www.caiprofess.com/images/%E0%B8%82%E0%B9%89%E0%B8%AD10.JPG การเขียนโครงร่างเร่ืองราวสาหรับส่ืออิเล็กทรอนิกส์ผู้ออกแบบต้องเขียนรายละเอียดลงใน โครงร่างเร่ืองราวของบทเรียนแต่ละเฟรมตั้งแต่เฟรมแรกจนถึงเฟรมสุดท้าย เพื่อจะแสดงให้เห็นว่า ต้องการนาเสนอเฟรมนั้นด้วยวิธีการใด โดยระบุรายละเอียดของข้อความและลักษณะของภาพ และ เง่ือนไขต่าง ๆ ในเฟรมน้ัน เช่น หากนาเสนอด้วยข้อความ และภาพนิ่ง ต้องระบุด้วยว่าข้อความเขียน ว่าอย่างไร ขนาดเท่าไร ภาพประกอบเป็นภาพอะไร และอยู่ตาแหน่งใดของหน้าจอ หรือถ้านาเสนอ เปน็ ภาพเคล่ือนไหว (Animation) ต้องระบุว่ามีการเคล่ือนไหวจากส่วนไหนไปสว่ นไหนของหน้าจอ มี การปฏิสัมพันธ์หรือการโต้ตอบกับผู้เรียนอย่างไร สีพ้ืนหลังใช้สีหรือภาพอะไร เป็นต้น วิธีเขียนโครง ร่างเรื่องราวอาจใช้การเขียนหรือวาดด้วยมือ หรืออาจใช้การวาดจากโปรแกรมคอมพิวเตอร์ขึ้นอยู่กับ ความถนดั ของผู้ออกแบบ ดงั ตวั อย่าง เอกสารประกอบการสอนวิชา การออกแบบและพัฒนาสอ่ื อเิ ล็กทรอนิกส์ CE58609

~ 49 ~ ตารางท่ี 3.1 แสดงข้อมูลในโครงรา่ งเร่ืองราวแต่ละเฟรม เฟรมท่ี ข้อความ ภาพ/สีพน้ื หลงั เสียง การตอบสนอง 1 ยนิ ดตี ้อนรับเขา้ สู่ บทเรยี น  ตัวอักษรสีขาว เสยี งบรรยาย ภาพคอ่ ย ๆ อิเล็กทรอนิกส์ เร่ือง คา  พื้นหลังสเี ขยี วออ่ น ตามข้อความ ปรากฏบน สรรพนาม หนา้ จอ มปี ุ่ม มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง สาหรบั คลกิ ไป หน้าต่อไป 2 แบบทดสอบก่อนเรียน ตวั อกั ษรสีขาว มเี สียงเมื่อ คลกิ ป่มุ เพ่ือ เน้ือหาบทเรยี น ออกแบบเป็นปุ่มอยู่บน คลิกปุ่ม เลอื กเมนูไปยัง แบบทดสอบหลังเรียน พื้นหลังสีเขียว เนื้อหาส่วนตา่ ง ออกจากบทเรียน ๆ 3 แบบทดสอบก่อนเรยี น  ตัวอักษรสขี าว อ่านโจทย์ จานวน 20 ขอ้  พื้นหลงั สีเขยี วออ่ น ตาม เปน็ ปมุ่ กด  Feed back เ ป็ น แบบทดสอบ สาหรบั ข้อสอบ สญั ลักษณ์ ถกู -ผิด ชนิดเลือกตอบ สามารถนามาสรา้ งเปน็ โครงรา่ งเรือ่ งราวไดด้ งั น้ี Subject การทางานแบบลาดับ Frame No…………… Screen Layout Media Background : เป็นภาพวิว ภูเขา สีเขียว สบายตา มี ภ า พ ก ร า ฟิ ก รู ป ก า ร์ ตู น ประกอบในภาพ Text : บทเรียนคอมพิวเตอร์ บนอปุ กรณเ์ คล่อื นท่ี เร่อื ง การ ทางานแบบลาดบั Sound : บ ร ร ย า ย ต า ม ข้อความทกี่ าหนด Button : Start ภาพท่ี 3.20 แสดงตวั อย่างของการทาโครงรา่ งเรื่องราวในแตล่ ะเฟรม ท่ีมา : (ภาพโดยผเู้ ขียน, 2564, มีนาคม 9) เอกสารประกอบการสอนวชิ า การออกแบบและพัฒนาสอ่ื อเิ ลก็ ทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 50 ~ 3.9 สรปุ โครงร่างเรื่องราวหรือสตอรีบอร์ด (Storyboard) เปรียบเสมือนสื่อกลางทาให้ทุกฝ่ายเห็น ภาพท่ีตรงกันก่อนการผลิตสือ่ เช่น วีดิทัศน์ ส่ือประกอบการเรียนการสอน หรือบทเรียนคอมพิวเตอร์ ช่วยสอน หลักการเขียนโครงร่างเร่ืองราวต้องไม่ลืมสิ่งสาคัญที่อยู่ภายในโครงร่างเร่ืองราวนั้น ๆ เช่น ตัวละครหรือฉากต่าง ๆ มุมกล้อง และบทสนทนาหรือบทบรรยาย ผู้ที่จะเขียนโครงร่างเร่ืองราวได้ดี จะต้องทราบลักษณะของภาพพ้ืนฐานในโครงร่างเรื่องราว เช่น ภาพระยะไกลมาก (Extreme Long Shot: ELS) ภาพระยะไกล (Long Shot: LS) ภาพระยะไกลปานกลาง (Medium Long Shot: MLS) ภาพระยะปานกลาง (Medium Shot: MS) ภาพระยะปานกลางใกล้ (Medium Close Up Shot: MCU) ภาพระยะใกล้ (Close UP: CU) ภาพระยะใกล้มาก (Extreme Close UP: ECU) เพราะ ลักษณะของภาพแต่ละประเภทจะให้อารมณ์และความรู้สึกท่ีแตกต่าง ๆ กัน การจัดทาโครงร่าง เรื่องราวหรือสตอรีบอรด์ มีกระบวนการและขน้ั ตอนในการสร้างที่เป็นลาดบั ข้ัน เพอ่ื ให้การผลิตเป็นไป อย่างถูกต้อง ประกอบไปด้วย 6 ข้ันตอน คือ การวางโครงเร่ือง การลาดับเหตุการณ์ การกาหนด จานวนหน้าของโครงร่างเร่ืองราว การแตง่ บทบรรยายหรอื บทสนทนา การสร้างโครงร่างเรื่องราว และ การตรวจสอบความถูกตอ้ งโดยผเู้ ชี่ยวชาญด้านเน้ือหา 3.10 แบบฝึกหดั ท้ายบท 3.10.1 โครงร่างเร่อื งราว หรือ สตอรบี อร์ด (Storyboard) คอื อะไร 3.10.2 จงอธิบายลกั ษณะของภาพพ้นื ฐานแตล่ ะประเภทในโครงร่างเรอื่ งราว 3.10.3 ขัน้ ตอนการสร้างโครงรา่ งเรือ่ งราว ประกอบไปด้วยอะไรบา้ ง จงอธิบายมาเป็นขอ้ ๆ 3.10.4 สว่ นประกอบของส่อื อิเล็กทรอนิกส์ มีอะไรบ้าง 3.10.5 จงออกแบบโครงร่างเรอ่ื งราวสาหรับสอื่ อเิ ล็กทรอนิกส์ท่นี ักเรียนสนใจจะพฒั นา ตาม ส่วนประกอบของส่อื อิเล็กทรอนิกส์ เอกสารประกอบการสอนวชิ า การออกแบบและพฒั นาสือ่ อิเล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 51 ~ 3.11 เอกสารอา้ งองิ กวิศรา เอ่ียมบรรณพงษ์, จฑุ ารตั น์ ลมิ ปาภนิ ันท์ และปรัชญนนั ท์ นลิ สุข. (2563). การสร้างสตอร่ี บอรด์ (Story Board) สาหรับผลิตวดี ิทศั น์ทางการแพทย์. เวชบันทึกศิรริ าช.13(2), 141- 147. สไุ ม บิลไบ. (2559). การออกแบบและพฒั นาสื่อบทเรยี นคอมพิวเตอร์ช่วยสอน. สบื คน้ เมอ่ื 9 กนั ยายน 2564, จาก https://drsumaibinbai.files.wordpress.com/2016/09/cai- design.pdf หน่ึงฤทยั โพตุน่ . (มปป.) การเขียน Storyboard. สืบค้นเมือ่ 9 กนั ยายน 2564, จาก https://krunueng1.wordpress.com/บทเรียน/วิชาโปรแกรมนาเสนอข้อมู/หน่วยท่ี-7- การเขยี น-storyboard/ หสั นัย ริยาพนั ธ์. (มปป.). ส่ือมลั ตมิ เี ดียเพือ่ การเรยี นการสอนและการฝึกอบรมทางไกล. สบื ค้นเม่อื 9 กนั ยายน 2564, จาก https://www.stou.ac.th/offices/Oce/publication/pr3/pr%20117561.pdf อุทิศ แจ้งถิ่นป่า. (2556). การเขียน Story Board. สืบค้นเมื่อ 10 กนั ยายน 2564, จาก https://kruuthit.wordpress.com/2013/02/09/การเขียน-story- board/ เอกสารประกอบการสอนวชิ า การออกแบบและพฒั นาสอ่ื อเิ ลก็ ทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 52 ~ แผนบรหิ ารการสอนประจาบทที่ 4 หวั ข้อเนอื้ หา 1. ขอ้ มลู เบ้ืองตน้ ของการเกดิ ภาพ 2. ความละเอยี ดของจอภาพ 3. ประเภทของจอภาพ 4. การใช้สใี นการออกแบบ 5. การออกแบบหน้าจอส่ืออเิ ลก็ ทรอนิกส์ วตั ถุประสงค์เชงิ พฤติกรรม เมอ่ื นักศกึ ษาเรียนบทน้ีแล้ว 1. นักศกึ ษาสามารถอธบิ ายข้อมลู เบื้องตน้ ของการเกดิ ภาพได้ 2. นกั ศกึ ษาสามารถจาแนกหรอื บอกความแตกตา่ งของความละเอียดของจอภาพได้ 3. นกั ศกึ ษาสามารถแยกประเภทของจอภาพได้ 4. นกั ศึกษาสามารถเลือกใช้สีในการออกแบบได้ 5. นกั ศึกษาสามารถออกแบบหนา้ จอสือ่ อเิ ล็กทรอนิกส์ด้วยโปรแกรม Adobe Flash CS6 ได้ วิธสี อนและกจิ กรรมการเรียนการสอน 1. วิธีสอน 1.1 การบรรยายประกอบสไลด์ 1.2 การแสดงตัวอยา่ งประกอบการบรรยาย 2. กจิ กรรมการเรยี นการสอน 2.1 การคน้ ควา้ โดยอสิ ระ 2.2 การตอบคาถาม 2.3 การทาแบบฝึกหดั ทา้ ยบท ส่ือการเรียนการสอน 1. สไลดป์ ระกอบการบรรยาย 2. เอกสารประกอบการสอนรายวิชาการออกแบบและพฒั นาสอ่ื อิเลก็ ทรอนิกส์

~ 53 ~ การวัดผลและการประเมินผล 1. การสังเกตพฤติกรรม 2. การประเมนิ ผลจากการสง่ งานเขา้ สูห่ ้องเรียนเสมอื น Google Classroom 3. การประเมินจากการทาแบบฝกึ หัดท้ายบท มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง บทที่ 4 การออกแบบสอื่ อเิ ล็กทรอนกิ ส์ ในการพัฒนาส่ืออิเล็กทรอนิกส์จาเป็นต้องมีซอฟต์แวร์ที่มีความสามารถในการออกแบบและ พัฒนาส่ือมาเป็นเครื่องมือช่วยในการพัฒนา โปรแกรม Adobe Flash CS6 มีความโดดเด่นในการ สร้างงานท่ีมีปฏิสัมพันธ์ และงานอนิเมชัน อีกทั้งยังสามารถพัฒนาแอปพลิเคชันสาหรับนาไปใช้งาน บนอปุ กรณอ์ ิเล็กทรอนิกส์ เชน่ คอมพิวเตอร์ โทรศัพทม์ ือถือสมาร์ทโฟน และแทบ็ เลต็ ได้ โดยอปุ กรณ์ ดังกล่าวสามารถรองรับการแสดงผลของมัลติมีเดีย อาทิ ภาพ เสียง ตัวอักษร ภาพเคล่ือนไหว และ วิดีโอที่จาเป็นในการพัฒนาส่อื ได้ ดังน้ันก่อนที่จะพัฒนาสื่อสาหรับใช้งานบนอุปกรณ์อิเล็กทรอนิกสจ์ ึง มีความจาเป็นต้องศึกษาข้อมูลท่ีเกี่ยวข้องกับการเกิดภาพ ความละเอียดของจอภาพ ขนาดของ จอภาพ ทฤษฎที ีเ่ ก่ยี วกับการใช้สแี ละการออกแบบ เป็นต้น 4.1 ข้อมูลเบ้อื งตน้ ของการเกิดภาพ ก่อนท่ีจะกล่าวถึงเรื่องความละเอียดของจอภาพต้องทาความรู้จักกับคาว่า พิกเซล (Pixel) เสียก่อน โดย พิกเซล นั้นมาจากคาว่า picture (ภาพ) กับคาว่า Element (พื้นฐาน) ซึ่งก็คือ หน่วย พ้ืนฐานซึ่งเล็กท่ีสดุ ของภาพดิจติ อล อธิบายให้เข้าใจได้ง่ายๆ ก็คือ การเทียบได้กับจุดสีของภาพ 1 จุด สี หลายๆ จุดที่เรียงชิดติดกันทาให้เกิดเป็นภาพน่ันเอง และ 1 พิกเซล (Pixel) นั้นจะเป็นสีใดสีหนึ่ง เพียงสีเดียวเท่าน้ันจะไม่มีสองสีปนกัน เนื่องจากว่า พิกเซล (Pixel) เป็นส่วนที่เล็กที่สุดของการ แสดงผลท่ีออกมาเปน็ ภาพ พิกเซล (Pixel) น้ันมีความสาคัญต่อการสรา้ งภาพกราฟฟิกของคอมพวิ เตอร์มาก เพราะทกุ ๆ ส่วนของภาพกราฟฟิก เช่น จุด เส้น แบบ ลายและสีของภาพ ล้วนเกิดจากพิกเซลท้ังสิ้น อย่างเช่น กล้องถ่ายรูปความละเอียด 5 ล้านพิกเซล น้ันหมายความว่าเมื่อถ่ายภาพที่ความละเอียดสูงสุด (ที่ กล้องตัวนั้น ๆ จะสามารถทาได้) ภาพน้ันจะได้เม็ด พิกเซล (Pixel) 5 ล้านเม็ด หากลองสังเกตไฟล์ ภาพจากหน้าจอคอม หรือโทรศัพท์มือถือดี ๆ เราจะมองเห็นภาพเหล่านั้นมีเม็ดสสี ีเหล่ียมเล็ก ๆ เรยี ง ตอ่ กนั อยูน่ ัน้ คอื พกิ เซล (Pixel) ดังนั้นจึงสามารถสรปุ ได้วา่ หากค่าพกิ เซลสูงมากเท่าไหร่ภาพท่ีได้ก็จะ ยิง่ มีความละเอยี ดสงู มากตามไปด้วย ภาพที่ 4.1 ภาพเมด็ สีของพิกเซล ท่มี า : (Aboveprint, 2560)

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 55 ~ 4.2 ความละเอียดของจอภาพ ความละเอียด หรอื Resolution หมายถงึ จานวนพกิ เซลท่อี ยูใ่ นภาพบนหนา้ จอโทรทัศน์ หรือ หน้าจอคอมพิวเตอร์ ภาพหนึ่งภาพที่ปรากฏบนหน้าจอประกอบด้วยจุดหลายจุดรวมกัน ปัจจุบัน หน้าจอทีวีจะมีจานวนจุดต้ังแต่ 1 ล้านจุด (สาหรับโทรทัศน์ความละเอียด 720p) ไปจนถึง 8 ล้านจุด (สาหรับโทรทัศน์ความละเอียด 4K Ultra HD) ซึ่งเราไม่อาจมองเห็นความแตกต่างได้ด้วยตาเปล่า ดังนั้นความละเอียดของจอภาพจึงเป็นอีกปัจจัยหนึ่งที่มีผลต่อการเลือกซื้อทีวีสมัยใหม่ โดยความ ละเอยี ดของจอภาพทีวนี ้ันจะชว่ ยเพ่ิมอรรถรสในการรับชมทวี ี เพราะย่ิงมีความละเอยี ดสูงมากเท่าไหร่ ภาพทปี่ รากฏบนจอทีวีก็ยิ่งสวยเสมอื นจริงมากยิง่ ขน้ึ 4.2.1 ความละเอียดระดบั HD (1366 x 768 Pixel) เปน็ มาตรฐานความละเอียดของจอภาพ เบ้อื งตน้ นอกจากนีร้ าคาทีวียังไมแ่ พงอกี ด้วย 4.2.2 ความละเอียดระดับ Full HD (1920 x 1080 Pixel) ความละเอียดท่ีได้รับความนิยม อย่างแพร่หลายในปัจจุบัน ช่วยในการดูภาพยนตร์ คอนเทนต์หรือรายการทีวีระบบดิจิทัลได้อย่างเตม็ ประสทิ ธภิ าพ 4.2.3 ความละเอียดระดับ UHD (Ultra High Definition) หรือ 4K มีความละเอียดอยู่ที่ 3840 x 2160 Pixel สูงกว่า Full HD ถึง 4 เท่า ซึ่งประโยชน์ของการแสดงภาพในความละเอียด ระดับน้ี ช่วยให้เราได้ชมภาพที่มีความคมชัดสมจริง และปัจจุบันคอนเทนต์หรอื ภาพยนตรท์ ี่ให้บริการ เป็น 4K มีมากขึน้ เปน็ ลาดบั 4.2.4 ความละเอียดระดับ K TV มาพร้อมความละเอียดสูงสุดถึง 7680 x 4320 Pixel มากกว่าเทคโนโลยีแบบ Full HD ถึง 16 เท่า แต่ต้องยอมรับว่าคอนเทนต์ต่าง ๆ ท่ีมีการถ่ายทาด้วย ความละเอียดสูงขนาดนี้ยังแทบไม่มีให้เห็น และราคาทีวียังค่อนข้างสูงมาก เกินความจาเป็นสาหรับ บ้านพกั อาศัย 4.3 ประเภทของจอภาพ 4.3.1 LCD (Liquid Crystal Display) เป็นเทคโนโลยีแรกๆ สาหรับทีวีจอแบน ใช้หลอดไฟ CCFL (Cold Cathode Fluorescent Lamp) ขนาดเท่าหลอดกาแฟ วางเรียงตัวเป็นแนวนอนอยู่ ภายใต้หน้าจอเป็นตัวก่อกาเนิดแสง (Backlit) ทางานร่วมกับ Color Filter ทั้ง 3 สี ได้แก่ สีแดง น้า เงนิ และเขียว กอ่ นแสดงผลออกมาสีสนั ต่าง ๆ ทเ่ี ห็นบนจอภาพนน่ั เอง เอกสารประกอบการสอนวชิ า การออกแบบและพัฒนาสอื่ อเิ ลก็ ทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 56 ~ ภาพท่ี 4.2 จอภาพแบบแอลซีดี ทีม่ า : http://kymissis.columbia.edu/uploads/2/2/9/4/22948912/published/lcd.jpg?15863046 12 4.3.2 LED (light-emitting diode) เป็นประเภทของทีวียอดนิยมมากที่สุดในตลาด ต่อยอด เทคโนโลยีมาจาก LCD ใช้หลอดไฟ LED ขนาดจิ๋ว 3 สี ได้แก่ สีแดง น้าเงิน และเขียว เป็นตัวกาเนิด แสง แต่กลับให้แสงสว่างไดด้ วี ่า LCD กนิ ไฟนอ้ ยกว่า และตวั เคร่ืองมคี วามบางยง่ิ ข้ึนอกี ด้วย ภาพที่ 4.3 จอภาพแบบแอลอดี ี ท่ีมา : https://cdn.slidesharecdn.com/ss_thumbnails/1306301110232151101- 170319131328-170320102351-thumbnail-4.jpg?cb=1490005547 4.3.3 Plasma TV อีกประเภทของจอทีวี มีเม็ดพิกเซลท่ีสามารถให้กาเนิดแสงได้เองด้วย แรงดันไฟฟ้า แสดงภาพเคลื่อนไหวได้ดี ให้สีดาที่ดาสนิท สีสันมีความเป็นธรรมชาติ มีมิติและมุมมอง ของการแสดงภาพที่กวา้ งกว่า LCD TV แต่กระจกของ Plasma TV จะสะท้อนแสงเม่ือต้ังอยู่ในห้องท่ี มีแสงจ้ามาก ๆ ทาให้ภาพที่ปรากฏบนหน้าจอลดคุณภาพลงไปพอสมควร รวมถึงมีอัตราการกินไฟ มากอกี ด้วย เอกสารประกอบการสอนวิชา การออกแบบและพฒั นาสอ่ื อิเล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 57 ~ 4.3.4 OLED TV (Organic Light Emitting Diodes) เป็นประเภทของทีวีสมัยใหม่ ท่ีเสมือน เป็นการนาจุดแข็งของทีวีแต่ละประเภทมารวมไว้ในที่เดียว เม็ดพิกเซลสามารถให้กาเนิดแสงได้เอง คล้ายกับ Plasma TV ไม่ต้องพึ่งหลอดไฟเหมือน LCD หรือ LED จุดเด่นของจอ OLED คือความบาง และความยืดหยุ่น สามารถพัฒนาหน้าจอให้มีความโค้งได้ กินไฟน้อย แสดงสีสันของภาพได้สม่าเสมอ ไม่ว่าจะมองจากองศาใดก็ตาม ซ่ึงแน่นอนว่าเทคโนโลยีท่ีทันสมัยย่อมตามมาด้วยราคาที่แพงขึ้น Full HD (1920 x 1080 Pixel) ความละเอียดท่ีได้รับความนิยมอย่างแพร่หลายในปัจจุบัน ช่วยในการดู ภาพยนตร์ คอนเทนต์หรอื รายการทีวรี ะบบดิจทิ ัลได้อย่างเต็มประสิทธภิ าพ 4.4 การใช้สีในการออกแบบ สี (COLOUR) หมายถึง ลักษณะกระทบต่อสายตาให้เห็นเป็นสีมีผลถึงจิตวิทยา คือมีอานาจ ให้เกิดความเขม้ ของแสงท่ีอารมณแ์ ละความรสู้ ึกได้ การทไี่ ด้เหน็ สจี ากสายตาสายตาจะส่งความรู้สึกไป ยังสมองทาให้เกิดความรู้สึก ต่าง ๆ ตามอิทธิพลของสี เช่น สดชื่น ร้อน ต่ืนเต้น เศร้า สีมีความหมาย อยา่ งมากเพราะศลิ ปินต้องการใช้สีเปน็ ส่ือสรา้ งความประทบั ใจในผลงานของศลิ ปะ และสะทอ้ นความ ประทับใจนั้นให้บังเกิดแก่ผู้ดูมนุษย์เก่ียวข้องกับสีต่าง ๆ อยู่ตลอดเวลาเพราะทุกสิ่งที่อยู่รอบตัวนั้น ล้วนแต่มีสีสันแตกต่างกันมากมาย สีเป็นสิ่งที่ควรศึกษาเพื่อประโยชน์กับตนเองและ ผู้สร้างงาน จิตรกรรมเพราะ เรอ่ื งราวของสีนน้ั มีหลักวิชาเป็นวทิ ยาศาสตร์จึงควรทาความเข้าใจวิทยาศาสตร์ของสี จะบรรลุผลสาเรจ็ ในงานมากขึ้น ถ้าไม่เข้าใจเรื่องสีดีพอสมควร ถ้าได้ศึกษาเรื่องสีดีพอแล้ว งานศิลปะ ก็จะประสบความสมบูรณ์เป็นอย่างยิ่ง ในการใช้สีสาหรับงานออกแบบน้ัน ข้ึนอยู่กับนักออกแบบว่ามี จุดมุ่งหมายใด ความเร้าใจต่อผลงานเพ่ือให้ผู้ที่ชมผลงานเข้าถึงจุดหมายท่ีต้องการ มีหลักของการใช้ ดังนี้ 4.4.1 วงจรสี (Colour Wheel) วงจรสี คอื สที ี่เกิดจากการผสมกนั เปน็ คู่ เริ่มต้ังแต่ แมส่ ี 3 สี แลว้ เกดิ เป็นสใี หม่ข้ึนมา จนครบวงจร จะไดส้ ที ั้งหมด 12 สี ซงึ่ แบ่งสีเปน็ 3 ขัน้ คือ ภาพที่ 4.4 วงจรสี (Colour wheel) ท่ีมา : https://cdn.beadsandpieces.com/wp-content/uploads/2015/02/19045434/color- wheel.jpg เอกสารประกอบการสอนวิชา การออกแบบและพัฒนาสอ่ื อเิ ลก็ ทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 58 ~ 4.4.1.1 สีขน้ั ที่ 1 (Primary Colours) คอื แมส่ ี 3สี ไดแ้ ก่ สีแดง เหลอื ง และนา้ เงนิ 4.4.1.2 สีขั้นท่ี 2 (Secondary Colours) คอื สีที่เกิดจากการผสมกนั เป็นคู่ ๆ ระหวา่ งแม่สี 3 สี จะไดส้ เี พมิ่ ข้ึนอีก 3สี 4.4.1.3 สีขั้นที่ 3 (Tertiary Colours) คอื สีทเ่ี กดิ จากการผสมกนั เป็นคู่ ๆ ระหวา่ ง แมส่ ี 3 สี กับสขี ัน้ ที่ 2 จะไดส้ ีเพ่มิ ขึ้นอกี 6สี 4.4.1.4 สกี ลาง (Neutral Colour) คอื สที ี่เกิดการผสมสีทุกสี ในวงจรสี หรอื แมส่ ี 3สี ผสมกนั จะไดส้ เี ทาแกส่ ที ้ัง 3ขน้ั เมอื่ นามาจัดอย่เู ปน็ วงจรจะไดล้ ักษณะเปน็ วงลอ้ สี 4.4.2 วรรณะของสี (Tone of Colour) วรรณะสี คือ ความแตกตา่ งของสแี ตล่ ะกล่มุ ในวงจร สีโดยแบง่ ตามความรสู้ ึกดา้ นอุณหภูมิ โดยแบง่ ออกเป็น 2 วรรณะ คือ 4.4.2.1 วรรณะร้อน (warm tone) ซง่ึ ประกอบดว้ ย สีเหลือง สีสม้ สแี ดง สีม่วง สี เหล่านใ้ี ห้อิทธิพลตอ่ ความรสู้ ึก ต่นื เตน้ เร้าใจ กระฉับกระเฉง ถือว่าเป็นวรรณะร้อน 4.4.2.2 วรรณะเยน็ (cool tone) ประกอบด้วย สเี หลอื ง สเี ขียว สีน้าเงิน สมี ว่ ง สี เหลา่ นี้ดู เย็นตา ใหค้ วามรูส้ ึก สงบ สดช่นื (สีเหลืองกับสีมว่ งอยู่ได้ท้ังสองวรรณะ) การใช้สีแต่ละครั้งควรใช้สีวรรณะเดียวในภาพทั้งหมด เพราะจะทาให้ภาพความเป็นอันหนึ่ง อนั เดยี วกัน (เอกภาพ) กลมกลนื มีแรงจงู ใจใหค้ ลอ้ ยตามไดม้ าก 4.4.3 การใช้สีต่างวรรณะ หลักการท่ัวไป ใช้อัตราส่วน 80% ต่อ 20% ของวรรณะสี คือ ถ้า ใช้สวี รรณะร้อน 80% สีวรรณะเย็นก็ 20% ซึง่ การใช้แบบนี้สร้างจุดสนใจของผดู้ ู ไม่ควรใชอ้ ัตราส่วนท่ี เท่ากนั เพราะจะทาใหไ้ มม่ ีสใี ดเดน่ ไม่นา่ สนใจ 4.4.4 การใช้สีตรงกันข้าม สีตรงข้ามจะทาให้ความรู้สึกที่ตัดกันรุนแรง สร้างความเด่น และ เร้าใจได้มากแต่หากใช้ไม่ถูกหลัก หรือ ไม่เหมาะสม หรือใช้จานวนสีมากเกินไป ก็จะทาให้ความรู้สึก พร่ามัว ลายตา ขัดแย้ง ควรใช้สีตรงข้าม ในอัตราส่วน 80% ต่อ20% หรือหากมีพื้นที่เท่ากันที่ จาเปน็ ต้องใช้ ควรนาสีขาว หรือสีดา เข้ามาเสริมเพื่อตดั เส้นใหแ้ ยกออกจากกัน หรอื อีกวธิ ีหนงึ่ คือการ ลดความสดของสตี รงข้ามใหห้ มน่ ลงไป 4.4.5 สีข้างเคียง (Analogous Colour) สีข้างเคียง หมายถึง สีท่ีอยู่เคียงข้างกันทั้งซ้ายและ ขวาในวงจรสี มีความคล้ายคลึงกันหากนามาจัดอยู่ด้วยกันจะมีความกลมกลืนกัน หากอยู่ห่างกันมาก เทา่ ใดความกลมกลืนก็จะย่ิงน้อยลงความขัดแย้งก็จะมีมากขน้ึ ส่วนใหญจ่ ะเปน็ สี ในวรรณะเดียวกัน สี ขา้ งเคยี ง เชน่ สแี ดง - ส้มแดง - สม้ หรือ ม่วงแดง -แดง – ส้มแดง เป็นต้น 4.4.6 ความรู้สึกเกีย่ วกบั สใี นเชิงจิตวทิ ยา เอกสารประกอบการสอนวชิ า การออกแบบและพัฒนาสอ่ื อิเล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 59 ~ ตารางที่ 4.1 ความรูส้ ึกเกย่ี วกบั สใี นเชงิ จติ วิทยา สี ความรูส้ ึกในเชงิ จติ วทิ ยา แดง ให้ความรู้สึกร้อน รุนแรง กระตุ้น ท้าทาย เคล่ือนไหว ตื่นเต้น เร้าใจ มี พลัง ความอุดมสมบรู ณ์ ความม่งั คัง่ ความรกั ความสาคญั อันตราย สม้ ให้ความรู้สึก ร้อน ความอบอุ่น ความสดใส มีชีวิตชีวา วัยรุ่น ความคึก คะนอง การปลดปล่อย ความเปรี้ยว การระวัง เหลือง ให้ความรู้สึกแจ่มใส ความสดใส ความร่าเริง ความเบิกบานสดชื่น ชีวิต ใหม่ ความสด ใหม่ ความสุกสว่าง การแผก่ ระจาย อานาจบารมี เขียว ให้ความรู้สึก สงบ เงียบ ร่มรื่น ร่มเย็น การพักผ่อน การผ่อนคลาย ธรรมชาติ ความปลอดภยั ปกติ ความสขุ ความสุขุม เยอื กเย็น นา้ เงนิ ให้ความรู้สึกสงบ สุขุม สุภาพ หนักแน่น เคร่งขรึม เอาการเอางาน ละเอยี ด รอบคอบ สงา่ งาม มีศกั ดศิ์ รี สงู ศกั ด์ิ เปน็ ระเบยี บถ่อมตน ม่วง ให้ความรู้สึก มีเสน่ห์ น่าติดตาม เร้นลับ ซ่อนเร้น มีอานาจ มีพลังแฝง อยู่ ความรกั ความเศร้า ความผดิ หวงั ความสงบ ความสงู ศักด์ิ ฟา้ ใหค้ วามรู้สึก ปลอดโปร่งโล่ง กวา้ ง เบา โปร่งใส สะอาด ปลอดภยั ความ สวา่ ง ลมหายใจ ความเป็นอิสระเสรีภาพ การช่วยเหลอื แบ่งปัน ขาว ให้ความรู้สึก บริสุทธิ์ สะอาด สดใส เบาบาง อ่อนโยน เปิดเผย การเกิด ความรัก ความหวงั ความจริง ความเมตตา ความศรทั ธา ความดงี าม ดา ใหค้ วามรูส้ ึก มดื สกปรก ลกึ ลับ ความสิน้ หวงั จุดจบ ความตาย ความช่ัว ความลบั ทารณุ โหดร้าย ความเศร้า หนกั แน่น เขม้ เข็ง อดทน มีพลงั ชมพู ให้ความรู้สึก อบอุ่น อ่อนโยน นุ่มนวล อ่อนหวาน ความรัก เอาใจใส่ วัยร่นุ หน่มุ สาว ความนา่ รัก ความสดใส เทา ให้ความรู้สึก เศร้า อาลัย ท้อแท้ ความลึกลับ ความหดหู่ ความชรา ความสงบ ความเงยี บ สุภาพ สุขมุ ถ่อมตน ทอง ให้ความรู้สึก ความหรูหรา โอ่อ่า มีราคา สูงค่า ส่ิงสาคัญ ความ เจรญิ รงุ่ เรอื ง ความสุข ความมง่ั คงั่ ความร่ารวย การแผก่ ระจาย 4.5 การออกแบบหน้าจอส่อื อเิ ล็กทรอนกิ ส์ ในการพฒั นาบทเรยี นอิเล็กทรอนิกสน์ น้ั สามารถใช้ซอฟต์แวร์ในการพฒั นาไดห้ ลายโปรแกรม หนง่ึ ในซอฟต์แวร์ทเี่ ป็นทนี่ ิยมใช้ก็คือโปรแกรม Adobe Flash CS6 โดยมขี ัน้ ตอนสาหรบั การออกแบบ หนา้ จอบทเรยี น ดงั น้ี เอกสารประกอบการสอนวชิ า การออกแบบและพฒั นาส่ืออิเล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 60 ~ 4.5.1 การกาหนดขนาดของหน้าจอส่ืออิเล็กทรอนิกส์ ให้เลือกแพลตฟอร์มที่ต้องการพัฒนา ในทน่ี ใ้ี ห้เลอื กไปที่ Air for Android ภาพท่ี 4.5 หนา้ จอของโปรแกรม Adobe Flash CS6 ทีม่ า : (ภาพโดยผู้เขียน, 2564, มกราคม 7) โดยสามารถสร้างชิ้นงานเพื่อนาไปใช้งานได้กับหลากหลายอุปกรณ์ ในการพัฒนาส่ือ อเิ ล็กทรอนกิ ส์ในเอกสารประกอบการสอนฉบับนี้ เลอื กใชก้ ารพัฒนาสื่ออิเลก็ ทรอนกิ สส์ าหรับนาไปใช้ งานในสมาร์ทโฟนหรือแท็บเล็ตท่ีใช้ระบบปฏิบัติการแอนดรอยด์เป็นหลัก เนื่องจากเป็นอุปกรณ์ท่ีใน ปัจจุบันมีการใช้งานโดยทั่วไป การเริ่มต้นพัฒนาส่ืออิเล็กทรอนิกส์สาหรับนาไปใช้งานกับอุปกรณ์ ดงั กลา่ วสามารถเริ่มตน้ การพฒั นาได้โดยเลือกหัวข้อการออกแบบเปน็ AIR for Android ภาพที่ 4.6 หน้าจอเริม่ ต้นของโปรแกรม Adobe Flash CS6 ทีม่ า : (ภาพโดยผูเ้ ขียน, 2564, มกราคม 7) เอกสารประกอบการสอนวชิ า การออกแบบและพฒั นาส่อื อิเล็กทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 61 ~ ส่วนประกอบของหนา้ จอโปรแกรม ประกอบด้วย ภาพที่ 4.7 สว่ นประกอบของโปรแกรม Adobe Flash CS6 ที่มา : (ภาพโดยผเู้ ขียน, 2564, มกราคม 7) 4.5.1.1 เมนบู าร์ (Menu Bar) เป็นแถบเมนูแสดงรายการคาส่ังต่าง ๆ ของโปรแกรม ทง้ั หมด ไดแ้ ก่ การสร้างชิ้นงาน การสร้างมูฟว่ี รวมไปถงึ การต้งั ค่าตา่ ง ๆ 4.5.1.2 แถบเคร่ืองมือ (Toolbox) แสดงปุ่มเคร่ืองมือชนิดต่าง ๆ ในการสร้าง ปรับแต่ง และแก้ไขชิ้นงาน ท่ีอยู่ใน Movie โดยแบ่งกลุ่มเครื่องมือออกเป็น 4 กลุ่มย่อยคือ กลุ่ม เครอ่ื งมือ กลุ่มมุมมอง กลุ่มกาหนดสี และกลมุ่ ออบช่ันของเคร่ืองมอื ภาพท่ี 4.8 แถบเครอื่ งมือของโปรแกรม Adobe Flash CS6 ท่มี า : (ภาพโดยผู้เขียน, 2564, มกราคม 7) เอกสารประกอบการสอนวิชา การออกแบบและพฒั นาสอ่ื อเิ ล็กทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 62 ~ 4.5.1.3 ไทม์ไลน์ (Timeline) หน้าต่างแสดงเส้นควบคุมเวลาสาหรับการนาเสนอ ผลงาน ประกอบด้วยส่วนทางานเก่ียวกับ Layer และ Timeline ในส่วนของไทม์ไลน์สามารถแบ่ง ออกเปน็ 2 สว่ นใหญ่ ๆ ไดแ้ ก่ 1) สว่ นแสดงเลเยอร์ (Layer) ซง่ึ เปรยี บเสมอื นแผ่นใสทสี่ ามารถวางภาพ หรอื วตั ถุลงไปได้ โดยแตล่ ะเลเยอร์แยกเปน็ อิสระต่อกนั แตป่ ระกอบกันเปน็ ชน้ิ งานเดยี ว 2) สว่ นเฟรม (Frame) ทแี่ สดงในช่องเฟรมตา่ ง ๆ ซ่งึ ทางานเหมือนกบั เฟรม ท่ีประกอบกันเป็นภาพยนตร์ โดยเม่ือมีการนาเฟรมเหล่านี้มาแสดงอย่างต่อเนื่องก็จะทาให้เกิด ภาพเคล่ือนไหว ท้ังน้ีเฟรมจะแสดงผลทีละเฟรม โดยจะมีหัวอ่าน (Playhead) ที่เป็นเส้นสีแดงคอย บอกตาแหนง่ วา่ กาลงั ทางานอยู่ที่เฟรมใด ภาพท่ี 4.9 ไทม์ไลนข์ องโปรแกรม Adobe Flash CS6 ที่มา : (ภาพโดยผเู้ ขียน, 2564, มกราคม 7) จะพบกับหน้าแรกสาหรับการออกแบบสื่ออิเล็กทรอนิกส์เพ่ือนาไปใช้งานบนอุปกรณ์สมาร์ท โฟนหรือแท็บเล็ต สาหรับหน้าจอท่ีเหมาะสมสาหรับการนาไปใช้งานก็คือ 800 x 480 พิกเซล ใน แนวนอน (Landscape) หากเปิดโปรแกรมข้ึนมาแล้วขนาดยังไม่ได้ดาเนินการต้ังค่าให้เป็นขนาด ดงั กลา่ วสามารถเปล่ียนแปลงได้ทแ่ี ถบคุณสมบตั ิ (Properties) ในหัวขอ้ Size ดังภาพ ภาพท่ี 4.10 การตัง้ คา่ ขนาดของชนิ้ งานโปรแกรม Adobe Flash CS6 ที่มา : (ภาพโดยผู้เขียน, 2564, มกราคม 7) เอกสารประกอบการสอนวชิ า การออกแบบและพัฒนาสอื่ อเิ ล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 63 ~ 4.5.2 การนาเข้าไฟล์ภาพ ในการเร่ิมต้นสร้างช้ินงานต้องมีการนาเข้ารูปภาพหรือสื่อ มัลติมีเดียท่ีเก่ียวข้อง สามารถทาได้โดยการไปที่เมนูไฟล์ > Import > Import to Stage ซ่ึงคาสั่งน้ี จะเปน็ การนาเข้าไฟล์ภาพมายังพื้นทท่ี างาน (Stage) โดยตรง ภาพท่ี 4.11 คาส่ังนาเขา้ ไฟลภ์ าพของโปรแกรม Adobe Flash CS6 ทมี่ า : (ภาพโดยผเู้ ขียน, 2564, มกราคม 7) ภาพท่ี 4.12 การนาเขา้ ไฟล์ภาพของโปรแกรม Adobe Flash CS6 ทม่ี า : (ภาพโดยผู้เขียน, 2564, มกราคม 7) 4.5.3 การออกแบบสื่ออิเล็กทรอนิกส์ สามารถดาเนินการตามขั้นตอนการออกแบบและ พัฒนาส่ือบทเรียนคอมพิวเตอร์ช่วยสอน ตามหลักการของ ADDIE Model จากบทเรียนท่ีผ่านมาได้ เลย โดยออกแบบสว่ นประกอบทง้ั 8 ส่วน ดงั นี้ เอกสารประกอบการสอนวชิ า การออกแบบและพฒั นาสอ่ื อิเล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 64 ~ 4.5.3.1 การออกแบบสว่ นนา (Title) กาหนดสว่ นทเี่ ป็นชอ่ื เรื่องของบทเรียน ดังภาพ ภาพท่ี 4.13 การออกแบบหน้าแรกของสื่ออิเล็กทรอนิกส์ ทีม่ า : (ยุพารัตน์ ทองเถือ่ น, 2565, มกราคม 17) 4.5.3.2 ส่วนชี้แจงบทเรียน (Introduction) เป็นส่วนท่ีแจ้งให้ผู้เรียนทราบถึงข้อมูล ต่าง ๆ เช่น การลงทะเบียนเข้าส่บู ทเรยี น ต้องทาอยา่ งไรบ้าง ภาพที่ 4.14 การลงทะเบยี นเข้าเรียนด้วยสื่ออเิ ล็กทรอนิกส์ ท่ีมา : (ยุพารัตน์ ทองเถ่อื น, 2565, มกราคม 17) เอกสารประกอบการสอนวิชา การออกแบบและพฒั นาสื่ออเิ ลก็ ทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 65 ~ 4.5.3.3 ส่วนวัตถปุ ระสงค์ของการเรยี นรู้ (Objective) ใชส้ าหรับแจง้ วัตถปุ ระสงค์ ของบทเรยี น ภาพที่ 4.15 การลงทะเบียนเข้าเรยี นดว้ ยส่อื อเิ ล็กทรอนกิ ส์ ที่มา : (ยุพารตั น์ ทองเถอ่ื น, 2565, มกราคม 17) 4.5.3.4 ส่วนเมนเู นือ้ หาย่อย (Menu) เป็นการออกแบบจุดเชื่อมโยงไปยงั สว่ นต่าง ๆ ของบทเรียน ภาพที่ 4.16 แสดงเมนขู องบทเรยี นอิเลก็ ทรอนิกส์ ทมี่ า : (ยุพารตั น์ ทองเถ่ือน, 2565, มกราคม 17) เอกสารประกอบการสอนวชิ า การออกแบบและพัฒนาส่ืออิเลก็ ทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 66 ~ 4.5.3.5 ส่วนเน้ือหา (Content) คือหัวใจสาคัญของบทเรียนอิเล็กทรอนิกส์ โดย อาศยั การออกแบบและนาเสนอท่ีชว่ ยใหผ้ ้เู รียนเข้าใจได้ง่าย ภาพที่ 4.17 แสดงเมนูเนอ้ื หาในบทเรยี นอิเลก็ ทรอนิกส์ ท่ีมา : (ยุพารัตน์ ทองเถือ่ น, 2565, มกราคม 17) 4.5.3.6 ส่วนของแบบฝึกหัด (Practice) เป็นส่วนสาหรับการทบทวนความรู้ท่ีได้ เรียนในเนื้อหาบทเรียนนั้น ๆ โดยมีการนาเสนอแบบฝึกหัดได้หลายรูปแบบ เช่น สถานการณ์จาลอง การเลน่ เกม การจัดคู่ หรอื แบบฝกึ หัดแบบเลอื กตอบ ภาพท่ี 4.18 แบบฝกึ หัดในบทเรียนอเิ ลก็ ทรอนกิ ส์ ท่มี า : (ยุพารตั น์ ทองเถื่อน, 2565, มกราคม 17) เอกสารประกอบการสอนวชิ า การออกแบบและพัฒนาสอ่ื อเิ ล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 67 ~ 4.5.3.7 ส่วนสรุปบทเรียน (Summary) คือส่วนสรุปเนื้อหาสาคัญเพ่ือให้ผู้เรียน จดจาเนื้อหาไปใช้งานตอ่ ไป ภาพท่ี 4.19 แสดงเมนูเนือ้ หาในบทเรยี นอเิ ลก็ ทรอนิกส์ ทม่ี า : (ยุพารตั น์ ทองเถอ่ื น, 2565, มกราคม 17) 4.5.3.8 ส่วนแบบทดสอบ (Test) เป็นส่วนที่ใช้วัดผลการเรียนรู้ด้านต่าง ๆ ตาม วัตถปุ ระสงค์ที่กาหนดไว้ ในส่วนนจ้ี ะเปน็ การวัดผลโดยรวมของเนื้อหาบทเรียนทง้ั บทเรียน ภาพที่ 4.20 แสดงเมนูเนื้อหาในบทเรยี นอเิ ล็กทรอนิกส์ ท่ีมา : (ยุพารัตน์ ทองเถอ่ื น, 2565, มกราคม 17) เอกสารประกอบการสอนวชิ า การออกแบบและพัฒนาส่ืออิเล็กทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 68 ~ 4.6 สรุป พิกเซล (Pixel) น้ันมีความสาคัญต่อการสร้างภาพกราฟฟิกของสื่ออิเล็กทรอนิกส์เป็นอย่าง มาก เพราะทุก ๆ ส่วนของภาพกราฟฟิก เช่น จุด เส้น แบบ ลายและสีของภาพ ล้วนเกิดจากพิกเซล ทั้งส้ิน ซ่ึงมีความสัมพันธ์กับ ความละเอียด หรือ Resolution เน่ืองจากจานวนพิกเซลท่ีอยู่ในภาพบน หน้าจอโทรทัศน์ หน้าจอคอมพิวเตอร์ หรือหน้าจอของสมาร์ทโฟนหรือแท็บเล็ต ภาพหน่ึงภาพที่ ปรากฏบนหน้าจอประกอบด้วยจุดหลายจุดรวมกัน ขนาดของหน้าจอที่เหมาะสมในการออกแบบ สาหรับโทรศัพท์สมารท์ โฟน หรอื แทบ็ เล็ตคือ 800 x 480 พิกเซล ซงึ่ เปน็ การออกแบบส่ือในแนวนอน มากกว่าการออกแบบในแนวต้ัง การออกแบบส่ืออิเล็กทรอนิกส์ควรศึกษาองค์ความรู้ในเร่ืองของการ ใช้สีโทนต่าง ๆ เช่น สีโทนร้อน สีโทนเย็น การใช้สีตรงกันข้าม และการใช้สีข้างเคียง เพราะสีทุกสีให้ ความรู้สึกเกีย่ วกับสใี นเชิงจิตวทิ ยา ควรเลอื กนาไปใช้ให้เหมาะสมกบั งาน 4.7 แบบฝกึ หดั ทา้ ยบท 4.7.1 พิกเซลคืออะไร 4.7.2 ความละเอียดของภาพขนาด Full HD คือความละเอียดขนาดเทา่ ใด 4.7.3 ใหน้ กั ศกึ ษาบอกประเภทและคุณลกั ษณะของจอภาพไมน่ ้อยกว่า 3 ประเภท 4.7.4 การใช้สโี ทนรอ้ นเหมาะกับงานประเภทใด 4.7.5 การใช้สีโทนเยน็ เหมาะกับงานประเภทใด 4.7.6 การออกแบบส่อื อิเลก็ ทรอนิกส์มีขั้นตอนหลกั ๆ กีข่ ้นั ตอน ประกอบไปดว้ ยอะไรบา้ ง เอกสารประกอบการสอนวชิ า การออกแบบและพฒั นาส่อื อเิ ลก็ ทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 69 ~ 4.8 เอกสารอา้ งอิง วินนซ์ อฟต์ โซลชู ่ัน. (2559). หลักการใช้สีในการออกแบบ. สืบคน้ 24 มกราคม 2564, จาก https://www.wynnsoft-solution.com/บทความ/หลักการใชส้ ี_ สไุ ม บลิ ไบ. (2559). การออกแบบและพัฒนาสื่อบทเรยี นคอมพิวเตอรช์ ่วยสอน. สบื คน้ เมอื่ 9 กันยายน 2564, จาก https://drsumaibinbai.files.wordpress.com/2016/09/cai- design.pdf อลงกต หาญชนะ และนทวฒั น์ เจริญสวสั ด.์ิ (2560). สีในการออกแบบ. สืบค้น 24 มกราคม 2564, จาก https://sites.google.com/a/rajsima.ac.th/digitalmedia/home/2-si-ni-kar- xxkbaeb Aboveprint สกรีนเสอื้ ยดื . (2560). PIXEL คอื อะไร. สบื ค้น 24 มกราคม 2564, จาก https://aboveprint.com/pixel-คืออะไร/ HomeproThePower. (2561). ความละเอยี ดทีวี เร่ืองดี ๆ ท่คี นรักความเอนเตอรเ์ ทนตอ้ งรู้. สืบค้น 24 มกราคม 2564, จาก https://www.thepower.co.th/knowledge/tv- resolution-knowledge/ เอกสารประกอบการสอนวิชา การออกแบบและพฒั นาส่ืออเิ ล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 70 ~ แผนบริหารการสอนประจาบทท่ี 5 หวั ข้อเนือ้ หา 1. ความหมายของปฏสิ มั พนั ธ์ 2. ประเภทของสว่ นตดิ ตอ่ ผใู้ ช้งาน 3. กระบวนการออกแบบส่วนตดิ ต่อผใู้ ชง้ าน 4. รปู แบบสว่ นติดตอ่ ผใู้ ชง้ าน 5. ส่วนต่อประสาน WIMP 6. ปฏิสัมพันธ์และการเรยี นร้ใู นสอ่ื คอมพิวเตอรช์ ่วยสอน 7. การออกแบบส่วนปฏิสัมพันธ์ดว้ ยโปรแกรม Adobe Flash CS6 วตั ถปุ ระสงคเ์ ชิงพฤติกรรม เมือ่ นกั ศึกษาเรียนบทนี้แลว้ 1. นกั ศึกษาสามารถบอกความหมายของปฏสิ มั พันธ์ได้ 2. นักศกึ ษาสามารถจาแนกประเภทของสว่ นตดิ ตอ่ ผู้ใช้งานได้ 3. นกั ศึกษาสามารถอธิบายกระบวนการออกแบบส่วนติดต่อผู้ใชง้ านได้ 4. นกั ศึกษาสามารถอธบิ ายปฏสิ มั พนั ธ์และการเรยี นรู้ในสอ่ื คอมพวิ เตอรช์ ่วยสอนได้ 5. นักศกึ ษาสามารถออกแบบปฏสิ มั พันธ์ในส่อื อิเลก็ ทรอนกิ สด์ ว้ ยโปรแกรม Adobe Flash CS6 ได้ วิธีสอนและกิจกรรมการเรียนการสอน 1. วธิ สี อน 1.1 การบรรยายประกอบสไลด์ 1.2 การแสดงตัวอย่างประกอบการบรรยาย 1.3 การสาธิตการสร้างปฏสิ ัมพันธแ์ บบต่าง ๆ 2. กจิ กรรมการเรยี นการสอน 2.1 การออกแบบปฏสิ ัมพนั ธ์ 2.2 การตอบคาถาม 2.3 การทาแบบฝึกหดั ท้ายบท 2.4 การสรา้ งชิน้ งานแบบมีปฏิสมั พันธ์

~ 71 ~ สอ่ื การเรยี นการสอน 1. สไลดป์ ระกอบการบรรยาย 2. ตัวอย่างชน้ิ งานประกอบการบรรยาย 3. เอกสารประกอบการสอนรายวชิ าการออกแบบและพัฒนาสอ่ื อเิ ล็กทรอนิกส์ การวดั ผลและการประเมินผล 1. การสังเกตพฤติกรรมการสร้างช้นิ งาน ความตง้ั ใจ 2. การประเมินผลจากการส่งงานเข้าสหู่ อ้ งเรียนเสมอื น Google Classroom 3. การประเมินจากการทาแบบฝกึ หดั ท้ายบท มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง บทที่ 5 การออกแบบสว่ นปฏิสัมพันธ์ ในการพฒั นาสื่ออเิ ล็กทรอนิกส์ การออกแบบส่วนปฏิสัมพันธน์ ับว่ามีความสาคัญเปน็ อย่างย่ิง เพราะเป็นส่วนท่ีใช้สื่อสารระหว่างผู้ใช้งานกับสื่อที่พัฒนาข้ึน การได้รู้จักความหมาย รูปแบบและ ประเภทของปฏสิ ัมพันธจ์ ะทาใหผ้ ู้พฒั นาสามารถตัดสนิ ใจเลือกใช้รูปแบบการปฏสิ ัมพันธ์ในการพัฒนา สื่ออิเล็กทรอนิกส์ได้ ในปัจจุบันสมาร์ทโฟนและอุปกรณ์เคล่ือนท่ีต่าง ๆ เช่น แท็บเล็ต มีการใช้ เทคโนโลยีจอสัมผัส (Touch Screen) เป็นส่วนใหญ่ ทาให้เอื้อประโยชน์ต่อการใช้งานส่วนประกอบ ต่าง ๆ ได้ง่ายขึ้น ในการผลิตสื่อบนอุปกรณ์เหล่านี้ก็เช่นกันทาให้สามารถเลือกใช้รูปแบบปฏิสัมพันธ์ ต่าง ๆ มาใช้งานได้ เช่น การกดปุ่ม (Click button) การลากวัตถุบนหน้าจอ (Drag and Drop) การ พิมพเ์ พื่อตอบคาถาม (Keypress) เปน็ ต้น 5.1 ความหมายของปฏิสัมพันธ์ การปฏิสัมพันธ์ คือ การส่ือสารระหว่างผู้ใช้กับระบบ โดยท่ีระบบมีส่วนต่อประสานเป็นทั้ง ส่วนที่ผู้ใช้สนใจและเป็นเหมือนคน สนทนา/ตัวกลางระหว่างผู้ใช้และระบบ เริ่มจากผู้ใช้ป้อนคาสั่ง หรือออกคาสั่งแก่ส่วนต่อประสานจากนั้นเป็นหน้าที่ของส่วนต่อประสานที่จะดาเนินการตามคาส่ัง ดังน้ันการส่ือสารระหว่างผู้ใช้และระบบมีความหมายคือเป็นภาษาทางอ้อม แทนที่จะเป็นการกระทา โดยตรง (กฤษณพงศ์ เลิศบารงุ ชยั , 2564) ปฏิสัมพันธ์คือ การสร้างความสัมพันธ์ระหว่างบุคคลในกลุ่ม ในกรจัดการเรียนการสอนนิยม สร้างความสัมพันธ์ในห้องเรียนด้วยการให้ผู้เรียนมีส่วนร่วมในการเรียน กิจกรรมประเภทต่าง ๆ ที่จะ ให้ผู้เรียนมีส่วนร่วมในการเรียนการสอน ความหมายโดยท่ัวไปของคาว่า ปฏิสัมพันธ์ (Interactive) หมายถึง การมีการโต้ตอบและให้แรงเสริม (Feedback และ Reinforcement) กับการกระทาของ ผูเ้ รยี น (วชิ ติ เทพประสทิ ธิ์, 2549) การปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์ (Human Computer Interaction : HCI) คอื การศกึ ษาการปฏสิ ัมพันธร์ ะหวา่ งคนซ่ึงเปน็ ผูใ้ ช้กับคอมพิวเตอร์ โดยเป็นการศึกษาทเี่ ช่อื มโยงเก่ียว เน่ืองกันหลาย ๆ ศาสตร์ เช่น วิทยาการคอมพิวเตอร์ พฤติกรรมศาสตร์ จิตวิทยา และการออกแบบ เป็นต้น (ปรัชญา นวนแก้ว, 2562)

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 73 ~ 5.2 ประเภทของส่วนตดิ ต่อผใู้ ช้งาน การออกแบบส่วนติดต่อผู้ใช้งานเป็นศาสตร์หนึ่งที่เป็นส่วนย่อยของ Human Computer Interactive (HCI) โดย HCI จะคานึงถึงข้อจากัดและคุณลักษณะของท้ังซอฟต์แวร์ และฮาร์ดแวร์ สามารถแยกเปน็ ประเภทตา่ ง ๆ ดงั นี้ (มัลลิกา เกล้ยี งเคลา้ , 2559) 5.2.1 การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction: NLI) การโต้ตอบด้วย ภาษามนษุ ย์ เป็นการโต้ตอบโดยผู้ใช้งานจะใช้ภาษามนุษย์ หรอื ภาษาธรรมชาติ เชน่ ภาษาเขียน หรอื เสียง เพื่อใช้เป็น input ไปยังระบบ และระบบจะประมวลผลกลับมาเป็น output โดยการโต้ตอบ ประเภทน้ีส่วนใหญ่จะถูกนามาใช้ในเทคโนโลยีด้านปัญญาประดิษฐ์ (Artificial Intelligent: AI) เช่น Google Search ของ Google หรือ Siri ของ iOS ดังภาพ (ก) (ข) ภาพท่ี 5.1 การโตต้ อบดว้ ยภาษาธรรมชาติของระบบปญั ญาประดษิ ฐบ์ นมือถือสมาร์ทโฟน ทมี่ า : (ภาพโดยผเู้ ขยี น, 2564, พฤษภาคม 23) เอกสารประกอบการสอนวชิ า การออกแบบและพัฒนาสือ่ อิเลก็ ทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 74 ~ 5.2.2 การโต้ตอบด้วยคาส่งั (Command Language Interaction: CLI) เป็นการโต้ตอบโดย ผู้ใช้งานจะต้องใช้คาส่ังที่เป็นตัวอักษร ผ่านคีย์บอร์ดสาหรับเป็นข้อมูลนาเข้าสู่ระบบ และระบบจะ แสดงข้อมูลนาออกผ่านหน้าจอคอมพิวเตอร์ โดยเรียกการโต้ตอบด้วยคาส่ังว่า Command Line Interface ภาพที่ 5.2 การโต้ตอบด้วยคาส่ัง (Command Line Interface) ที่มา : (ภาพโดยผ้เู ขยี น, 2564, พฤษภาคม 23) 5.2.3 การโต้ตอบด้วยกราฟิก (Graphics User Interfaces: GUI) เป็นการโต้ตอบท่ีผู้ใช้งาน จะมีปฏิสัมพันธ์กับวัตถุ (Objects) ที่สามารถมองเห็น ได้ยิน หรือสัมผัสได้ เช่น ภาพกราฟิก ไอคอน การเคล่ือนไหว ภาพท่ี 5.3 การโตต้ อบผ่านกราฟิก (Graphics User Interfaces: GUI) ทม่ี า : (ภาพโดยผ้เู ขียน, 2564, พฤษภาคม 23) เอกสารประกอบการสอนวชิ า การออกแบบและพฒั นาสือ่ อเิ ลก็ ทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 75 ~ 5.3 กระบวนการออกแบบส่วนตดิ ตอ่ ผู้ใช้งาน ในการออกแบบส่วนติดต่อผใู้ ชง้ าน จะประกอบไปด้วย 12 ขนั้ ตอนคอื 5.3.1 การทาความรจู้ ักผ้ใู ช้งาน 5.3.2 การทาความเข้าใจการทางานของระบบ 5.3.3 การพัฒนาระบบเมนแู ละการนาทาง 5.3.4 การเลือกหนา้ ต่างทีเ่ หมาะสม 5.3.5 การเลอื กเครอ่ื งมอื ในการควบคมุ การใช้งานทเ่ี หมาะสม 5.3.6 การเลือกเครื่องมือควบคมุ การแสดงผลบนหน้าจอทีเ่ หมาะสม 5.3.7 การเตรยี มเนื้อหาหรือข้อความทชี่ ดั เจน 5.3.8 การสรา้ งสว่ นตอบรับฟีดแบ็กและแนวทางการใชง้ าน 5.3.9 การสรา้ งกราฟิก ไอคอน และภาพทส่ี ่ือความหมาย 5.3.10 การเลอื กใชส้ ีท่เี หมาะสม 5.3.11 การจัดการเลยเ์ อาท์ หนา้ ต่าง และเพจ 5.3.12 การทดสอบ 5.4 รูปแบบส่วนติดตอ่ ผ้ใู ชง้ าน 5.4.1 ส่วนติดต่อผู้ใช้งานแบบบรรทัดคาสั่ง (Command line interface) คือ วิธีการแสดง หรอื บอกคาสั่งให้คอมพวิ เตอร์ทราบโดยตรง อาจเปน็ คียท์ ่ีบอกการทางาน หรอื ฟังก์ชั่นคีย์ (Function keys) เช่น ตัวอักษรเดี่ยว คาย่อ คาท้ังคา หรือผสมผสานกัน มีข้อดี คือ เหมาะกับงานที่มีการทางาน ซ้าบ่อย ๆ และช่วยในการ เข้าถึงการทางานของระบบได้โดยตรง มีข้อเสียคือ ใช้ได้ดีกับผู้เช่ียวชาญ มากกว่าผู้ใช้หัดใหม่ และการต้ังช่ือคาส่ังหรือคาย่อควรสื่อความหมาย ตัวอย่างส่วนต่อประสานแบบ บรรทัดคาสั่งงาน เช่น การใช้งานคาสั่งบนระบบ WINDOWS, UNIX หรือ DOS ภาพท่ี 5.4 สว่ นตอ่ ประสานแบบบรรทัดคาส่ัง (Command Line Interface) ท่มี า : (ภาพโดยผเู้ ขียน, 2564, มนี าคม 9) เอกสารประกอบการสอนวิชา การออกแบบและพฒั นาสอ่ื อเิ ล็กทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 76 ~ 5.4.2 รายการเลือก (Menu) คือ กลุ่มของทางเลือกต่าง ๆ ท่ีปรากฏบนจอภาพ มีลักษณะ ดงั นี้ 5.4.2.1 ชอ่ื ตวั เลือกต้องสามารถมองเหน็ ได้และควรออกแบบใหส้ ่ือความหมาย ทั้งนี้ สว่ นต่อประสานแบบนีจ้ ะใช้การจาได้ (Recall) น้อย แต่ใช้การรูจ้ า (Recognition) ไดม้ ากกวา่ 5.4.2.2 ในการเลือกแต่ละตัวเลือกต้องใช้เมาส์ พิมพ์ตัวเลขหรือตัวอักษรเพื่อเลือก ทางานตวั เลอื กในเมนู มกั ถูกจัดกลุม่ เปน็ โครงสรา้ ง 5.4.2.3 เป็นรูปแบบท่ีถูกสงวนไว้ของระบบ WIMP (Windows Icon Menus Pointer) แบบเตม็ รปู แบบ 5.4.2.4 ระบบเมนสู ามารถเปน็ ตวั หนังสืออย่างเดยี ว โดยมที างเลอื กแสดงเป็นตัวเลข ให้เลือกได้ หรือสามารถมี ส่วนประกอบเป็นกราฟิก ท่ีมีเมนูปรากฏในกล่องส่ีเหลี่ยม และตัวเลือก สามารถเลอื กโดยการพิมพ์ตวั อักษรตวั แรกหรือเลื่อนผา่ นปุม่ ลูกศร ภาพที่ 5.5 สว่ นต่อประสานแบบรายการเลอื ก (Menu) ท่มี า : (ภาพโดยผูเ้ ขยี น, 2564, มีนาคม 9) 5.4.3 ภาษาธรรมชาติ (Natural language) ภาษาธรรมชาติเป็นภาษาที่ใช้ในการติดต่อ ระหว่างผู้ใช้และคอมพิวเตอร์ ซ่ึงผู้ใช้คุ้นเคยกับภาษาน้ันอยู่แล้ว อาจใช้การรู้จาเสียงพูด (Speech recognition) หรือการพิมพ์ด้วยภาษาธรรมชาติหรือภาษามนุษย์ในการโต้ตอบได้ ท้ังน้ีการใช้ ภาษาธรรมชาตอิ าจทาใหเ้ กิดปญั หาเร่ืองความคลมุ เครือของเสยี ง เพราะผู้ใชแ้ ต่ละคนอาจออกเสียงไม่ เหมือนกัน นอกจากนี้ความหมายของคาท่ีใช้อาจมีมากกว่าหนึ่งความหมายและอาจทาให้ผู้ใช้เกิด ความสับสน ดังน้ันการใช้ ภาษาธรรมชาติจึงมีความยากท่ีจะใช้งานได้ดี หากต้องการใช้งาน เอกสารประกอบการสอนวิชา การออกแบบและพัฒนาสอ่ื อิเล็กทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 77 ~ ภาษาธรรมชาติควรต้องพยายามทาความเข้าใจกลุ่ม ผู้ใช้ และกลุ่มคาที่จะใช้ในการตอบโต้ หรือเลือก เฉพาะคาหลัก (Keyword) มาใชง้ าน 5.4.4 ส่วนต่อประสานสอบถาม (Query interface) ส่วนต่อประสานสอบถามมีลักษณะคือ ผู้ใช้จะถูกถามคาถามเป็นชุด และจะตอบคาถามด้วยการตอบใช่/ไม่ใช่ (yes/no) หรือเลือกตอบจาก หลายตัวเลอื ก (Multiple choice) เป็นการนาผู้ใช้เข้าสูก่ ารโต้ตอบทลี ะขั้นตอน ตัวอย่างเช่น เว็บไซต์ แบบสอบถาม (Web questionnaires) มีข้อดีคือเหมาะกับผู้ใชม้ ือใหม่ แต่มีข้อเสียคือค่อนข้างจากดั ฟังกช์ นั การทางาน สาหรบั ภาษาสอบถาม (Query languages) จะถูกใช้เพอ่ื สรา้ งคาถามหรือคิวรีเพื่อ ดึงข้อมูลจากฐานข้อมูล ผู้ใช้ต้องมีความ เข้าใจเกี่ยวกับโครงสร้างฐานข้อมูลและวากยสัมพันธ์ของ ภาษา ซงึ่ ผ้ใู ช้ส่วนใหญ่จะอย่ใู นระดบั ผ้เู ช่ยี วชาญ 5.4.5 ฟอร์มฟิล (Form-fills) ลักษณะของฟอร์มฟิล เหมือนกับแบบฟอร์มที่แสดงอยู่บน จอภาพ ซ่ึงถูกนามาใช้งานหลัก ในการกรอกหรือป้อนข้อมูลเข้าหรือระบุความต้องการ ข้อมูลที่ สมั พันธ์กนั จะต้องถูกจัดวางบนฟอร์มใหอ้ ยใู่ กลเ้ คยี งกัน การใชง้ านฟอร์มฟลิ ต้องอาศยั การออกแบบท่ี ดีและควรอานวยความสะดวกในการแกไ้ ขข้อมูลทุกอย่างบนฟอรม์ เพอ่ื ใหม้ องเห็นได้ชัดเจน 5.5 ส่วนต่อประสาน WIMP ส่วนต่อประสาน WIMP ย่อมาจาก Windows Icons Menus and Pointers เป็นรูปแบบ ส่วนต่อประสานท่ีมีอยู่ในระบบคอมพิวเตอร์ที่มีการปฏิสัมพันธ์เฉพาะกับเครื่องคอมพิวเตอร์ส่วน บุคคล มีหลายรูปแบบดังนี้ 5.5.1 วนิ โดว์ (Windows) คือ พ้นื ท่ตี า่ ง ๆ บนจอภาพท่ที างานอย่างเปน็ อิสระต่อกนั สามารถ บรรจุข้อความหรือกราฟิก และสามารถ เคล่ือนย้ายและปรับขนาดได้ สามารถนามาซ้อนทับกันหรือ เรียงหน้าต่างถัดไปได้ Windows ทางานร่วมกับ Scrollbars โดยอนุญาตให้ผู้ใช้เล่ือนเนื้อหาใน หน้าต่างขึ้น-ลง หรือ ซ้าย-ขวา แต่ละ Windows จะมีแถบช่ือหน้าต่าง (Title bars) เป็นตัว บอกชื่อ ของหน้าต่างแตล่ ะอัน 5.5.2 ไอคอน (Icons) คอื ภาพเล็ก ๆ ทีแ่ สดงสว่ นตอ่ ประสานท่ีจะเข้าไปยังหนา้ ตา่ งหรือการ กระทาอนั ใดอันหน่ึง สาหรับหนา้ ตา่ งที่เปิดทางานจาก Icons สามารถถูกปิดลงมาเปน็ Icons ตามเดมิ (เรียกการกระทานี้ว่า Iconized) ไอคอนมีรูปแบบหลากหลาย และมีจานวนมากซ่ึงการเลือกรูปแบบ ควรต้องสอื่ ความหมายด้วย ตัวอย่าง Icons ทพ่ี บเหน็ ท่ัวไปไดแ้ ก Icons บนหนา้ จอ คอมพวิ เตอร์ 5.5.3 พอยน์เตอร์ (Pointers) เป็นส่วนประกอบสาคัญของ WIMP ซึ่งต้องอาศัยการช้ีและ เลือกวัตถุบนจอภาพ Pointers ถูกใช้งานผ่านอุปกรณ์ ต่าง ๆ เช่น Mouse Track pad Joystick Trackball Cursor keys และ Keyboard short cuts ลกั ษณะของ Pointers มีหลากหลายรูปแบบ เอกสารประกอบการสอนวชิ า การออกแบบและพฒั นาส่อื อิเลก็ ทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 78 ~ 5.5.4 เมนู (Menus) คือ ตัวเลือกของการปฏิบัติการหรือการบริการที่ระบบมีให้เลือก ซ่ึง แสดงผ่านมีจอภาพ การใช้เมนูมักเกิดปัญหาคือต้องการพ้ืนที่บนจอภาพมากเพ่ือแสดงเมนูหลายๆอัน วิธีแก้ไขคือ ใช้ Pop- up menu เข้ามาช่วยแสดงเมนูเฉพาะเวลาท่ีต้องการใช้มันเท่านั้นซึ่งจะช่วย ประหยดั พน้ื ท่ีบนหนา้ จอ 5.6 ปฏิสัมพนั ธ์และการเรียนร้ใู นส่ือคอมพิวเตอรช์ ่วยสอน การท่ีจะศึกษาเก่ียวกับปฏิสัมพันธ์และการเรียนรู้ในส่ือคอมพิวเตอร์ช่วยสอนน้ัน จะต้อง ทราบเกี่ยวกับคุณลักษณะของสื่อคอมพิวเตอร์ช่วยสอน ประกอบด้วยคุณลักษณะ 4 ประการ (วิชิต เทพประสิทธ์ิ, 2549) คือ 5.6.1 สารสนเทศ (Information) หมายถึง เน้ือหาสาระ (content) ที่ได้รับการเรียบเรียง แล้วเป็นอย่างดี ซ่ึงทาให้ผู้เรียนเกิดการเรียนรู้หรือได้รับทักษะอย่างหน่ึงอย่างใดตามท่ีผู้สร้างได้ กาหนดวัตถปุ ระสงคไ์ ว้ โดยอาจจะนาเสนอเนอ้ื หาในลกั ษณะทางตรงหรอื ทางออ้ มก็ได้ 5.6.2 ความแตกต่างระหว่างบุคคล (Individualization) คือ การตอบสนองความแตกต่าง ระหว่างบุคคลท้ังจากบุคลิกภาพ สติปัญญา ความสนใจ พื้นฐานความรู้ คือลักษณะสาคัญของ คอมพิวเตอร์ช่วยสอน โดยผู้เรียนจะมีอิสระในการควบคุมการเรียนของตนเอง รวมท้ังการเลือก รปู แบบการเรยี นท่เี หมาะสมกับตนได้ เชน่ สามารถควบคมุ เน้อื หา ควบคมุ ลาดับของการเรียน ควบคมุ การฝึกปฏบิ ัตหิ รือการทดสอบ เปน็ ตน้ 5.6.3 การโต้ตอบ (Interaction) เนื่องจากผู้เรียนจะเกิดการเรียนรู้ได้อย่างมีประสิทธิภาพ มากยิ่งขึ้น หากได้มีการโต้ตอบหรือปฏิสัมพันธ์กับผู้สอน ดังนั้นคอมพิวเตอร์ช่วยสอนท่ีออกแบบมา อย่างดีจะต้องเอื้ออานวยให้เกิดการโต้ตอบระหว่างผู้เรียนกับคอมพิวเตอร์ช่วยสอนอย่างต่อเนื่องและ ตลอดท้ังบทเรียน การอนุญาตให้ผู้เรียนเพียงแต่คลิกเปล่ียนหน้าจอไปเร่ือย ๆ ทีละหน้า ไม่ถือว่าเป็น ปฏิสมั พนั ธ์ทเี่ พียงพอสาหรับการเรียนรู้ แตต่ อ้ งมีการใหผ้ ู้เรยี นได้ใช้เวลาในสว่ นของการสร้างความคิด วิเคราะห์และสร้างสรรคเ์ พอ่ื ให้ไดม้ าซ่งึ กจิ กรรมการเรียนน้ัน ๆ 5.6.4 ผลป้อนกลับโดยทันที (Immediate Feedback) การให้ผลป้อนกลับน้ีเป็นส่ิงท่ีทาให้ คอมพิวเตอร์ช่วยสอนแตกต่างไปจากมัลติมีเดีย – ซีดีรอม ส่วนใหญ่ ซ่ึงได้มีการนาเสนอเน้ือหา เก่ียวกับเรื่องราวของสิ่งต่าง ๆ แต่ไม่ได้มีการประเมินความเข้าใจของผู้เรียนไม่ว่าจะอยู่ในรูปแบบของ การทดสอบ แบบฝกึ หดั หรอื การตรวจสอบความเข้าใจในรปู แบบใดรูปแบบหนึ่ง จึงทาให้มลั ติมเี ดยี – ซีดีรอม เหล่านั้นถูกจัดว่าเป็นมัลติมีเดียเพ่ือการนาเสนอข้อมูล (Presentation Media) ไม่ใช่ คอมพวิ เตอรช์ ่วยสอน เอกสารประกอบการสอนวิชา การออกแบบและพฒั นาส่ืออิเล็กทรอนิกส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 79 ~ บทเรียนที่ดคี วรมปี ฏิสมั พันธ์กับผเู้ รียนให้มากท่ีสุด เพราะการเรียนจากคอมพวิ เตอรช์ ว่ ยสอน ควรมีประสิทธิภาพมากกว่าเรียนจากหนังสือ เพราะสามารถ สื่อสารกับผู้เรียนได้ 2 ทาง (Hannafin and Peck, 1988) 5.7 การออกแบบส่วนปฏสิ ัมพนั ธด์ ้วยโปรแกรม Adobe Flash CS6 5.7.1 การสร้างปฏิสัมพันธ์แบบปุ่ม (Button) การสร้างปฏิสัมพันธ์แบบปุ่มกด (Button) ใน โปรแกรม Adobe Flash CS6 มีวธิ ีการในการสรา้ ง 2 วธิ ี คอื 5.7.1.1 การกาหนดให้เป็น Symbol ชนิด Button ตั้งแต่เร่ิมต้น โดยดาเนินการ เลอื กไปท่เี มนู Insert --->New Symbol หรอื กดปุ่ม Ctrl + F8 ดังภาพ ภาพที่ 5.6 การเลือกเมนู Insert เพ่อื เพิ่มป่มุ ที่มา : (ภาพโดยผเู้ ขยี น, 2564, มีนาคม 9) ทาการตง้ั ชื่อของป่มุ และเลอื กชนดิ (Type) เปน็ แบบ Button ดังภาพ ภาพที่ 5.7 การตง้ั ช่ือปุม่ และการเลอื กชนิดเป็นแบบ Button ท่ีมา : (ภาพโดยผเู้ ขยี น, 2564, มีนาคม 9) เอกสารประกอบการสอนวิชา การออกแบบและพฒั นาสื่ออเิ ล็กทรอนกิ ส์ CE58609

มหา ิวทยา ัลยราช ัภฏห ู่ม ้บานจอม ึบง ~ 80 ~ โปรแกรมจะนาเข้าสพู่ ื้นที่สาหรบั การออกแบบป่มุ โดยให้สรา้ งปมุ่ ทบี่ รเิ วณเคร่ืองหมาย + บน พ้ืนท่ีของ Stage สามารถปรับแต่งสถานะของปุ่มได้โดยการต้ังค่าที่สถานะ Up, Over, Down ปุ่มท่ี สรา้ งเสร็จแล้วจะถูกเกบ็ ไว้ใน Library ดงั ภาพ ภาพที่ 5.8 พ้ืนท่ีสาหรับการสร้างปุ่ม (Button) ทม่ี า : (ภาพโดยผเู้ ขยี น, 2564, มนี าคม 9) 5.7.1.2 การแปลงให้เป็น Symbol ชนิด Button ในภายหลัง วิธีการตามขั้นตอนน้ี จะแตกต่างจากวิธีแรกเล็กน้อย โดยวิธีน้ีต้องสร้างกราฟิกบนพื้นท่ีของ Stage เพื่อทาเป็นปุ่มข้ึนมา ก่อนแล้วค่อยแปลงเป็นปมุ่ ดว้ ยคาส่ัง Convert to Symbol หรือกดปุ่ม F8 ท่คี ีย์บอรด์ ดงั ภาพ ภาพท่ี 5.9 การแปลงภาพกราฟกิ ให้กลายเปน็ ป่มุ ทม่ี า : (ภาพโดยผเู้ ขียน, 2564, มนี าคม 9) เอกสารประกอบการสอนวิชา การออกแบบและพัฒนาส่ืออเิ ล็กทรอนกิ ส์ CE58609