Back to Top
sunshine
Untitled Document

   

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

Get Adobe Flash player

 


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

1. มีความรู้ความเข้าใจและสามารถจัดการไทมไลน์ได้ 
2.  มีความรู้ความเข้าใจและสามารถจัดการเลเยอร์ได้
3.  มีความรู้ความเข้าใจและสามารถจัดการเฟรมได้



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




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

Get Adobe Flash player

   การสร้างภาพเคลื่อนไหวในโปรแกรมแฟลช

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



ผลลัพธ์ เป็นดังนี้

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

Get Adobe Flash player



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




          ก่อนเข้าสู่ตัวอย่างการสร้างภาพเคลื่อนไหวหรือแอนนิเมชัน ในบทนี้จะกล่าวถึงพื้นฐาน ได้แก่ ไทม์ไลน์ ซึ่งประกอบด้วย เลเยอร์และเฟรม จากนั้นเราจะกล่าวถึงการแบ่งชิ้นงานย่อยๆที่เรียกว่า ซีน (Scene)

 

 

 

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

Get Adobe Flash player

   ไทม์ไลน์ (Time line) ส่วนควบคุมแอนิเมชัน

ไทม์ไลน์เป็นส่วนที่ใช้ในการควบคุมการแสดงภาพเคลื่อนไหว ซึ่งประกอบด้วยสำคัญ คือ เลเยอร์และเฟรม ดังรูป

 

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

Get Adobe Flash player

    หัวอ่าน (Playhead)


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

 

 

 

 

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

Get Adobe Flash player

   รู้จักกับเลเยอร์

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

     สร้างเลเยอร์ใหม่

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

  วิธีที่ 1  คลิกเลือกเมนู> Insert>Timeline>Layer
  วิธีที่ 2  คลิกขวาที่เลเยอร์ แล้วเลือกคำสั่ง Insert layer
  วิธีที่ 3  คลิกที่ New layer ด้านล่างไทม์ไลน์

 

          เปลี่ยนชื่อเลเยอร์

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

      จัดการเลเยอร์

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

      เปลี่ยนลำดับเลเยอร์

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


      ลบเลเยอร์   ให้คลิกขวเลือกเลเยอร์ที่ต้องการ เลือกคำสั่ง Delete layer


สถานะต่างๆของเลเยอร์

เลเยอร์มี 3 สถานะ ซึ่งเป้นประโยชน์ในการสร้างแอนิเมชัน ดังนี้

 

        ซ่อน/แสดงเลเยอร์ การซ่อนเลเยอร์มีประโยชน์ในกรณีที่ชิ้นงานมีเลเยอร์จำนวนมาก และ ซ่อนเนื้อหาในเลเยอร์นี้ชั่วคราวเพื่อจะได้แก้ไขเนื้อหาส่วนอื่นได้สะดวกขึ้น คลิกที่ สังเกตที่คอลัมน์รูปตา สังเกตว่า จะเปลี่ยนเป็น   และเนื้อหาในเลเยอร์จะหายไปจากสเตจ เมื่อใดที่ต้องการให้แสดงเลเยอร์ให้คลิกที่ ก็จะเปลี่ยนเป็น และเลเยอร์นั้นจะปรากฏขึ้นมาอีกครั้ง


 

          ล็อกเลเยอร์ เมื่อเราสร้างภาพในเลเยอร์หนึ่งเสร็จแล้ว และไม่ต้องการให้มีการแก้ไขภาพ เราสามารถล็อกเลเยอร์ได้โดยคลิก ในคอลัมน์รูปแม่กุญแจ จะสังเกตว่า จะเปลี่ยนเป็น และเลเยอร์นั้นจะแก้ไขไม่ได้


 

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



 จัดการสถานะของหลายเลเยอร์พร้อมกัน

มีเทคนิคสำหรับการจัดการสถานะต่างๆ ซ่อน/แสดงเลเยอร์ล็อกเลเยอร์ และแสดงเลเยอร์โครงร่างของหลาเลเยอร์พร้อมกัน ดังนี้

  ซ่อน/ล็อก/แสดงเส้นโครงร่างทุกเลเยอร์ ให้คลิกที่ จะปรากฏ ในทุกเลเยอร์



  ซ่อน/ล็อก/แสดงเส้นโครงร่างเลเยอร์ที่ต่อเนื่องกัน ให้คลิกที่สถานะ แล้วอย่า ปล่อยปุ่มเมาส์ ให้ลากต่อไปยังเลเยอร์ที่อยู่ติดกัน เลเยอร์ทั้งหมดที่ลากผ่านจะมีสถานะเดียวกัน

  ซ่อน/ล็อก/แสดงเส้นโครงร่างทุกเลเยอร์ยกเว้นเลเยอร์ที่เลือกไว้ ถ้ากดคีย์ Alt แล้วคลิกที่สถานะ ของเลเยอร์ใด ๆ เลเยอร์อื่นจะเปลี่ยนสถานะ ส่วนเลเยอร์ที่เราคลิกจะมีสถานะเดิม

 

การใช้โฟลเดอร์จัดการเลเยอร์

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

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

 

เปิด/ปิดโฟลเดอร์

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

มุมมองที่แสดงเลเยอร์

เราย่อความสูงของแต่ละแถวที่แสดงเลเยอร์ได้ โดยคลิกที่ แล้วเลือก short ซึ่งมุมมองนี้เหมาะสำหรับกรณีที่เรามีชิ้นงานขนาดใหญ่ที่ประกอบด้วยเลเยอร์จำนวนมาก ทำให้เห็นเลเยอร์ได้ทีละมาก ๆได้

 

ปรับแต่งคุณสมบัติของเลเยอร์

      เราปรับแต่งคุณสมบัติของเลเยอร์ได้โดยดับเบิลคลิก หน้าเลเยอร์ที่ต้องการ (อีกวิธีคือ คลิกขวาเลือกเลเยอร์ที่ต้องการ แล้วเลือก properties แล้วเลือกคำสั่ง Modify>Timeline>Layer Properties ก็ได้) จะแสดงหน้าต่าง Layer Properties ซึ่งมีบางตัวเลืกเราได้กล่าวถึงไปแล้ว

คำสั่ง

คำอธิบาย

Name

ตั้งชื่อเลเยอร์

Show

แสดงเลเยอร์

Lock

ล็อกเลเยอร์

Type
Normal
Guide
Guided
Mask
Masked
Folder

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

Outline color

กำหนดสีเส้นโครงร่างวัตถุ โดยปกติแต่ละเลเยอร์จะใช้สีโครงร่างต่างกัน มีอยู่ 8 สีวนกันไป

View layer as outlines

แสดงวัตถุเป็นเส้นโครงร่าง

Layer height

กำหนดความสูงของแถวเลเยอร์

เทคนิคการกระจายเลเยอร์

   ในบางครั้ง เราอาจต้องการกระจายวัตถุที่อยู่ในเลเยอร์เดียวกัน ให้อยู่ในแต่ละเลเยอร์แยกจากกัน เพื่อจะได้ตกแต่งและนำไปสร้างงานแอนิเมชันที่แตกต่างกันได้ โดยให้เราเลือกวัตถุที่ต้องการกระจายและเลือกคำสั่ง Modify>Timeline>Distribute to Layers หรือคลิกขวาที่วัตถที่เลือก แล้วเลือกคำสั่ง Distribute to Layers ภาพทั้งหมดก็จะถูกกระจาย โดยแต่ละเลเยอร์จะมีวัตถุเพียงชิ้นเดียวเท่านั้น

 

 

 

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

Get Adobe Flash player

  เฟรมและหลักการสร้างภาพเคลื่อนไหว

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

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

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

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

             ทั้งนี้ ช่องเฟรมบนไทม์ไลน์จะแสดงเฟรมแต่ละชนิดด้วยลักษณะที่แตกต่างกัน โดยคีย์เฟรมจะมีลักษณะเป็น ถ้าเป็นคีย์เฟรมว่างที่ไม่มีวัตถุอยู่ และ ถ้าเป็นคีย์เฟรมที่มีวัตถุอยู่ ส่วนเฟรมแทรกระหว่างกลางจะมีลักษณะที่แตกต่างกันออกไป ตามรูปแบบการเคลื่อนที่ของวัตถุ ซึ่งจะกล่าวถึงต่อไป
 

 

เพิ่มเฟรมแบบต่าง ๆ

                คลิกขวาตำแหน่งที่ต้องการเพิ่มเฟรม เลือกคำสั่ง

Insert Frame   เพิ่มเฟรม (คีย์ลัด <F5>หรือเลือกคำสั่ง Insert>Timeline>Keyframe)
Insert Keyframe   เพิ่มคีย์เฟรม (คีย์ลัด <F6>หรือเลือกคำสั่ง Insert>Timeline>Keyframe)
Insert Blank Keyframe   เพิ่มคีย์เฟรมว่าง (คีย์ลัด <F7>หรือเลือกคำสั่ง Insert>Timeline>Blank keyframe)

 

จัดการเฟรม

ก่อนที่เราจะทำสิ่งใดๆกับเฟรม เราต้องเลือกเฟรมนั้นก่อนโดยคลิกเลือกเฟรมที่ต้องการได้เลย

 

การเลือกเฟรม

ถ้าเราต้องการเลือกเฟรมหลายเฟรมพร้อมกัน ให้คลิกเลือกเฟรมแรก และกดคีย์  shift  ค้างไว้ในขณะที่คลิกเลือกเฟรมต่อไป

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

 

    การแทรกเฟรม

        ถ้าเราต้องการเพิ่มเฟรมแทรกระหว่างกลางหลังจากได้มีการกำหนดคีย์เฟรมแล้ว ให้คลิกขวาตำแหน่งเฟรมที่ต้องการและเลือกคำสั่ง Insert frame เพื่อเพิ่มเฟรมแทกระหว่างกลาง (กดคีย์ลัด F5 หรือเลือกคำสั่ง Insert>Timeline>Frame ก็ได้)

 

     การลบเฟรม

คลิกขวาเลือกคีย์เฟรม/แทรกเฟรมระหว่างกลางที่ต้องการลบ (เลือกทีละหลายฟรมก็ได้) และเลือกคำสั่ง Remove Frames (กดคีย์ลัด Shift + F5หรือเลือกคำสั่ง Edit>Timeline>Remove Frames ก็ได้)

 

      การย้ายตำแหน่งและการคัดลอกเฟรม

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


   การเปลี่ยนคีย์เฟรมเป็นเฟรมแทรกระหว่างกลาง

        
ถ้าเราต้องการเปลี่ยนคีย์เฟรมเป้นเฟรมแทรกระหว่างกลาง ให้คลิกขวาเลือกคียฺเฟรมนั้น และเลือกคำสั่ง Clear keyframe (กดคีย์ลัด Shift + F6  หรือเลือกคำสั่ง Modify>Timeline>Clear Keyframe ก็ได้)

 

    การเปลี่ยนเฟรมแทรกระหว่างกลางเป็นคีย์เฟรม

          ถ้าต้องการเปลี่ยนเฟรมแทรกระหว่างกลางเป็นคีย์เฟรม ให้คลิกขวาเลือกเฟรมนั้นและเลือกคำสั่ง Convert to keyframesหรือ Convert to Blank Keyframes(เลือกคำสั่ง Modify>Timeline>Convert to Keyframesหรือ Modify>Timeline>Convert to Blank Keyframes ก็ได้)

 

 

 

 

 

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