Back to Top
sunshine
Untitled Document

   

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

Get Adobe Flash player

 


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

1.  มีความรู้ความเข้าใจและสามารถสร้างแอนิเมชันแบบเฟรมต่อเฟรมได้

 



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




 

 

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



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

 



จากตัวอย่างนี้จะมีภาพปรากฏบนสเตจที่แตกต่างกันไป ตั้งแต่เฟรมที่ 1-9 โดยจะมีลูกบอลเท่านั้นที่เคลื่อนที่ (หมายเลขที่กำกับนั้นจะหมายถึงตำแหน่งของลูกบอลในเฟรมต่าง ๆ)

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

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

 

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

            เริ่มต้นเราจะกำหนดขนาดของสเตจให้มีขนาดเท่ากับ 340*180 พิกเซล โดยกดคีย์ลัด Ctrl + J เรียกหน้าต่าง Document 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)

 

เมื่อลองรัน หรือแสดงผลก็จะได้ดังภาพ

 

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

  

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