Back to Top
sunshine
Untitled Document

   

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 


  สาระการเรียนรู้

1. อธิบายหลักการสร้างภาพเคลื่อนไหวแบบทวีนได้ 
2. สร้างภาพเคลื่อนไหวแบบทวีนได้ 



มาทำแบบทดสอบก่อนเรียนก่อนนะคะ


  แบบทดสอบ หน่วยที่ 11






Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

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



           

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



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

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

         การเคลื่อนไหวแบบเคลื่อนที่ออบเจ็กต์ตามเส้น Path ที่กำหนดหรือโมชั่นทวีน (Motion Tween)
         การเคลื่อนไหวแบบเปลี่ยนแปลงรูปทรงออบเจ็กต์หรือเชฟทวีน (Shape Tween)
         การเคลื่อนไหวแบบเคลื่อนที่ออบเจ็กต์หรือคลาสสิคทวีน (Classic Tween)

สำหรับในหัวข้อนี้เราจะกล่าวถึงโมชันทวีนก่อนและในหัวข้อต่อไปจะกล่าวถึงเชฟทวีน

 

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

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



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

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


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

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

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

เช่นเดียวกับตัวอย่างที่ผ่านมา เริ่มต้นเราจะกำหนดขนาดของสเตจให้มีขนาดเท่ากับ 340*180 พิกเซล แล้วเราให้เราดรูปสี่เหลี่ยม ใส่สีเกรเดียนท์ โดยใช้ และบิดให้ได้สัดส่วนโดยใช้ Free Transform 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 เมื่อเสร็จแล้วให้คลิก Scene กลับมาที่สเตจ จะเห็นซิมลูกบอลในพาเนล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 แสดงภาพเคลื่อนไหวที่เราสร้าง (หรือจะเลื่อนหัวอ่านดูที่ไทม์ไลน์ก็ได้)


Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player






Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

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

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


         ขั้นตอน 1  ปรับให้รูปทรงของลูกบอลสะท้อนการกระเด้งเมื่อปะทะกับพื้น
         ขั้นตอน 2  เพิ่ม/ลด จำนวนเฟรม เพื่อให้การเคลื่อนไหวดูสมจริงยิ่งขึ้น
         ขั้นตอน 3  ลดความเร็วของลูกบอลเมื่อเคลื่อนที่ไปได้สักระยะหนึ่ง
         ขั้นตอน 4  ทำให้ลูกบอลเคลื่อนที่เป็นเส้นโค้งโดยใช้โมชั่นไกด์

 

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

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




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


Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



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

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

 

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

 

 

ผลลัพธ์ที่ได้ ลูกบอลจะกระทบพื้นอย่างเป็นธรรมชาติและสมจริงมากขึ้น

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

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

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




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


 

ผลลัพธ์ที่ได้ ลูกบอลจะค่อยๆเคลื่อนที่ขึ้นอย่างช้าลง

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 

 

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


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













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









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

          

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

 






 

  

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player





   

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player