จัดทำโดย   นายเชิดชัย   ปัญญา
จำนวนผู้เข้าชมเว็บไซต์
ในวันนี้  : 80 คน
เดือนนี้  : 1382 คน
ในปีนี้    : 13438 คน
ทั้งหมด : 35768 คน

หน่วยที่ 6 - การสร้างแอดนิเมชั่นแบบเฟรมต่อเฟรม

  โพสเมื่อ : 25 เมษายน 2558         ดู 2367 ครั้ง

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

 

 

      งานแอนิเมชั่นจะประกอบด้วยส่วนหลักๆ 2 ส่วน ได้แก่ ลูกบอลที่เคลื่อนที่ได้ และพื้นที่อยู่กับที่ และมีความยาว 10 เฟรม สำหรับขั้นตอนการสร้างมีดังนี้

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

           ขั้นตอนที่ 2 สร้างเลเยอร์ลูกบอล

           ขั้นตอนที่ 3 กำหนดให้ลูกบอลเคลื่อนไหวทีละเฟรม

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

 

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

          เริ่มต้นเราจะกำหนดขนาดของสเตจให้มีขนาดเท่ากับ 340 * 180 พิจเซล โดยกดคีย์ลัด <Ctrl>+J เรียกหน้าต่าง Documentn Properties ขึ้นมาเพื่อปรับขนาด แล้วให้วาดรูปสี่เหลี่ยม ใส่สีเกรเดียนท์ โดยใช้    และบิดให้ได้สัดส่วนโดยใช้   Free Transform Tool สังเกตว่ารูปพื้นที่สร้างนี้จะอยู่ในเฟรมที่ 1 และลักษณะเฟรม  จะถูกกำหนดไว้เป็นคีย์เฟรมว่างอยู่แล้ว (โปรแกรม Flash จะกำหนดเฟรมแรกที่เริ่มทำงานเป็นคีย์เฟรม) ให้ตั้งชื่อเลเยอร์นี้ว่า Floor

 

 

 

 

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

 

 

 

ขั้นตอนที่ 2 สร้างเลเยอร์ลูกบอล

          ต่อไปเราจะสร้างเลเยอร์ใหม่ให้เป็นเลเยอร์ของลูกบอล และทำให้ลูกบอลเคลื่อนไหวได้ โดยคลิก    เพิ่มเลเยอร์ใหม่ และตั้งชื่อว่า ball สังเกตว่าเลเยอร์นี้จะมีความยาว 10 เฟรมเหมือนกับเลเยอร์ floor แต่ลักษณะเฟรมจะเป็นสีขาวแทนที่จะเป็นสีเทาเหมือนกับเฟรมในเลเยอร์ Floor เนื่องจากเรายังไม่ได้กำหนดอะไรในเฟรมแรก (คีย์เฟรมยังว่างอยู่)

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

 

 

 

เนื่องจากขนาดลูกบอลเล็กเกินไป ให้เราปรับเพิ่มขนาดที่แสดงบนสเตจได้ โดยใช้เครื่องมือ   free Transform Tool

 

 

 

ขั้นตอนที่ 3 กำหนดให้ลูกบอลเคลื่อนไหวทีละเฟรม

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

          เนื่องจากในเฟรมมีลูกบอลจะต้องเคลื่อนที่ใกล้พื้นมากขึ้น ให้เราคลิกลากรูปลูกบอลลงมาและไปทางขวาเล็กน้อย

          เราจะต้องใช้วิธีเดียวกันที่กำหนดตำแหน่งลูกบอลที่แตกต่างกันให้อีก 8 เฟรม ที่เหลือซึ่งก่อนที่จะไปที่เฟรม 3 ขอแนะนำให้ใช้คำสั่ง Onion Skinning เพื่อช่วยในการดูภาพเคลื่อนไหว ดังนี้

 

 

 

        ต่อไปเราคลิกขวาเลือกเฟรมที่ 3 และเลือกคำสั่ง Insert Keyframe สังเกตว่ารูปลูกบอลจากเฟรมที่ 2 จะถูกก็อปปี้มาไว้ในคีย์เฟรมนี้อัตโนมัติ ให้คลิกลากลูกบอลไปวางในตำแหน่งที่ต้องการ

 

 

        ต่อไปให้คลิกขวาเลือกเฟรมที่ 4 แล้วตอบขั้นตอนเหมือนเฟรมที่ 3

 

 

       ให้ทำซ้ำขั้นตอนนี้กับเฟรมที่ 5 ในกรณีนี้เนื่องจากลูกบอลจะบอกตำแหน่งใกล้พื้นมาก เราอาจคลิกเลือกตำแหน่งพื้นที่โดยบังเอิญ เราแก้ปัญหานี้ได้โดยคลิก    ของเลเยอร์ floor เพื่อล็อกเลเยอร์นี้ไว้

 

 

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

 

 

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

          กดคีย์ <Enter> เพื่อให้โปรแกรม Flash แสดงภาพเคลื่อนไหวที่เราสร้างในขั้นตอนขึ้นเราอาจคลิกยกเลิก Onion skin เพื่อจะได้ไม่ต้องแสดงภาพซ้อน นอกจากนั้นเราสามารถคลิกลาก Playhead เพื่อแสดงภาพเคลื่อนที่ทีละเฟรมก็ได้

 

 

        ที่ไทมไลน์จะมีรายละเอียดของการเคลื่อนไหวโดยจะแสดงตำแหน่งของเฟรมปัจจุบัน (Current Frame), อัตราความเร็วของการเคลื่อนที่คิดเป็นค่าเฟรมต่อวินาที (Frame Rate) และแสดงเวลา (Elapsed Time)