Fundamentals Animation 83 ภาพที่ 4.16 ขนาดภาพไกล (LS) ที่มา : http://www.exa-studio.com/ (3) ภาพปานกลาง หรือ Medium Shot (MS) ภาพปานกลางเปนภาพที่คนดูจะไมไดเห็นตัวละครตลอดทั้งราง เหมือนภาพ Long Shot แตจะเห็นประมาณครึ่งตัว เปนขนาดภาพที่ทําใหรายละเอียดของตัวละคร มากยิ่งขึ้นเหมือนพาคนดูกาวไปใกลตัวละครใหมากขึ้น ภาพขนาดนี้ถูกใชบอยมากกวาภาพขนดอื่นๆ เพราะสามารถใหรายละเอียดไดมาก ภาพที่ 4.17 ภาพปานกลาง (MS) ที่มา : http://www.exa-studio.com/ บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 84 (4) ภาพใกลหรือ Close up (CU) ภาพใกลเปนขนาดภาพที่เนนใบหนาตัวละครโดยเฉพาะ เพื่อแสดง อารมณของตัวละครในขณะนั้นวารูสึกอยางไรตอเหตุการณที่เกิดขึ้น ภาพขนาดนี้มักมีการเคลื่อนไหว นอย เพื่อใหคนดูเก็บรายละเอียดไดครบถวน ภาพที่ 4.18 ภาพใกล(CU) ที่มา : http://www.exa-studio.com/ (5) ภาพใกลมาก หรือ Extreme Close up (ECU) ภาพใกลมากเปนขนาดภาพที่ตรงกันขามชนิดสุดขั้วกับภาพ Extreme Long Shot คือจะพาคนดูเขาไปใกลตัวละครมากๆ เชน แคตา ปาก จมูก เล็บ รวมถึงการ ถายสิ่งของอื่น ๆ อยางใกลชิด เพื่อใหเห็นรายละเอียดกันอยางจะแจง เชน กอนนําแข็งในแกว, เพชร บนแหวน, ไกปน เปนตน ภาพที่ 4.19 ภาพใกล(ECU) ที่มา : http://www.exa-studio.com/ บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 85 2) มุมกลอง (Camera Angle) มุมกลองที่แตกตางจะใหความรูสึกและอารมณที่ ตางกัน ดังนั้นจึงเปนเรื่องที่สําคัญที่บทภาพจะแสดงใหเห็นถึงมุมกลองวาฉายจากทิศทางใด มุมกลอง ประกอบดวย (1) Bird eye view (ภาพมุมสูง) คือ ภาพแทนสายตาของนกเวลามองวัตถุ สามารถถายทอดความรูสึกไดหลายอยางไมวาจะเปนหดหู บางทีก็ใชภาพมุมสูงเพื่อใหเห็นความ อลังการของฉาก ภาพที่ 4.20 Bird eye view (ภาพมุมสูง) ที่มา : http://www.exa-studio.com/ (2) Worm eye view (ภาพมุมต่ํา) คือ ภาพที่กลองอยูต่ํากวาวัตถุ (ภาพมุม ต่ํา) ภาพมุมนี้สามารถบอกวาวัตถุดูนากลัว หรือยิ่งใหญแคไหน ภาพที่ 4.21 Worm eye view (ภาพมุมต่ํา) ที่มา : http://www.exa-studio.com/ บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 86 (3) Eye Level Angle (ภาพมุมระดับสายตา) คือ ภาพที่ตั้งกลองในระดับ สายตาของคน ภาพในระดับสายตาเพื่อสื่อความหมายวาภาพที่ปรากฏจะเปนภาพใหความรูสึก ธรรมดา ไมเดนอะไร ภาพที่ 4.22 Eye Level Angle (ภาพมุมระดับสายตา) ที่มา : http://www.exa-studio.com/ 3) การเคลื่อนที่กลอง (Camera move) การเคลื่อนที่ของกลองสามารถใหภาพ ที่นาติดตามเหมือนกับผูชมไดอยูในสถานการณจริง การเคลื่อนกลองมักจะใชแทนที่การตัดภาพไปยัง อีกฉากหนึ่งเพื่อสรางความตอเนื่องในภาพ ประกอบดวย (1) Pan (แพน) คือ การเคลื่อนกลองจากซายไปขวา หรือ ขวามาซายก็ได ใชในหลายกรณีมากๆไมวาจะเปนบอกเรื่องราว เชื่อมระหวางสถานที่หนึ่งไปอีกสถานที่หนึ่ง (2) Tilt (ทิ้ว) คือ การเคลื่อนกลองจากบนลงลางหรือลางขึ้นบนก็ได ภาพที่ 4.23 การแพนกลองและทิ้วกลอง บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 87 5. การจัดทําบอรดภาพเคลื่อนไหว (Story Reel or Animatic) การจัดทําบอรดภาพเคลื่อนไหว คือ การทําภาพเคลื่อนไหวคราวๆ โดยการใชภาพ จากบทภาพ (storyboard) เปนแบบสรุปเพื่อนําไปผลิตแอนิเมชันจริงมีลักษณะเปนภาพ 2 มิติที่ ออกแบบดวยคอมพิวเตอรกราฟก มีการจัด Layout อยางสมบูรณพรอมทั้งกําหนดเสียงประกอบ ตางๆ และเวลาในการเคลื่อนไหวภายในฉากแตละฉากรวมทั้งเวลาทั้งหมดของการดําเนินเรื่องตั้งแต เริ่มตนจนจบ เพื่อจะไดรูเวลาและการเคลื่อนไหวในแตละช็อตภาพอยางแมนยําและนี่คือความ แตกตางระหวางแอนิเมชันและภาพยนตรเพราะแอนิเมชันจําเปนตองตัดตอกอนที่จะผลิต สวน ภาพยนตรที่ใชคนแสดงนั้นตัดตอภายหลังการถายทํา) ขั้นตอนการผลิต (Production) ขั้นตอนการผลิต (Production) เปนขั้นตอนที่ทําการเคลื่อนไหวใหกับตัวละครตางๆ ของ แอนิเมชันตามบทภาพ (Storyboard) ตัวละครและฉากจะถูกทําการเคลื่อนไหว (animate) ใหมี ความสมบูรณขั้นตอนการผลิตมีรายละเอียดดังตอไปนี้ 1. การทําภาพเคลื่อนไหว (Animate) เปนการนําตัวละครเคลื่อนไหวตาม Story Reel เมื่อทําการเคลื่อนไหวเสร็จแลวก็ตองเก็บรายละเอียดตางๆ เชน การปรับแตงเวลาใหเหมาะสม การ แสดงอารมณทางใบหนาของตัวละคร การขยับปากการเคลื่อนไหวของกลอง เปนตน ภาพที่ 4.24 การประชุมทีมเพื่อจัดทํา Animate ตาม Storyboard ที่มา : http://pixar-animation.weebly.com/storytelling.html บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 88 ภาพที่ 4.25 การทํา Animate 2D Animation ตาม Storyboard โดย นายสันติภาพ วงศแกวโพธิ์ทอง บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 89 ภาพที่ 4.26 การทํา Animate 3D Animation ตาม Storyboard โดย นายอนุวัฒน แกวจันทร บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 90 ภาพที่ 4.27 การทํา Animate 3D Animation ดวยการ Blend Shape ตาม Storyboard โดย นายณัฐชากร ศรีสมบัติ บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 91 ภาพที่ 4.28 การทํา Animate งานตามสตอรี่บอรด ที่มา : http://pixar-animation.weebly.com/pixars-animation-process.html. 2. แสงและเงา (Light and Shadow) แสงและเงานั้นจะสรางมิติและอารมณใหกับ แอนิเมชัน กอนที่จะตัดสินใจวางแสงอยางไรที่ตําแหนงใด ควรคํานึงถึงปจจัยดังตอไปนี้ 2.1 อารมณ (Mood) แสงตางชนิดจะใหอารมณที่ตางกันในแตละฉาก(Scene) ปจจัย เชน แสงสวางหรือความมืด จะใหอารมณที่สนุกสนานหรือเศรา หรือโทนสีของแสงก็สามารถ บอกวารูสึก อบอุน สบาย หนาวได 2.2 มิติ (Depth) แสงและเงาสามารถสื่อถึงความเปน 3 มิติบนจอ 2มิติ โดยการ สรางภาพลวงตาของความลึกที่เกิดจากแสงเงาที่ตกกระทบ 2.3 เวลา (Time) โทนของแสงสามารถบงบอกใหรูวาเหตุการณในขณะนั้น เปนตอน เชา ตอนเที่ยง ตอนกลางคืน และยังสามารถบอกฤดูกาลได 2.4 ตําแหนงของไฟ (Position) ทิศทางของแสงจะมีความชัดเจนตอรายละเอียด ตางๆ แสงที่ฉายจากดานบนมักจะแสดงความเปนธรรมชาติไดมากกวาแสงที่ฉายมาจากดานลาง บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 92 ภาพที่ 4.29 การทํา Light and Shadow 3D Animation ภาพที่ 4.30 การทํา Light and Shadow 3D Animation ภาพที่ 4.31 การทํา Light and Shadow 2D Animation บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 93 ภาพที่ 4.32 การทํา SLR ที่มา : http://pixar-animation.weebly.com 3. การใสเทคนิคพิเศษ (Visual Effect) เปนการสรางความสมจริงและสรางความ นาสนใจใหแกงานแอนิเมชัน โดยการใชเทคนิคพิเศษกับงานแอนิเมชันจะใช การสรางเทคนิคพิเศษ ดวยคอมพิวเตอร (CGI) เชน การสรางระเบิด การสรางควัน การทําคลื่นน้ํา การทําฝนตก เปนตน ภาพที่ 4.33 การใสเทคนิคพิเศษในงานแอนิเมชัน ที่มา : http://pixar-animation.weebly.com บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 94 ภาพที่ 4.34 การใสเทคนิคพิเศษในงานแอนิเมชัน ที่มา : http://pixar-animation.weebly.com 4. การประมวลผล (Rendering) เมื่อตกแตงทุกอยางไดสมบูรณตามซีนในบทภาพแลว จะเขาสูกระบวนการที่โปรแกรมคอมพิวเตอรจะคํานวณและแสดงผลทุกๆ Pixel ออกมาเปนภาพนิ่ง หรือภาพเคลื่อนไหว เพื่อรอดําเนินการ Composite ในขั้นตอนหลังการผลิต (Pre-Production) ภาพที่ 4.35 การ Rendering โดย นายณัฐชากร ศรีสมบัติ ขั้นตอนหลังการผลิต (Post-Production) ขั้นตอนหลังการผลิตเปนขั้นตอนสุดทายในการผลิตแอนิเมชัน ประกอบดวย 1. การตัดตอ (Composition) คือ ขั้นตอนในการนําภาพทั้งหมดที่ผานการ Render จะถูกนํามาตัดตอ โดยภาพจะถูกแยกเปนชนิดเรียกวา Layer เพื่อใหผูที่ตัดตอภาพนํามาซอนทับกัน อีกที เชน ภาพตัวละครกับภาพฉากหลัง เพื่อทําใหสามารถแกไขทีละสวนไดงาย ซึ่งในขั้นตอนนี้ สามารถตกแตงภาพใหดู สวยงาม หรือใส Effect ตางๆ เพื่อความสมจริงและความนาสนใจเพิ่มเติมได บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 95 ภาพที่ 4.36 compositing 3D Animation ภาพที่ 4.37 compositing 2D Animation 2. ดนตรีและเสียงประกอบ (music and sound effects) หมายถึง การเลือก เสียงดนตรีประกอบใหเขากับการดําเนินเรื่อง และฉากตางๆ ของการตูน รวมทั้งเสียงประกอบ สังเคราะหดวย ซึ่งวิศวกรเสียงสามารถสรางเสียงประกอบใหสอดคลองกับการดําเนินเรื่องได โดยดู จากเคาโครงเรื่อง ดังนั้นเคาโครงเรื่องถือวามีความสําคัญอยางยิ่ง ทั้งนี้ แอนิเมชันภาพเดียวกันแตเสียง ประกอบตางกัน เสียงประกอบที่ดีกวาและเหมาะสมกวาจะชวยเพิ่มอารมณความรูสึกในการชม แอนิเมชันมากขึ้น บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 96 การเปรียบเทียบกระบวนการผลิตแอนิเมชันแบบ 2 มิติ และ 3 มิติ กระบวนการผลิตแอนิเมชันแบบ 2 มิติ และ 3 มิติ นั้นลวนใชหลักการผลิตแอนิเมชันตาม หลัก 3P เชนเดียวกัน แตจะมีรายละเอียดในแตละขั้นตอนตางกัน ดัง ตารางที่ 4.1 ตารางที่ 4.1 การเปรียบเทียบกระบวนการผลิต แอนิเมชันแบบ 2 มิติ และ 3 มิติ Process 2D Animation 3D Animation Pre-Production Idea Idea Treatment Story Script Storyboard Character Animatic Storyboard Design Voice Recording Story Reel Animatic Production Animate Layout Clean Up R&D Inking and paint Modeling Texturing Rigging Animation VFX Lighting Rendering Post-Production Composition Compositing VFX 2D VFX/Motion Graphics Rendering Color Correction Additional Sound Final output Final editing บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 97 บทสรุป การสรางแอนิเมชันไมวาจะเปนประเภทใดสามารถแบงขั้นตอนการทําได 3 ขั้นตอน ตาม หลักกระบวนการผลิตแอนิเมชัน 3P คือ 1) ขั้นตอนกอนการผลิต (Pre-Production) เปนหัวใจสําคัญสําหรับการสรางเนื้อหาของภาพยนตรแอนิเมชันเรื่องนั้นๆ ความสนุก ตื่นเตน และอารมณของตัวละครทั้งหลาย จะถูกกําหนดในขั้นตอนนี้ทั้งหมด ประกอบดวย การ กําหนดแนวคิด การเขียนเนื้อเรื่องหรือบท การออกแบบตัวละคร การออกแบบบทภาพ และการ จัดทําบอรดภาพเคลื่อนไหว 2) ขั้นตอนการผลิต (Production) เปนขั้นตอนการทําใหตัวละครเคลื่อนไหวตามบทในแตละฉากนั้นๆ ในขั้นตอนนี้มี ความสําคัญอยางยิ่ง เปรียบเสมือนการกํากับนักแสดงวาจะเลนไดดีหรือไม ซึ่งหากทําขั้นตอนนี้ไดไมดี พอ ก็อาจทําใหผูชมไมรูสึกมีอารมณรวมไปกับตัวละครดวย ประกอบดวย การทําภาพเคลื่อนไหว การ จัดแสงและเงา การใสเทคนิคพิเศษ และการประมวลผล 3) ขั้นตอนหลังการผลิต (Post-Production) เปนขั้นตอนสุดทายที่ทําหนาที่รวมงานแตละฉากเขาดวยกัน ประกอบดวยการตัดตอ และการใสดนตรีและเสียงประกอบ และทําการ export งานในรูปแบบไฟลที่กําหนด บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 98 แบบฝกหัดทายบทที่ 4 1. ใหนักศึกษาอธิบายรายละเอียดของขั้นตอนการสรางแอนิเมชัน ทั้ง 3 ขั้นตอน อยางละเอียด Pre-Production ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 99 Production ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 100 Post-Production ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 101 ใบงานที่ 5 ใหนักศึกษานําตัวละคร “Super Hero อีสาน” ที่ไดออกแบบในบทที่ 3 นํามาสรางดวย คอมพิวเตอร (สัปดาหที่ 9) บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 102 เอกสารอางอิง ทินกร ลุนโน และ พจนศิรินทร ลิมปนันทน. (2560). การพัฒนาการตูนแอนิเมชัน 3 มิติ เรื่อง น้ําใจ. The 3rd National Conference on Technology and Innovation ManagementNCTIM 2017 , RajabhatMahaSarakhamUniversity MahaSarakham Thailand, 2-3 March 2017, (หนา 14). ดนัย มวงแกว. (2552). Flash Cartoon Animation. นนทบุรี : ไอดีซีฯ. ธรรมศักดิ์ เอื้อรักสกุล. (2555). การสราง 2D Animation. กรุงเทพฯ : มีเดีย อินเทลลิเจนซ เทคโนโลยี, บจก. ณัฐชากร ศรีสมบัติ. (2557). การพัฒนาการตูนแอนิเมชั่น 3 มิติ เรื่อง “เผลอหลับ”. วท.บ. (สาขาวิชาเทคโนโลยีมัลติมีเดียและแอนิเมชั่น), คณะเทคโนโลยีสารสนเทศ, มหาวิทยาลัยราชภัฏมหาสารคาม. นรินทร เรืองแสง. (2551). สรางการตูน Animation ดวย Flsah. กรุงเทพฯ : โปรวิชั่น จํากัด. วิชาดา ถาวรประภาสวัสดิ์. (2554). กระบวนการสรางสรรคแอนิเมชันจากวรรณกรรมซีไรต. (บัณฑิตวิทยาลัย), จุฬาลงกรณมหาวิทยาลัย. สันติภาพ วงศแกวโพธิ์ทอง. (2558). การพัฒนาการตูนแอนิเมชัน 2 มิติ เรื่อง สายเกิน. วท.บ. (สาขาวิชาเทคโนโลยีมัลติมีเดียและแอนิเมชัน), คณะเทคโนโลยีสารสนเทศ, มหาวิทยาลัยราชภัฏมหาสารคาม. อนุวัฒน แกวจันทร และ พจนศิรินทร ลิมปนันทน. (2560). การพัฒนาการตูนแอนิเมชัน 3 มิติ เรื่อง ฮานะผจญภัย. The 5th ASEAN Undergraduate Conference in Computing (AUC2) 2017 MCG, Thailand, 20-22 April 2017 , (pp MCG38-MCG43). Shawn kelly. (2009). Animation tips & tricks volume II - 2009 edition. Animation Mentor.com. Tony White. (2009). How to make animated films. Chaina : Focal Press. Character Design. [ระบบออนไลน]. แหลงที่มา : http://pixar-animation.weebly .com/character-design.html. (สืบคน 11 มิถุนายน 2559). Opening Sequence Animation Progression. [ระบบออนไลน]. แหลงที่มา : http://pixaranimation.weebly.com/pixars-animation-process.html. (สืบคน 11 มิถุนายน 2559). บทที่ 4 กระบวนการผลิตแอนิเมชัน
Fundamentals Animation 103 Storytelling. [ระบบออนไลน]. แหลงที่มา :http://pixar-animation.weebly.com /storytelling.html. (สืบคน 11 มิถุนายน 2559). มุมของภาพแอนิเมชัน. [ระบบออนไลน]. แหลงที่มา :http://www.exa-studio.com/. (สืบคน 11 กรกฎาคม 2558). Nagy Péter. (2556). Nausicaä of the Valley of the Wind (1984) - Character Design. [ระบบออนไลน]. แหลงที่มา : http://livlily.blogspot.com/2012 /04/nausicaa-of-valley-of-wind-1984_2196.html. (สืบคน 11 กรกฎาคม 2558). Nagy Péter. (2556).Spirited Away (2001) - Character Design, Model Sheets. [ระบบออนไลน]. แหลงที่มา : http://livlily.blogspot.com/2012/04/ spirited-away-2001-character-design_22.html. (สืบคน 11 กรกฎาคม 2558). Dhruba jyoti Borah. (2560). 2D Production Pipeline. [ระบบออนไลน]. แหลงที่มา : http://skyanimatio.blogspot.com/2014/06/2d-production-pipelinewhat-are-parts.html. (สืบคน 11 มิถุนายน 2559). บทที่ 4 กระบวนการผลิตแอนิเมชัน
แผนการบริหารการสอนประจําบทที่ 5 1. หัวขอเนื้อหาประจําบท 1) การสรางแอนิเมชัน แบบ 2 มิติ ดวยโปรแกรม Adobe Flash 2) การสรางแอนิเมชัน แบบ 2 มิติ ดวยโปรแกรม After Effect 3) การสรางแอนิเมชัน แบบ 3 มิติ ดวยโปรแกรม Maya 2. วัตถุประสงคเชิงพฤติกรรม 1) ผูเรียนสามารถสรางแอนิเมชันแบบ 2 มิติ ได 2) ผูเรียนสามารถสรางแอนิเมชันแบบ 3 มิติ ได 3) ผูเรียนสามารถทําแบบฝกหัดทายบทเรียนได 3. วิธีสอนและกิจกรรมการเรียนการสอนประจําบท สัปดาหที่ 12 1) ผูสอนชี้แจงจุดประสงคการเรียนรูของบทเรียน 2) ผูสอนบรรยาย เอกสารประกอบการสอนบทที่ 5 การสรางแอนิเมชันเบื้องตน หัวเรื่อง การสรางแอนิเมชัน แบบ 2 มิติ ดวยโปรแกรม Adobe Flash 3) ผูสอนอธิบายการสรางแอนิเมชันแบบ 2 มิติ ดวยโปรแกรม Adobe Flash โดยผูสอน ปฏิบัติใหดูเปนแบบอยางและใหนักศึกษาปฏิบัติตาม 4) ผูสอนแจกใบงานที่ 6 การสรางแอนิเมชัน แบบ 2 มิติ ดวย Flash ใหนักศึกษาประยุกต สรางแอนิเมชัน 2 มิติ โดยประยุกตจากสิ่งที่ผูสอนไดปฏิบัติใหดูเปนแบบ 5) ผูสอนชี้แจงเนื้อหาการเรียนครั้งตอไปและกําหนดวันสงใบงานที่ 6 สัปดาหที่ 13 1) ผูสอนทบทวนบทเรียนกอนหนา 2) ผูสอนบรรยาย เอกสารประกอบการสอนบทที่ 5 การสรางแอนิเมชันเบื้องตน หัวเรื่อง การสรางแอนิเมชัน แบบ 2 มิติ ดวยโปรแกรม After Effect 3) ผูสอนอธิบายการสรางแอนิเมชันแบบ 2 มิติ ดวยโปรแกรม After Effect โดยผูสอน ปฏิบัติใหดูเปนแบบอยางและใหนักศึกษาปฏิบัติตาม 4) ผูสอนแจกใบงานที่ 7 การสรางแอนิเมชัน โปรแกรม After Effect ใหนักศึกษาประยุกต สรางแอนิเมชัน 2 มิติ โดยประยุกตจากสิ่งที่ผูสอนไดปฏิบัติใหดูเปนแบบ 5) ผูสอนนัดหมายเนื้อหาการเรียนครั้งตอไปและกําหนดวันสงใบงานที่ 7
105 สัปดาหที่ 14 1) ผูสอนทบทวนบทเรียนกอนหนา 2) ผูสอนบรรยาย เอกสารประกอบการสอนบทที่ 5 การสรางแอนิเมชันเบื้องตน หัวเรื่อง การสรางแอนิเมชัน แบบ 3 มิติ ดวยโปรแกรม Maya 3) ผูสอนแนะนําการใชงานโปรแกรม Maya 4) เปดโอกาสใหนักศึกษาซักถาม 5) ผูสอนนัดหมายเนื้อหาการเรียนครั้งตอไป สัปดาหที่ 15 1) ผูสอนทบทวนบทเรียนกอนหนา 2) ผูสอนอธิบายการสรางแอนิเมชันแบบ 3 มิติ ดวยโปรแกรม Maya โดยผูสอนปฏิบัติใหดู เปนแบบอยางและใหนักศึกษาปฏิบัติตาม 3) ผูสอนแจกใบงานที่ 8 การสรางแอนิเมชันแบบ 3 มิติ ดวยโปรแกรม Maya 4) ผูสอนและนักศึกษาชวยกันสรุปเนื้อหา 4. สื่อการเรียนการสอน 1) เอกสารประกอบการสอน บทที่ 5 การสรางแอนิเมชันเบื้องตน 2) สไลด 3) วีดีทัศน 4) ใบงานที่ 6 การสรางแอนิเมชัน แบบ 2 มิติ ดวยโปรแกรม Adobe Flash 5) ใบงานที่ 7 การสรางแอนิเมชัน แบบ 2 มิติ ดวยโปรแกรม After 6) ใบงานที่ 8 แอนิเมชันแบบ 3 มิติ ดวยโปรแกรม Maya 5. การวัดผลและการประเมินผล 1) สังเกตพฤติกรรมการทํากิจกรรมในหองเรียน 2) ทักษะในการสรางสรรคและออกแบบผลงานตามใบงาน 3) จากการทําแบบฝกหัดทายบทเรียน
บทที่ 5 การสรางแอนิเมชันเบื้องตน การสรางผลงานดานแอนิเมชันสามารถทําไดหลากหลายรูปแบบ โดยในบทเรียนนี้ มุงสราง งานแอนิเมชันขั้นพื้นฐานดวยคอมพิวเตอร ทั้งในรูปแบบแอนิเมชัน 2 มิติ และ แอนิเมชัน 3 มิติผาน โปรแกรมตางๆ ดังนี้ การสรางแอนิเมชัน แบบ 2 มิติดวย Adobe Flash โปรแกรม Adobe Flash ที่สามารถสรางงานดานแอนิเมชัน แบบ 2 มิติ ไดดี และ เปนที่ นิยมสําหรับผูผลิตแอนิเมชันจนเกิดเปนการตูนแอนิเมชันที่ไดรับความนิยมหลายเรื่อง เชน Pucca, Boomba, Ninja เปนตน (นรินทร เรืองแสง, 2551:15) โปรแกรม Adobe Flash 1. แนะนําการใชโปรแกรม Adobe Flash ภาพที่ 5.1 สวนประกอบโปรแกรม Adobe Flash 1.1 แถบเมนูบาร(Menu bar) เปนแถบที่รวบรวมคําสั่งในการใชงานทั้งหมดเกี่ยวกับ การสรางแอนิเมชัน และการตั้งคาการใชงานโปรแกรม Adobe Flash ทั้งหมด แถบเมนูบารMenu bar ไทมไลน Timeline กลองเครื่องมือ Toolbox พื้นที่ทํางาน Stage Property และ Panels
Fundamentals Animation 107 1.2 กลองเครื่องมือ (Toolbox) เปนที่รวบรวมเครื่องมือตางๆ ในการสรางและ ปรับแตงวัตถุ แบงเครื่องมือออกเปน 5 กลุม ดังนี้ ภาพที่ 5.2 กลองเครื่องมือ 1.3 พื้นที่การทํางาน (Stage) คือบริเวณสวนการแสดงผลของวัตถุตางที่ทําการ เคลื่อนไหว 1.4 ไทมไลน(Timeline) เปนเครื่องมือที่ใชในการกําหนดการเคลื่อนไหวโดยการนํา วัตถุมาจัดเรียงใหเกิดความตอเนื่องกันในแตละเฟรม แบงออกเปน 2 สวน ดังนี้ ภาพที่ 5.3 กลองเครื่องมือ 1.4.1 เลเยอร (Layer) ลักษณะการทํางานคลายกับแผนใสที่วางซอนทับกันแต ละเลเยอรแยกเปนอิสระกัน 1.4.2 เฟรม (Frame) คือการกําหนดภาพวัตถุในแตละชวงเวลาซึ่งจะแสดงผลเปน ภาพเคลื่อนไหวของวัตถุนั้นๆ เฟรม (Frame) เลเยอร (Layer) บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 108 1.5 พาเนล (Panels) คือ หนาตางการกําหนดคาตางๆ ใหกับวัตถุ โดยพาเนลจะถูกจัด ไวอยางเปนหมวดหมู เชน การกําหนดคาสี การจัดตําแหนง พาเนลคุณสมบัติ(Property) เปนตน 2. การสรางแอนิเมชัน 2 มิติ ดวยโปรแกรม Adobe Flash โปรแกรม Adobe Flash ใชหลักการคียเฟรม (Key frame) สรางการเคลื่อนไหวใหกับ วัตถุ (Object) โดยสามารถแบงการเคลื่อนไหวไดดังนี้ 2.1 Frame by Frame Frame by Frame เปนการนําภาพมาใสไวในแตละเฟรมแลวทําการกําหนดคีย เฟรม หรือเฟรมที่ถูกกําหนดใหมีการเปลี่ยนแปลงของวัตถุเพื่อสรางการเคลื่อนไหว ภาพที่ 5.4 ภาพการวางตําแหนง Key บน Frame การกําหนด Extreme ทําเพื่อกําหนดเปนตําแหนงหลัก ซึ่งคือตําแหนงแรกและ ตําแหนงสุดทายของการเคลื่อนไหว ภาพที่ 5.5 ภาพการวางตําแหนง Extreme Position บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 109 Breakdown หรือ Passing Position คือตําแหนงกึ่งกลางระหวางตําแหนง Extreme ทั้งสองตําแหนง ภาพที่ 5.6 ภาพการวางตําแหนง Breakdown In-Between หรือ Middle คือทุกตําแหนงที่อยูระหวางตําแหนง Extreme และ Breakdown ภาพที่ 5.7 ภาพการวางตําแหนง In-Between 2.2 Tween Animation การกําหนดคียเฟรมเริ่มตนและคียเฟรมสุดทาย การเปลี่ยนแปลงระหวางเฟรมให โปรแกรมเปนตัวคํานวณอัตโนมัติ แบงเปน 2 แบบ คือ 2.1 Motion Tween หรือ Motion Path เปนการสรางการเคลื่อนไหวที่ กําหนดการเคลื่อนที่ หมุน ยอ หรือขยายวัตถุไปตามเสนที่วาดไว โดยที่รูปทรงของวัตถุไมมีการ เปลี่ยนแปลง โดยเปนรูปแบบการสรางภาพเคลื่อนไหวที่นิยมมากที่สุด เชน เมฆลอย พัดลมกําลังหมุน ยานบิน รถกําลังแลน เปนตน บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 110 การสรางภาพเคลื่อนไหวแบบ Motion Tween 1) ขั้นตอนที่ 1 คลิกเลือกคียเฟรมจุดเริ่มตน ภาพที่ 5.8 การกําหนด Key เริ่มตนการทํางาน 2) ขั้นตอนที่ 2 สรางวัตถุหรือเนื้อหาตามตองการ โดยในตัวอยางไดวาดรูป ครูดาวขับยานอวกาศและจะทําการเคลื่อนที่จากตําแหนง A ไปยัง ตําแหนง B ภาพที่ 5.9 ภาพการวาดครูดาวขับยานอวกาศ บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 111 3) ขั้นตอนที่ 3 คลิกขวาที่คียเฟรม คลิกเลือกเมนู Create Classic Tween ภาพที่ 5.10 การสราง motion tween 4) ขั้นตอนที่ 4 กําหนดระยะหางจากจุดแรกตามตองการ เชน หาง 30 เฟรม คลิกที่เฟรมที่ 30 แลวเพิ่มคียเฟรม โดยกด F6 หรือคลิกเมนู Insert > Timeline > Keyframe ภาพที่ 5.11 การกําหนด keyframe ปลายทาง บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 112 5) ขั้นตอนที่ 5 ขยับวัตถุที่พื้นที่ทํางานแลวปรับเปลี่ยนคุณลักษณะ เชน ยาย ตําแหนง ยอ-ขยาย เปลี่ยนสี หรืออื่นๆ ตามตองการ ภาพที่ 5.12 ปรับคุณลักษณะวัตถุตามตองการ 6) ขั้นตอนที่ 6 ทดสอบ Movie โดยกด Ctrl+ Enter หรือ คลิกเมนู Control > Test Movie ภาพที่ 5.13 ผลจากการ Test Movie จะไดไฟลMovie เปน .swf เมื่อสรางวัตถุและกําหนดการเคลื่อนไหวแลว ในขณะที่วัตถุเคลื่อนไหว สามารถ ปรับแตงใหมีคุณลักษณะอื่นๆ ไปพรอมๆ กันได โดยกําหนดเพิ่มเติมไดจากหนาตาง Properties บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 113 2.2 Shape Tween เปนการสรางภาพเคลื่อนไหวที่มีการเปลี่ยนแปลงรูปราง ของวัตถุจากรูปทรงหนึ่งไปเปนอีกรูปทรงหนึ่ง โดยสามารถกําหนดตําแหนง ขนาด ทิศทาง และสีของ วัตถุในแตละชวงเวลาไดตามตองการ เชน การเปลี่ยนวัตถุจากรูปสี่เหลี่ยมเปนรูปวงกลม หรือ การ เปลี่ยนวัตถุจากรูปเปนขอความ เปนตน การสรางภาพเคลื่อนไหวแบบ Shape Tween 1) ขั้นตอนที่ 1 คลิกที่เฟรมที่ 1 แลววาดรูปวัตถุขึ้นมาหนึ่งรูป ภาพที่ 5.14 ภาพตัวอยางการวาดรูปชาง ที่มา : http://www.kroojan.com/flash/content/animate/shape-tween.html 2) ขั้นตอนที่ 2 คลิกที่เฟรมที่ 1 และเลือกคําสั่ง Shape ในชอง Tween ภาพที่ 5.15 การเลือกคําสั่ง Shape ในชอง Tween ที่มา : http://www.kroojan.com/flash/content/animate/shape-tween.html บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 114 3) ขั้นตอนที่ 3 คลิกขวาที่เฟรมที่ 20 แลวเลือกคําสั่ง Insert Keyframe ภาพที่ 5.16 การกําหนด keyframe ปลายทาง ที่มา : http://www.kroojan.com/flash/content/animate/shape-tween.html 4) ขั้นตอนที่ 4 คลิกเฟรมที่ 20 แลวกดปุม Delete ลบวัตถุเดิมออกตอนนี้ บนไทมไลนจะมีแถบเสนประสีเขียว วาดรูปที่ตองการใหเปลี่ยนลงไปในเฟรมที่ 20 ภาพที่ 5.17 การสรางรูปรางวัตถุใหม ที่มา : http://www.kroojan.com/flash/content/animate/shape-tween.html บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 115 5) ขั้นตอนที่ 5 กดปุม Ctrl+Enter เพื่อทดสอบการเปลี่ยนแปลงจะเห็นภาพ คอยๆเปลี่ยนจากรูปหนึ่งเปนอีกรูปหนึ่ง ภาพที่ 5.18 ผลจากการวัตถุชางกลายเปนวัตถุหนาคน ที่มา : http://www.kroojan.com/flash/content/animate/shape-tween.html การสรางแอนิเมชัน แบบ 2 มิติ ดวย After Effect โปรแกรม After Effect เปนโปรแกรมสําหรับงานทางดาน Compositing สามารถตกแตง และเพิ่มเติมเทคนิคพิเศษใหกับภาพนิ่งและภาพเคลื่อนไหว เชน การปรับแสง สี ของไฟลวีดิโอที่ถาย ทํามา เพื่อการแกไขขอบกพรองตางๆ การยอมสีภาพใหภาพนั้นสื่ออารมณตามเนื้อหาที่เราตองการ การสรางฉากในจิตนาการได รวมถึงการสรางตัวอักษรเพื่ออธิบายภาพใหผูรับชมเขาใจมากขึ้น เปนตน อาจกลาวไดวาโปรแกรม After Effect ก็คือโปรแกรม Photoshop เพียงแตเปลี่ยนจากการทํางาน ภาพนิ่งมาเปนภาพเคลื่อนไหว ผูที่มีพื้นทางดานการใชงานโปรแกรม Photoshop มากอน ก็จะ สามารถใชงานโปรแกรม After Effect ไดงายมาก ภาพที่ 5.19 ตัวอยางผลงานแอนิเมชันที่สรางดวยโปรแกรม After Effect ที่มา : http://animuj.cz/druhy-animace/pocitacova-animace/ บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 116 1. แนะนําการใชโปรแกรม After Effect โปรแกรม After Effect มีการออกแบบระบบ Graphic User Interface (GUI) เปน หมวดหมูอยางเปนระเบียบ โดยแบงหนาจอการทํางานออกเปนสวนๆ ประกอบดวยหนาตางยอย จํานวนมากที่มีหนาที่แตกตางกัน ผูใชโปรแกรมสามารถจัดระเบียบการทํางาน GUI ของโปรแกรม After Effect ไดตามความถนัดของตนเอง ภาพที่ 5.20 หนาตาของโปรแกรม After Effect คือแถบ Menu Bar สําหรับบรรจุคําสั่งตางๆ ทั้งหมดที่มีใชงานอยูใน โปรแกรม After Effect การทํางานของ Menu Bar มีลักษณะเปน Drop Down Menu เหมือนกับ Menu Bar ในโปรแกรมอื่นทั่วไป คือแถบ Toolbox หรือแทบเครื่องมือที่สําคัญที่ตองใชประกอบการ ทํางานอยูตลอดเวลา คือหนาตาง Project สําหรับบรรจุวัตถุดิบตางๆ ที่ตองใชในการ ทํางาน เชน ภาพนิ่ง วิดีโอ เสียง เปนตน เพื่อเรียกใชงานใน Composition ตอไป คือหนาตางพื้นที่ทํางานหลัก หรือเรียกวาเปนสวนการทํา Composition เปรียบเทียบไดกับ Stage ในโปรแกรม Adobe Flash คือหนาตาง Timeline สําหรับจัดทําการเคลื่อนไหวของงาน โดย ทํางานในลักษณะ Layer Base เชนเดียวกับโปรแกรม Adobe Flash คือ การวางซอนงานทับกันเปนชั้นๆ และสามารกําหนดคาการเคลื่อนไหวตางๆ ใหกับชิ้นงานได บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 117 คือหนาตาง Audio สําหรับควบคุมเสียง และหนาตาง Info สําหรับ แสดงรายละเอียดของสีและพิกัดตําแหนงที่เมาสและเคอรเซอรกําลังปรากฏ อยูในขณะนั้น คือหนาตาง Time Controls สําหรับควบคุมการเลน Animation คือหนาตาง Effects & Presets สําหรับบรรจุคําสั่งสราง Effect แบบ ตางๆ 2. การสรางแอนิเมชัน 2 มิติ ดวยโปรแกรม After Effect การสรางแอนิเมชัน 2 มิติ ดวยโปรแกรม After Effect ในบทเรียนนี้จะเนนในการสราง การเคลื่อนไหวขั้นพื้นฐาน คือการนําวัตถุเขาสูโปรแกรมและกําหนดการเคลื่อนไหวใหกับวัตถุ โดยนํา วัตถุเคลื่อนจากจุด A ไปยังจุด B มีขั้นตอนดังนี้ 1) สราง Project และทําการสราง Composition ดังภาพ ภาพที่ 5.21 หนาตาง Composition Setting 1 กําหนดชื่อไฟลของ Composition 2 ชอง Preset หรือตัวเลือกสําเร็จรูปสําหรับเลือกขนาดพื้นที่ทํางานที่ ตองการ เชน สําหรับเลนวิดีโอบนระบบ HDTV ตองเลือก HDTV 1080 รายละเอียดของงานจะถูกปรับใหสามารถใชงานกับระบบ HDTV 1080 โดย อัตโนมัติเปนตน 3 กําหนดความกวางและความสูงของพื้นที่ทํางาน (หนวยเปน Pixel) 4 ตัวกําหนดคา Pixel Aspect Ratio (PAR – คาอันตราสวน ความกวาง : ความสูงของจุด Pixel ของพื้นที่ทํางาน) บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 118 5 กําหนดคา Frame Rate ในการเลน Animation ของพื้นที่ทํางาน หนวย เปน วินาที : เฟรม) 6 ตัวเลือกกําหนดขนาดของพื้นที่ทํางานเมื่อเทียบอัตราสวนตามขนาดที่ กําหนดเอาไว ประกอบดวย Full (ขนาดเต็มที่) Half (1 ใน 4 สวน) Third (1 ใน 9 สวน) Quarter (1 ใน 16 สวน) Custom (กําหนดเอง) 7 กําหนดชวงเวลาเริ่มตนของพื้นที่ทํางานนี้ (ปกติกําหนดที่ 0:00:00:00) 8 กําหนดความยาวชวงเวลา (Duration) ของพื้นที่ทํางาน ตัวเลขที่เรียงจาก ขวาไปซาย คือ เลขคูที่ 1 คือการแสดงคาเปน เฟรม เลขคูที่ 2 คือการแสดงคาเปน วินาที: Hk เลขคูที่ 3 คือการแสดงคาเปน นาที เลขที่ 4 คือการแสดงคาเปน ชั่วโมง 9 ชองคลิกกําหนดสีของพื้นหลัง 10 คลิก OK เพื่อตกลงสรางพื้นที่ทํางาน หรือ Cancel เมื่อตองการยกเลิก 2) สรางวัตถุที่ตองการทําการเคลื่อนไหว ในที่นี้จะทําการ Import วัตถุจาก ดานนอกเขามา โดยไดสรางวัตถุ (ภาพครูดาวขับยานอวกาศ) ดวยโปรแกรมสรางกราฟกไวกอนแลว ภาพที่ 5.22 การ Import file ภาพครูดาวขับยานอวกาศ บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 119 3) นําวัตถุ (ภาพครูดาวขับยานอวกาศ) วางใน Composition โดยการสรางการ เคลื่อนไหวในที่นี้ จะทําการเคลื่อนที่วัตถุจากตําแหนง A ไปยังตําแหนง B ภาพที่5.23 การวางภาพครูดาวขับยานอวกาศใน Composition 4) สรางคียเฟรมในตําแหนง (Position) ที่ตองการใหกับวัตถุ โดยเลือก Layer วัตถุ เลือกใชงานการกําหนดตําแหนง (Position) หรือกดคียลัด p เปนการเรียกการกําหนดตําแหนงของ Layer นั้น จากนั้นใหคลิกที่ปุม (Time-Vary stop wacth) ในการกําหนดตําแหนงจะมีไอคอน ที่เสน Current Time Indecator ภาพที่ 5.24 การกําหนด keyframe ใน position ที่ตองการใหกับวัตถุ P บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 120 5) เคลื่อนวัตถุไปยังตําแหนง B ภาพที่ 5.25 การเคลื่อนวัตถุไปยังตําแหนง B 6) ตรวจสอบการเคลื่อนไหวของวัตถุโดยการคลิกปุม (Ram Preview) ใน พาเนล Preview หรือกด Space bar จะไดผลลัพธดังรูป ภาพที่ 5.26 การตรวจสอบการเคลื่อนวัตถุจากตําแหนง A ไปยังตําแหนง B 7) นอกจากนี้ ยังสามารถเพิ่มคียเฟรมระหวางตําแหนง A และ ตําแหนง B ได โดย การลากเสน Motion Path ในรูปแบบที่ตองการ วัตถุจะเคลื่อนที่ตามลักษณะเสน Motion Path นั้น โดยเสน Motion Path จะประกอบดวยสวนสําคัญ 3 สวน ดังนี้ บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 121 ภาพที่ 5.27 เสน Motion Path 1. เสน Motion Path คือ เสนที่ใชแสดงทิศทางของการเคลื่อนที่ของชิ้นงาน 2. จุด Vertex คือ จุดตําแหนงของชิ้นงานที่ไดสรางคียเฟรมขึ้นมาสําหรับ กรณีที่มีการจุด Vertex คาของคียเฟรมก็จะเปลี่ยนไปดวย 3. เสนแขนของจุด Vertex คือแนวเสนที่มีไวสําหรับดัดเสน Motion Path ใหมีความโคง ตามที่ตองการ 8) ลากเสน Motion Path ระหวางตําแหนง A และ B ใหสูงขึ้น ดังภาพ ภาพที่ 5.28 การเคลื่อนไหวโดยการกําหนดเสน Motion Path บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 122 การสรางแอนิเมชัน แบบ 3 มิติ ดวย Maya ภาพ 3 มิติ จะประกอบไปดวย ความกวาง ( แกน X) สูง( แกน Y) และความลึก ( แกน Z) เมื่อนํามาประกอบกับ Texture แสงและเงาจะทา ใหเกิดความเหมือนจริงขึ้นมา Model ภาพที่ 5.29 ภาพวัตถุแบบ 2 มิติ และ 3 มิติ 1. แนะนําการใชโปรแกรม Maya โปรแกรม Maya เปนของที่สรางขึ้นโดยบริษัท AutoDesk. Lnc. เปนโปรแกรมที่เอาไว จําลองการออกแบบทางดานกราฟกและแอนิเมชัน นิยมใชกับงานแอนิเมชัน 3 มิติ โปรแกรม Maya มีรูปแบบ Interface ที่ใชงานงาย มีการจัดแยกอยางเปนระเบียบและเขาใจงาย ดังภาพ ภาพที่ 5.30 Basic Interface ของโปรแกรม Maya ที่มา : http://mayabasic.blogspot.com/2015/05/blog-post_1.html?view=sidebar บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 123 1.1 Menu Bar แถบในสวนนี้จะเปนคําสั่งในสวนการควบคุมการทํางานทั้งหมด เชนการเปด ไฟลงาน เซฟไฟลงาน แกไข สรางรูปแบบโมเดลตาง กําหนดสัดสวนการแสดงผลในหนาจอ เปนตน 1.2 Menu Set ใชสําหรับปรับเปลี่ยนโหมดการทํางานในการทํา Workshop นั้นๆ ประกอบดวย Animation โหมดการเคลื่อนไหว Polygons โหมดปรับแตงวัสดุโพลีกอน Surfaces โหมดการสรางและปรับแตงวัตถุแบบ NURBS Dynamics โหมดสรางแอนิเมชันเหมือนธรรมชาติเชน ทรงผม เสื้อผา Rendering โหมดการประมวลผลชิ้นงาน Customize โหมดที่กําหนดเอง 1.3 Status Line แถบแสดงเครื่องมือที่ใชงานบอยๆ อํานวยความสะดวกในการทํางาน 1.4 Shelf แถบเครื่องมือยอยที่เปน Shortcut ที่ทําใหเราใชงานไดสะดวกขึ้นในแตละแถบ จะมีเครื่องมือ ยอยของการทํางานในแถบนั้นๆ เชน แถบ ขึ้นโมเดลก็จะแสดงชนิดเครื่องมือมาให พรอมกับ Tool การแกปญหาตาง เพื่อใหงายตอการทํางานยิ่งขึ้น 1.5 Toolbox กลองเครื่องมือใชในการจับวัตถุ เชน การจับวัตถุ การยอขยาย หมุน เลื่อน ตําแหนงวัตถุตางไปที่ตางๆ เปนตน 1.6 Viewport เปนพื้นที่ในสวนการทํางานโดยผลลัพธทั้งหมดจะปรากฏบริเวณนี้ สามารถ ปรับแตงไดตามตองการตาม 1.7 Viewport layout ปรับแตมุมมองในการทํางานใน Viewport ตามการใชงานที่ตองการ 1.8 Time Slide แสดงการเคลื่อนไหวในแตละเฟรม โดยสามารถปรับแตงไปยังเฟรมตางๆ ได 1.9 Play Control ควบคุมการเคลื่อนไหวของอนิเมชัน เชน เลน หยุดเลน ไปเฟรมสุดทาย เปนตน บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 124 การสรางแอนิเมชันในโปรแกรม Maya นั้น ควรจะทําการ set project เพื่อการทํางาน ที่เปนระเบียบ ภาพที่ 5.31 การ set project ภาพที่ 5.32 เลือก Location สําหรับเก็บผลงาน บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 125 การปน Model ในโปรแกรม Maya แบงออกเปนวิธีหลัก 3 วิธีคือ 1) การปนโมเดลแบบ Polygon ภาพที่ 5.33 การปนโมเดลแบบ Polygon 2) การปนโมเดลแบบ NURBS ภาพที่ 5.34 การปนโมเดลแบบ NURBS 3) การปนโมเดลแบบ Subdivision คือ เปนการรวมเอาขอดีของ Polygon และ NURBS เขาดวยกัน คือ สามารถแกไขวัตถุไดงายๆ ไมซับซอน ใชเวลารวดเร็ว (จุดเดนของ Polygon) ไดรูปทรงที่มีสวนโคงสวยงาม (จุดเดนของ NURBS ) 2. การสรางแอนิเมชันเบื้องตน โปรแกรม Maya ในบทเรียนนี้ จะทําการสรางแอนิเมชัน 3 มิติ ในโปรแกรม Maya อยางงาย เพื่อให นักศึกษาเขาใจหลักการเคลื่อนไหว โดยทําการเคลื่อนวัตถุจากตําแหนง A ไปยังตําแหนง B ลักษณะ คลายการสรางแอนิเมชัน 2 มิติ จากโปรแกรม Adobe Flash และ โปรแกรม After Effect ดังที่ได ศึกษาผานมา คือการกําหนดคียเฟรมโดยมีวิธีสรางดังนี้ บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 126 1) สราง polygons เพื่อใชทําการเคลื่อนไหว ในบทนี้ไดเลือกสราง polygons รูปทรง Cylinder ดังภาพ ภาพที่ 5.35 polygons รูปทรง Cylinder 2) กําหนดคียเฟรม โดยสรางคียตองกดปุม s เพื่อเปนการเรียกใชสรางคียเฟรม และ คลิกเลือก (Auto keyframe toggle) เพื่อตั้งคาใหโปรแกรมทําการสรางคียเฟรมใหอัตโนมัติ โดย เมื่อเราตองการสรางคียเฟรมถัดไปใหเฟรมที่ตองการกอนหลักจากนั้นใหเคลื่อนวัตถุไปยังตําแหนงที่ ตองการ หากไมตองการใหสรางคียเฟรมแบบอัตโนมัติสามารถคลิกเลือก อีกครั้งเพื่อยกเลิกคําสั่ง และในการสรางคียเฟรมตองทําการกดปุม s ทุกครั้งที่ตองกําหนดคียเฟรม การสรางการเคลื่อนไหว polygon จากตําแหนง A ไปตําแหนง B ใหนักศึกษาคลิก เลือกที่ polygon และ คลิกเลือกเฟรมที่ 1 และกดปุม s เพื่อสรางคียเฟรม เฟรมที่ 1 จะปรากฏ คียเฟรมขึ้น ดังภาพ ภาพที่ 5.36 การสรางคียเฟรม A B A B บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 127 3) เลือกเฟรมที่ 24 และทําการเคลื่อน polygon ไปยังตําแหนง B เมื่อเคลื่อนที่ เสร็จ จะสังเกตวาโปรแกรมจะทําการสรางคียเฟรมอัตโนมัติที่เฟรมที่ 24 ใหทันที ดังภาพ ภาพที่ 5.37 การสรางคียเฟรม 4) ทดสอบการเคลื่อนไหวโดยการกดปุม จะไดผลลัพธการ เคลื่อนไหวของ polygon จากตําแหนง A ไป ตําแหนง B ดังภาพ ภาพที่ 5.38 การทดสอบการเคลื่อน Polygon A B A B บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 128 5) นอกจากนี้ ยังสามารถสรางคียเฟรมระหวางตําแหนง A และ ตําแหนง B โดย ใชหลักการเดียวกันกับ ขอ 3 คือใหทําการเลือกเฟรมที่ตองการกอน และเคลื่อนวัตถุไปยังตําแหนงที่ ตองการ โดยในตัวอยางจะทําการสรางคียเฟรมที่เฟรมที่ 12 ไปยังตําแหนง C ดังภาพ ภาพที่ 5.39 การสรางคียเฟรมระหวาง ตําแหนง A และ ตําแหนง B 6) ทดสอบการเคลื่อนไหว จะไดผลลัพธดังภาพ ภาพที่ 5.40 การทดสอบการเคลื่อน Polygon นักศึกษาสามารถดูตัวอยางการเคลื่อนไหววัตถุไดที่เว็บไซต Youtube ดัง URL https://www.youtube.com/watch?v=Wvzm5VLFutc A B A B C C บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 129 บทสรุป การสรางแอนิเมชันนั้นสามารถสรางไดจากเครื่องมือที่หลากหลาย นักศึกษาสามารถ ประยุกตใชโปรแกรมทั้ง 3 โปรแกรมที่ไดเรียนในบทเรียนนี้สรางผลงานดานแอนิเมชัน โดยยึด หลักการสรางคียเฟรมที่ตําแหนงเริ่มตน Extreme (A) กําหนดคียเฟรมที่ตําแหนงปลายทาง Extreme (B) และในระหวางคียทั้ง 2 นั้น นักศึกษาสามารถเพิ่มคียเพื่อกําหนดการเคลื่อนไหวของวัตถุไดตาม ตองการ การเคลื่อนไหวของวัตถุจะสมจริงหรือไมนั้นขึ้นอยูกับการนําหลักการแอนิเมชัน ทั้ง 12 ขอ ในบทที่ 3 มาประยุกตใช บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 130 แบบฝกหัดทายบทที่ 5 1. แอนิเมชันแบบ 2 มิติ และแอนิเมชันแบบ 3 มิติ แตกตางกันอยางไร จงอธิบาย ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 131 2. จงอธิบายการสรางแอนิเมชันแบบ Frame by Frame ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… 3. จงอธิบายการสรางแอนิเมชันแบบ Tween Animation ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………… บทที่ 5 การสรางแอนิเมชันเบื้องตน
Fundamentals Animation 132 ใบงานที่ 6 การสรางแอนิเมชัน แบบ 2 มิติ ดวย Flash (สัปดาหที่ 12) ใหนักศึกษาประยุกตสรางการเคลื่อนไหวของวัตถุ ทั้งในรูปแบบ Frame by Frame และ Tween Animation โดยกําหนดขนาดแอนิเมชัน 720 x 576 บทที่ 5 การสรางแอนิเมชันเบื้องตน