Lecture 7 ภาพเคลื่อนไหว (Animation)

Lecture 7ภาพเคลื่อนไหว(Animation)

Animation • อะนิเมชัน หรือ ภาพเคลื่อนไหว เป็นการทำให้วัตถุใดๆ เกิดการเคลื่อนที่ด้วยรูปแบบต่างๆ กันบนจอภาพ

หลักการของอะนิเมชัน • อะนิเมชันอาศัยปรากฏการณ์ทางชีววิทยาที่เรียกว่า “ความต่อเนื่องของการมองเห็น” ร่วมกับการทำให้วัตถุมีการเคลื่อนที่ที่ความเร็วระดับหนึ่ง จนตาของคนเรามองเห็นว่าวัตถุนั้นมีการเคลื่อนไหว ภาพแต่ละภาพที่นำมาทำอะนิเมชันเรียกว่าเฟรม (Frame) • การเปลี่ยนแปลงภาพที่มองเห็นด้วยความรวดเร็วเป็นหลักการของอะนิเมชัน • การแสดงผลภาพในโทรทัศน์ 30 เฟรมต่อวินาที เป็นความเร็วที่ทำให้มองเห็นการเคลื่อนไหวที่กลมกลืน • ถ้าเป็นภาพยนตร์จะบันทึกด้วยอัตรา 24 เฟรมต่อวินาทีแล้วฉายภาพยนตร์ด้วยอัตรา 48 เฟรมต่อวินาที ลักษณะขั้นตอนของภาพเคลื่อนไหว

วิธีการสร้างอะนิเมชันวิธีการสร้างอะนิเมชัน • ทำได้หลายวิธี • แบบเฟรมต่อเฟรม (Frame By Frame) • แบบทวีนอะนิเมชัน (Tween Animation) • แบบแอ็คชันสคริปต์ (Action Script)

เฟรมต่อเฟรม (Frame By Frame) • เป็นการนำภาพมาใส่ไว้ในแต่ละเฟรมและทำการกำหนดคีย์เฟรม (คีย์เฟรม คือ เฟรมที่ถูกกำหนดให้มีการเปลี่ยนแปลงของวัตถุเพื่อสร้างการเคลื่อนไหว) ถ้ากำหนดคีย์เฟรมมีช่องว่างห่างกันเกินไป การเปลี่ยนแปลงของภาพที่ปรากฏออกมาจากเฟรมหนึ่งไปยังอีกเฟรมหนึ่งก็จะช้าลง การสร้างเคลื่อนไหวแบบ Frame By Frame เหมาะสำหรับภาพอะนิเมชันที่มีการเปลี่ยนแปลงแบบรวดเร็ว หรืองานที่ซับซ้อนมากๆ

ทวีนอะนิเมชัน (Tween Animation) • Tween (ทวีน) ย่อมาจากคำว่า Between ซึ่งแปลว่า “ระหว่าง” • การสร้างภาพแบบ Tween เป็นการกำหนดคีย์เฟรมเริ่มต้นและคีย์เฟรมสุดท้าย จากนั้นให้โปรแกรมสร้างความเปลี่ยนแปลงระหว่างเฟรมโดยอัตโนมัติ • แบ่งออกได้เป็น 2 ประเภท คือ • Motion Tween หรือ Motion Path เป็นการเคลื่อนไหวที่มีการกำหนดการเคลื่อนที่ หมุน ย่อ หรือขยายไปตามเส้นที่วาดไว้ โดยที่รูปทรงวัตถุไม่มีการเปลี่ยนแปลง นิยมใช้มากที่สุด • Shape Tween เป็นการสร้างภาพเคลื่อนไหวที่มีการเปลี่ยนแปลงรูปทรงของวัตถุ จากรูปทรงหนึ่งไปเป็นอีกรูปทรงหนึ่งโดยสามารถกำหนด ตำแหน่ง ขนาด ทิศทาง และสีของวัตถุในแต่ละช่วงเวลาตามต้องการ นิยมใช้กับรูปวาดเท่านั้น • การสร้างภาพเคลื่อนไหวแบบ Tween ช่วยทำให้ไฟล์มีขนาดเล็กลง และมีการเคลื่อนไหวที่มีความนุ่มนวลมากกว่าแบบ Frame By Frame

แอ็คชันสคริปต์ (Action Script) • เป็นภาษาโปรแกรมที่นำมาใช้เพื่อเพิ่มประสิทธิภาพในการทำงานของระบบ และสามารถโต้ตอบ (Interactive) กับผู้ใช้งานได้ โดย Action Script จะถูกนำมาใช้เมื่อมีการกระทำเกิดขึ้น ซึ่งเรียกว่า เหตุการณ์ (Event) เช่น การคลิกเมาส์ หรือกดคีย์บอร์ด โดยจะนำ Action Script มาใช้โต้ตอบกับ Event นั้น เช่น สั่งให้แสดง Movie เป็นต้น • Action Script ไม่สนับสนุนออบเจ็กต์บางตัวที่ระบุอยู่บน Browser เช่น Document, Window, Anchor, Unicode เป็นต้น

เทคนิคในการสร้างอะนิเมชันเทคนิคในการสร้างอะนิเมชัน • กำหนดลักษณะการเคลื่อนไหวที่ต้องการทั้งหมด • เลือกเครื่องมือให้เหมาะสมกับงาน • กำหนดลำดับการแสดงผลของอะนิเมชันที่ต้องการ • ทดสอบแสงเงา • ตรวจสอบซ้ำอีกครั้ง • เพิ่มเทคนิคพิเศษต่างๆ และเพิ่มเสียงประกอบให้กับอะนิเมชัน ในอดีตการสร้างอะนิเมชันจะใช้ในการสร้างภาพยนตร์การ์ตูน ซึ่งต้องใช้ฝีมือของผู้เชี่ยวชาญทั้งหมด ตั้งแต่ออกแบบเนื้อเรื่อง การวาดตัวการ์ตูน และสร้างเป็นอะนิเมชัน เรียกการสร้างอะนิเมชันแบบนี้ว่า “เซลอะนิเมชัน (Cel Animation)” ต่อมาได้รับการพัฒนาอย่างต่อเนื่อง จนสามารถสร้างอะนิเมชันด้วยคอมพิวเตอร์ได้ เรียกอะนิเมชันที่สร้างด้วยคอมพิวเตอร์ว่า “คอมพิวเตอร์อะนิเมชัน (Computer Animation)”

เซลอะนิเมชัน (Cel Animation) เซลแต่ละเซลในการสร้างภาพเคลื่อนไหว

คอมพิวเตอร์อะนิเมชัน (Computer Animation) ก่อนการขจัดรอยหยัก หลังการขจัดรอยหยัก การขจัดรอยหยักตามขอบภาพ

การใช้คอมพิวเตอร์จำลองส่วนต่างๆ ของร่างกายเพื่อการศึกษา • มี 2 แบบ • คีนิเมติก (Kinematic) • มอร์ฟฟิ่ง (Morphing) คีนิเมติก (Kinematic) • เน้นการเรียนรู้ลักษณะ กิริยาท่าทาง และการเคลื่อนไหวของโครงสร้างส่วนที่มีการเชื่อมต่อกัน เช่น ท่าทางการเดินของมนุษย์ ซึ่งจะต้องทำการคำนวณตำแหน่ง จุดหมุน ความเร็ว และความเร่งของการเคลื่อนที่ของข้อต่อต่างๆ ภายในร่างกายมนุษย์ เช่น การงอเข่า ส่ายสะโพก แกว่งไหล่ ผงกศีรษะ เป็นต้น โปรแกรม Fractal’s Poser เป็นโปรแกรมหนึ่งที่ใช้ในการสร้างรูปแบบร่างกายของมนุษย์ (ผู้ชาย ผู้หญิง ทารก และวัยหนุ่มสาว ในท่าทางต่างๆ กัน เช่น ท่าทางในการเดิน หรือเคลื่อนไหวอวัยวะต่างๆ สร้างผิวในรูปแบบของกล้ามเนื้อ ความสัมพันธ์และข้อจำกัดของข้อต่อต่างๆ เช่น มือและช่วงแขนหรือข้อศอกที่ไม่สามารถพับไปด้านหลังได้ ซึ่งหลังจากที่มีการกำหนดเงื่อนไขต่างๆ แล้วจะให้คอมพิวเตอร์คำนวณผลลัพธ์และทำการสร้างภาพต่อไป การสร้างภาพในลักษณะจลนศาสตร์(Kinematic)

การใช้คอมพิวเตอร์จำลองส่วนต่างๆ ของร่างกายเพื่อการศึกษา(ต่อ) มอร์ฟฟิ่ง (Morphing) • เป็นเทคนิคพิเศษที่ใช้ในการเปลี่ยนแปลงภาพให้กลายเป็นวัตถุชนิดอื่นที่แตกต่างกันออกไป โดยจะใช้เทคนิคนี้ได้ทั้งภาพนิ่งและอะนิเมชัน แต่บางครั้งการใช้งานเทคนิคนี้กับอะนิเมชันจะให้งานที่มีคุณภาพดีกว่า ตัวอย่างโปรแกรมลักษณะนี้ เช่น Avid’s Elastic Reality, Black Belt’s Winimages, Gryphon Software’s Morph, Human Software’s Squizz, Ulead’s Morphstudio. Jasc Paint Shop Pro และ Morph Man เป็นต้น การเปลี่ยนใบหน้าสุนัขให้เป็นใบหน้าเสือด้วยอัตรา 10 กรอบต่อวินาที

อะนิเมชัน 2 มิติ (2D Animation) • ในอดีตอะนิเมชันจะมีลักษณะ 2 มิติ และอยู่ในรูปแบบของภาพยนตร์การ์ตูน เช่น เรื่องโดราเอมอน ดราก้อนบอล สโนไวท์กับคนแคระทั้งเจ็ด ไลอ้อนคิง เป็นต้น โดยภาพในแต่ละเฟรมจะสร้างด้วยวิธีการร่างภาพแบบเซลอะนิเมชัน • ในปัจจุบันนอกจากจะพบเห็นบนจอโทรทัศน์ และจอภาพยนตร์แล้ว ยังพบได้ทั่วไปบนเว็บไซต์ต่างๆ เช่น เกมส์และภาพยนตร์การ์ตูนบนเว็บไซต์ เกมและการ์ตูนในรูปแบบภาพเคลื่อนไหวสองมิติ

อะนิเมชัน 2 มิติ (2D) • โปรแกรมที่ใช้ในการสร้างอะนิเมชัน 2 มิติ เพื่อแสดงผลบนเว็บไซต์ที่ได้รับความนิยมมากโปรแกรมหนึ่งก็คือ โปรแกรม Macromedia Flash ภาพเคลื่อนไหวสองมิติที่สร้างด้วยโปรแกรมมาโครมีเดียแฟลช

อะนิเมชัน 3 มิติ (3D Animation) • วิธีการสร้างนั้นเป็นเรื่องยาก เนื่องจากลักษณะของภาพ 3 มิติจะได้มาจากการคำนวณ ซึ่งการเปลี่ยนแปลงค่าตัวเลขในขณะคำนวณจะมีผลให้เกิดการเปลี่ยนแปลงลักษณะต่างๆ ของวัตถุ นอกจากนี้ความหนาแน่นของวัตถุ ทิศทางของแสง ตำแหน่งและทิศทางของกล้องถ่ายภาพ ก็ต้องกำหนดด้วยตัวเลขเช่นกัน สิ่งสำคัญที่จะต้องปฏิบัติคือ กำหนดคุณลักษณะต่างๆ ของวัตถุและลักษณะผิวของวัตถุให้เหมาะสมตามต้องการตั้งแต่เฟรมแรก โดยเปลี่ยนแปลงค่าของตัวแปรต่างๆ สร้างพื้นผิวให้กับเฟรมถัดไป และตกแต่งแก้ไขในแต่ละเฟรมตามความเหมาะสม จากนั้นจึงกำหนดช่วงเวลาในแต่ละเฟรมเพื่อให้เป็นอะนิเมชันต่อไป • ปัจจุบันผู้พัฒนาหลายรายต้องการสร้างให้อะนิเมชัน 3 มิติมีความใกล้เคียงธรรมชาติมากที่สุด เพื่อใช้ในการสร้างสภาวะเสมือนจริงที่เรียกว่า Virtual Reality (VR) ที่พบเห็นทั่วไปในการเล่นเกมส์ และจำลองการเคลื่อนไหวของอวัยวะต่างๆ ภาพเคลื่อนไหวแบบสามมิติของใบหน้าคน จากหน้าธรรมดาเป็นยิ้ม

การแคปเชอร์ภาพอะนิเมชันและความต่อเนื่องของภาพ (Captured Animation And Image Sequences) • การเตรียมภาพสำหรับสร้างอะนิเมชันจะใช้กล้องวิดีโอ ร่วมกับเทคนิคการสร้างภาพอะนิเมชัน โดยเก็บภาพอะนิเมชันแต่ละเฟรมลงบนแผ่นฟิล์มหรือวิดีโอเทป โดยใช้ซอฟต์แวร์โปรแกรมทำหน้าที่ดังกล่าว เช่น โปรแกรม Premiere, AfterEffect, Jasc Animation Shop และ Director ซึ่งสามารถเลือกจัดเก็บภาพอะนิเมชันในแต่ละเฟรม และแสดงผลเพื่อตรวจสอบความต่อเนื่องของภาพได้ตามความต้องการ จากนั้นจึงจัดเก็บข้อมูลและลำดับการแสดงผลเป็นภาพวิดีโอแบบเอวีไอ (*.AVI) ที่ง่ายต่อการใช้งาน การเก็บภาพอะนิเมชันด้วยโปรแกรม Jasc Animation Shop 3.0

การสร้างเป็นอะนิเมชันเรื่องใหม่ด้วยโปรแกรม Director 6.5

สำหรับการสร้างอะนิเมชันโดยไม่อาศัยภาพจากกล้องดิจิตอล ก็สามารถทำได้โดยการวาดภาพด้วยวิธีเซลอะนิเมชัน แล้วสแกนภาพแต่ละเฟรมที่วาดผ่านทางเครื่องสแกนเนอร์ ซึ่งการตัดแต่งภาพแต่ละเฟรมค่อนข้างง่ายกว่าการถ่ายภาพนิ่งด้วยกล้องดิจิตอล และการจัดเก็บข้อมูลก็สามารถจัดเก็บได้โดยตรง ไม่ต้องถ่ายข้อมูลภายหลังเหมือนกล้องดิจิตอล แต่ต้องใช้เครื่องสแกนเนอร์ที่มีความละเอียดสูง เพื่อให้ได้ภาพที่คมชัดและสวยงาม

รูปแบบของไฟล์อะนิเมชัน (Animation File Format) GIF (Graphics Interlace File) • ไฟล์ GIF หรือ กิฟอะนิเมชัน Gif Animation ได้รับความนิยมมากเนื่องจากประหยัดพื้นที่ในการจัดเก็บ โดยจะจัดเก็บภาพนิ่งเป็นลำดับต่อเนื่องกัน เหมาะกับการใช้งานบนเว็บไซต์ ปัจจุบันเว็บไซต์ทั่วไปสามารถแสดงผลภาพกิฟอะนิเมชันได้ทั้งสิ้น • Gif89a พัฒนาขึ้นในปี ค.ศ.1989 เป็นรูปแบบหนึ่งของกิฟอะนิเมชัน มักจะเรียกกันว่า อะนิเมทเทดกิฟ (Animated Gif) • ปัจจุบันมีหลายโปรแกรมที่สนับสนุนการสร้างกิฟอะนิเมชัน เช่น โปรแกรม Animagic Gif, Premiere และ Flash ซึ่งสามารถจัดเก็บกิฟอะนิเมชันได้ทั้งสิ้น • มาตรฐานอะนิเมชันที่ผลิตในรูปแบบของวิดีโอ และภาพยนตร์เอวีไอ (AVI Movie) ได้รับความนิยมเป็นอย่างมากในปัจจุบัน โดยสามารถแก้ไข ผสมผสานกับคลิ๊ปอะนิเมชัน (Animation Clip) อื่นๆ เพิ่มเติมเทคนิคพิเศษ และเตรียมเป็นทรัพยากรสำหรับใช้งานในผลิตภัณฑ์มัลติมีเดียได้ อย่างไรก็ตามคลิ๊ปอะนิเมชันจะมีลักษณะเฉพาะบางอย่างมีผลต่อการใช้งาน โดยเฉพาะรูปแบบของการวาด ลักษณะรูปร่าง และพื้นผิวที่ราบเรียบของภาพอะนิเมชันอีกทั้งยังมีการสูญเสียของข้อมูลน้อยกว่าไฟล์วิดีโอ ตัวอย่างเช่น การแปลงไฟล์แบบเอวีไอเพื่อแสดงผลเป็นการ์ตูนกิฟอะนิเมชันและเพิ่มเติมเทคนิคให้อะนิเมชันแต่ละเฟรมแลดูมีเงาแสงใกล้เคียงความจริงมากที่สุด ด้วยความละเอียด 256 สี หลังจากนั้นก็นำภาพแต่ละเฟรมมาจัดลำดับการแสดงผลด้วยโปรแกรม Animagic Gif และจัดเก็บอะนิเมชันในรูปแบบกิฟอะนิเมชันต่อไป พื้นที่ที่เก็บข้อมูลกิฟอะนิเมชันจะใช้เพียง 1.01 Mb เท่านั้น

ภาพเคลื่อนไหวที่เป็น Graphics Interface File โดยโปรแกรม Animagic GIF

รูปแบบของไฟล์อะนิเมชัน (ต่อ) JPG (Joint Photographer’s Experts Grop) • เป็นไฟล์ภาพที่ใช้งานบนระบบเครือข่าย มีโปรแกรมสนับสนุนในการสร้างจำนวนมาก สามารถเรียกดูได้กับ Graphics Browser ทุกตัว มักใช้ในกรณีที่ต้องการนำเสนอภาพที่มีความละเอียดสูง (สนับสนุนสีถึง 24 bit) ใช้กับภาพถ่ายที่นำมาสแกน มีระบบแสดงผลตั้งแต่ความละเอียดน้อยๆ และค่อยๆ ขยายไปสู่ความละเอียดสูง โดยผู้ใช้สามารถกำหนดค่าการบีบอัดไฟล์ได้ตามต้องการ (ค่าของการบีบอัดไฟล์อยู่ระหว่าง 1-10) ไฟล์ที่ได้จึงมีขนาดเล็ก แต่ก็มีข้อเสียคือ ไม่สามารถทำให้พื้นภาพโปร่งใสได้ และเมื่อมีการส่งภาพจาก Server ไปแสดงผลที่ Client จะทำให้การแสดงผลภาพช้ามาก เพราะต้องเสียเวลาในกาคลายไฟล์ ดังนั้นการเลือกค่าการบีบอัดไฟล์ ควรกำหนดให้เหมาะสมกับภาพแต่ละภาพ ภาพที่เป็น Joint Photographer’s Experts Group

รูปแบบของไฟล์อะนิเมชัน (ต่อ) PNG (Portable Network Graphics) • เป็นไฟล์ที่ทำพื้นภาพให้โปร่งใสได้ สนับสนุนสีได้ตามค่า “True Color” (16 bit, 32 bit หรือ 64 bit) มีระบบแสดงผลตั้งแต่ความละเอียดน้อยๆ และค่อยๆ ขยายไปสู่รายละเอียดที่มีความคมชัดมากขึ้น (Interlace) โดยผู้ใช้สามารถกำหนดค่าการบีบอัดไฟล์ได้ตามต้องการ ไฟล์ที่ได้มีขนาดเล็ก แต่หากกำหนดค่าการบีบไฟล์ไว้สูง ก็จะต้องใช้เวลาในการคลายไฟล์สูงตามไปด้วย • โปรแกรมสนับสนุนในการสร้างมีน้อย ไม่สามารถเรียกดูกับ Graphic Browser รุ่นเก่าได้ เป็นไฟล์ที่สนับสนุนเฉพาะ IE 4 และ Netscape ภาพที่เป็น Portable Network Graphics

ซอฟต์แวร์สำหรับเทคโนโลยีอะนิเมชันซอฟต์แวร์สำหรับเทคโนโลยีอะนิเมชัน

ซอฟต์แวร์สำหรับเทคโนโลยีอะนิเมชัน(ต่อ)ซอฟต์แวร์สำหรับเทคโนโลยีอะนิเมชัน(ต่อ)

อะนิเมชันบนระบบเครือข่ายอะนิเมชันบนระบบเครือข่าย • การใช้ภาพอะนิเมชันบนระบบเครือข่าย สามารถช่วยสรุปความคิด จินตนาการมาเป็นข้อมูลที่สื่อสารได้ง่าย สร้างระบบการถ่ายทอดที่มีความเด่นชัด แปลความหมายได้อย่างรวดเร็ว สร้างระบบการเรียนรู้ แนวคิดใหม่ๆ ค่านิยมทางความคิดที่งดงาม ความเจริญก้าวหน้าทางธุรกิจและสังคม จะช่วยดึงดูดความสนใจจากผู้เข้าชมได้โดยการนำมาภาพอะนิเมชันเข้าไปในเว็บเพจ แต่ต้องระวังเรื่องขนาดของไฟล์ที่จะนำมาใช้ เนื่องจากหากเป็นภาพที่มีขนาดใหญ่จะต้องใช้พื้นที่ในการจัดเก็บเป็นจำนวนมาก และจะทำให้ใช้เวลาในการดาวน์โหลดภาพอะนิเมชันนานเกินไป • สิ่งสำคัญที่ตามมาก็คือ เทคโนโลยีการบีบอัดข้อมูล ซึ่งการบีบอัดทำให้สามารถรับส่งข้อมูลได้รวดเร็วขึ้น และใช้พื้นที่ในการจัดเก็บไฟล์น้อยลง โดยไฟล์ที่นิยมใช้บนระบบเครือข่าย คือ GIF Animation, JPG และ PNG

อาชีพที่เกี่ยวข้องกับงานอะนิเมชันอาชีพที่เกี่ยวข้องกับงานอะนิเมชัน • งานภาพยนตร์และโทรทัศน์ เป็นการที่นำงานอะนิเมชันไปใช้มากที่สุด เช่น ภาพยนตร์ที่ใช้ Computer Graphic หรือการใส่ Special Effect ต่างๆ ลงในภาพยนตร์ การสร้างภาพเคลื่อนไหวของภาพยนตร์โดยใช้โปรแกรมมายา (Maya)

อาชีพที่เกี่ยวข้องกับงานอะนิเมชัน (ต่อ) • งานพัฒนาเกมส์ ในปัจจุบันจะเห็นว่าเกมส์คอมพิวเตอร์ส่วนมากจะเป็นเกมส์ 3 มิติ ดังนั้นงานด้านนี้ก็ถือว่าเป็นงานที่มีความน่าสนใจด้านหนึ่ง การพัฒนาเกมภาพเคลื่อนไหวโดยใช้โปรแกรม Crossfire

อาชีพที่เกี่ยวข้องกับงานอะนิเมชัน (ต่อ) • งานสถาปัตยกรรมและการก่อสร้าง จะมีความสะดวกมากข้นหากใช้อะนิเมชันมาช่วย เนื่องจากงานออกแบบเป็นงานที่ต้องการความละเอียดและมีความซับซ้อนมาก เช่น งานเขียนแบบอาคาร งานตกแต่งภายใน เป็นต้น การสร้างภาพเคลื่อนไหวในงานสถาปัตยกรรมและการก่อสร้างโดยใช้โปรแกรม AutuCAD

อาชีพที่เกี่ยวข้องกับงานอะนิเมชัน (ต่อ) • งานด้านวิทยาศาสตร์ ปัจจุบันงานด้านวิทยาศาสตร์ได้มีความก้าวหน้าไปมาก ดังนั้นเครื่องมือแบบเก่าจึงไม่สามารถรองรับการค้นคว้าความรู้ใหม่ๆ ได้ เช่นการสร้างโมเดลจำลองเพื่อให้เป็นภาพต่างๆ ที่เกิดจากการสมมติฐาน การสร้างภาพเคลื่อนไหวในงานด้านวิทยาศาสตร์โดยใช้โปรแกรม 3D-Doctor

อาชีพที่เกี่ยวข้องกับงานอะนิเมชัน (ต่อ) • งานพัฒนาเว็บไซต์ เป็นอีกทางเลือกหนึ่งจากการใช้งาน 3 มิติบนเว็บไซต์สามารถใช้ดึงดูดความสนใจให้มีผู้เข้ามาชมเว็บไซต์ได้เป็นจำนวนมาก การใช้โปรแกรมมาโครมีเดียแฟลชทำภาพเคลื่อนไหวสามมิติบนเว็บไซต์

Thank you…

Lecture 7 ภาพเคลื่อนไหว (Animation)