ตัวอย่าง Storyboard ในการออกแบบ CAI

---

Storyboard (แผ่นเรื่องราว) แสดง รายละเอียดที่จะมีในแต่ละกรอบ หรือแต่ละหน้าจอที่จะปรากฎแก่ผู้เรียน ว่าจะมีอะไรบ้าง เช่น ข้อความ ภาพ ภาพเคลื่อนไหว เสียงดนตรี เสียงพูด และแต่ละอย่างนั้นมีลำดับของการปรากฏ ว่าอะไรจะปรากฏขึ้นก่อน หลัง อะไรจะปรากฏพร้อมกัน เป็นการออกแบบอย่างละเอียดในแต่ละหน้าจอก่อนที่จะลงมือใช้โปรแกรมสร้างบทเรียน

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

ดู ตัวอย่าง storyboard ของกรอบแสดงการฝึกเขียนตัวหนังสือจีน (Storyboard เป็นการถ่ายทอดจินตนาการลงบนแผ่นกระดาษซึ่งยังไม่สามารถแสดงภาพเคลื่อนไหว เสียง และการโต้ตอบได้จนกว่าจะได้นำไปสร้างด้วยโปรแกรมคอมพิวเตอร์ในระบบมัลติมีเดีย)

Storyboard เรื่อง ภาษาจีนเขียนง่ายจัง

ไฟล์: Writing1 เฟรมที่ 5

คำนี้แปลว่าอะไรเอ่ย รู้ความหมายแล้วมาฝึกเขียนกันนะคะ <ภาพ Animation> คลิกที่นี่เพื่อดูขั้นตอนการเขียน สารบัญ | ย้อนกลับ | ต่อไป     Transition: เคลื่อนเฟรมเข้าสู่หน้าจอจากขวาไปซ้าย Background: พื้นหลังเป็นภาพจาง ๆ ของเด็กหญิงเล็กๆ คนหนึ่งในท่าเรียกแม่ให้มาดูน้องชายซึ่งนอนร้องไห้อยู่บนเตียง Graphic: ภาพนิ่งเป็นตัวหนังสือจีนตามที่ปรากฏในเฟรม Text: ข้อความตามที่แสดงไว้ในเฟรม ยกเว้นข้อความที่อยู่ในเครื่องหมาย < > Animation: ภาพเคลื่อนไหวจะยังไม่ปรากฏในตอนแรก เมื่อผู้ใช้คลิกเพื่อดูขั้นตอนการเขียน จึงปรากฏภาพตัวหนังสือขึ้นทีละขีดจนครบทั้งตัวตามภาพนิ่งด้านซ้าย โดยมี storyboard ของการเคลื่อนไหว ดังนี้ Voice: เสียง "หลาย" (มา) "มามาหลาย ขว้ายหลายขั้นตี้ตี้ ตี้ตี้คูเลอ" (คุณแม่ขา รีบมาดูน้องค่ะ น้องร้องไห้แล้ว) ดังขึ้นหลังจากเฟรมนี้เคลื่อนเข้าสู่หน้าจอเรียบร้อยแล้ว Music: เพลงทำนองและจังหวะคล้ายเสียงเดินเข้ากับจังหวะการขึ้นขีดแต่ละขีดของตัวหนังสือ แสดงพร้อมภาพเคลื่อนไหวของตัวหนังสือ Hotspot: เมื่อผู้ใช้คลิกที่ "ดูขั้นตอนการเขียน" ให้ภาพเคลื่อนไหวแสดงตัว เมื่อผู้ใช้คลิกที่ "สารบัญ" ให้ไปเฟรมที่ 3 เมื่อผู้ใช้คลิกที่ "ย้อนกลับ" ให้ไปเฟรมที่ 4 เมื่อผู้ใช้คลิกที่ "ต่อไป" ให้ไปเฟรมที่ 6

ไพจิตร สดวกการ 10 มิถุนายน 2545    
ปรับปรุงล่าสุด 12 พฤศจิกายน 2556