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

FlowchartsFlowcharts

StoryboardStoryboard

FLOW CHARTSFLOW CHARTS

Flowcharts• ผงงาน คอ แผนภาพทมการใชสญลกษณรปภาพ

และลกศรทแสดงถงขนตอนการทำางานของโปรแกรมหรอระบบทละขนตอน รวมไปถงทศทางการไหลของขอมลตงแตแรกจนไดผลลพธตามทตองการ

• ใชในการอธบายกระบวนการทตองมการตดสนใจ หรอมทางเลอก

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

ประโยชนของผงงาน

ชวยลำาดบขนตอนการทำางานของโปรแกรม และสามารถนำาไปเขยนโปรแกรมไดโดยไมสบสน

ชวยในการตรวจสอบ และแกไขโปรแกรมไดงาย เมอเกดขอผดพลาด

ชวยใหการดดแปลง แกไข ทำาไดอยางสะดวกและรวดเรว

ชวยใหผอนสามารถศกษาการทำางานของโปรแกรมไดอยางงาย และรวดเรวมากขน

วธการเขยนผงงานทด

ใชสญลกษณตามทกำาหนดไว

ใชลกศรแสดงทศทางการไหลของขอมลจากบนลงลาง หรอจากซายไปขวา

คำาอธบายในภาพควรสนกระทดรด และเขาใจงาย

ทกแผนภาพตองมลกศรแสดงทศทางเขา - ออก

ไมควรโยงเสนเชอมผงงานทอยไกลมาก ๆ ควรใชสญลกษณจดเชอมตอแทน

ผงงานควรมการทดสอบความถกตองของการทำางานกอนนำาไปเขยนโปรแกรม

สญลกษณทใชในการเขยน สญลกษณทใชในการเขยน Flowchart Flowchart ((แผนผงลำาดบงานแผนผงลำาดบงาน)) ของ ของ PowerPointPowerPoint

สญลกษณทใชในการเขยน สญลกษณทใชในการเขยน FlowchartFlowchart((แผนผงแผนผงลำาดบงานลำาดบงาน))ของ ของ PowerPointPowerPoint

ขนตอน

ขนตอนการสำารอง

การตดสนใจ

ขอมล

ขนตอนทนยามไว

ทเกบภายใน

เอกสาร

หลายเอกสาร

สนสด

การเตรยม

ปอนขอมลดวยตนเอง

ขนตอนททำาดวยตนเอง

ตวเชอม

ตวเชอมไปหนาอน

บตร

เทปเจาะร

จดรวมการเชอมตอ

หรอ

ตรวจเทยบ

เรยงลำาดบ

แยก

ผสาน

ขอมลทเกบอย

หนวงเวลา

ทเกบแบบเขาถงโดยลำาดบ

ดสกแมเหลก

ทเกบแบบเขาถงโดยตรง

จอภาพ

สญลกษณทนยมใชงานสญลกษณทนยมใชงาน

ในการออกแบบงานนำาเสนอดวย ในการออกแบบงานนำาเสนอดวย PowerPointPowerPoint

                                                                                              ตวแรก Terminal ใชบอกจดเรมตนและจดสนสดของงานครบตวทสอง Process Box ใชอธบายงานตาง ๆ เชน การพมพงาน, การคนหาวสดโสต ฯ ,การซอมเครอง เปนตนตวทสาม Dicision Box ใชอธบายการตดสนใจของงานหรอขนตอนตาง ๆ กอนจะไปทำางานขนตอนตอไป เชน ตรวจสอบขอมลถกตองใชหรอไม ถาใชใหไปทำางานอะไรตอ ไมไชไปทำางานอะไรตอตวทส Input/Output ใชอธบายการรบขอมลเขาหรอสงขอมลออกเชน รบบตรนกศกษา , เขยนใบเสรจรบเงนเปนตนตวทหา Connecting disjoint ใชเปนจดเชอมตอของสญลกษณตาง ๆในผงลำาดบงานตวทหก Direction of flow ใชสำาหรบแสดงทศทางการทำางานของผงลำาดบงาน

สญลกษณทนยมใชงานสญลกษณทนยมใชงาน

ในการออกแบบงานนำาเสนอดวย ในการออกแบบงานนำาเสนอดวย PowerpointPowerpoint

ตวอยาง ตวอยาง FlowchartsFlowcharts

ตวอยาง ตวอยาง FlowchartFlowchart

การเขยน การเขยน Flowchart Flowchart แบบโครงสรางแบบโครงสรางการเขยน Flowchart แบบโครงสรางมประโยชนคอทำาใหการไลขนตอนการทำางานทำาไดงายและเปนระเบยบ ซงมหลกการเขยนอย สามขอ คอ

•Sequence•Selection•Iteration

รปท 2

รปท 1

SEQUENCEคอการเขยนใหเปนลำาดบ ดงรปท 1. ไมใชเขยนขามไปขามมาดงรปท 2.

YN

รปท 3

SELECTIONเปนทางเลอกของโปรแกรมซง จะตองมเพยงสองทางเลอกเทานน และ หลงจากนนทางเลอกทงสองตองมาพบกน และทำางานในขนตอนตอไป

รปท 4.

ITERATIONคอการทำาซำา เปนการเขยน flowchart ใหกลบมาทำางานในขนตอนอยางเกา จะเหนวา flowchart มลกษณะวน ซงเรยกวา loop และจะสงเกตวา การวน loop ดง รปท 4 จะไมมทางออกไปทำางานในขนตอนตอไปไดเลย เพอทจะทำาใหออกจาก loop ไดจะตองมการ เชคเพออกจาก loop ดงจะไดกลาวตอไป

ในการเขยน flowchart จะม loop ใหเลอกใชไดสองประเภทคอ DO WHILE และ DO UNTIL

Y

N

รปท 5.

•DO WHILE จะ ทำาการเชคเพอทจะออกจาก loop กอนทจะทำางานตามคำาสงใน loop•และ เงอนไขเพอทจะออกจาก loop จะตองเปนเทจ ดงรปท 5.

Y

N

รปท 6.

DO UNTIL จะ ทำาการเชคเพอทจะออกจาก loop ณ ตำาแหนงสดทายของ loop และ เงอนไขเพอทจะออกจาก loop จะตองเปนจรง ดงรปท 6.

STORYBOARDSTORYBOARD

  การเขยนสตอรบอรด การเขยนสตอรบอรด ((StoryboardStoryboard ) )•การเขยนสตอรบอรดเปนขนตอนของการเตรการเขยนสตอรบอรดเปนขนตอนของการเตรยมการนำาเสนอขอความ ภาพ รวมทง สอในรปยมการนำาเสนอขอความ ภาพ รวมทง สอในรปของมลตมเดยตางๆ ลงในกระดาษ เพอใหการของมลตมเดยตางๆ ลงในกระดาษ เพอใหการนำาเสนอขอความ และสอในรปแบบตางๆ เหลานำาเสนอขอความ และสอในรปแบบตางๆ เหลานเปนไปอยางเหมาะสมบนหนาจอคอมพวเตอรนเปนไปอยางเหมาะสมบนหนาจอคอมพวเตอรตอไป ขณะทผงงานนำาเสนอลำาดบ และขนตอนตอไป ขณะทผงงานนำาเสนอลำาดบ และขนตอนของการตดสนใจ สตอรบอรดนำาเสนอเนอหา ของการตดสนใจ สตอรบอรดนำาเสนอเนอหา และลกษณะของการนำาเสนอ ขนตอนการสรางและลกษณะของการนำาเสนอ ขนตอนการสรางสตอรบอรดรวมไปถงการเขยนสครปต สตอรบอรดรวมไปถงการเขยนสครปต ((ซงซงสครปตในทน คอ เนอหาสครปตในทน คอ เนอหา ) ) ทผใชจะไดเหนบนทผใชจะไดเหนบนหนาจอซงไดแก เนอหา ขอมล คำาถาม ผลปอนหนาจอซงไดแก เนอหา ขอมล คำาถาม ผลปอนกลบ คำาแนะนำา คำาชแจง ขอความเรยกความกลบ คำาแนะนำา คำาชแจง ขอความเรยกความสนใจ ภาพนง และภาพเคลอนไหว ฯลฯสนใจ ภาพนง และภาพเคลอนไหว ฯลฯ

Story board• Storyboard คอ การสรางภาพใหเหนลำาดบ

ขนตอนตามเนอเรองทตองการ โดยเฉพาะการสรางภาพเคลอนไหว

• รายละเอยดทควรมใน Storyboard– ภาพราง– คำาอธบายแตละสอทใช (ขอความ

รปภาพ ภาพเคลอนไหว เสยง วดโอ)– เวลาทใช– หลายเลขหนาจอ– การเปลยนภาพ (Transition)– เครองมอหรอโปรแกรมทใช– งบประมาณ– ระบบนำาทาง (Navigation)– คำาอธบายเพมเตม (Comments)

การจดทำา การจดทำา StoryboardStoryboardตวอยางเชนในหวขอ ตวอยางเชนในหวขอ Presentations Presentations จากโฟลวชารตกเปนการแจงแจงจากโฟลวชารตกเปนการแจงแจงรายละเอยดลงไปวาในสวนนประกอบรายละเอยดลงไปวาในสวนนประกอบดวยภาพ ขอความ ภาพเครองไหว มเสยงหรอเพลงประกอบหรอไม และมดวยภาพ ขอความ ภาพเครองไหว มเสยงหรอเพลงประกอบหรอไม และมการเรยงลำาดบการทำางานอยางไร การเรยงลำาดบการทำางานอยางไร มการวางหนาจออยางไรรวมทงการกำาหนดแหลงของขอมล เชน ภาพและมการวางหนาจออยางไรรวมทงการกำาหนดแหลงของขอมล เชน ภาพและเสยงวาไดมาอยางไรจากแหลงไหนเสยงวาไดมาอยางไรจากแหลงไหน

การเตรยมขอมลสำาหรบ การเตรยมขอมลสำาหรบ Storyboard Storyboard ขอมลสำาหรบ ขอมลสำาหรบ Storyboard Storyboard อาจมทงภาพ เสยง ขอความ ภาพเคลอนไหวอาจมทงภาพ เสยง ขอความ ภาพเคลอนไหว (Animation(AnimationMovies) Movies) หรออนๆ ซงจะตองมการจดเตรยมขนมากอนทจะนำาไปใสโปรแกรม มรายละเอยดทเกยวของดงนหรออนๆ ซงจะตองมการจดเตรยมขนมากอนทจะนำาไปใสโปรแกรม มรายละเอยดทเกยวของดงน

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

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

3. 3. สรางภาพเคลอนไหว สรางภาพเคลอนไหว (Animation File) (Animation File) ขนใชเอง เชน จากโปรแกรม ขนใชเอง เชน จากโปรแกรม Autodesk Animation, 3D Studio Autodesk Animation, 3D Studio และอน ๆ และอน ๆ ทสามารถทำาภาพทสามารถทำาภาพเคลอนไหวทงสองและสามมตโปรแกรม เคลอนไหวทงสองและสามมตโปรแกรม Authoring System Authoring System สวนใหญจะมความสามารถทำาภาพ สวนใหญจะมความสามารถทำาภาพ Animation Animation เปนพนฐานอยแลวเปนพนฐานอยแลว

ขอมลทเปนขอความอาจจะปอนลงไปใน ขอมลทเปนขอความอาจจะปอนลงไปใน Authoring ProgramAuthoring Programหรอ หรอ Power Point Power Point การปอนขอมลดงกลาวน อาจจะปอนโดยตรงหรอบางโปรแกรมสามารถอานขอมลจากการปอนขอมลดงกลาวน อาจจะปอนโดยตรงหรอบางโปรแกรมสามารถอานขอมลจาก Text FileText File เขาไปใชในงานไดเขาไปใชในงานได

ตวอยาง ตวอยาง StoryboardStoryboard

Title : ………………………

File Name : ……………………

From :………………Link to frame :………..

Sound : …………………………………

Picture : …………………………………

Video : …………………………………

narrations : ………………………………… ………………………………………………. ………………………………………………. ………………………………………………. ……………………………………………….

Other : …………………………….……

Animation : ……………………………