SlideShare a Scribd company logo
1 of 9
Download to read offline
การเขียน STORYBOARD

   STORYBOARD
การเขียนสตอรี่ บอร์ ด (Storyboard)
      การเขียนสตอรี่บอร์ ดเป็ นขั้นตอนของการเตรียมการนาเสนอข้ อความ ภาพ รวมทั้ง สื่ อใน
      รูปของมัลติมเี ดียต่ างๆ ลงในกระดาษ เพือให้ การนาเสนอข้ อความ และสื่ อในรู ปแบบต่ างๆ
                                               ่
      เหล่ านีเ้ ป็ นไปอย่ างเหมาะสมบนหน้ าจอคอมพิวเตอร์ ต่อไป ขณะทีผงงานนาเสนอลาดับ และ
                                                                      ่ ั
      ขั้นตอนของการตัดสิ นใจ สตอรี่บอร์ ดนาเสนอเนือหา และลักษณะของการนาเสนอ ขั้นตอน
                                                      ้
      การสร้ างสตอรี่บอร์ ดรวมไปถึงการเขียนสคริปต์ (ซึ่งสคริปต์ ในทีนี้ คือ เนือหา) ทีผู้ใช้ จะได้
                                                                    ่          ้      ่
      เห็นบนหน้ าจอซึ่งได้ แก่ เนือหา ข้ อมูล คาถาม ผลป้ อนกลับ คาแนะนา คาชี้แจง ข้ อความเรียก
                                   ้
      ความสนใจ ภาพนิ่ง และภาพเคลือนไหว ฯลฯ
                                       ่
Story board

Storyboard คือ การสร้างภาพให้เห็นลาดับขั้นตอนตามเนื้อเรื่ องที่
 ต้องการ โดยเฉพาะการสร้างภาพเคลื่อนไหว
 รายละเอียดที่ควรมีใน Storyboard
    คาอธิบายแต่ละสื่ อที่ใช้ (ข้อความ รู ปภาพ ภาพเคลื่อนไหว เสี ยง วีดิโอ)

         การเปลี่ยนภาพ (Transition)                เครื่ องมือหรื อโปรแกรมที่ใช้
                                                    งบประมาณ
          ระบบนาทาง (Navigation)                   คาอธิบายเพิ่มเติม (Comments)

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

การเตรี ยมข้อมูลสาหรับ Storyboard
ข้อมูลสาหรับ Storyboard อาจมีท้ งภาพ เสี ยง ข้อความ ภาพเคลื่อนไหว (Animation
                                 ั
Movies) หรื ออื่นๆ ซึ่งจะต้องมีการจัดเตรี ยมขึ้นมาก่อนที่จะนาไปใส่ โปรแกรม มีรายละเอียด
ที่เกี่ยวข้องดังนี้
การจัดเตรียมภาพสาหรับโปรแกรม
            ข้อมูลต่าง ๆ อาจจะมาจากการวาดด้วยโปรแกรม Graphic Editor เช่น
 โปรแกรม PC Paint Brush ที่มี Microsoft Windowsหรื ออื่น ๆ โปรแกรม Authoring
 System บางตัวจะมีคาสังสาหรับการวาดรู ปหรื อในส่ วนของ Graphics Editor ไว้ให้
                        ่
 ด้วยทาให้ทางานได้สะดวกขึ้น แต่อย่างไรก็ดีโปรแกรมแต่ละตัวมีความสามารถ
 แตกต่างกัน ดังนั้นอาจต้องมีการใช้โปรแกรมหลายตัวช่วยกัน การทางานภายใต้ระบบ
 Microsoft Windows ทาให้สามารถแลกเปลี่ยนข้อมูลกันได้โดยง่าย นอกจากนี้อาจจะ
 นาเข้ามาจากแหล่งอื่น เช่น การ Scan จากหนังสื อหรื อวารสารด้วยการใช้เครื่ อง
 Scanner หรื ออาจนามาจากกล้องถ่ายวีดีโอ ในกรณี น้ ีจะต้องมีการ์ดพิเศษที่ทาหน้าที่
 จับสัญญาณวีดีโอเข้ามาในเครื่ องคอมพิวเตอร์ เรี ยกว่าการ์ด Video Capture เช่น การ์ด
 Video Blaster ของบริ ษท Creative Technology ด้วยวิธีน้ ีทาให้สามารถนาภาพต่าง ๆ
                          ั
 เข้ามาใช้ในโปรแกรมได้อย่างมากมาย
การจัดเตรียมเสี ยง

           การบันทึกเสี ยงเข้ามาในเครื่ องคอมพิวเตอร์น้ น เครื่ องคอมพิวเตอร์จะต้องมีการ์ด Sound
                                                        ั
Generator Card เช่น Sound Blaster Card การ์ดนี้มีความจาเป็ นในการบันทึกเสี ยง ที่มีการแปลง
สัญญาณเสี ยงเป็ นข้อมูลคอมพิวเตอร์และทางานในทางตรงข้ามเมื่อโปรแกรมเรี ยกใช้แฟ้ มเสี ยงที่จะ
                                        ั
ให้ออกลาโพงในเพื่อให้ความสัมพันธ์กบการแสดงภาพการนาเสี ยงเข้าไปใช้ในบางครั้งอาจใช้วธีให้      ิ
                                               ั
โปรแกรมควบคุมการเล่นเครื่ อง CD สัมพันธ์กบเนื้อเรื่ องก็ได้โปรแกรม Authoring System
                                            ั
เคลื่อนไหวการนาภาพเคลื่อนไหวเข้ามาใช้กบโปรแกรมอาจทาได้หลายวิธี เช่น
1. การต่อเครื่ องเล่นเลเซอร์เข้ากับคอมพิวเตอร์ แล้วใช้โปรแกรมควบคุมการเล่นให้สมพันธ์กบ
                                                                                  ั        ั
เนื้อหา
2. การจับภาพจากวิดีโอเข้ามา เป็ นข้อมูลประเภท Movied file โดยมีการกาหนดเป็ นจานวนเฟรมต่อ
วินาที ทาได้ดวยโปรแกรม เช่น Microsoft Video For windows จากนั้นจึงเรี ยกใช้โฟล์ดวยโปรแกรม
                ้                                                                    ้
Video Capture
สร้ างภาพเคลือนไหว (Animation File)
             ่

 ขึนใช้ เอง เช่ น จากโปรแกรม Autodesk Animation, 3D Studio และอืน ๆ ที่
    ้                                                           ่
 สามารถทาภาพเคลื่อนไหวทั้งสองและสามมิติโปรแกรม Authoring System
                                                         ่
 ส่ วนใหญ่จะมีความสามารถทาภาพ Animation เป็ นพื้นฐานอยูแล้ว


 ข้ อมูลทีเ่ ป็ นข้ อความอาจจะป้ อนลงไปใน Authoring Programหรือ Power Point การ
 ป้ อนข้ อมูลดังกล่ าวนี้ อาจจะป้ อนโดยตรงหรือบางโปรแกรมสามารถอ่ านข้ อมูลจาก
 Text File เข้ าไปใช้ ในงานได้
ตัวอย่าง Storyboard
Title : ………………………        From :………………Link to frame :………..
File Name : ……………………     Other : …………………………….……




Picture : ………………………………… narrations : …………………………………
Sound : ………………………………… ……………………………………………….
                        ……………………………………………….
Video : ………………………………… ……………………………………………….
                        ……………………………………………….
Animation : ……………………………

More Related Content

Similar to Storyboard

ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิกใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิกวาสนา ใจสุยะ
 
สแกนเนอร์ที่เหมาะกับOa
สแกนเนอร์ที่เหมาะกับOaสแกนเนอร์ที่เหมาะกับOa
สแกนเนอร์ที่เหมาะกับOaGhost-king Gosleeping
 
บทที่1
บทที่1บทที่1
บทที่1jibbie23
 
ใบงานท 7
ใบงานท   7ใบงานท   7
ใบงานท 7Winwin Nim
 
การนำเสนองานด้วยเทคโนโลยีสารสนเทศ
การนำเสนองานด้วยเทคโนโลยีสารสนเทศการนำเสนองานด้วยเทคโนโลยีสารสนเทศ
การนำเสนองานด้วยเทคโนโลยีสารสนเทศYongyut Nintakan
 
ใบความรุ้ที่ 2ระบบคอมพิวเตอร์สำหรับงานกราฟิก
ใบความรุ้ที่ 2ระบบคอมพิวเตอร์สำหรับงานกราฟิกใบความรุ้ที่ 2ระบบคอมพิวเตอร์สำหรับงานกราฟิก
ใบความรุ้ที่ 2ระบบคอมพิวเตอร์สำหรับงานกราฟิกวาสนา ใจสุยะ
 
บทที่1
บทที่1บทที่1
บทที่1jibbie23
 
บทที่1
บทที่1บทที่1
บทที่1jibbie23
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์Suthida23
 
สื่อดิจิทัล
สื่อดิจิทัลสื่อดิจิทัล
สื่อดิจิทัลPhonkao Mickey
 
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์nanpom1
 
01 intro computergraphic
01 intro computergraphic01 intro computergraphic
01 intro computergraphicpisandesign
 

Similar to Storyboard (20)

ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิกใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
ใบความรู้ที่ 4โปรแกรมสำหรับงานกราฟิก
 
สแกนเนอร์ที่เหมาะกับOa
สแกนเนอร์ที่เหมาะกับOaสแกนเนอร์ที่เหมาะกับOa
สแกนเนอร์ที่เหมาะกับOa
 
ใบงาน7
ใบงาน7ใบงาน7
ใบงาน7
 
ใบงาน7
ใบงาน7ใบงาน7
ใบงาน7
 
ใบงาน7
ใบงาน7ใบงาน7
ใบงาน7
 
บทที่1
บทที่1บทที่1
บทที่1
 
ใบงานท 7
ใบงานท   7ใบงานท   7
ใบงานท 7
 
การนำเสนองานด้วยเทคโนโลยีสารสนเทศ
การนำเสนองานด้วยเทคโนโลยีสารสนเทศการนำเสนองานด้วยเทคโนโลยีสารสนเทศ
การนำเสนองานด้วยเทคโนโลยีสารสนเทศ
 
ใบความรุ้ที่ 2ระบบคอมพิวเตอร์สำหรับงานกราฟิก
ใบความรุ้ที่ 2ระบบคอมพิวเตอร์สำหรับงานกราฟิกใบความรุ้ที่ 2ระบบคอมพิวเตอร์สำหรับงานกราฟิก
ใบความรุ้ที่ 2ระบบคอมพิวเตอร์สำหรับงานกราฟิก
 
บทที่1
บทที่1บทที่1
บทที่1
 
บทที่1
บทที่1บทที่1
บทที่1
 
คอม2
คอม2คอม2
คอม2
 
ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์ขั้นตอนในการพัฒนาเว็บไซต์
ขั้นตอนในการพัฒนาเว็บไซต์
 
สื่อดิจิทัล
สื่อดิจิทัลสื่อดิจิทัล
สื่อดิจิทัล
 
ใบงานที่ 5 เรื่อง โครงงานประเภท การพัฒนาเครื่องมือ
ใบงานที่ 5 เรื่อง โครงงานประเภท  การพัฒนาเครื่องมือ ใบงานที่ 5 เรื่อง โครงงานประเภท  การพัฒนาเครื่องมือ
ใบงานที่ 5 เรื่อง โครงงานประเภท การพัฒนาเครื่องมือ
 
รู้จักกับโปรแกรม adobe flash cs3
รู้จักกับโปรแกรม adobe flash cs3รู้จักกับโปรแกรม adobe flash cs3
รู้จักกับโปรแกรม adobe flash cs3
 
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์
 
01 intro computergraphic
01 intro computergraphic01 intro computergraphic
01 intro computergraphic
 

Storyboard

  • 2. การเขียนสตอรี่ บอร์ ด (Storyboard) การเขียนสตอรี่บอร์ ดเป็ นขั้นตอนของการเตรียมการนาเสนอข้ อความ ภาพ รวมทั้ง สื่ อใน รูปของมัลติมเี ดียต่ างๆ ลงในกระดาษ เพือให้ การนาเสนอข้ อความ และสื่ อในรู ปแบบต่ างๆ ่ เหล่ านีเ้ ป็ นไปอย่ างเหมาะสมบนหน้ าจอคอมพิวเตอร์ ต่อไป ขณะทีผงงานนาเสนอลาดับ และ ่ ั ขั้นตอนของการตัดสิ นใจ สตอรี่บอร์ ดนาเสนอเนือหา และลักษณะของการนาเสนอ ขั้นตอน ้ การสร้ างสตอรี่บอร์ ดรวมไปถึงการเขียนสคริปต์ (ซึ่งสคริปต์ ในทีนี้ คือ เนือหา) ทีผู้ใช้ จะได้ ่ ้ ่ เห็นบนหน้ าจอซึ่งได้ แก่ เนือหา ข้ อมูล คาถาม ผลป้ อนกลับ คาแนะนา คาชี้แจง ข้ อความเรียก ้ ความสนใจ ภาพนิ่ง และภาพเคลือนไหว ฯลฯ ่
  • 3. Story board Storyboard คือ การสร้างภาพให้เห็นลาดับขั้นตอนตามเนื้อเรื่ องที่ ต้องการ โดยเฉพาะการสร้างภาพเคลื่อนไหว  รายละเอียดที่ควรมีใน Storyboard คาอธิบายแต่ละสื่ อที่ใช้ (ข้อความ รู ปภาพ ภาพเคลื่อนไหว เสี ยง วีดิโอ) การเปลี่ยนภาพ (Transition) เครื่ องมือหรื อโปรแกรมที่ใช้ งบประมาณ ระบบนาทาง (Navigation) คาอธิบายเพิ่มเติม (Comments) เวลาที่ใช้ ภาพร่ าง หลายเลขหน้าจอ
  • 4. การจัดทา Storyboard ตัวอย่างเช่นในหัวข้ อ Presentations จากโฟลว์ชาร์ ตก็เป็ นการแจงแจงรายละเอียดลงไปว่าใน ส่วนนี ้ประกอบด้ วยภาพ ข้ อความ ภาพเครื่ องไหว มีเสียงหรื อเพลงประกอบหรื อไม่ และมีการ เรี ยงลาดับการทางานอย่างไร มีการวางหน้ าจออย่างไรรวมทังการกาหนดแหล่งของข้ อมูล เช่น ้ ภาพและเสียงว่าได้ มาอย่างไรจากแหล่งไหน การเตรี ยมข้อมูลสาหรับ Storyboard ข้อมูลสาหรับ Storyboard อาจมีท้ งภาพ เสี ยง ข้อความ ภาพเคลื่อนไหว (Animation ั Movies) หรื ออื่นๆ ซึ่งจะต้องมีการจัดเตรี ยมขึ้นมาก่อนที่จะนาไปใส่ โปรแกรม มีรายละเอียด ที่เกี่ยวข้องดังนี้
  • 5. การจัดเตรียมภาพสาหรับโปรแกรม ข้อมูลต่าง ๆ อาจจะมาจากการวาดด้วยโปรแกรม Graphic Editor เช่น โปรแกรม PC Paint Brush ที่มี Microsoft Windowsหรื ออื่น ๆ โปรแกรม Authoring System บางตัวจะมีคาสังสาหรับการวาดรู ปหรื อในส่ วนของ Graphics Editor ไว้ให้ ่ ด้วยทาให้ทางานได้สะดวกขึ้น แต่อย่างไรก็ดีโปรแกรมแต่ละตัวมีความสามารถ แตกต่างกัน ดังนั้นอาจต้องมีการใช้โปรแกรมหลายตัวช่วยกัน การทางานภายใต้ระบบ Microsoft Windows ทาให้สามารถแลกเปลี่ยนข้อมูลกันได้โดยง่าย นอกจากนี้อาจจะ นาเข้ามาจากแหล่งอื่น เช่น การ Scan จากหนังสื อหรื อวารสารด้วยการใช้เครื่ อง Scanner หรื ออาจนามาจากกล้องถ่ายวีดีโอ ในกรณี น้ ีจะต้องมีการ์ดพิเศษที่ทาหน้าที่ จับสัญญาณวีดีโอเข้ามาในเครื่ องคอมพิวเตอร์ เรี ยกว่าการ์ด Video Capture เช่น การ์ด Video Blaster ของบริ ษท Creative Technology ด้วยวิธีน้ ีทาให้สามารถนาภาพต่าง ๆ ั เข้ามาใช้ในโปรแกรมได้อย่างมากมาย
  • 6. การจัดเตรียมเสี ยง การบันทึกเสี ยงเข้ามาในเครื่ องคอมพิวเตอร์น้ น เครื่ องคอมพิวเตอร์จะต้องมีการ์ด Sound ั Generator Card เช่น Sound Blaster Card การ์ดนี้มีความจาเป็ นในการบันทึกเสี ยง ที่มีการแปลง สัญญาณเสี ยงเป็ นข้อมูลคอมพิวเตอร์และทางานในทางตรงข้ามเมื่อโปรแกรมเรี ยกใช้แฟ้ มเสี ยงที่จะ ั ให้ออกลาโพงในเพื่อให้ความสัมพันธ์กบการแสดงภาพการนาเสี ยงเข้าไปใช้ในบางครั้งอาจใช้วธีให้ ิ ั โปรแกรมควบคุมการเล่นเครื่ อง CD สัมพันธ์กบเนื้อเรื่ องก็ได้โปรแกรม Authoring System ั เคลื่อนไหวการนาภาพเคลื่อนไหวเข้ามาใช้กบโปรแกรมอาจทาได้หลายวิธี เช่น 1. การต่อเครื่ องเล่นเลเซอร์เข้ากับคอมพิวเตอร์ แล้วใช้โปรแกรมควบคุมการเล่นให้สมพันธ์กบ ั ั เนื้อหา 2. การจับภาพจากวิดีโอเข้ามา เป็ นข้อมูลประเภท Movied file โดยมีการกาหนดเป็ นจานวนเฟรมต่อ วินาที ทาได้ดวยโปรแกรม เช่น Microsoft Video For windows จากนั้นจึงเรี ยกใช้โฟล์ดวยโปรแกรม ้ ้ Video Capture
  • 7. สร้ างภาพเคลือนไหว (Animation File) ่ ขึนใช้ เอง เช่ น จากโปรแกรม Autodesk Animation, 3D Studio และอืน ๆ ที่ ้ ่ สามารถทาภาพเคลื่อนไหวทั้งสองและสามมิติโปรแกรม Authoring System ่ ส่ วนใหญ่จะมีความสามารถทาภาพ Animation เป็ นพื้นฐานอยูแล้ว ข้ อมูลทีเ่ ป็ นข้ อความอาจจะป้ อนลงไปใน Authoring Programหรือ Power Point การ ป้ อนข้ อมูลดังกล่ าวนี้ อาจจะป้ อนโดยตรงหรือบางโปรแกรมสามารถอ่ านข้ อมูลจาก Text File เข้ าไปใช้ ในงานได้
  • 9. Title : ……………………… From :………………Link to frame :……….. File Name : …………………… Other : …………………………….…… Picture : ………………………………… narrations : ………………………………… Sound : ………………………………… ………………………………………………. ………………………………………………. Video : ………………………………… ………………………………………………. ………………………………………………. Animation : ……………………………