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

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

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

         จากตัวอย่างลูกบอลกระเด้งกระทบพื้นที่ผ่านมา เราควรปรับปรุงตัวอย่างที่เราสร้างขึ้นมา เพื่อให้ดูสมจริงมากขึ้น 3 ประการ ดังนี้

              ขั้นตอนที่ 1 ปรับให้การเคลื่อนที่ของลูกบอลเลื่อนมาอยู่บริเวณตรงกลางของพื้นมากยิ่งขึ้น

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

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

 

ขั้นตอนที่ 1 ปรับให้การเคลื่อนที่ของลูกบอลเลื่อนมาอยู่บริเวณตรงกลางของพื้นมากยิ่งขึ้น

          หมายความว่าเราจะต้องเลื่อนตำแหน่งของลูกบอลทุกเฟรมไปทางขวา แต่ในกรณีนี้เราไม่ต้องใช้เมาส์คลิกลากลูกบอลที่อยู่ในเฟรมจนครบทั้งหมด 10 เฟรม เพราะมีคำสั่งที่สามารถแก้ไขทุกเฟรมได้เลยพร้อมกันโดยให้เราคลิกที่  Edit Multiple Frames จะปรากฏ Marker ให้เราคลิกลากจนครอบคลุมเฟรม 1 – 10 ซึ่งเป็นขอบเขตเฟรมที่เราต้องการแก้ไขตำแหน่งของลูกบอล สังเกตว่าลูกบอลทุกตำแหน่งจะปรากฏให้เห็นพร้อมกันบนสเตจ

          ในกรณีนี้เราต้องการเลื่อนตำแหน่งลูกบอลในทุกเฟรมไปทางขวา ดังนั้นให้เราเลือกคีย์เฟรม โดยคลิกเลือกทีละเฟรม (กด <Shift> ค้างไว้ในขณะที่คลิกเลือกที่ลูกบอลทีละลูก) หรือเลือก Edit->Select All ก็ได้ สังเกตว่าลูกบอลทุกรูปจะมีกรอบสี่เหลี่ยมล้อมไว้ เพื่อแสดงว่าถูกเลือกอยู่ (พื้นจะไม่เลื่อนตำแหน่งตามเพราะเราได้ล็อกเลเยอร์นั้นไว้)

 

 

        ต่อไปให้เราคลิกลากรูปลูกบอลทั้งหมดที่ถูกเลือกไปยังตำแหน่งที่ต้องการ (หรือจะกดคีย์ลูกศรบนแป้นพิมพ์เพื่อเลื่อนทีละนิดก็ได้) เมื่อเสร็จขั้นตอนนี้แล้วให้เราคลิกยกเลิก   Edit Multiple Frames (หากเราลืมทำสิ่งนี้ก็จะทำให้ภาพเคลื่อนไหวดูสับสนเพราะจะแสดงลูกบอลในทุกเฟรมที่ Marker ครอบคลุม)

 

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

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

 

 

 

 

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

 

        หลังจากนั้นให้เราใช้    Free Transform Tool แก้ไขรูปทรงของลูกบอลด้วยวิธีเดียวกัน ในเฟรมที่ 6 ถึงเฟรมที่ 8 ให้ค่อยๆคลายกลับสู่รูปทรงกลมปกติ เพื่อให้ดูสมจริงยิ่งขึ้น

 

        ลูกบอลจะเสียรูปเมื่อปะทะกับพื้น และค่อยมีรูปกลับเป็นเหมือนเดิม หลังจากที่กระเด้งไปสักระยะหนึ่ง

 

 

 

 

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

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

เพิ่มคีย์เฟรมแรกต่อจากเฟรมที่ 5

 

 

 

 

 

 

เพิ่มคีย์เฟรมที่ 2 ต่อจากเฟรมที่ 6

        เราจะได้เฟรม 5 – 7 ที่ลูกบอลอยู่ในตำแหน่งเดียวกัน คือจุดที่สัมผัสกับพื้น ซึ่งเราจะใช้เครื่องมือ     Free Transform Tool ปรับรูปทรงของลูกบอลในคีย์เฟรมทั้งสองที่เพิ่มขึ้นมาให้ต่างกันเล็กน้อยเพื่อสะท้อนแรงปะทะกับพื้น

       ก่อนเสร็จสิ้นขั้นตอน เราต้องเพิ่มจำนวนเฟรมของพื้นที่ให้เท่ากับจำนวนเฟรมของลูกบอลที่เพิ่มขึ้นมาด้วย เพื่อให้พื้นที่ปรากฏให้เห็นตลอดการเคลื่อนไหว โดยคลิกขวาเลือกช่องเฟรมที่ 12 เลเยอร์ floor (ขยายจำนวนเฟรมถึงเฟรมที่ 12) เลือก Insert Frame