Frame rate ที่เหมาะสมสำหรับการสร้าง animation คือข้อใด

ตอนที่ 2 ให้นักเรียนเลือกคำตอบที่ถูกต้อง (10 คะแนน)

1. ข้อใดให้ความหมายโปรแกรม Adobe Flash CS5 ได้ถูกต้อง

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

2. ข้อใดถูกต้อง

   1.   ?    
      ไฟล์ FLA ไม่สามารถแก้ไขได้
   2.   ?    
      ไฟล์ SWF สามารถแก้ไขได้
   3.   ?     ไฟล์ SWF เป็นไฟล์ต้นฉบับของโปรแกรม
   4.   ?     ไฟล์ FLA สามารถแก้ไขได้

3. Symbol (ซิมโบล) ที่วาดกำหนดเพื่อเป็นต้นแบบ จะเก็บไว้ใน Panel (พาเนล) ใด

   1.   ?    Properties(พรอพเพอร์ตี้)
   2.   ?    Tools(ทูลส์)
   3.   ?    Timeline (ไทม์ไลน์)
   4.   ?    Library (ไลบรารี่)

4. จากภาพ ตรงคำว่า "Cartoon" คือส่วนใดของ Timeline (ไทม์ไลน์)
   1.   ?    Layer (เลเยอร์)
   2.   ?    Library (ไลบรารี่)
   3.   ?    Frame (เฟรม)
   4.   ?    Keyframe (คีย์เฟรม)

5. จากภาพใช้ทำอะไร

   1.   ?    ใช้ย่อ-ขยาย Symbol (ซิมโบล)
   2.   ?    ใช้ย่อ-ขยาย Stage (สเตจ)
   3.   ?    ใช้ย่อ-ขยาย Timeline (ไทม์ไลน์)
   4.   ?    ใช้ย่อ-ขยาย Frame (เฟรม)

6. "Frame rate" ในโปรแกรม Adobe Flash CS5 คืออะไร

   1.   ?    อัตราส่วนร้อยละ
   2.   ?    อัตราความเร็วในการแสดงภาพเคลื่อนไหว
   3.   ?    อัตราความเร็วในการคลิกเมาส์
   4.   ?    อัตราความเร็วในการเข้าโปรแกรม

7. ข้อใดคือการสร้างภาพเคลื่อนไหวแบบ Classic Tween (คลาสสิค ทวีน)

8. คีย์ลัดในการแสดงภาพเคลื่อนไหวคือข้อใด

   1.   ?    Delete
   2.   ?    Space Bar
   3.   ?    Ctrl + Enter
   4.   ?    Shift

9. คีย์ลัดในการเพิ่ม Keyframe (คีย์เฟรม) คือข้อใด

10. จากภาพ

    คือการสร้างภาพเคลื่อนไหวแบบใด
    1.   ?    Classic Tween (คลาสสิค ทวีน)
    2.   ?    Motion Guide (โมทั่น ไกด์)
    3.   ?    Shape Tween (เชพ ทวีน)
    4.   ?    Frame by Frame (เฟรม บาย เฟรม)

                㹡�����ҧ Flash Movie ����ҹ�� ���л�Сͺ仴��� Layer ���� Layer ����Ҩзӧҹ���է���� Layer ��ҹ�� Layer �����ҡ��ѧ�ӧҹ����������¡��� Active Layer ����ö�ѧࡵ��л�ҡ�����մӷ�� Layer ��� ����������ö��˹�ʶҹе�ҧ�ͧ Layer ����� �蹡�˹� ����ʴ����ͫ�͹ Layer,��˹���� Layer �������ö��Ѻ�������������, ��˹���� Layer ����ʴ�੾������ç��ҧ �繵�

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

        หลักการสร้างภาพเคลื่อนไหว เป็นการนำภาพนิ่งหลายๆ ภาพซึ่งมีความต่อเนื่องกัน มาแสดงด้วยความเร็วที่เหมาะสม เรียกว่า Frame Rates ทำให้เกิดภาพลวงตาของการเคลื่อนไหว หรือการจำภาพติดตา (Iconic Memory) ในภาพเคลื่อนไหวทุกชนิดจะมี Frame Rate ซึ่งหมายถึงจำนวน Frame หรือจำนวนภาพนิ่ง ที่แสดงต่อวินาที โดยมีหน่วยเป็น Per Second เรียกย่อๆ ว่า FPS (Frame Per Second) เช่น 24 FPS หมายความว่า ใน 1 วินาที จะมีภาพนิ่งแสดงต่อเนื่องกัน 24 ภาพ เป็นต้น โดยปกติ ในการทำภาพเคลื่อนไหวจะจำกัดไว้ที่ 60 FPS เนื่องจากสายตาของมนุษย์สามารถรับรู้การเคลื่อนไหวได้เพียงเท่านี้ ซึ่งเกินกว่านี้จะไม่มีผลอะไรต่อการรับรู้ และยังสิ้นเปลืองพื้นที่ในการจัดเก็บข้อมูล

ในการสร้างภาพเคลื่อนไหวนั้นเราต้องกำหนดคุณสมบัติให้ความเหมาะสมกับชิ้นงาน สามารถทำได้โดยคลิกเลือกเมนูคำสั่ง Modify > Document หรือ คลิกที่   ในพาเนล Property Inspector หรือกดปุ่ม Ctrl+J จะปรากฏหน้าต่าง Document Setting

 

ภาพที่ 6.1  กำหนดคุณสมบัติของชิ้นงานภาพเคลื่อนไหว

ที่มา : สุชาดา ทิพโรจน์, 2560

หมายเลข 1 Dimensions สำหรับกำหนดขนาดของสเตจ โดยระบุความกว้างและความสูง

หมายเลข 2 Adjust 3D Perspective Angle to preserve current stage projection สำหรับกำหนด

        ให้ปรับมุมองศา และขนาดของวัตถุ 3 มิติอัตโนมัติตามขนาดของสเตจ

        Scale content with stage สำหรับกำหนดปรับขนาดเนื้อหาอัตโนมัติตามขนาดของสเตจ

หมายเลข 3 Ruler units สำหรับกำหนดหน่วยของไม้บรรทัดที่ใช้ในสเตจ ค่าเริ่มต้นกำหนดเป็น Pixels

หมายเลข 4 Background Color สำหรับกำหนดสีพื้นของสเตจ

หมายเลข 5 Frame rate กำหนดอัตราความเร็วในการแสดงภาพเคลื่อนไหว (จำนวน Frame ต่อวินาที)

หมายเลข 6 Auto Save สำหรับกำหนดให้มีการบันทึกอัตโนมัติตามเวลาที่กำหนด

การเคลื่อนไหวในโปรแกรม Adobe Flash CS6 มีลักษณะการเคลื่อนไหว 2 ลักษณะ ดังนี้

        1. การเคลื่อนไหวแบบย้ายตำแหน่ง (Motion) เช่น วัตถุเคลื่อนที่จากจุด A ไปจุด B

ภาพที่ 6.2  ลักษณะการเคลื่อนไหวแบบ Motion

ที่มา : สุชาดา ทิพโรจน์, 2560

        2. การเคลื่อนไหวแบบเปลี่ยนแปลงรูปร่างลักษณะ (Transform)

 

ภาพที่ 6.3  ลักษณะการเคลื่อนไหวแบบ Transform

ที่มา : สุชาดา ทิพโรจน์, 2560

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

 

ภาพที่ 6.4  องค์ประกอบในการสร้างภาพเคลื่อนไหว

ที่มา : สุชาดา ทิพโรจน์, 2560

Scene (ฉากการแสดง) 

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

การเพิ่ม ลบ และคัดลอก Scene สามารถทำได้โดยการคลิกที่เมนูคำสั่ง Window > Other Panels > Scene หรือกดปุ่ม Shift+F2 จะปรากฏพาเนล Scene 

ภาพที่ 6.5  การเรียกใช้งานพาเนล Scene

ที่มา : สุชาดา ทิพโรจน์, 2560

ภาพที่ 6.6  องค์ประกอบของพาเนล Scene

ที่มา : สุชาดา ทิพโรจน์, 2560

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

ภาพที่ 6.7  การเปลี่ยนชื่อ Scene

ที่มา : สุชาดา ทิพโรจน์, 2560

         

ภาพที่ 6.8  การจัดลำดับ Scene

ที่มา : สุชาดา ทิพโรจน์, 2560

        เป็นช่องแสดงภาพแต่ละช่วงเวลา ซึ่งเมื่อเปรียบเทียบกับละคร Frame คือ ท่าทางของตัวละครที่เคลื่อนไหวในลักษณะต่างๆ ในแต่ละช่วงเวลา โดยการแสดงแต่ละครั้งจะต้องใช้ Frame จำนวนหลาย Frame  

ลักษณะการทำงานของ Frame จะมีลักษณะเป็นช่องเล็กๆ เรียงกันเป็นแถวยาว ทำหน้าที่บรรจุภาพและเสียงที่จัดวางบน

สเตจ เพื่อแสดงออกมาเป็น Flash Movie โดยแต่ละ Frame จะแสดงเมื่อมีการเลื่อนผ่านของ Playhead โดย Frame 

       แต่ละประเภทมีลักษณะการทำงานดังนี้

การเพิ่ม Frame และ Keyframe สามารถทำได้ดังนี้

การเพิ่ม Frame คลิกเลือกเมนูคำสั่ง Insert > Timeline > Frame หรือคลิกเมาส์ขวาที่ Frame เลือก Insert Frame หรือกดปุ่ม F5

ภาพที่ 6.9  การเพิ่ม Frame

ที่มา : สุชาดา ทิพโรจน์, 2560

การเพิ่ม Keyframe คลิกเลือกเมนูคำสั่ง Insert > Timeline > Keyframe หรือคลิกเมาส์ขวาที่ Frame เลือก Insert Keyframe หรือกดปุ่ม F6

                                        

ภาพที่ 6.10  การเพิ่ม Keyframe

ที่มา : สุชาดา ทิพโรจน์, 2560

การลบ Frame หรือ Keyframe สามารถทำได้โดยคลิกเลือกเมนูคำสั่ง Edit > Timeline > Remove Frames หรือคลิกเมาส์ขวาที่ Frame แล้วเลือก Remove Frames หรือกดปุ่ม Shift+F5