18
26 บทที4 ผลการปฏิบัติงานตามโครงงาน การศึกษาข้อมูลเบื ้องต ้น จากที่คณะนักศึกษาปฏิบัติงานสหกิจศึกษาได้ศึกษาข้อมูลเกี่ยวกับการจัดทํารายการ พยากรณ์อากาศในรูปแบบเสนอข่าวการพยากรณ์อากาศที่มีการเปลี่ยนแปลงยิ ่งขึ ้น เหมือนจริงยิ ่งขึ ้น พบว่ายังมีจํานวนน้อย ทางคณะนักศึกษาปฏิบัติงานสหกิจศึกษาจึงได้จัดทําแอนิเมชัน 3 มิติผสมผสาน กับแอนิเมชั่น 2 มิติ เพื่อเป็นตัวประกอบในการนําเสนอการพยากรณ์อากาศ โดยออกแบบฉากให้มีความ สวยงามมากขึ ้น เพื่อสร้างผลงานที่มีความแปลกใหม่ในการพยากรณ์อากาศ การเก็บรวบรวมข้อมูล ทางคณะนักศึกษาปฏิบัติงานสหกิจศึกษาได้ศึกษา และทําการเก็บรวบรวมข้อมูลที่เกี่ยวข้อง กับการจัดทําโครงการ ดังนี 1. ศึกษาค้นคว้าเกี่ยวกับส ่วนประกอบต่างๆ ที่ต้องใช้ในการจัดทํา พยากรณ์อากาศ และ แนวการดําเนินงานของการพยากรณ์อากาศ 2. ศึกษาค้นคว้าแนวคิดรูปแบบต่างๆ ในการจัดทําพยากรณ์อากาศ 3. ศึกษาข้อมูลเกี่ยวกับการทําการ์ตูนแอนิเมชัน 3 มิติ และ 2 มิติ การขยับเคลื่อนไหว และ การสร้างฉาก ให้เหมาะสมกับรายการพยากรณ์อากาศของทางสถานี 4. ศึกษาเทคนิคการขยับเคลื่อนไหว ท่าทางต่างๆ รวมถึงวิธีการใช้โปรแกรม Adobe After Effects CS6 และโปรแกรม Autodesk Maya 2013 การออกแบบและพัฒนาแอนิเมชัน 4.1 การออกแบบ 2D Animation 4.1.1 การออกแบบสตอร์รี่บอร์ดของงานที่จะสร้าง

บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

Page 1: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

26

บทท 4

ผลการปฏบตงานตามโครงงาน

การศกษาขอมลเบองตน

จากทคณะนกศกษาปฏบตงานสหกจศกษาไดศกษาขอมลเกยวกบการจดทารายการ

พยากรณอากาศในรปแบบเสนอขาวการพยากรณอากาศทมการเปลยนแปลงยงขน เหมอนจรงยงขน

พบวายงมจานวนนอย ทางคณะนกศกษาปฏบตงานสหกจศกษาจงไดจดทาแอนเมชน 3 มตผสมผสาน

กบแอนเมชน 2 มต เพอเปนตวประกอบในการนาเสนอการพยากรณอากาศ โดยออกแบบฉากใหมความ

สวยงามมากขน เพอสรางผลงานทมความแปลกใหมในการพยากรณอากาศ

การเกบรวบรวมขอมล

ทางคณะนกศกษาปฏบตงานสหกจศกษาไดศกษา และทาการเกบรวบรวมขอมลทเกยวของ

กบการจดทาโครงการ ดงน

1. ศกษาคนควาเกยวกบสวนประกอบตางๆ ทตองใชในการจดทา พยากรณอากาศ และ

แนวการดาเนนงานของการพยากรณอากาศ

2. ศกษาคนควาแนวคดรปแบบตางๆ ในการจดทาพยากรณอากาศ

3. ศกษาขอมลเกยวกบการทาการตนแอนเมชน 3 มต และ 2 มต การขยบเคลอนไหว และ

การสรางฉาก ใหเหมาะสมกบรายการพยากรณอากาศของทางสถาน

4. ศกษาเทคนคการขยบเคลอนไหว ทาทางตางๆ รวมถงวธการใชโปรแกรม Adobe After

Effects CS6 และโปรแกรม Autodesk Maya 2013

การออกแบบและพฒนาแอนเมชน

4.1 การออกแบบ 2D Animation

4.1.1 การออกแบบสตอรรบอรดของงานทจะสราง

Page 2: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

27

Page 3: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

28

Page 4: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

29

รปท 4.1 สตอรบอรด แอนเมชนรายงานสภาพอากาศ

4.2 การออกแบบตวละคร

4.2.1 ใชโปรแกรม Autodesk Maya ในการสรางงาน 3 มต โดยใชเครองมอ Polygon ในการ

ปนวตถ

Page 5: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

30

รปท 4.2 การปนโมเดลโลก

4.2.2 ทาการใสรปภาพลงไปในโมเดลโลกทออกแบบไว โดยไปท Windows > Rendering

Editors > Hypershade

รปท 4.3 การใสรปภาพใหกบโมเดลโลก

Page 6: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

31

4.2.3 เมอปนโมเดลโลกเสรจ ทาการปนโมเดลประเทศจานวนทงหมด 15 ประเทศ โดยใช

เครองมอ Curves

รปท 4.4 การปนโมเดลประเทศ

4.2.4 ทาการกาง UVs ใหกบโมเดลประเทศทงหมดจานวน 15 ประเทศ เพอนาภาพไปตด

ตอในโปรแกรม Adobe Photoshop โดยไปท Create Uvs > Automatic Mapping

รปท 4.5 การกาง UVs ใหโมเดลประเทศ

Page 7: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

32

4.2.5 ใชโปรแกรม Adobe Photoshop ในการตดตอรปภาพของประเทศทงหมด เมอเสรจ

ใหทาการ Save รปภาพเปนนามสกล IFF

รปท 4.6 การตดตอรปภาพของประเทศ

4.2.6 ใชโปรแกรม Autodesk Maya ในการใสรปภาพใหกบโมเดลประเทศ โดยไปท

Windows > Rendering Editors > Hypershade

รปท 4.7 การใสรปภาพลงโมเดลประเทศ

Page 8: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

33

4.2.7 นาโมเดลประเทศทปนเสรจมาประกอบเปนวตถเดยวกน จากนนทาการ Combine

วตถ โดยไปท Mesh > Combine

รปท 4.8 การนาวตถมา Combine

4.2.8 ทาการสรางกลองเพอใชในการเคลอนไหวไปยงวตถทตองการ โดยไปท Create >

Cameras > Camera

รปท 4.9 การสรางกลอง

Page 9: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

34

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

โดยไปท Create > Lights > Point Light

รปท 4.10 การใสแสงใหกบวตถ

4.2.10 ทาการเคลอนไหวงานแอนเมชน โดยการใชกลองเคลอนทไปยงประเทศทตองการ

เปนหลก ใชการซมเขา และซมออกไปยงประเทศทงหมด เมอไดมมทตองการใหทาการกด S เพอ

กาหนด Keyframe เมอสงเกตท Timeline จะมเสนสแดงเพอยนยนวาไดทาการกาหนด Keyframe

เรยบรอย ทาซ าจนครบทกประเทศเพอนาไปสขนตอนการเรนเดอรงานแอนเมชนในขนตอไป

รปท 4.11 การเคลอนไหวงานแอนเมชน

Page 10: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

35

4.2.11 ทาการเรนเดอรงาน เปนขนตอนสดทายของโปรแกรม Autodesk Maya โดยตองเขา

ไปตงคาท Windows > Rendering Editors > Render Setting

รปท 4.12 การเรนเดอรงาน

4.3 การออกแบบฉาก

4.3.1 ใชโปรแกรม Adobe Photoshop โดยใชเครองมอ Rectangle Tool เพอทากรอบพนหลง

รปท 4.13 การสรางวตถเพอทากรอปพนหลง

Page 11: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

36

4.3.2 ใชโปรแกรม Adobe Photoshop โดยใชเครองมอ Tab Color ในการลงส

รปท 4.14 การลงสวตถ

4.3.3 การลงสใชเครองมอ Tab Gradient ในการไลเฉดสใหสวยงาม

รปท 4.15 การลงสวตถ

Page 12: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

37

4.3.4 เมอสรางเสรจแลวทาการ SAVE ภาพเปน .PSD

รปท 4.16 การ SAVE ไฟลภาพ

4.4 การออกแบบพระอาทตยและกอนเมฆ

4.4.1 ใชโปรแกรม Adobe Photoshop ในการออกแบบพระอาทตย

รปท 4.17 การออกแบบพระอาทตย

4.4.2 ใชโปรแกรม Adobe Photoshop ในการออกแบบกอนเมฆทองฟาแจมใส

Page 13: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

38

รปท 4.18 การออกแบบกอนเมฆทองฟาแจมใส

4.4.3 ใชโปรแกรม Adobe Photoshop ในการออกแบบกอนเมฆฝนตก

รปท 4.19 การออกแบบกอนเมฆฝนตก

Page 14: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

39

4.4.4 ใชโปรแกรม Adobe Photoshop ในการออกแบบกอนเมฆหมะตก

รปท 4.20 การออกแบบกอนเมฆหมะตก

4.4.5 เมอสรางเสรจแลวทาการ SAVE ภาพเปน .psd

รปท 4.21 การ SAVE ไฟลภาพ

Page 15: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

40

4.5 การเคลอนไหว

4.5.1 การ Import File เพอนาเขามา Animated ในโปรแกรม Adobe After Effects CS6

รปท 4.22 การ Import ไฟล เขาในโปรแกรม Adobe After Effects

4.5.2 การเคลอนไหวกอนเมฆ โดยใชโปรแกรม Adobe After Effect CS6

รปท 4.23 การเคลอนไหวกอนเมฆ

Page 16: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

41

4.5.3 การรวมไฟลภาพเพอทาการเคลอนไหว โดยใชโปรแกรม Adobe After Effect CS6

รปท 4.24 การรวมไฟลภาพเพอทาเคลอนไหว

รปท 4.25 การรวมไฟลภาพเพอทาเคลอนไหว

Page 17: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

42

4.6 การใสเสยง

4.6.1 การ Import เสยง โดยไปทเมน File > Import > File แลวเลอกเพลงทจะนามาใส

รปท 4.26 การใสเสยงเพลงประกอบ

4.6.2 การใสเสยงประกอบ โดยใชโปรแกรม Adobe After Effect CS6

รปท 4.27 การใสเสยงประกอบ

Page 18: บทที่ 4 - Siam Universityresearch-system.siam.edu/images/coop/IT_Department/... · 2018-11-01 · 4. ศึกษาเทคนิคการขยับเคลื่อนไหว

43

4.7 การ Render ไฟลงาน

4.7.1 การ Render ไฟลงาน เปน VDO โดยไปทเมน Composition > Add to Render Queue

รปท 4.28 การ Render ไฟลงาน

4.7.2 การเลอกไฟล VDO ใหเปน .avi โดยการคลกท Output Module จากนนเลอก Format

ของ VDO

รปท 4.29 การเลอก Format ไฟลงาน