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

หลักการเขียน Flowchart และ Storyboard ที่ดี
Flowcharts
Storyboard
FLOW CHARTS
Flowcharts
• ผังงาน คือ แผนภาพที่มีการใช้ สัญลักษณ์ รูปภาพและลูกศรที่แสดงถึง
ขัน้ ตอนการทางานของโปรแกรมหรื อระบบทีละขัน้ ตอน รวมไปถึงทิศ
ทางการไหลของข้ อมูลตัง้ แต่ แรกจนได้ ผลลัพธ์ ตามที่ต้องการ
• ใช้ ในการอธิบายกระบวนการที่ต้องมีการตัดสินใจ หรื อมีทางเลือก
ประเภทของผังงาน
• ผังงานระบบ(System Flowchart)
• ผังงานโปรแกรม(Programming Flowchart)
ประโยชน์ ของผังงาน
ช่วยลำดับขันตอนกำรท
้
ำงำนของโปรแกรม และสำมำรถนำไปเขียนโปรแกรมได้ โดยไม่สบั สน
ช่วยในกำรตรวจสอบ และแก้ ไขโปรแกรมได้ งำ่ ย เมื่อเกิดข้ อผิดพลำด
ช่วยให้ กำรดัดแปลง แก้ ไข ทำได้ อย่ำงสะดวกและรวดเร็ว
ช่วยให้ ผ้ อู ื่นสำมำรถศึกษำกำรทำงำนของโปรแกรมได้ อย่ำงง่ำย และรวดเร็วมำกขึ ้น
วิธีการเขียนผังงานที่ดี
ใช้ สญ
ั ลักษณ์ตำมที่กำหนดไว้
ใช้ ลกู ศรแสดงทิศทำงกำรไหลของข้ อมูลจำกบนลงล่ำง หรือจำกซ้ ำยไปขวำ
คำอธิบำยในภำพควรสันกระทั
้
ดรัด และเข้ ำใจง่ำย
ทุกแผนภำพต้ องมีลกู ศรแสดงทิศทำงเข้ ำ - ออก
ไม่ควรโยงเส้ นเชื่อมผังงำนที่อยูไ่ กลมำก ๆ ควรใช้ สญ
ั ลักษณ์จดุ เชื่อมต่อแทน
ผังงำนควรมีกำรทดสอบควำมถูกต้ องของกำรทำงำนก่อนนำไปเขียนโปรแกรม
สั ญลักษณ์ ทใี่ ช้ ในการเขียน Flowchart (แผนผังลาดับ
งาน) ของ PowerPoint
สัญลักษณ์ ท่ ีใช้ ในการเขียน Flowchart(แผนผังลาดับงาน)ของ PowerPoint
ขั้นตอน
ขั้นตอนการสารอง
การตัดสิ นใจ
ขั้นตอนที่นิยามไว้
ที่เก็บภายใน
เอกสาร
สิ้ นสุ ด
ตรวจเทียบ
ตัวเชื่อมไปหน้าอื่น
การเตรี ยม
ป้อนข้อมูลด้วยต้นเอง
ที่เก็บแบบเข้าถึงโดยลาดับ
หรื อ
ตัวเชื่อม
เรี ยงลาดับ
บัตร
เทปเจาะรู
แยก
ผสาน
ข้อมูล
ขั้นตอนที่ทาด้วยตนเอง
หลายเอกสาร
จุดร่ วมการเชื่อมต่อ
ข้อมูลที่เก็บอยู่
หน่วงเวลา
ดิสก์แม่เหล็ก
ที่เก็บแบบเข้าถึงโดยตรง
จอภาพ
สั ญลักษณ์ ที่นิยมใช้ งาน
ในการออกแบบงานนาเสนอด้ วย PowerPoint
สั ญลักษณ์ ทนี่ ิยมใช้ งาน
ในการออกแบบงานนาเสนอด้ วย Powerpoint
ตัวแรก Terminal ใช้ บอกจุดเริมต้ นและจุดสิ ้นสุดของงำนครับ
ตัวที่สอง Process Box ใช้ อธิบำยงำนต่ำง ๆ เช่น กำรพิมพ์งำน, กำรค้ นหำวัสดุโสต ฯ ,กำรซ่อมเครื่ อง เป็ นต้ น
ตัวที่สาม Dicision Box ใช้ อธิบำยกำรตัดสินใจของงำนหรื อขันตอนต่
้
ำง ๆ ก่อนจะไปทำงำนขันตอนต่
้
อไป เช่น ตรวจสอบข้ อมูลถูกต้ องใช่หรื อไม่ ถ้ ำ
ใช่ให้ ไปทำงำนอะไรต่อ ไม่ไช่ไปทำงำนอะไรต่อ
ตัวที่ส่ ี Input/Output ใช้ อธิบำยกำรรับข้ อมูลเข้ ำหรื อส่งข้ อมูลออกเช่น รับบัตรนักศึกษำ , เขียนใบเสร็จรับเงินเป็ นต้ น
ตัวที่ห้า Connecting disjoint ใช้ เป็ นจุดเชื่อมต่อของสัญลักษณ์ต่ำง ๆในผังลำดับงำน
ตัวที่หก Direction of flow ใช้ สำหรับแสดงทิศทำงกำรทำงำนของผังลำดับงำน
ตัวอย่ าง Flowcharts
ตัวอย่ าง Flowchart
กำรเขียน Flowchart แบบโครงสร้ ำง
กำรเขียน Flowchart แบบโครงสร้ ำงมีประโยชน์คือทำให้ กำรไล่ขั ้นตอนกำรทำงำนทำได้ ง่ำยและเป็ นระเบียบ ซึง่ มีหลักกำรเขียนอยู่
สำมข้ อ คือ
•Sequence
•Selection
•Iteration
SEQUENCE
คือกำรเขียนให้ เป็ นลำดับ ดังรูปที่ 1. ไม่ใช่เขียนข้ ำมไปข้ ำมมำดังรูปที่ 2.
รูปที่ 1
รูปที่ 2
SELECTION
เป็ นทำงเลือกของโปรแกรมซึง่ จะต้ องมีเพียงสองทางเลือกเท่ านัน้ และ หลังจากนัน้ ทางเลือกทัง้ สองต้ องมาพบกัน และทำงำนในขันตอนต่
้
อไป
N
Y
รูปที่ 3
ITERATION
คือกำรทำซ ้ำ เป็ นกำรเขียน flowchart ให้ กลับมำทำงำนในขันตอนอย่
้
ำงเก่ำ จะเห็นว่ำ flowchart มีลกั ษณะวน ซึง่ เรี ยกว่ำ loop และจะสังเกตว่ำ
กำรวน loop ดัง รูปที่ 4 จะไม่มีทำงออกไปทำงำนในขันตอนต่
้
อไปได้ เลย เพื่อที่จะทำให้ ออกจำก loop ได้ จะต้ องมีกำร เช็คเพื่ออกจำก loop ดังจะได้ กล่ำวต่อไป
รูปที่ 4.
ในกำรเขียน flowchart จะมี loop ให้ เลือกใช้ ได้ สองประเภทคือ DO WHILE และ DO UNTIL
•DO WHILE จะ ทาการเช็คเพื่อที่จะออกจาก loop ก่ อนที่จะทางานตามคาสั่งใน loop
•และ เงื่อนไขเพื่อที่จะออกจาก loop จะต้ องเป็ นเท็จ ดังรูปที่ 5.
N
Y
รูปที่ 5.
DO UNTIL จะ ทาการเช็คเพื่อที่จะออกจาก loop ณ ตาแหน่ งสุดท้ ายของ loop และ เงื่อนไขเพื่อที่จะออกจาก loop จะต้ องเป็ นจริง ดังรูปที่ 6.
Y
N
รูปที่ 6.
STORYBOARD
กำรเขียนสตอรี่ บอร์ ด (Storyboard)
•การเขียนสตอรี่บอร์ ดเป็ นขัน้ ตอนของการเตรียมการนาเสนอ
ข้ อความ ภาพ รวมทัง้ สื่อในรูปของมัลติมีเดียต่ างๆ ลงใน
กระดาษ เพื่อให้ การนาเสนอข้ อความ และสื่อในรูปแบบต่ างๆ
เหล่ านีเ้ ป็ นไปอย่ างเหมาะสมบนหน้ าจอคอมพิวเตอร์ ต่อไป
ขณะที่ผังงานนาเสนอลาดับ และขัน้ ตอนของการตัดสินใจ สตอรี่
บอร์ ดนาเสนอเนือ้ หา และลักษณะของการนาเสนอ ขัน้ ตอนการ
สร้ างสตอรี่บอร์ ดรวมไปถึงการเขียนสคริปต์ (ซึ่งสคริปต์ ในที่นี ้
คือ เนือ้ หา) ที่ผ้ ูใช้ จะได้ เห็นบนหน้ าจอซึ่งได้ แก่ เนือ้ หา ข้ อมูล
คาถาม ผลป้ อนกลับ คาแนะนา คาชีแ้ จง ข้ อความเรียกความ
สนใจ ภาพนิ่ง และภาพเคลื่อนไหว ฯลฯ
Story board
•
•
Storyboard คือ กำรสร้ ำงภำพให้ เห็นลำดับขันตอนตำมเนื
้
้อเรื่ อง
ที่ต้องกำร โดยเฉพำะกำรสร้ ำงภำพเคลื่อนไหว
รำยละเอียดที่ควรมีใน Storyboard
– ภำพร่ำง
– คำอธิบำยแต่ละสื่อที่ใช้ (ข้ อควำม รูปภำพ ภำพเคลื่อนไหว
เสียง วีดโิ อ)
– เวลำที่ใช้
– หลำยเลขหน้ ำจอ
– กำรเปลี่ยนภำพ (Transition)
– เครื่ องมือหรื อโปรแกรมที่ใช้
– งบประมำณ
– ระบบนำทำง (Navigation)
– คำอธิบำยเพิ่มเติม (Comments)
กำรจัดทำ Storyboard
ตัวอย่ำงเช่นในหัวข้ อ Presentations จำกโฟลว์ชำร์ ตก็เป็ นกำรแจงแจงรำยละเอียดลงไปว่ำในส่วนนี ้ประกอบ
ด้ วยภำพ ข้ อควำม ภำพเครื่ องไหว มีเสียงหรื อเพลงประกอบหรื อไม่ และมีกำรเรี ยงลำดับกำรทำงำนอย่ำงไร
มีกำรวำงหน้ ำจออย่ำงไรรวมทังกำรก
้
ำหนดแหล่งของข้ อมูล เช่น ภำพและเสียงว่ำได้ มำอย่ำงไรจำกแหล่งไหน
กำรเตรี ยมข้ อมูลสำหรับ Storyboard
ข้ อมูลสำหรับ Storyboard อำจมีทงภำพ
ั้
เสียง ข้ อควำม ภำพเคลื่อนไหว (Animation
Movies) หรื ออื่นๆ ซึง่ จะต้ องมีกำรจัดเตรี ยมขึ ้นมำก่อนที่จะนำไปใส่โปรแกรม มีรำยละเอียดที่เกี่ยวข้ องดังนี ้
1 การจัดเตรี ยมภาพสาหรั บโปรแกรม
ข้ อมูลต่ำง ๆ อำจจะมำจำกกำรวำดด้ วยโปรแกรม Graphic Editor เช่น โปรแกรม PC Paint Brush ที่มี Microsoft Windows
หรื ออื่น ๆ โปรแกรม Authoring System บำงตัวจะมีคำสัง่ สำหรับกำรวำดรูปหรื อในส่วนของ Graphics Editor ไว้ ให้ ด้วย
ทำให้ ทำงำนได้ สะดวกขึ ้น แต่อย่ำงไรก็ดีโปรแกรมแต่ละตัวมีควำมสำมำรถแตกต่ำงกัน ดังนั ้นอำจต้ องมีกำรใช้ โปรแกรม
หลำยตัวช่วยกัน กำรทำงำนภำยใต้ ระบบ Microsoft Windows ทำให้ สำมำรถแลกเปลี่ยนข้ อมูลกันได้ โดยง่ำย นอกจำก
นี ้อำจจะนำเข้ ำมำจำกแหล่งอื่น เช่น กำร Scan จำกหนังสือหรื อวำรสำรด้ วยกำรใช้ เครื่ อง Scanner หรื ออำจนำมำจำก
กล้ องถ่ำยวีดีโอ ในกรณีนี ้จะต้ องมีกำร์ ดพิเศษที่ทำหน้ ำที่จบั สัญญำณวีดีโอเข้ ำมำในเครื่ องคอมพิวเตอร์ เรี ยกว่ำกำร์ ด
Video Capture เช่น กำร์ ด Video Blaster ของบริษัท Creative Technology ด้ วยวิธีนี ้ทำให้ สำมำรถนำภำพต่ำง ๆ
เข้ ำมำใช้ ในโปรแกรมได้ อย่ำงมำกมำย
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
3. สร้ างภาพเคลื่อนไหว (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 : ……………………………