หลักการเขียน Flowchart และ Storyboard ที่ดี

1. หลักการเขียน Flowchart และ Storyboard ที่ดี Flowcharts Storyboard

2. FLOW CHARTS

3. Flowcharts • ผังงาน คือ แผนภาพที่มีการใช้สัญลักษณ์รูปภาพและลูกศรที่แสดงถึงขั้นตอนการทำงานของโปรแกรมหรือระบบทีละขั้นตอน รวมไปถึงทิศทางการไหลของข้อมูลตั้งแต่แรกจนได้ผลลัพธ์ตามที่ต้องการ • ใช้ในการอธิบายกระบวนการที่ต้องมีการตัดสินใจ หรือมีทางเลือก

4. ประเภทของผังงาน • ผังงานระบบ(System Flowchart) • ผังงานโปรแกรม(Programming Flowchart)

5. ประโยชน์ของผังงาน ช่วยลำดับขั้นตอนการทำงานของโปรแกรม และสามารถนำไปเขียนโปรแกรมได้โดยไม่สับสน ช่วยในการตรวจสอบ และแก้ไขโปรแกรมได้ง่าย เมื่อเกิดข้อผิดพลาด ช่วยให้การดัดแปลง แก้ไข ทำได้อย่างสะดวกและรวดเร็ว ช่วยให้ผู้อื่นสามารถศึกษาการทำงานของโปรแกรมได้อย่างง่าย และรวดเร็วมากขึ้น

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

7. สัญลักษณ์ที่ใช้ในการเขียน Flowchart (แผนผังลำดับงาน)ของ PowerPoint

8. สัญลักษณ์ที่ใช้ในการเขียน Flowchart(แผนผังลำดับงาน)ของ PowerPoint ที่เก็บแบบเข้าถึงโดยลำดับ หรือ ตัวเชื่อม ขั้นตอน ขั้นตอนที่นิยามไว้ สิ้นสุด ตรวจเทียบ ดิสก์แม่เหล็ก ตัวเชื่อมไปหน้าอื่น การเตรียม ที่เก็บภายใน ที่เก็บแบบเข้าถึงโดยตรง ขั้นตอนการสำรอง บัตร เรียงลำดับ จอภาพ เทปเจาะรู แยก การตัดสินใจ ป้อนข้อมูลด้วยต้นเอง เอกสาร ขั้นตอนที่ทำด้วยตนเอง ผสาน ข้อมูล หลายเอกสาร จุดร่วมการเชื่อมต่อ ข้อมูลที่เก็บอยู่ หน่วงเวลา

9. สัญลักษณ์ที่นิยมใช้งานสัญลักษณ์ที่นิยมใช้งาน ในการออกแบบงานนำเสนอด้วย PowerPoint

10. สัญลักษณ์ที่นิยมใช้งานสัญลักษณ์ที่นิยมใช้งาน ในการออกแบบงานนำเสนอด้วย Powerpoint ตัวแรก Terminal ใช้บอกจุดเริมต้นและจุดสิ้นสุดของงานครับ ตัวที่สอง Process Boxใช้อธิบายงานต่าง ๆ เช่น การพิมพ์งาน, การค้นหาวัสดุโสต ฯ ,การซ่อมเครื่อง เป็นต้น ตัวที่สาม Dicision Box ใช้อธิบายการตัดสินใจของงานหรือขั้นตอนต่าง ๆ ก่อนจะไปทำงานขั้นตอนต่อไป เช่น ตรวจสอบข้อมูลถูกต้องใช่หรือไม่ ถ้าใช่ให้ไปทำงานอะไรต่อ ไม่ไช่ไปทำงานอะไรต่อ ตัวที่สี่ Input/Output ใช้อธิบายการรับข้อมูลเข้าหรือส่งข้อมูลออกเช่น รับบัตรนักศึกษา , เขียนใบเสร็จรับเงินเป็นต้น ตัวที่ห้า Connecting disjoint ใช้เป็นจุดเชื่อมต่อของสัญลักษณ์ต่าง ๆในผังลำดับงาน ตัวที่หก Direction of flow ใช้สำหรับแสดงทิศทางการทำงานของผังลำดับงาน

11. ตัวอย่าง Flowcharts

12. ตัวอย่าง Flowchart

13. การเขียน Flowchart แบบโครงสร้าง • การเขียน Flowchart แบบโครงสร้างมีประโยชน์คือทำให้การไล่ขั้นตอนการทำงานทำได้ง่ายและเป็นระเบียบ ซึ่งมีหลักการเขียนอยู่ • สามข้อ คือ • Sequence • Selection • Iteration

14. รูปที่ 1 รูปที่ 2 SEQUENCE คือการเขียนให้เป็นลำดับ ดังรูปที่ 1. ไม่ใช่เขียนข้ามไปข้ามมาดังรูปที่ 2.

15. N Y รูปที่ 3 SELECTION เป็นทางเลือกของโปรแกรมซึ่ง จะต้องมีเพียงสองทางเลือกเท่านั้น และ หลังจากนั้นทางเลือกทั้งสองต้องมาพบกัน และทำงานในขั้นตอนต่อไป

16. รูปที่ 4. ITERATION คือการทำซ้ำ เป็นการเขียน flowchart ให้กลับมาทำงานในขั้นตอนอย่างเก่า จะเห็นว่า flowchart มีลักษณะวน ซึ่งเรียกว่า loop และจะสังเกตว่า การวน loop ดัง รูปที่ 4 จะไม่มีทางออกไปทำงานในขั้นตอนต่อไปได้เลย เพื่อที่จะทำให้ออกจาก loop ได้จะต้องมีการ เช็คเพื่ออกจาก loop ดังจะได้กล่าวต่อไป

17. N Y รูปที่ 5. ในการเขียน flowchart จะมี loop ให้เลือกใช้ได้สองประเภทคือ DO WHILE และ DO UNTIL • DO WHILEจะ ทำการเช็คเพื่อที่จะออกจาก loop ก่อนที่จะทำงานตามคำสั่งใน loop • และ เงื่อนไขเพื่อที่จะออกจาก loop จะต้องเป็นเท็จ ดังรูปที่ 5.

18. Y N รูปที่ 6. • DO UNTILจะ ทำการเช็คเพื่อที่จะออกจาก loop ณ ตำแหน่งสุดท้ายของ loop และ เงื่อนไขเพื่อที่จะออกจาก loop จะต้องเป็นจริง ดังรูปที่ 6.

19. STORYBOARD

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

21. Story board • Storyboard คือ การสร้างภาพให้เห็นลำดับขั้นตอนตามเนื้อเรื่องที่ต้องการ โดยเฉพาะการสร้างภาพเคลื่อนไหว • รายละเอียดที่ควรมีใน Storyboard • ภาพร่าง • คำอธิบายแต่ละสื่อที่ใช้ (ข้อความ รูปภาพ ภาพเคลื่อนไหว เสียง วีดิโอ) • เวลาที่ใช้ • หลายเลขหน้าจอ • การเปลี่ยนภาพ (Transition) • เครื่องมือหรือโปรแกรมที่ใช้ • งบประมาณ • ระบบนำทาง (Navigation) • คำอธิบายเพิ่มเติม (Comments)

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

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

24. 2 การจัดเตรียมเสียงการบันทึกเสียงเข้ามาในเครื่องคอมพิวเตอร์นั้น เครื่องคอมพิวเตอร์จะต้องมีการ์ด Sound Generator Card เช่น Sound Blaster Card การ์ดนี้มีความจำเป็นในการบันทึกเสียง ที่มีการแปลงสัญญาณเสียงเป็นข้อมูลคอมพิวเตอร์และทำงานในทางตรงข้ามเมื่อโปรแกรม เรียกใช้แฟ้มเสียงที่จะให้ออกลำโพงในโปรแกรม Microsoft Windows 3.1 ซึ่งเป็น Multimedia Version ก็มีโปรแกรม Sound Recorder สำหรับบันทึกเสียง Media Player สำหรับ Playback เสียงบันทึกไปแล้วจะเก็บเป็นแฟ้มข้อมูลเพื่อให้ Authoring System เรียกใช้โดย สามารถกำหนดเวลาในการเล่น Playback เพื่อให้ความสัมพันธ์กับการแสดงภาพการนำเสียงเข้าไปใช้ในบางครั้งอาจใช้วิธีให้โปรแกรมควบคุมการเล่นเครื่อง CD สัมพันธ์กับเนื้อเรื่องก็ได้โปรแกรม Authoring System เช่น โปรแกรม Authorwar Professional ของบริษัท Macromedia เป็นตัวอย่างหนึ่งที่มีความสามารถนี้ ข้อมูลที่มีลักษณะเป็นภาพ เคลื่อนไหวการนำภาพเคลื่อนไหวเข้ามาใช้กับโปรแกรมอาจทำได้หลายวิธี เช่น1. การต่อเครื่องเล่นเลเซอร์เข้ากับคอมพิวเตอร์ แล้วใช้โปรแกรมควบคุมการเล่นให้สัมพันธ์กับเนื้อหา2. การจับภาพจากวิดีโอเข้ามา เป็นข้อมูลประเภท Movied file โดยมีการกำหนดเป็นจำนวนเฟรมต่อวินาที ทำได้ด้วยโปรแกรม เช่น Microsoft Video For windows จากนั้นจึงเรียกใช้โฟล์ด้วยโปรแกรม Video Capture

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

26. ตัวอย่าง Storyboard

27. Title : ……………………… From :………………Link to frame :……….. File Name : …………………… Other : …………………………….…… Picture : ………………………………… narrations : ………………………………… ………………………………………………. ………………………………………………. ………………………………………………. ………………………………………………. Sound : ………………………………… Video : ………………………………… Animation : ……………………………