animation the game likes life¹‚ครงงาน... · 2020. 8. 6. ·...

อนเมชน ชวตกเหมอนเกม Animation The Game Likes Life

จดท ำโดย นำยสวสดวรรษ ส ำเภำพอคำ นำยกฤษณศำสตร สงหหำ

โครงกำรนเปนสวนหนงของกำรศกษำตำมหลกสตรประกำศนยบตรวชำชพชนสง สำขำวชำคอมพวเตอรธรกจ

วทยำลยเทคโนโลยอรรถวทยพณชยกำร ปกำรศกษำ 2562

ข

บทคดยอ หวขอโครงการ อนเมชน ชวตกเหมอนเกม Animetion The Game Likes Life ผจดท าโครงการ นายสวสดวรรษ ส าเภาพอคา

นายกฤษณศาสตร สงหหา อาจารยทปรกษา อาจารยธนาวฒ วชย อาจารยทปรกษารวม อาจารยฐตรต นยพฒน สาขาวชา สาขาวชาคอมพวเตอรธรกจ สถาบน วทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2562 ----------------------------------------------------------------------------------------------------------------------

บทคดยอ การสรางการตนแอนเมชÉน เรอง การประกอบคอมพวเตอรโดยใชโปรแกรม AdobeFlash

CS6 มวตถประสงค เพ อสรางการตนแอนเมชน เ รอง ชวตก เหมอนเกมโดยใชโปรแกรม AdobeFlash CS6 และ เพอเปนการตอยอดโปรแกรมจากทเคยศกษามาโดยตลอดหลกสตร ใช วธการเกบขอมลโดยส ารวจความคดเหนจากการจดสมกลมตวอยาง ประกอบดวยความคดเหนใน ดานความถกตองของเนอหา สาระ ความเหมาะสมในดานตางๆ คอ ตวหนงสอท อานงาย ความ ชดเจนของรปภาพ และแอนเมชนทใชจ านวนแอนเมชน และรปแบบการจดวางเนอหาสาระ สะดวกในการใชปมค าสงและเสยงทใช ความสอดคลองของแอนเมชนกบเนอหาสาระ และ จดประสงคการเรยนร

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

ค

กตตกรรมประกาศ

คณะผจดท ำไดจดท ำโครงกำรอนเมชนนดวยควำมตงใจและควำมพยำยำม โดยไดรบควำมรวมมอเปนอยำงดจำกทกสวนทเกยวของกบโครงกำรฉบบน ขอขอบคณคณะอำจำรยสำขำวชำคอมพวเตอรธรกจทกทำน ทคอยใหค ำแนะน ำ ตรวจสอบเอกสำร ซงน ำไปสกำรแกไขปรบปรงใหโครงกำรออกมำไดถกตองมำกทสด โครงกำรระบบกำรอนเมชน ชวตกเหมอนเกม ในกำรออกแบบอนเมชนและปรบแตงใหภำพและเสยงทมควำมนำสนใจมำกขนนนไดมเพอน ๆ ปวส.2/5 และ ปวส.2/11 ทคอยใหค ำแนะน ำและตชมโครงกำรของคณะผจดท ำ ใหทรำบถงขอบกพรองของโครงกำร สดทำยนกลมคณะผจดท ำขอขอบพระคณวทยำลยเทคโนโลยอรรถวทยพณชยกำรทท ำใหคณะผจดท ำไดศกษำหำควำมเรยนร ไดพฒนำตนเองจงท ำใหไดประสบควำมส ำเรจในกำรจดท ำโครงกำรนขนมำ ถำไมมพวกทำนทงหลำยทำงคณะกไมรวำจะสำมำรถมำถง ณ จดๆนไดหรอเปลำขอขอบคณทกคน

ง

ค ำน ำ

การจดท าโครงการน เปนสวนหนงของวชาโครงการ รหสวชา 3204-8501 หลกสตรประกาศนยบตรวชาชพชนสง สาขาวชาคอมพวเตอรธรกจ โดยคณะผจดท าไดจดท าโครงการประเภท อนเมชน ชวตกเหมอนเกม โดยมการสรางอนเมชนเพอน าเสนอผลงานแกผทสนใจในการรบชมอนเมชนททางคณะผจดท าไดท าขนมานน ประกอบไปดวยอนเมชนภาพและเสยงเพอเปนตวอยางใหเหนถงการสรางอนเมชน เพอใหเขาใจโครงสรางของอนเมชนและเพอใหคนทสนใจในการสรางอนเมชนเพอใชในชวตประจ าวน สรางอนเมชนอยางมประสทธภาพสงสด รวมถงยงสามารถน าความรทไดจากการศกษาการสรางอนเมชนไปประยกตใชในชวตประจ าวนหรอประกอบเปนอาชพรายไดเสรม หากโครงการนมขอผดพลาดประการใด ทางคณะผจดท า ขออภยไว ณ ทน และจะด าเนนการพฒนาผลงานทางดานคอมพวเตอรใหพฒนาใหดขนไป

คณะผจดท า

25 มกราคม 2562

จ

สารบญ

หนา

หนาอนมต ก บทคดยอ ข กตตกรรมประกาศ ค ค าน า ง สารบญ จ สารบญรป ช สารบญตาราง ญ บทท 1 บทน า 1.1 ภมหลงและความเปนมา 1 1.2 วตถประสงคโครงการ 2 1.3 ขอบเขตการศกษา 2 1.4 ประโยชนทคาดวาจะไดรบ 2 1.5 แผนการด าเนนงาน 3 1.6 เครองมอทใช 4 1.7 งบประมาณในการด าเนนการ 4 บทท 2 ระบบงานและทฤษฎทเกยวของ 2.1 ระบบงานในปจจบน 5 2.2 ปญหาทเกดขนในระบบงานปจจบน 6 2.3 ทฤษฎและระบบงานทเกยวของ 6 2.4 การน าคอมพวเตอรเขามาใชในระบบงาน 16 บทท 3 การออกแบบงานดวยระบบคอมพวเตอร

3.1 การออกแบบ Story Board 18 3.2 การออกแบบสงน าเขา (Input Design) 29 3.3 การออกแบบสงน าออก (Output Design) 30

ฉ

สารบญ (ตอ)

หนา บทท 4 การพฒนาอนเมชน ชวตกเหมอนเกม 4.1 เครองมอและอปกรณทใช 31 4.2 โปรแกรมทงหมดทใชพฒนา 31 4.3 วธการเขาโปรแกรม 32 บทท 5 สรปการท าโครงการ 5.1 สรปผลโครงการ 43 5.2 ปญหาและอปสรรคในการด าเนนงาน 43 5.3 สรปการด าเนนงานจรง(Gantt Chart) 44 5.4 สรปคาใชจายในการด าเนนงานจรง 45 บรรณานกรม 46 ภาคผนวก

- ใบขอเสนออนมตโครงการระบบคอมพวเตอร (ATC.01) 47 - ใบขอเสนออาจารยทปรกษารวมโครงการ (ATC.02) 48 - ใบขอสอบโครงการระบบคอมพวเตอรธรกจ (ATC.03) 49 - ใบขอสอบโครงการระบบคอมพวเตอรธรกจ (ATC.03) 50 - ใบรายงานความคบหนาโครงการระบบคอมพวเตอรธรกจ (ATC.04) 51 - ใบบนทกการเขาพบทปรกษาโครงการ (ATC.05) 52 - ขออนญาตอาจารยทปรกษารวมจดท าเอกสารบทท 4-5 (ATC.06) 53

ประวตผจดท าโครงการ 54

ช

สารบญรป หนา

รปท 2.4 วงจรส 8 รปท 2.5 แสดงถงสโทนรอนและโทนเยน 9 รปท 2.6 ความหมายของสและอารมณ 11รปท 2.7 เสนตงหรอเสนดง 14รปท 2.8 เสนตรง 14รปท 2.9 เสนเฉยงหรอเสนทแยงมม 14รปท 2.10 เสนหยกหรอเสนซกแซก 15 รปท 2.11 เสนโคงแบบคลน 15รปท 2.12 เสนโคงแบบกนหอย 15รปท 2.13 เสนประ 15รปท 3.1 Storyboard ฉากเรมเรอง 18รปท 3.2 Storyboard ฉากโหลด 18 รปท 3.3 Storyboard ฉากบรรยาย 19รปท 3.4 Storyboard ฉากตน อาบน า ไปโรงเรยน 19 รปท 3.5 Storyboard ฉากบรรยาย 20รปท 3.6 Storyboard ฉากบรรยาย 20 รปท 3.7 Storyboard ฉากเจอกลมเพอนในหอง 21รปท 3.8 Storyboard ฉากเดนเขาไปในกลม 21รปท 3.9 Storyboard ฉากสบากบเพอน 22 รปท 3.10 Storyboard ฉากเพอนชวนเลนการพนน 22 รปท 3.11 Storyboard ฉากตวเลอก (ตกลง) 23รปท 3.12 Storyboard ฉากตวเลอก (ปฏเสธ) 23รปท 3.13 Storyboard ฉากเราโดนอาจารยด 24 รปท 3.14 Storyboard ฉากเราโดนอาจารยด (เราไมไดอยในเหตการณ) 24 รปท 3.15 Storyboard ฉากเรยนหนงสอ 25 รปท 3.16 Storyboard ฉากแสดงคาเตอนกอนตวเลอกยอนกลบ (หลงตวเลอกตกลง) 25 รปท 3.17 Storyboard ฉากใหกลบไปเลนซ า (หลงตวเลอกตกลง) 26

ซ

สารบญรป (ตอ) หนา

รปท 3.18 Storyboard ฉากหมดเวลาเรยน (หลงตวเลอกปฏเสธ) 26 รปท 3.19 Storyboard ฉากเดนกลบบาน (หลงตวเลอกปฏเสธ) 27 รปท 3.20 Storyboard ฉากทองฟา (หลงตวเลอกปฏเสธ) 27 รปท 3.21 Storyboard ฉากบรรยาย 28 รปท 3.22 Storyboard ฉากจบและแนะนาตวผจดทา 28 รปท 4.1 ไปทไฟล Animation.swf แลวดบเบ ลคลกเพอเปด 32รปท 4.2 ฉากเรมเรอง 32รปท 4.3 ฉากโหลด 33รปท 4.4 ฉากบรรยาย 33รปท 4.5 ฉากตน อาบน า ไปโรงเรยน 34 รปท 4.6 ฉากบรรยาย 34รปท 4.7 ฉากบรรยาย 35 รปท 4.8 ฉากเจอกลมเพอนในหอง 35รปท 4.9 ฉากเดนเขาไปในกลม 36 รปท 4.10 ฉากสบากบเพอน 36รปท 4.11 ฉากเพอนชวนเลนการพนน 37รปท 4.12 ตดสนใจเพอดาเนนเน อเรองดวยตวเลอกทผใชเลอกเอง 37 รปท 4.13 ฉากเราโดนอาจารยด 38 รปท 4.14 ฉากแสดงคาเตอนกอนตวเลอกยอนกลบ (หลงตวเลอกตกลง) 38รปท 4.15 ฉากใหกลบไปเลนซ า (หลงตวเลอกตกลง) 39รปท 4.16 ฉากเราโดนอาจารยด (เราไมไดอยในเหตการณ) 39 รปท 4.17 ฉากเรยนหนงสอ 40 รปท 4.18 ฉากหมดเวลาเรยน (หลงตวเลอกปฏเสธ) 40 รปท 4.19 ฉากเดนกลบบาน (หลงตวเลอกปฏเสธ) 41 รปท 4.20 ฉากทองฟา (หลงตวเลอกปฏเสธ) 41รปท 4.21 ฉากบรรยาย 42รปท 4.22 ฉากจบและแนะนาตวผจดทา 42

ญ

สารบญตาราง

ตาราง หนา ตารางท 1.1 ตารางแผนการด าเนนงาน (Gantt Chart) 3 ตารางท 1.2 ตารางงบประมาณการด าเนนงาน 4 ตารางท 5.1.1 ตารางสรปขนาดโปรมแกรม 43 ตารางท 5.2 ตารางสรปเวลาการท างานจรง (Gantt Chart) 44 ตารางท 5.3 ตารางสรปคาใชจายในการด าเนนงานจรง 45

1

บทท 1

บทน ำ 1.1 ภมหลงควำมเปนมำ

อนเมชน กมความหมายทแปลไดโดยตรงคอ ความมชวตชวา มาจากรากศพทจากค าวา Anima ซงแปลวาจตวญญาณ หรอมชวต แตตอมา อนเมชนกมความหมายตามทเราๆทานๆเขาใจกนในปจจบนน กคอ การสรางภาพเคลอนไหวได หรอ ภาพการตนทเคลอนไหวได สวนอนเมชนในความหมายเชงภาพยนตรกคอ กระบวนการการฉายรปเฟรมภาพออกมาทละเฟรม หรอสรางดวยคอมพวเตอรกราฟค หรอ ท าดวยการวาดมอ และท าซ าการเคลอนไหวทละนอยๆซงจะแสดงทละภาพในอตราความเรว มากกวาหรอเทากบ16ภาพ ตอ 1 วนาท(ปจจบน 24เฟรม ตอ 1 วนาท --NTSC) สวน อนเม กเปนค าอกค าหนงทใชกนบอยๆนน กเปนค าท ญปน เรยกอนเมชนกนแบบยอๆ อนเมชนจะเนนการเลาเรองมากกวาภาพเคลอนไหว ความเปนมาของอนเมชนในแตละพนทของโลกกมพฒนาการทไมเหมอนกน

เนองดวยในปจจบนนนการใชชวตทมตวเลอกใหเราไดเลอกอยางมากมายเปนเรองทเราตองตดสนใจไมวาจะ ถก หรอ ผด กตาม ซงนนจงไมไดตางจากเกมมากนกทมกจะมตวเลอกใหเราไดเลอกแตมนกไมไดบงคบวาเราตองท าอะไรเกมนนจงเปนตวเลอกทเร าน ามาใชในการเปรยบเทยบการใชชวตประจ าวนจงไดจดท าสอการเรยนการสอนออนไลนในรปแบบของแอนเมชนขนเพอใหเกดความหนาสนใจ ดวยภาพประกอบและเสยงบรรยาย

ทงนทางคณะผจดท าหวงเปนอยางยงวา แอนเมชนเรองนจะเปนประโยชนใหแกผทสนใจไมมากกนอยและหวงอกวาแอนเมชนภายในสอจะใหความสนกและเพลดเพลนแกผรบชมรวมทงยงไดรบความรในการใชชวตทเปนประโยชนแกผทศกษาอกดวย

2

1.2 วตถประสงคโครงกำร

1.1 เพอศกษาใชโปรแกรม Adobe Flash cs6 1.2 เพอศกษาและคนควาขอมลทถกตองในการใชชวต 1.3 เพออธบายถงการใชชวต

1.3 ขอบเขตกำรศกษำ 1. สามารถท าแอนเมชนไดจรง 2. สามารถสรางตวละครทมการขยบเหมอนจรงได 3. มการสรางโลโกใหกบตวการตน 4. มการใสเสยงใหกบการตน

5. ประโยชนคาดวาจะไดรบ

1.4 ประโยชนทคำดวำหนำจะไดรบ

1. มความรเกยวกบโปรแกรม Adobe Flash cs6 2. มความรทถกตองเเละชดเจนเกยวกบการใชชวต 3. เปนสอการเรยนการสอนในการใชชวตในรปแบบเเอนเมชนทสมบรณ

3

1.5 แผนกำรด ำเนนงำน (Gantt Chart)

ตำรำงท1.1 แผนการด าเนนงาน (Gantt Chart)

รำยกำร ภำคเรยนท 1 มถนำยน 62 กรกฎำคม 62 สงหำคม 62 กนยำยน 62 ระยะเวลำ

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

อบรมการท าโครงการนกศกษาปวช.3 และปวส.2

11-12 มถนายน 62

เสนอหวขอ ATC.01โครงการ รอบท 1 เอกสารบทท1

14 มถนายน 62

ประกาศผลหวขอโครงการ รอบท 1 17 มถนายน 62

เสนอหวขอโครงการ รอบท 2 19 มถนายน 62


ลงทะเบยนหวขอออนไลน เสนออาจารยทปรกษารวม ATC.02


สงเอกสารบทท 2 (ATC.04-05) 8-14 กรกฎาคม 62

สงเอกสารบทท 3 (ATC.04-05) 15-31 กรกฎาคม 62 สอบน าเสนอโครงการ (รอบเอกสารบทท1-3) ปวช .3 และปวส . 2 ATC.03 ครงท 1 (PPT)

17 สงหาคม 62

ประกาศผลสอบ (รอบเอกสาร) 22 สงหาคม 62

สงความคบหนาโปรแกรม 50% (ATC.04-05)

9-15 กนยายน 62



สงความคบหน าโปรแกรม 70% (ATC.04-05)


รำยกำร ภำคเรยนท 2 พฤศจกำยน 62 ธนวำคม 62 มกรำคม 63 กมภำพนธ 63 ระยะเวลำ

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

สงความคบหนา 90% (ATC.04-05) 1-8 พฤศจกายน 62 สงความคบหนา 100% (ATC.04-05) 9-13 พฤศจกายน 62 สอบน า เ ส นอ โ ค ร ง ก า ร ( ร อ บโปรแกรม) ระดบ ปวส.2 ATC.03 ครงท 2

16 พฤศจกายน 62

สอบน า เ ส นอ โ ค ร ง ก า ร ( ร อ บโปรแกรม) ระดบ ปวช.3 ATC.03 ครงท 2


ประกาศผลสอบ (รอบโปรแกรม) 2 ธนวาคม 62

สงเอกสารบทท 4 (ATC.04-05) 6-19 มกราคม 63 สงเอกสารบทท 5 (ATC.04-05) 20-26 มกราคม 63 สงงบประมาณในการท าโครงการ ตารางท 1.7 และตารางท 5.3 (แบบออนไลน)

26-30 มกราคม 63

สงรปเลม ซด ช าระคาเขาเลม 1-20 กมภาพนธ 63

4

1.6 เครองมอทใช 1. โปรแกรม Adobe Flash Professional CS6 ใชส าหรบจดท าแอนเมชน 2. โปรแกรม Voloco ใชส าหรบพากยเสยง 3. โปรแกรม GIF Maker ใชส าหรบใส Effect ใน Video 4. โปรแกรม Adobe Photoshop CS6 ใชในการท าฉากในบางฉาก

1.7 งบประมำณกำรด ำเนนงำน

ล ำดบ รำยกำร จ ำนวน รำคำ 1 คาหมกพมพ 1 700 2 คาแผน CD 2 40 3 เขารปเลม 1 400 4 ตลบใสแผนซด 1 50 5 คาเขาเลม 1 250 6 คาเดนทาง - 500

รวมเปนเงน 1,720

ตำรำงท 1.2 งบประมาณการด าเนนงาน

16

ความส าคญของเสน 1. ใชในการแบงทวางออกเปนสวนๆ 2. ก าหนดขอบเขตทวาง หมายถง ท าใหเกดรปราง (Shape) 3. ก าหนดเสนรอบนอกของรปทรง ท าใหมองเหนเปนรปทรง (Form) ชดขน 4. ท าหนาทเปนน าหนกออนแก ของแสงและเงา หมายถง การแรงเงาดวยเสน 5. ใหความรสกดวยการเปนแกรนหรอโครงสรางของรปหรอโครงสรางของภาพ

2.4 การน าคอมพวเตอรมาใชในระบบ 1.การน าเอาคอมพวเตอรมาใชในการสรางแอนเมชนดวยโปรแกรม Adobe Flash CS6

2.การน าเอาคอมพวเตอรมาใชในการออกแบบตวละครในแอนเมชน 3.การน าเอาคอมพวเตอรมาใชในการอดเสยงและเรยบเรยงเนอเรอง 4.การน าเอาคอมพวเตอรมาใชในการแสดงผลโดยรวมของแอนเมชน 5.การน าเอาคอมพวเตอรมาใชในการลงสของแอนเมชน 6.การน าเอาคอมพวเตอรมาใชในการท าฉากหลงในแอนเมชน 7.การน าเอาคอมพวเตอรมาใชในการแกไขงานในกรณผดพลาดในภายหลง 8.การน าเอาคอมพวเตอรมาใชในการท ารปแบบของเอกสาร 9.การน าเอาคอมพวเตอรมาใชในการจดแสดงผลงาน 10.การน าเอาคอมพวเตอรมาใชในการหาขอมลทจ าเปนตอการใชงานและออกแบบ

บทท2 ระบบงานแอนเมชนและทฤษฎทเกยวของ

2.1 ระบบงานในปจบน แอนเมชนเรองชวตกเหมอนเกมนนใชโปรแกรมตางๆ ในการสรางขนมา โดยการใชโปรแกรม Adobe flash cs6 ในการท าภาพเคลอนไหวและ Adobe photoshop cs6 ในการท าพนหลงของแอนเมชนในบางฉาก และ voloco ส าหรบการพากยเสยงลงไป ท างานโดยการแบงงานกนท าแตละคนในกลม ตามทตนเองถนน และ มการใสเสยงพากยของตวละครลงไปในแอนเมชนอกดวย โดยเนอเรองนน เกดมาจาก การใชชวตประจ าวน ทในแตละวนหรอแตละคนนนกมการใชชวตประจ าวนทตางกนออกไป โดยใช เกม ในการเปรยบเทยบชวตประจ าวน “ท าไมถงเลอกทจะใชเกมมาเปรยบเทยบ” เนองดวยในเกมนนมกจะไมไดบงคบใหเราท าอะไร แตเราสามารถเลอกไดเองตามใจชอบ แต ในทางกลบกน จดจบของเกมนนมกจะเลนเพอชนะหรอประสบความส าเรจ ซงในจดนนนนเองทเหมอนกบชวตของเราทไมไดมใครก าหนดแตอยทตวเองวาจะเลอกจดสนสดอยางไร

การสราง Animation เรอง ชวตกเหมอนเกม นนใชโปรแกรมตางๆ ในการสรางขนมาโดยดารใชโปรแกรม Adobe flash cs6 ในการท าภาพเคลอนไหว Adobe photoshop cs6 ในการท าฉากบางฉาก Voloco ใชในการพากยเสยงลงในตวงาน เรองนเหมาะกบทกเพศทกวยเนองดวยไมมเนอหาภายในทรนแรงแตอยางใด และเหมาะอยางยงส าหรบเยาวชน เพราะเนอหาภายในเรองนนมการสอนดานการปฏเสธในสงทไมดอยดวย จากทกลาวมาขางตนท าใหกลมเราสนใจทจะท าแอนเมชนโดยเนอเรองสอดคลองกบการใชชวตในประจ าวน ถงเราจะน าเกมมาเปนตวเปรยบเทยบกจรงแตในขณะเดยวกนนนเรากพยายามทจะสอนการใชชวตของแตละคนใหใชชวต ใหดทสดเพราะตวเรานนไมสามารถยอนกลบไปแกไขขอผดพลาดไดเหมอนเกม

2.2 ปญหาระบบงานในปจจบน 1.แอนเมชนในปจจบนไมคอยนยมสรางการตนทเกยวกบการใชชวต 2.แอนเมชนในปจจบนเนอหาไมละเอยดครบถวนพอท าใหผดไมเขาใจในเรองการรบชม 3.แอนเมชนในปจจบนมลกษณะทาทางการเดนของตวการตนนนยงไมสมบรณ

2.3 ทฤษฎระบบงานทเกยวของ ความหมายแอนเมชน (Animation) ประวตความเปนมาของ Animation (แอนเมชน) แอนเมชนนนมตนก าเนดมานานแลว จะ

หลกฐานทางประวตศาสตรไดมการคนพบภาพเขยนบนผนงถ าเปนรปสตวชนดหนง ซงในภาพวาดมการวาดการเคลอนไหวของขาทงสขาง ในยคตอมา 1600 ปกอนครสตศกราช ในชวงยคของฟาโรหรามาเศสทสองไดมการกอสรางวหารเพอบชาเทพไอซส โดยมการวาดรปการเคลอนไหวของเทพไอซสตอเนองกนถง 110 รป จนกระทงถงยคกรกโรมน เมอดจากภาพทปรากฏบนคนโทแลว จะเหนวาเปนภาพตอเนองของการวง

แอนเมชน (Animation) หมายถง กระบวนการทเฟรมแตละเฟรมของภาพยนตร ถกผลตขนตางหากจากกนทละเฟรม แลวน ามารอยเรยงเขาดวยกน โดยการฉายตอเนองกน ไมวาจากวธการ ใชคอมพวเตอรกราฟก ถายภาพรปวาด หรอ หรอรปถายแตละขณะของหนจ าลองทคอย ๆ ขยบเมอน าภาพดงกลาวมาฉาย ดวยความเรว ตงแต 16 เฟรมตอวนาท ขนไป เราจะเหนเหมอนวาภาพดงกลาวเคลอนไหวไดตอเนองกน ทงนเนองจาก การเหนภาพตดตาในทาง คอมพวเตอร การจดเกบภาพแบบอนเมชนทใชกนอยางแพรหลายในอนเทอรเนต ไดแกเกบในรปแบบ GIF MNG SVG และ แฟลช

ค าวา แอนเมชน (animation) หมายถง รวมทงค าวา animate และ animator มากจากรากศพทละตน “animare” ซงมความหมายบอกวาท าใหมชวต ภาพยนตรแอนเมชนจงหมายถงการสรางสรรคลายเสนและรปทรงทไมมชวต ใหเคลอนไหวเกดมชวตขนมาได แอนเมชน (Animation) หมายถง "การสรางภาพเคลอนไหว" ดวยการน าภาพนงมาเรยงล าดบกน และแสดงผลอยางตอเนองท าใหดวงตาเหนภาพทมการเคลอนไหวในลกษณะภาพตดตา (Persistence of Vision) เมอตามนษยมองเหนภาพทฉาย อยางตอเนอง เรตนารกษาภาพนไวในระยะสน ๆ ประมาณ 1/3 ดงกลาว สมองของมนษยจะเชอมโยงภาพทงสองเขาดวยกนท าใหเหนเปนภาพเคลอนไหวทมความตอเนองกนแมวาแอนเมชนจะใชหลกการเดยวกบวดโอ แตแอนเมชนสามารถน าไปประยกตใชกบงานตาง ๆไดมากมาย เชนงานภาพยนตร งานโทรทศน งานพฒนาเกมส งานสถาปตยงานกอสราง งานดานวทยาศาสตร เปนตน

ชนดของ Animation (แอนเมชน) แบงออกได 3 ชนด 1.การสรางงานแอนเมชนแบบดงเดม (Traditional Animation หรอ Drawn Animation) เปนกระบวนการทใชส าหรบการสรางภาพเคลอนไหวภาพยนตรมากทสด เปนการสรางชนงานแอนเมชนดวยภาพวาดซงจะมการวาดภาพลงบนกระดาษกอน เพอสรางภาพลวงตาของการเคลอนไหว แตละรปวาดจะแตกตางกนเลกนอย หลายพนภาพ และฉายภาพเหลานนผานกลองบนทกภาพ หรอกลองวดโอ การท าแอนเมชนตองอาศยความสามารถทางศลปะในการวาดภาพอยางมาก จงท าใหตองใชเวลาในการผลตนานและตนทนในการผลตจงสงตามไปดวย

2. การสรางแอนเมชนแบบสตอปโมชน (Stop Motion หรอเรยกวา Model Animation) เปนการสรางหนจ าลองขนมาหรอใชสงของแลวคอย ๆ ขยบ พรอมกบถ ายภาพนนทละภาพ ทพบมากไดแก ภาพเคลอนไหวแบบหนเชด ภาพเคลอนไหวดนน ามน ซงวสดทนยมใชมกจะเปนดนน ามน ปนเปนรปรางตาง ๆ โดยมเสนลวดเสมอนเปนโครงกระดกอยภายในหนทปนและท าใหสามารถน ามาใชงานไดหลายครง แอนเมชนแบบนตองอาศยเวลา ความอดทนและความสามารถมากตองใชทกษะทางศลปะการปน และการถายภาพ ทงนเพราะหนจ าลอง หรอสงของประกอบฉากนน หลาย ๆ สงมการขยบหรอเคลอนไหวไปพรอม ๆ กน ในหนงภาพ ดงนนหากตองการแสดงความสมจรงจ าเปนตองอาศยความละเอยดในการก าหนดการเคลอนไหวเพอทจะสรางภาพลวงตาของการเคลอนไหวแตละภาพ 3. การสรางแอนเมชนดวยคอมพวเตอร (Computer Animation) เปนกระบวนการสรางภาพเคลอนไหวโดยใชโปรแกรมคอมพวเตอร ดวยความกาวหนาดานเทคโนโลยคอมพวเตอรในปจจบนจงมโปรแกรมคอมพวเตอรทชวยใหการท าแอนเมชนงายขน ท าใหประหยดเวลา และตนทนเปนอยางมาก โปรแกรมทนยมใชในการผลตงานแอนเมชนเชน โปรแกรม Maya, Abode Flash, Lightwave, modo, Anime Studio และ 3D Studio Max เปนตน

สทใชในแอนเมชน

รปท2.4 วงจรส

รปท 2.4 วงจรส วรรณะของส คอ สทท าใหความรสกรอน-เยน ในวงจรสจะมสรอน7ส และสเยน 7 ส ซงแบงท สมวงกบสเหลองซงเปนไดทงสองวรรณะ แบงออกเปน 2 วรรณะ 1.วรรณะสรอน (WARM TONE) ประกอบดวยสเหลอง สสมเหลอง สสม สสมแดง สมวงแดงและสมวง สในวรรณะรอนนจะไมใชสสด ๆ ดงทเหนในวงจรสเสมอไป เพราะสในธรรมชาตยอมมสแตกตางไปกวาสในวงจรสธรรมชาตอกมาก ถาหากวาสใด คอนขางไปทางสแดงหรอสสม เชน สน าตาลหรอสเทาอมทอง กถอวาเปนสวรรณะรอน 2.วรรณะสเยน (COOL TONE) ประกอบดวย สเหลอง สเขยวเหลอง สเขยว สเขยวน าเงน สน าเงน สมวงน าเงน และสมวง สวนสอน ๆ ถาหนกไปทางสน าเงนและสเขยวกเปนสวรรณะเยนดงเชน สเทา สด า สเขยวแก เปนตน จะสงเกตไดวาสเหลองและสมวงอยทงวรรณะรอนและวรรณะเยน ถาอยในกลมสวรรณะรอนกใหความรสกรอนและถา อยในกลมสวรรณะเยนกใหความรสกเยนไปดวย สเหลองและสมวงจงเปนสไดทงวรรณะรอนและวรรณะเยน

โทนแมส

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

รปท 2.5 แสดงถงสโทนรอนและโทนเยน สและอารมณความรสก สสนตาง ๆ จะมความหมายของแตละสตางกนไป นนหมายความวา เมอผชมเหนสสนแบบนจะใหความรสกและอารมณอยางไร สงตาง ๆ เหลานนกออกแบบ ควรจะมความรในการเลอกใชสสนใหเขากบงานของตนเอง ตวอยางสทแสดงถงอารมณเชน สแดง ใหความรสกรอน รนแรง กระตน ทาทาย เคลอนไหว ตนเตน เราใจ มพลง ความอดมสมบรณ ความมงคง ความรก ความส าคญ อนตราย สสม ใหความรสกรอน ความอบอน ความสดใส มชวตชวา วยรน ความคกคะนอง การปลดปลอย ความเปรยว การระวง สเหลอง ใหความรสกแจมใส ความสดใส ความอบอน ความราเรง ความเบกบานสดชน ชวตใหม ความสด ใหม ความสกสวาง การแผกระจาย อ านาจบารม สทอง ใหความรสกความหรหรา โออา มราคา สงคา สงส าคญ ความเจรญรงเรอง ความสข ความมงคง ความร ารวย การแผกระจาย

สเขยว ใหความรสกสงบ เงยบ รมรน รมเยน การพกผอน การผอนคลาย ธรรมชาต ความปลอดภย ปกต ความสข ความสขม เยอกเยน สน าเงน ใหความรสกสงบ สขม สภาพ หนกแนน เครงขรม เอาการเอางาน ละเอยด รอบคอบ สงางาม มศกดศร สงศกด เปนระเบยบถอมตน สมวง ใหความรสกมเสนห นาตดตาม เรนลบ ซอนเรน มอ านาจ มพลงแฝงอย ความรก ความเศรา ความผดหวง ความสงบ ความสงศกด สฟา ใหความรสกปลอดโปรงโลง กวาง เบา โปรงใส สะอาด ปลอดภย ความสวาง ลมหายใจ ความเปนอสระ เสรภาพ การชวยเหลอ แบงปน สชมพ ใหความรสกอบอน ออนโยน นมนวล ออนหวาน ความรก เอาใจใส วยรน หนมสาว ความนารก ความสดใส สขาว ใหความรสกบรสทธ สะอาด สดใส เบาบาง ออนโยน เปดเผย การเกด ความรก ความหวง ความจรง ความเมตตา ความศรทธา ความดงาม สเทา ใหความรสกเศรา อาลย ทอแท ความลกลบ ความหดห ความชรา ความสงบ ความเงยบ สภาพ สขม ถอมตน สดา หากเราเลอกใชในปรมาณทเหมาะสม จะใหความรสกสงบ อดทน เยอกเยน ลกลบ นาคนหา แตบางครงสด ากใหความรสกเกยวของกบความตาย ดนากลว มด สกปรก การตกแตงหองดวยสเพอสรางบรรยากาศทด ไมนาจะเกดขนไดจากการใชสเพยงสเดยว ในการเลอกใชสส าหรบงานตกแตงภายในนน แยกประเภทเปนกลมใหญ ๆ ไดหลายประเภทโดยจ าแนกตามจดประสงคของการใชโดยสงเขปไดดงตอไปน ดงตอไปน การตกแตงโดยสโทนรอน , การตกแตงโดยสโทนเยน, การตกแตงโดยใชสกลาง, การตกแตงโดยใชสเอกรงค, การตกแตงโดยใชสตรงกนขาม และการตกแตงโดยใชสพาสเทล การตกแตงโดย สโทนรอน หรอ warm color ไดแก แดง สม เหลอง ทอง ฯลฯ การเลอกใชสประเภทนควรใชภายในหองทตองการรสกอบอน มพลง ทาทาย ตนเตน เราใจ ความราเรง ความเบกบานสดชน ชวตใหม ความสดใหม ความสกสวาง การแผกระจาย ความอดมสมบรณ การใชสโทนรอนในการตกแตงควรจะเลอกใชในปรมาณนอยเมอเทยบกบองคประกอบรวมของสภายในทงหมดไมเชนนนจะท าใหผอยเกดความรสกรอนและไมสามารถอยไดนาน เราอาจเลอกใชเพอเนนในบางผนงหรอเฟอรนเจอรบางสวนเพอความโดดเดน แตในบางครงเรากอาจเลอกใชสโทนนในปรมาณมากกได ซงขนอยกบพนทนนท าหนาทอะไร การตกแตงโดย สโทนเยน หรอ cool color ไดแก เชน น าเงน น าเงนคราม มวงคราม เขยวเหลอง เขยวแก ฯลฯ สโทนเยนเปนสทไดลอกเลยนสของธรรมชาต เชน สของทองทะเลและผน ใหความรสกทสงบ เงยบ รมรน รมเยน ความสขม การพกผอน การผอนคลาย ธรรมชาต ความปลอดภย ปกต ความสข ความสภาพ หนกแนน เครงขรม เอาการเอางาน ละเอยด รอบคอบ สงางาม

มศกดศร สงศกด เปนตน สในกลมนมกจะเหมาะกบการตกแตงหองพกผอน หองน า หรอหองท างานของผบรหารทตองการบรรยากาศของความเปนระเบยบ นาเชอถอ และเพราะประเทศเราเปนประเทศในเขตรอนชน สโทนเยนจงยงชวยสรางความรสกในการลดความรอนไดทนท การตกแตงโดยใช สกลาง หรอ Neutral Color ไดแก สขาว เทา ด า น าตาล เบจ ครม เปนตน สในกลมนไมอยในกลมหรอวรรณะใดของส และสามารถอยคกบสทกๆ โทนสไดงาย ในขณะเดยวกนกสามารถใชสนตกแตงไดทนท สในกลมนใหความรสกราบเรยบ สะอาดตา แตการใชสกลมนโดยไมผสมกบสในกลมอน ๆ อาจท าใหบานของเรามบรรยากาศนาเบอ จะบางครงดหดหไดงาย การตกแตงโดยใช สเอกรงค หรอ Monotone คอการตกแตงโดยใชสกลมสเดยวกนทแบงเปนหลายโทนส หรอมน าหนกออน-แกแตกตางกนไป และใชในกลมใดกลมหนง โดยเลอกสทเปนสหลกแลวลดความเขมของสลงตามล าดบประมาณ 4-5 ล าดบ เชน หากเราเลอกใชโทนสแดงเปนสหลก จากนนกอาจลดความสดของสลง เปนแดงออน แดง-สม สม-เหลอง เหลอง เปนตน การตกแตงโดยใชสตรงกนขามหรอContrast การใชสประเภทน เชน แดง-เขยว ฟา-สม เหลอง-มวง การเลอกใชสตรงขามนแมมใหเหนไมมากในการการตกแตงภายใน แตการเลอกใชสกลมนจะสรางความนาสนใจมากกวาสกลมอน ๆ แตกตองอยในสดสวนทเหมาะสม เชน 70:30 หรอ 80:20 เปนตน การตกแตงโดยใช สพาสเทล หรอ Pastel สพาสเทลนนเปนสทอยในทก ๆ กลม ทน ามาผสมกบสขาวโดยสขาวมากกวา 70 % เพอลดความเขมขนของเนอสลงเชน สชมพ สสมออน สครม เปนตน สในกลมนไดรบความนยมเพราะใหความรสกโปรง โลง สบาย หรอสรางบรรยากาศ หวาน ๆ นมๆ และโรแมนตก จรง ๆ แลวมนษยทกคนมทกษะในเรองของสและการใชสมาแตเกด ตวอยางทเหนไดชดกคงจะเปนวชาศลปะทเรามประสบการณผานมา แมหลาย ๆ คนจะบอกวา การใชสเปนเรองยากและตองอาศยผเชยวชาญ แตกไมใชเรองยากจนเกนไปทจะเลอกใชสอยางเหมาะสมเพอสออารมณและบรรยากาศในการตกแตงไดชดเจน รปท 2.6 ความหมายของสและอารมณ

กราฟกและความหมายของกราฟก

กราฟก คอ การสรางและการจดการกบภาพกราฟกโดยใชคอมพวเตอรซงในปจจบนมการใช ภาพกราฟกกบงานสอสงพมพในหลาย ๆ ประการและสงส าคญทจะท าใหการประยกตใชงานคอมพวเตอรกราฟกเปนไปอยางมประสทธภาพคอจะตองมความเขาใจกบ ชนดของภาพในงานคอมพวเตอรกราฟกและรปแบบของไฟลกราฟกทใชกบงานออกแบบสงพมพ กราฟกเปนศลปะแบบหนงทแสดงออกถงความคดอานและอารมณโดยใชเสน รปภาพ ภาพเขยนหยาบๆ ไดอะแกรม ฯลฯ กราฟกเปนการสอความหมายดานการใชภาพวาด ภาพสเกต แผนภาพ การถายภาพ และอน ๆ ทตองอาศยศลปะ เขามาชวยเพอท าใหผดเกดความคดและการตความหมายไดตรงตามทผสงสารตองการ เชน แผนภม แผนภาพ ภาพโฆษณา การตน เปนตน วสดทเกดจากการวาดและการเขยนงานออกแบบตาง ๆ ในสงทเปนวตถ 2 มต มความกวางและความยาวเทากน อนไดแก งานสถาปนกในการเขยนแปลนบาน การเขยนภาพเหมอนของจตรกร การออกแบบโฆษณาของชางออกแบบ กราฟกเปนศลปะหรอศาสตรในการเขยนภาพลายเสน รวมไปถงการพมพ การแกะสลก การถายภาพ และการจดท าหนงสอ เพราะเหตน กราฟก จงหมายถง ศลปะแขนงหนงซงใชการสอความหมายดวยการใชเสน ภาพวาด สญลกษณ ภาพถาย กราฟ แผนภม การตน ฯลฯ เพอใหสามารถสอความหมายของขอมลไดถกตองตรงตามทผรบสารตองการ คอมพวเตอรกราฟก คอมพวเตอรกราฟก (computer graphics) หรอในศพทบญญตวา วชาเรขภาพคอมพวเตอร คอหนงในศาสตร องคความร ของระเบยบวธการแกปญหาเชงคอมพวเตอร (computing methodology) ทแกปญหาเกยวกบเรองของภาพหรอการแสดงภาพ โดยเนนการประมวลผลขอมลดวยคอมพวเตอร ใหขอมลน าเขาเปนขอมลตวเลข ตวอกษร หรอสญญาณตาง ๆ แทน ต าแหนงพกด ส รปทรง ความสวาง

ระบบคอมพวเตอรส าหรบงานกราฟกนนสามารถใชระบบคอมพวเตอรสวนบคคลโดยทวไปได โดยมการเพมเตมอปกรณบางประการใหกบระบบคอมพวเตอรเพอเพมประสทธภาพในการประมวลผล การน าเขาขอมล การแสดงผลขอมลแบบกราฟก ในบทนจะกลาวถงความหมายของคอมพวเตอรกราฟก ระบบคอมพวเตอรและอปกรณตาง ๆ ส าหรบงานกราฟก ดงนน คอมพวเตอรกราฟก จงหมายถง การสราง การตกแตงแกไข หรอการจดการเกยวกบรปภาพ โดยใชเครองคอมพวเตอรในการจดการ ยกตวอยางเชน การท า Image Retouching ภาพคนแกใหมวยทเดกขน การสรางภาพตามจนตนาการ และการใชภาพกราฟกในการน าเสนอขอมลตางๆ เพอใหสามารถสอความหมายไดตรงตามทผสอสาร ตองการและนาสนใจยงขนดวยกราฟ แผนภม แผนภาพ เปนตน ภาพกราฟกแบงออกเปน 2 ประเภทคอ -กราฟกแบบ 2 มต เปนภาพทพบเหนโดยทวไป เชน ภาพถาย รปวาด ภาพลายเสน สญลกษณ กราฟ รวมถงการตนตางๆ ในโทรทศน -กราฟกแบบ 3 มต เปนภาพกราฟกทใชโปรแกรมสรางภาพ 3 มตโดยเฉพาะ เชน โปรแกรม 3Ds Max โปรแกรม Maya เปนตน กราฟกแบบ 2 มต คอ ศลปะแขนงหนงซงใชสอความหมายดวยเสน สญลกษณ รปวาด ภาพถาย กราฟ แผนภม การตน ฯลฯ เพอใหสามารถสอความหมายขอมลไดถกตองตรงตามทผสอสารตองการ โดยมลกษณะเปน 2 มต คอ สามารถมองเหนตามแนวแกน X(ความกวาง) กบ แกน Y(ความยาว) ซงตางจาก 3 มต ซง 3 มต นนจะมแกน Z (ความหนาหรอความสง) เพมเขามา ท าใหเราเหนเปนรปรางทชดเจนยงขน สวนรปแบบหรอนามสกลไฟลกจะเปน format รปภาพทวๆไป เชน .BMP, .PCX, .GIF, .JPG, .TIF, .WMF, .PNG เปนตน ซงสามารถใชโปรแกรม Adobe Photoshop, Illustrator, Freehand, Firework, Microsoft Visio, CorelDraw, GIMP เปนตน ความสาคญและบทบาทของคอมพวเตอรกราฟก งานกราฟกสามารถสอความหมายระหวางผออกแบบกบผชมไดโดยตรงเนองจากใช ภาพเปนหลกในการสอสาร ท าใหเขาใจไดงาย ถาผออกแบบใสจนตนาการและความคดสรางสรรค งานกราฟกชนนนกจะยงมความนาสนใจ และมคณคาทางด านศลปะอกดวย แตถาภาพทใชสอความหมายไมชดเจน ผรบกไมสามารถเขาใจไดอยางถกตอง งานกราฟกตาง ๆ ถกสรางขนเพอเปนสญลกษณแทนแกนสารของประสบการณส าหรบมนษย เพอใหมนษยใชเปนสอในการคดและสอสารความหมายถงกน ดวยคณสมบตทดของงานกราฟกท าใหงานกราฟกมบทบาทส าคญในการลดขอจ ากดตาง ๆท เก ยวของกบเงอนเวลา ประสทธภาพของการคด การบนทกและการจ า ท าใหการสอความหมายตอกนของมนษยเปนไปอยางมประสทธภาพและประสทธผล และดวยความเจรญกาวหนาทางวชาการ ความ

เจรญกาวหนาทางเทคโนโลย จ านวนประชากรโลกทเพมขนและความเปนโลกไรพรมแดน ความแตกตางระหวางบคคล เปนเหตผลส าคญทท าใหมนษยจ าเปนตองใหความส าคญกบงานกราฟกมากขน ลกษณะของเสน

เสนมจดเดนทน ามาใชไดหลากหลายรปแบบ ท าใหเกดรปทรงตางๆ มากมาย เพอตองการสอใหเกดความรสกทางดานอารมณ จากการสรางสรรคของงาน

1. เสนตง หรอ เสนดง ใหความรสกทางความสง สงา มนคง แขงแรง หนกแนนเปนลกษณะของความซอตรง

รปท 2.7 เสนตงหรอเสนดง 2. เสนตรง ใหความรสกความกวาง สงบ ราบเรยบ นง ผอนคลาย

รปท 2.8 เสนตรง

3. เสนเฉยง หรอ เสนทแยงมมใหความรสกเคลอนไหว รวดเรว ไมมนคง

รปท 2.9 เสนเฉยงหรอเสนทแยงมม

4. เสนหยก หรอ เสนซกแซก แบบฟนปลา ใหความรสก เคลอนไหว อยางเปนจงหวะม ระเบยบ ไมราบเรยบ นากลว อนตราย ขดแยง ความรนแรง

รปท 2.10 เสนหยกหรอเสนซกแซก 5. เสนโคง แบบคลน ใหความรสก เคลอนไหวอยางชา ๆ ลนไหล ตอเนอง สภาพออนโยน

นมนวล

รปท 2.11 เสนโคงแบบคลน 6.เสนโคงแบบกนหอยใหความรสกเคลอนไหว คลคลาย หรอเตบโตในทศทางทหมนวน

ถามองเขาไปจะเหนพลงความเคลอนไหวทไมสนสด

รปท 2.12 เสนโคงแบบกนหอย 7. เสนประ ใหความรสกทไมตอเนอง ขาดหาย ไมชดเจน ท าใหเกดความเครยด

รปท 2.13 เสนประ

ความสาคญของเสน 1. ใชในการแบงทวางออกเปนสวนๆ 2. ก าหนดขอบเขตทวาง หมายถง ท าใหเกดรปราง(Shape) 3. ก าหนดเสนรอบนอกของรปทรง ท าใหมองเหนเปนรปทรง (Form) ชดขน 4. ท าหนาทเปนน าหนกออนแก ของแสงและเงา หมายถง การแรงเงาดวยเสน 5. ใหความรสกดวยการเปนแกรนหรอโครงสรางของรปหรอโครงสรางของภาพ

2.14 การนาคอมพวเตอรมาใชในระบบ 1.การน าเอาคอมพวเตอรมาใชในการสรางแอนเมชนดวยโปรแกรม Adobe Flash CS6

2.การน าเอาคอมพวเตอรมาใชในการออกแบบตวละครในแอนเมชน 3.การน าเอาคอมพวเตอรมาใชในการอดเสยงและเรยบเรยงเนอเรอง 4.การน าเอาคอมพวเตอรมาใชในการแสดงผลโดยรวมของแอนเมชน 5.การน าเอาคอมพวเตอรมาใชในการลงสของแอนเมชน 6.การน าเอาคอมพวเตอรมาใชในการท าฉากหลงในแอนเมชน 7.การน าเอาคอมพวเตอรมาใชในการแกไขงานในกรณผดพลาดในภายหลง 8.การน าเอาคอมพวเตอรมาใชในการท ารปแบบของเอกสาร 9.การน าเอาคอมพวเตอรมาใชในการจดแสดงผลงาน 10.การน าเอาคอมพวเตอรมาใชในการหาขอมลทจ าเปนตอการใชงานและออกแบบ

29

3.2 การออกแบบสงน าเขา (Input Design)

ฉากท1 เมอเรมเรอง ชอเรอง ปรากฏ

ฉากท2 เมอเขาไปในเนอเรองจะมหนาโหลด

ฉากท3 ตวละครพดปรากฏขนแลวพดวา วนหนงทเหมอนกบทกๆวนของผมทชวตของ

ผมนนยงคงวนเวยนอยเหมอนเดมกจวตรประจ าวนของผมกไมมอะไรมาก

ฉากท4 ตวละครพด ตนขนมา อาบน า ไปโรงเรยน

ฉากท5 ตวละครพดพวกคณอาจจะคดวาแลวอาหารเชาละ ออ คอ ผมเออผมชอบตนสาย

หนะเลยไมคอยมเวลาทจะกนอาหารเชาซก เทาไหร เอาละเขาเรองของเราตอเลย

ดกวา

ฉากท6 ตวละครพด หลงจากผมไปโรงเรยนเหมอนกบทกๆวนทผมท าแตมนมบางสง

บางอยางทตางออกไปในวนน

ฉากท7 วนนทโรงเรยน ณ หองเรยนของผมไดมคนกลมหนงก าลงรวมตวกนท าอะไรซก

อยางอยผมจงเอะใจแลวเดนเขาไปด

ฉากท8 ปรากฏวาสงทผมเหนนนคอพวกเพอนๆก าลงเลนการพนนกนอย (เลนน าเตา ป ปลา ในมอถอ)

ฉากท9 แลวทนใดนนมคนในกลมหนงคนหนมาสบตาผมโดยบงเอญแลวเขากเอยปากพด

วา วาไงเพอนสนใจมาเลนดวยกนรเปลา

ฉากท10 ตวละครปรากฏขนแลวพดวา การพนนเปนสงทไมดนะนอกจากท าใหคนเสย

อนาคตกนไปหลายคนแลวยงผดกฎหมายอกดวย ตอนนไดเวลาแลว มาดกนซ

วาเพอนๆจะเลอกอยางไร

ฉากท11 แสดงตวเลอก ตกลง

ฉากท12 แสดงตวเลอก ปฏเสธ

ฉากท13 หากตอบ ตกลง อาจารยเขามาพอดแลวลงโทษเดกนกเรยนทเลนพนน (แลวใหเขาสหนายอนกลบไปเลนซ า)

ฉากท14 หากตอบ ปฏเสธ อาจารยเขามาแลวลงโทษกลมเดกนกเรยนทเลนพนนโดยตวเรา

นงเรยนหนงสออยโดยไมมสวนเกยวของ

30

ฉากท15 ตวละครพดในใจ วา ดนะทเราปฏเสธไปการพนนเปนสงทไมดนนา เพอนๆของ

เราไมหนาไปเลนมนเลยนะ (เหตการณหลงตอบปฏเสธ)

ฉากท16 แสดงขอความวา คณหนาจะเลอกทางทดกวานนะลองยอนกลบไปแกไข

ขอผดพลาดดส (เหตการณหลงตอบตกลง)

ฉากท17 แสดงปมยอนกลบ (เหตการณหลงตอบตกลง)

ฉากท18 เสยงของเวลาเลกเรยนไดดงขน (เหตการณหลงตอบปฏเสธ)

ฉากท19 ตวละคร เดนกลบบานพรอมพดวาเหอไดเวลากลบบานซกทนะ

ฉากท20 ภาพตดขนฟาหลงตวละครพดจบ

ฉากท21 หลงตดภาพมา ตวละครปรากฏขนมาพรอมพด ถงคตสอนใจวาในชวตของเรา นน มตวเลอกใหเราเลอกมากมายถงแมตวเลอกทเราเลอกบางครงอาจจะไม

ถกตองบาง แตเราควรจะเลอกตวเลอกทดทสดโดยไมใหเดอนรอนคนอนหรอ

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

แตอยากใหเพอนๆอยาลมวาในชวตจรงนนไมสามาถยอนกลบไปแกใข

ขอผดพลาดไดเหมอนในเกมเพราะฉะนน เราควรใชชวตของตวเราเองใหดทสด

โดยไมเบยดเบยนคนอน

ฉากท22 หลงจบการบรรยาย กแสดงผจดท า

3.3 การออกแบบสงน าออก (Output Design) 1.ไฟลแอนเมชนเพอการน าเสนอ

2.เสยง เพอสรางความเขาใจในแอนเมชน และความบนเทง ชวยเพมอรรถรสในการรบชม

3.โปรเจคเตอรเพอน าเสนอ สผชม

บทท 3

การออกแบบระบบงานดวยคอมพวเตอร

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

ตวละครหลก

แดน ตวละครหลกเดกหนมผยดมนในสงทด

การออกแบบ Story Board

รปท 3.1 ฉากเรมเรอง

รปท 3.2 ฉากโหลด


รปท 3.3 ฉากบรรยาย

รปท 3.4 ฉากตน อาบน า ไปโรงเรยน


รปท 3.7 ฉากเจอกลมเพอนในหอง

รปท 3.8 ฉากเดนเขาไปในกลม


รปท 3.9 ฉากสบากบเพอน

รปท 3.10 ฉากเพอนชวนเลนการพนน


รปท 3.11 ฉากตวเลอก (ตกลง)

รปท 3.12 ฉากตวเลอก (ปฏเสธ)


รปท 3.13 ฉากเราโดนอาจารยด

รปท 3.14 ฉากเราโดนอาจารยด (เราไมไดอยในเหตการณ)


รปท 3.15 ฉากเรยนหนงสอ

รปท 3.16 ฉากแสดงค าเตอนกอนตวเลอกยอนกลบ (หลงตวเลอกตกลง)


รปท 3.17 ฉากใหกลบไปเลนซ า (หลงตวเลอกตกลง)

รปท 3.18 ฉากหมดเวลาเรยน (หลงตวเลอกปฏเสธ)


รปท 3.19 ฉากเดนกลบบาน (หลงตวเลอกปฏเสธ)

รปท 3.20 ฉากทองฟา (หลงตวเลอกปฏเสธ)



รปท 3.22 ฉากจบและแนะน าตวผจดท า

3.3 การออกแบบสงน าเขา (Input Design)

ฉากท1 เมอเรมเรอง ชอเรอง ปรากฏ

ฉากท2 เมอเขาไปในเนอเรองจะมหนาโหลด

ฉากท3 ตวละครพดปรากฏขนแลวพดวา วนหนงทเหมอนกบทกๆวนของผม

ทชวตของผมนนยงคงวนเวยนอยเหมอนเดม

กจวตรประจ าวนของผมกไมมอะไรมาก

ฉากท4 ตวละครพด ตนขนมา อาบน า ไปโรงเรยน

ฉากท5 ตวละครพดพวกคณอาจจะคดวาแลวอาหารเชาละ

ออ คอ ผมเออผมชอบตนสายหนะเลยไมคอยมเวลาทจะกนอาหารเชาซก

เทาไหร เอาละเขาเรองของเราตอเลยดกวา

ฉากท6 ตวละครพด หลงจากผมไปโรงเรยนเหมอนกบทกๆวนทผมท าแตมนมบางสง

บางอยางทตางออกไปในวนน

ฉากท7 วนนทโรงเรยน ณ หองเรยนของผมไดมคนกลมหนงก าลงรวมตวกนท าอะไร

ซกอยางอยผมจงเอะใจแลวเดนเขาไปด

ฉากท8 ปรากฏวาสงทผมเหนนนคอพวกเพอนๆก าลงเลนการพนนกนอย

(เลนน าเตา ป ปลา ในมอถอ)

ฉากท9 แลวทนใดนนมคนในกลมหนงคนหนมาสบตาผมโดยบงเอญ

แลวเขากเอยปากพดวา วาไงเพอนสนใจมาเลนดวยกนรเปลา

ฉากท10 ตวละครปรากฏขนแลวพดวา การพนนเปนสงทไมดนะ

นอกจากท าใหคนเสยอนาคตกนไปหลายคนแลวยงผดกฎหมายอกดวยตอนน

ไดเวลาแลว มาดกนซ วาเพอนๆจะเลอกอยางไร

ฉากท11 แสดงตวเลอก ตกลง

ฉากท12 แสดงตวเลอก ปฏเสธ

ฉากท13 หากตอบ ตกลง อาจารยเขามาพอดแลวลงโทษกลมเดกนกเรยนทเลนพนน

(แลวใหเขาสหนายอนกลบไปเลนซ า)

ฉากท14 หากตอบ ปฏเสธ อาจารยเขามาแลวลงโทษกลมเดกนกเรยนทเลนพนน โดย

ตวเรานงเรยนหนงสออยโดยไมมสวนเกยวของ

ฉากท15 ตวละครพดในใจ วา ดนะทเราปฏเสธไปการพนนเปนสงทไมดนนาเพอนๆ

ของเราไมหนาไปเลนมนเลยนะ (เหตการณหลงตอบปฏเสธ)

ฉากท16 แสดงขอความวา คณหนาจะเลอกทางทดกวานนะลองยอนกลบไปแกไข

ขอผดพลาดดส (เหตการณหลงตอบตกลง)

ฉากท17 แสดงปมยอนกลบ (เหตการณหลงตอบตกลง)

ฉากท18 เสยงของเวลาเลกเรยนไดดงขน

(เหตการณหลงตอบปฏเสธ)

ฉากท19 ตวละคร เดนกลบบานพรอมพดวาเหอไดเวลากลบบานซกทนะ

ฉากท20 ภาพตดขนฟาหลงตวละครพดจบ

ฉากท21 หลงตดภาพมา ตวละครปรากฏขนมาพรอมพด ถงคตสอนใจวา ในชวตของเรานน มตวเลอกใหเราเลอกมากมายถงแมตวเลอกทเราเลอก

บางครงอาจจะไมถกตองบาง แตเราควรจะเลอกตวเลอกทดทสดโดย

ไมใหเดอนรอนคนอนหรอเหนแกตวดวย ถงแมในการตนเรองน

จะสามาถยอนกลบไปแกไขขอผดพลาดไดแตอยากใหเพอนๆ

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

เหมอนในเกมเพราะฉะนน เราควรใชชวตของตวเราเองใหดทสด

โดยไมเบยดเบยนคนอน

ฉากท22 หลงจบการบรรยาย กแสดงผจดท า

3.4 การออกแบบสงน าออก (Output Design) 1.ไฟลแอนเมชนเพอการน าเสนอ

2.เสยง เพอสรางความเขาใจในแอนเมชน และความบนเทง ชวยเพมอรรถรสในการรบชม

3.โปรเจคเตอรเพอน าเสนอ สผชม

31

บทท 4 การพฒนาอนเมชน ชวตกเหมอนเกม

4.1 เครองมอและอปกรณทใช

1. คอมพวเตอร - ASUS GeForce® GTX 1060 Advanced Edition 6GB 9Gbps GDDR5 - CPU INTEL 1151 CORE I5-8400 2.80 GHz - 16 GB (3.05 GB usable) - Memory Corsair Vengeance 16 GB DDR4 BUS3000 - 1 TB HDD - 128 GB SSD - Windows 10 Pro (64 Bit)

4.2 โปรแกรมทงหมดทใชพฒนา 1. โปรแกรม Adobe Flash Professional CS6 ใชส ำหรบจดท ำอนเมชน 2. โปรแกรม Voloco ใชส ำหรบพำกยเสยง 3. โปรแกรม GIF Maker ใชส ำหรบใส Effect ใน Video 4. โปรแกรม Adobe Photoshop CS6 ใชในกำรท ำฉำกในบำงฉำก

32

4.3 วธการเขาโปรแกรม โปรแกรม Adobe Flash Professional CS6 รปแบบไฟล.SWF

รปท 4.1 ไปทไฟล Animation.swf แลวดบเบลคลกเพอเปด

รปท 4.2 ฉำกเรมเรอง

33

รปท 4.3 ฉำกโหลด

รปท 4.4 ฉำกบรรยำย

34

รปท 4.5 ฉำกตน อำบน ำ ไปโรงเรยน


35


รปท 4.8 ฉำกเจอกลมเพอนในหอง

36

รปท 4.9 ฉำกเดนเขำไปในกลม

รปท 4.10 ฉำกสบำกบเพอน

37

รปท 4.11 ฉำกเพอนชวนเลนกำรพนน

รปท 4.12 ตดสนใจเพอด ำเนนเนอเรองดวยตวเลอกทผใชเลอกเอง

38

รปท 4.13 ฉำกเรำโดนอำจำรยด

รปท 4.14 ฉำกแสดงค ำเตอนกอนตวเลอกยอนกลบ (หลงตวเลอกตกลง)

39

รปท 4.15 ฉำกใหกลบไปเลนซ ำ (หลงตวเลอกตกลง)

รปท 4.16 ฉำกเรำโดนอำจำรยด (เราไมไดอยในเหตการณ)

40

รปท 4.17 ฉำกเรยนหนงสอ

รปท 4.18 ฉำกหมดเวลำเรยน (หลงตวเลอกปฏเสธ)

41

รปท 4.19 ฉำกเดนกลบบำน (หลงตวเลอกปฏเสธ)

รปท 4.20 ฉำกทองฟำ (หลงตวเลอกปฏเสธ)

42


รปท 4.22 ฉำกจบและแนะน ำตวผจดท ำ

บทท 5

สรปผลการท าโครงการ

สาระส าคญ

5.1 สรปผลโครงการ

1. ไดอนเมชนทผศกษานน มความรความเขาใจเกยวกบการท าอนเมชนมากขน 2. ไดรถงการใชโปรแกรมตางๆ จากการท าโครงการ 3. ไดอนเมชนทผชมอนเมชนสามารถไดคตสอนใจไดจรง 4. ไดเรยนรการใช AdobeFlash CS6 ในชวตประจ าวนมากขน

5.1.1 ขนาดของโปรแกรมแตละไฟล

ท ชอไฟล ขนาดของไฟล หมายเหต 1 Animetion.fla 50 MB ไฟลตนฉบบของไฟลแฟลช ซงสามารถ

แกไขได 2 Animetion.swf 4.12 MB ไฟล Flash ทสมบรณและไมสามารถ

แกไขดวยโปรแกรม ตารางท 5.1 แสดงขนาดของโปรแกรม

5.2 ปญหาและอปสรรคในการด าเนนการ 1.โปรแกรม Adobe Flash CS6 เสยงไมตรงเฟรม 2.โปรแกรม Adobe Flash CS6 เขยนโคดไมถกตอง 3.โปรแกรม Adobe Flash CS6 ภาพในบางชวงไมตรงตามทตองการ 4.โปรแกรม Adobe Flash CS6 การท าไฟลขาออกในบางครงมปญหา 5.โปรแกรม Voloco ทใชในการอดเสยงมเสยงรบกวนในบางครง 6. แบงเวลางานไมด ท าใหโปรแกรมเสรจชาและไมสมบรณเทาทควร

44

5.3 สรปเวลาการท างานจรง (Gantt Chart)

ตารางท 5.2 สรปเวลาการด าเนนงานจรง

หมายเหต เสนสด า คอ ระยะเวลาทก าหนด เสนสแดง คอ ระยะเวลาในการด าเนนงานจรง

รายการ ภาคเรยนท 1 มถนายน 62 กรกฎาคม 62 สงหาคม 62 กนยายน 62

ระยะเวลา 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

เสนอหวขอ ATC.01โครงการ รอบท 1 เอกสารบทท1



เสนอหวขอโครงการ รอบท 2 19 มถนายน 62


สงเอกสารบทท 2 (ATC.04-05) 8-14 กรกฎาคม 62

สงเอกสารบทท 3 (ATC.04-05) 15-31 กรกฎาคม 62 สอบน าเสนอโครงการ (รอบเอกสารบทท1-3) ปวช.3 และปวส.2 ATC.03 ครงท 1 (PPT)


ส งความคบหน าโปรแกรม 50% (ATC.04-05)


ส งความคบหน าโปรแกรม 60% (ATC.04-05)

16-22 กนยายน 62 16-22 กนยายน 62

ส งความคบหน า โปรแกรม 70%

(ATC.04-05)


สงความคบหนา 90% (ATC.04-05) 1-8 พฤศจกายน 62 สงความคบหนา 100% (ATC.04-05) 9-13 พฤศจกายน 62 ส อ บน า เ ส น อ โ ค ร ง ก า ร ( ร อ บโปรแกรม) ระดบ ปวส.2 ATC.03 ครงท 2


สงเอกสารบทท 4 (ATC.04-05) 6-19 มกราคม 63 สงเอกสารบทท 5 (ATC.04-05) 20-26 มกราคม 63 สงรปเลม ซด ช าระคาเขาเลม 1-20 กมภาพนธ 63

45

5.4 สรปคาใชจายในการด าเนนงานจรง

ล าดบ รายการ จ านวน ราคา 1 กระดาษ 3 345 2 คาหมกพมพ 1 700 3 คาแผน CD 2 40 4 ตลบใสแผนซด 1 50 5 คาเขาเลม 1 250

รวมเปนเงน 1,385

ตารางท 5.3 สรปคาใชจายในการด าเนนงานจรง

44

5.3 สรปเวลาการท างานจรง (Gantt Chart)

ตารางท 5.2 ตารางแผนการด าเนนงานจรง หมายถง การวางแผนการด าเนนงาน

หมายถง การด าเนนงานจรง

รายการ ภาคเรยนท 1 มถนายน 62 กรกฎาคม 62 สงหาคม 62 กนยายน 62

ระยะเวลา 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

อบรมการท าโครงการนกศกษา ปวช.3 และปวส.2


เสนอหวขอ ATC.01โครงการรอบท 1 เอกสารบทท 1


ประกาศผลหวขอโครงการ รอบท 1


เสนอหวขอโครงการ รอบท 2


ประกาศผลหวขอโครงการ รอบท 2


ลงทะเบยนหวขอออนไลนเสนออาจารยทปรกษารวม ATC.02


สงบทท 2 (ATC.04-05) 8-14 กรกฎาคม 62

สงบทท 3 (ATC.04-05)

15-31 กรกฎาคม 62 สอบเสนอโครงการ (รอบเอกสารบทท 1-

3) ปวช.3 และปวส.2 ATC.03 ครงท 1 (PPT)


ประกาศผลสอบ ( รอบเอกสาร )








รายการ ภาคเรยนท 2 พฤศจกายน 62 ธนวาคม 62 มกราคม 63 กมภาพนธ 63

ระยะเวลา 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

สงความคบหนา 90% (ATC.04-05)

1-8 พฤศจกายน 62

สงความคบหนา 100% (ATC.04-05)

9-13 พฤศจกายน 62

สอบน าเสนอโครงการ (รอโปรแกรม)ระดบ

ปวส.2 ATC.03 ครงท 2


สอบน าเสนอโครงการ (รอบโปรแกรม)ระดบปวช.3 ATC.03 ครงท 2


ประกาศโครงการ (รอบโปรแกรม)

2 ธนวาคม 62

สงเอกสารบทท 4 (ATC.04-05)


สงเอกสารบทท 5 (ATC.04-05)


สงงบประมาณในการท าโครงการตารางท 1.7 และตารางท 5.3 (แบบออนไลน)


สงรปเลม ซด ช าระคาเขาเลม

1-20 กมภาพนธ 63

ภาคผนวก - ใบเสนอขออนมตการท าโครงการระบบคอมพวเตอรธรกจ (ATC.01) - ใบอาจารยทปรกษารวม (ATC.02) - ใบขอสอบปองกนโครงการระบบคอมพวเตอรธรกจ (ATC.03) - รายงานความคบหนาโครงการระบบคอมพวเตอรธรกจ (ATC.04) - ใบบนทกการเขาพบอาจารยทปรกษาโครงการ (ATC.05) - ขออนญาตอาจารยทปรกษารวมจดท าเอกสารบทท 4-5 (ATC.06)

ประวตผจดท ำ

นายสวสดวรรษ ส าเภาพอคา เกดเมอวนท 20 ธนวาคม 2542 ส าเรจการศกษาชนมธยมตนจากโรงเรยนอ านวยวทย เมอปการศกษา 2557 ส าเรจการศกษาชนประกาศนยบตรวชาชพ (ปวช.) ปการศกษา 2560ปจจบนส าเรจการศกษาชนประกาศนยบตรวชาชพชนสง (ปวส.) สาขาวชาคอมพวเตอรธรกจ ท วทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2563 ปจจบนอาศย อยบานเลขท 71/55 อ าเภอพระประแดง ถนนเพชรหง เขตบางยอ จงหวดสมทรปราการ 10130 เบอรโทรศพท 096-069-3138 E-mail : [email protected] Facebook : Izack Foster

นายกฤษณศาตร สงหหา เกดเมอวนท 9 มถนายน 2541 ส าเรจการศกษาชนมธยมตนจากโรงเรยนวชรธรรมสาธต เมอปการศกษา 2556 ส าเรจการศกษาชนประกาศนยบตรวชาชพ (ปวช.) ปการศกษา 2559 ปจจบนส าเรจการศกษาชนประกาศนยบตรวชาชพชนสง (ปวส.) สาขาวชาคอมพวเตอรธรกจ ท วทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2563 ปจจบนอาศย อยท 13/383 ถนนสขวท 93 แขวงบางจาก เขตพระโขนง 10260 เบอรโทรศพท 061-775-9293 E-mail : [email protected] Facebook : Kitsanasad SH

animation the game likes life¹‚ครงงาน... · 2020. 8. 6. ·...

Documents