การสร้างแอนิเมชั่นแบบทวีน

การสร้างแอนิเมชั่นแบบทวีน

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

การเคลื่อนไหวชนิดทวีนแบ่งเป็น 3 ลักษณะด้วยกัน

        1. การเคลื่อนไหวแบบเคลื่อนที่ออบเจ็กต์ตามเส้น Path ที่กำหนด หรือโมชั่นทวีน (Motion Tween)

        2.การเคลื่อนไหวแบบเปลี่ยนแปลงรูปทรงออบเจ็กต์ หรือเซฟทวีน (Shape Tween)

        3.การเคลื่อนไหวแบบเคลื่อนที่อ็อบเจ็กต์ หรือคลาสสิคทวีน (Classic Tween) สำหรับในหัวข้อนี้เราจะกล่าวถึงโมชั่นทวีนก่อน และในหัวข้อต่อไปจะกล่าวถึงเซฟทวีน

การสร้างแอนิเมชั่นแบบทวีน

          เพื่อให้เห็นความแตกต่างระหว่างการสร้างแอนิเมชั่นแบบทวีนและแบบเฟรมต่อเฟรม เราจะนำตัวอย่างลูกบอลเคลื่อนที่มาทำใหม่โดยใช้วิธีแอนิเมชั่นทวีน โดยจะสร้างเพียง 3 คีย์เฟรม (เฟรมที่ 1 แสดงลูกบอลเริ่มเคลื่อนที่,เฟรมที่ 2 แสดงลูกบอลตอนปะทะกับพื้น,เฟรมที่ 3 แสดงลูกบอลเมื่อสิ้นสุดการเคลื่อนที่) และให้โปรแกรม flash คำนวณตามการเคลื่อนที่ของคีย์เฟรมแล้วสร้างเฟรมแทรกให้อัตโนมัติ ดังภาพ

ภาพเคลื่อนไหวแบบทวีน จะมีภาพในบางเฟรมที่สำคัญ

        โดยการสร้างแอนิเมชั่นด้วยโมชั่นทวีน มีขั้นตอนการทำงานทั้งหมด 5 ขั้นตอน ดังนี้

                ขั้นตอนที่ 1 กำหนดเลเยอร์พื้น และสร้างพื้นเป็นเฟรมภาพนิ่ง

                ขั้นตอนที่ 2 กำหนดเลเยอร์ลูกบอล

               ขั้นตอนที่ 3 กำหนดคีย์เฟรมหลักที่ใช้ในการเคลื่อนที่ของลูกบอล

               ขั้นตอนที่ 4 ให้โปรแกรม flash ทำการคำนวณการเคลื่อนที่และแทรกเฟรมเอง

               ขั้นตอนที่ 5 ทดสอบผลที่ได้

       หลังจากสร้างงานตามขั้นตอนนี้ (ด้วยตัวอย่างลูกบอลสีแดงที่กระเด้งบนพื้น) เราจะได้ผลลัพธ์

ขั้นตอนที่ 1 กำหนดเลเยอร์พื้น และสร้างพื้นเป็นเฟรมภาพนิ่ง

          เช่นเดียวกับตัวอย่างที่ผ่านมา เริ่มต้นเราจะกำหนดขนาดของสเตจให้มีขนาดเท่ากับ 340 * 180 พิกเซล แล้วให้เราวาดรูปสี่เหลี่ยม ใส่สีเกรเดียนท์ โดยใช้    และบิดให้ได้สัดส่วนโดยใช้    Free Transfrom Tool  และตั้งชื่อเลเยอร์นี้ว่า Floor

          จากนั้นให้เราขยายคีย์เฟรมนี้ให้เป็นเฟรมภาพนิ่งที่ครอบคลุมเฟรมที่ 1 ถึงเฟรมที่ 30 เนื่องจากภาพเคลื่อนไหวนี้มีความยาว 30 เฟรม โดยคลิกขวาที่ตำแหน่งช่องเฟรมที่ 30 แล้วเลือก Insert Frame (อีกวิธีคือคลิกที่เฟรมที่ 30 แล้วกด <F5> หรือคลิกเฟรมที่ 30 เลือกคำสั่ง Insert->Timeline->Frame ก็ได้) จะปรากฏ    เป็นเฟรมภาพนิ่งครอบคลุมเฟรมที่ 1 – 30 ซึ่งจะก็อปปี้รูปพื้นจากเฟรม 1 โดยอัตโนมัติ (เราจะทำการล็อกเลเยอร์นี้ไว้เพราะเราจะไม่แก้ไขเพิ่มเติมอีก)

ขั้นตอนที่ 2 กำหนดเลเยอร์ลูกบอล

          ต่อไปเราจะสร้างเลเยอร์ใหม่ให้เป็นลูกบอลและทำให้มันเคลื่อนไหวได้ โดยคลิก   เพิ่มเลเยอร์ใหม่และตั้งชื่อว่า Ball สังเกตว่าเลเยอร์นี้จะมีความยาว 30 เฟรมเหมือนกับเลเยอร์ Floor

          จากนั้นเราจะสร้างรูปทรงกลมเป็นซิมบอลไว้ในพาเนล LIBRARY ก่อน โดยคลิก     ในด้านล่างของพาเนล LIBRARY เลือกสร้างซิมบอลแบบ Graphic แล้ววาดรูปทรงกลมโดยใช้เครื่องมือ    Circle Tool เมื่อเสร็จแล้วให้คลิก   กลับมาที่สเตจ จะเห็นซิมบอลลูกบอลในพาเนล LIBRARY  ให้เราลากซิมบอลนี้มาเป็นอินสแตนซ์บนสเตจที่เฟรมแรก (ให้คลิกเลือกเลเยอร์ Ball ไว้ เพื่อให้รูปลูกบอลถูกวางไว้ในเลเยอร์นี้) ให้สังเกตว่าโปรแกรม Flash จะก็อปปี้รูปลูกบอลนี้ไว้ในทุกเฟรมในเลเยอร์ Ball โดยอัตโนมัติ

ขั้นตอนที่ 3 กำหนดคีย์เฟรมหลักที่ใช้ในการเคลื่อนที่ของลูกบอล

          ในการสร้างแอนิเมชั่นแบบทวีนเราต้องระบุคีย์เฟรมหลักสำหรับให้โปรแกรม Flash ใช้เป็นแนวในการสร้างเฟรมอื่นๆ เอง ซึ่งในตัวอย่างนี้มี 3 คีย์เฟรมหลักที่เราต้องกำหนดในการเคลื่อนที่ของลูกบอล ได้แก่ จุดเริ่มต้น (เฟรมที่ 1) จุดที่ลูกบอลปะทะกับพื้น (เฟรม 14 ) ซึ่งเป็นจุดที่ ทำให้การเคลื่อนที่เปลี่ยนทิศ และจุดสุดท้าย (เฟรมที่ 30) โดยคลิกขวาเลือกช่องเฟรมที่ต้องการบนไทมไลน์ เลือกคำสั่ง Insert Keyframe (หรือจะคลิกที่ช่องเฟรม และกดคีย์ลัด <F6>) ก็ได้

        สังเกตว่าเมื่อเราคลิกดูแต่ละคีย์เฟรม (เฟรม 1, 14, และเฟรม 30) จะแสดงลูกบอลที่จุดเริ่มต้น เพราะจะก็อปปี้ข้อมูลนี้มาจากคีย์เฟรมก่อน ให้ย้ายตำแหน่งลูกบอลในเฟรม 14 ให้อยู่ที่จุดสัมผัสกับพื้น และในเฟรมที่ 30 ให้อยู่ที่จุดสุดท้าย โดยใช้    Selection Tool

ขั้นตอนที่ 4 ให้โปรแกรม flash ทำการคำนวณการเคลื่อนที่และแทรกเฟรมเอง

          ต่อไปเราจะกำหนดการเคลื่อนไหวแบบทวีน โดยใช้โปรแกรม Flash จะสร้างเฟรมแทรกระหว่างคีย์เฟรมทั้งสามที่ได้กำหนดไป เพื่อแสดงการเคลื่อนที่ของลูกบอล ให้เรากำหนดทวีนระหว่างคีย์เฟรมที่ 1 – 14 โดยคลิก ขวาเลือกช่องเฟรมใดก็ได้ระหว่างคีย์เฟรมทั้งสอง (ในเลเยอร์ลูกบอล) เลือก Create Classic Tween สังเกตว่าระหว่างลักษณะเฟรมจะมีรูปลูกศรชี้จากคีย์เฟรมหนึ่งไปยังอีกคีย์เฟรมหนึ่ง

ขั้นตอนที่ 5 ทดสอบผลที่ได้

          กดคีย์ <Enter> เพื่อให้โปรแกรม flash แสดงภาพเคลื่อนไหวที่เราสร้าง (หรือจะเลื่อนหัวอ่านดูที่ไทมไลน์ก็ได้)

การปรับปรุงแอนิเมชั่นแบบทวีน (แบบClassic Tween)

          เราปรับปรุงตัวอย่างที่เราสร้างขึ้นมาเพื่อดูสมจริงมากขึ้นโดยทำอีก 4 ประการ ดังนี้

                 ขั้นตอน 1 ปรับให้รูปทรงของลูกบอลสะท้อนการกระเด้งเมื่อปะทะกับพื้น

                 ขั้นตอน 2 เพิ่ม/ลด จำนวนเฟรมเพื่อให้การเคลื่อนไหวดูสมจริงยิ่งขึ้น

                 ขั้นตอน 3 ลดความเร็วของลูกบอลเมื่อเคลื่อนที่ไปได้สักระยะหนึ่ง

                 ขั้นตอน 4 ทำให้ลูกบอลเคลื่อนที่เป็นเส้นโค้งโดยใช้โมชั่นไกด์

ขั้นตอน 1 ปรับให้รูปทรงของลูกบอลสะท้อนการกระเด้งเมื่อปะทะกับพื้น

          เพื่อให้การเคลื่อนไหวดูสมจริง เราควรบีบรูปทรงของลูกบอล ณ จุดที่มีการปะทะกับพื้น (เฟรมที่ 14) และค่อยให้มีการคลายตัวในเฟรมต่อจากนั้น โดยให้เราคลิกเลือกเฟรมที่ 14 ที่เป็นรูปลูกบอล ตกกระทบกับพื้นและคลิก Free Transfrom Tool เลือก Scale และบีบรูปลูกบอล ดังรูป

        เมื่อดูภาพเคลื่อนไหวที่ได้ จะเห็นว่าโปรแกรม Flash จะเริ่มบีบลูกบอลก่อนถึงเฟรมที่ 14 หลังจากนั้นก็จะค่อยๆ คลายลูกบอลให้กลับเหมือนเดิม

        แต่เราไม่ต้องการให้มีการบีบลูกบอลก่อนถึงจุดปะทะกับพื้น เพราะจะไม่สมจริง ให้เราคลิกที่เฟรมที่ 1 และทำการปรับแต่งโดยใช้ Property Inspector โดยยกเลิกเครื่องหมายถูกที่ตัวเลือก Scale โปรแกรม Flash ก็จะไม่นำรูปทรงในคีย์เฟรมเริ่มต้น (เฟรมที่ 1) และคีย์เฟรมสุดท้าย (เฟรมที่ 14) มาประมวลในการทวีน

        สังเกตเมื่อดูภาพเคลื่อนไหวอีกครั้ง จะเห็นว่ารูปทรงของลูกบอลจะมีขนาดคงที่เหมือนกับเฟรมที่ 1 จนถึงจุดปะทะกับพื้นตามที่เราต้องการ

ขั้นตอน 2 เพิ่ม/ลด จำนวนเฟรมเพื่อให้การเคลื่อนไหวดูสมจริงยิ่งขึ้น

          ต่อไป เราจะแทรกคีย์เฟรมเพิ่มตรงเฟรมที่ 15 เพื่อหน่วงเวลาในการปะทะของลูกบอลนานขึ้น ก่อนที่จะกระเด้งไปในทิศทางตรงข้าม โดยคลิกขวาเลือกช่องเฟรมต้องการเพิ่มคีย์เฟรม (ในตัวอย่างนี้คือเฟรมที่ 15) เลือก Insert Keyframe (หรือจะคลิกเลือกช่องเฟรม และกดคีย์ลัด <F6> ก็ได้)

        หลังจากที่เราแทรกคีย์เฟรมใหม่ในไทมไลน์ให้คลิกที่คีย์เฟรม 14 และยกเลิกการทวีนเป็น None เพราะเราไม่ได้ใช้เฟรมดังกล่าวในการประมวลการเคลื่อนที่ของลูกบอลเมื่อกระเด้งจากพื้นอีกต่อไป แต่จะใช้เฟรมที่ 15 ในการสร้างทวีนแทน

ขั้นตอน 3 ลดความเร็วของลูกบอลเมื่อเคลื่อนที่ไปได้สักระยะหนึ่ง

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

        นอกจากนั้นเราอาจแก้ให้ลูกบอลค่อยๆ เคลื่อนที่ช้าลงหลังจากกระทบกับพื้น เพื่อให้สมจริงยิ่งขึ้น โดยปรับค่า Ease ในทวีนเฟรม 15 – 26

ขั้นตอน 4 ทำให้ลูกบอลเคลื่อนที่เป็นเส้นโค้งโดยใช้โมชั่นไกด์

          ในตัวอย่างเป็นการเคลื่อนไหวที่ของลูกบอลที่ได้เป็นเส้นตรง ซึ่งดูไม่สมจริงสักเท่าไหร่ นอกจากการกำหนดภาพทีละเฟรมเพื่อให้ลูกบอลเคลื่อนที่เป็นเส้นโค้งได้ ดังตัวอย่างการสร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรมที่ได้กล่าวถึงไปแล้ว ในโปรแกรม Flash มีโมชั่นไกด์ (Motion guide) สำหรับใช้กำหนดให้การเคลื่อนที่เป็นตามเส้นทางที่กำหนด โดยให้เราคลิกขวาที่เลเยอร์ที่ต้องการให้เคลื่อนที่ตามเส้นทางนี้ (ในตัวอย่างคือเลเยอร์ Ball) แล้วเลือกคำสั่ง Add Classic Motion Guide จะเป็นการสร้างเลเยอร์ใหม่ขึ้นเหนือเลเยอร์ที่เลือกไว้ เรียกว่า “เลเยอร์ไกด์” โดยทำตามขั้นตอนดังนี้

         สามารถสร้างเส้นเพิ่มในเลเยอร์ไกด์เดียวกันได้ เพื่อสร้างให้มีการเคลื่อนที่ในขาขึ้นของลูกบอล โดยใช้หลักการสร้างแบบเดียวกับขาลง ดังตัวอย่าง

                1.คลิกเลือกเลเยอร์ไกด์แล้วสร้างเส้นสำหรับการเคลื่อนที่ขาขึ้น

                2.คลิกเลือกเฟรมแรกของการเคลื่อนที่ขาขึ้น แล้วเลื่อนตำแหน่งของลูกบอลมาที่จุดเริ่มต้นของเส้น

                3.คลิกเลือกเฟรมสุดท้ายของการเคลื่อนที่ขาขึ้น แล้วเลื่อนตำแหน่งของลูกบอลมาที่จุดปลายของเส้น

        กดคีย์ <Ctrl>+<Enter> เพื่อทดสอบแอนิเมชั่น เราจะเห็นได้ว่าลูกบอลจะเคลื่อนไหวตามแนวเส้นไกด์ แต่เส้นไกด์จะไม่ปรากฏให้เห็น (ในกรณีที่เราทำการปรับแต่งชิ้นงาน ถ้าต้องการซ่อนเส้นเคลื่อนไหวในเลเยอร์ไกด์หรือไม่ ให้คลิกที่   บนเลเยอร์ไกด์ได้)

         หากลูกบอลไม่เคลื่อนที่ตามเส้นไกด์ ให้ลองตรวจสอบดูให้ดีว่าในแต่ละคีย์เฟรมตำแหน่งของลูกบอลวางอยู่บนเส้นไกด์หรือไม่ ส่วนในกรณีที่มีการแก้ไขเส้นไกด์ เราอาจจะต้องเลื่อนตำแหน่งของลูกบอลให้มาอยู่บนเส้นไกด์อีกครั้ง

ขอบคุณแหล่งข้อมูล

http://www.panyastation.com/lesson.php?pages=40