3.3 การเคลื่อนไหว (Animations)

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

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

การเปลี่ยนแปลงที่เกิดขึ้นเอง อาจเป็นไปอย่างอิสระ หรือเกิดขึ้นพร้อมๆ กัน การเปลี่ยนแปลงอื่น ก็ได้ ใน Flash มีวิธีการสร้างภาพเคลื่อนไหวได้ 2 แบบได้แก่ แบบทวีน (tween animation) และแบบ เฟรมต่อเฟรม (frame-byframe animation) ในการเคลื่อนไหวแบบทวีนนั้นคุณเพียงแต่สร้างเฟรมเริ่มต้น และเฟรมสุดท้ายแล้วให้โปรแกรมจัดการสร้างเฟรมระหว่างกลางขึ้นเองพร้อมกับความสามารถในการ เปลี่ยนแปลงลักษณะต่างๆของออบเจ็คอย่างค่อยเป็นค่อยไป จากเฟรมแรกจนถึงเฟรมสุดท้าย เพื่อให้เกิดลักษณะ การเคลื่อนไหว

8.2 รูปแบบของการเคลื่อนไหว

การเคลื่อนไหวแบบเฟรมต่อเฟรม (Frame-by-frameanimation)

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

การเปลี่ยนแปลงแบบเคลื่อนไหว (motiontween)

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

การเปลี่ยนแปลงรูปร่าง (Shape tween)

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

ภาพเคลื่อนไหวตามเส้นไกด์ (Motion Guide)

การสร้าง Motion Guide คือ การวาดเส้นด้วยออบเจ็กต์ Drawn เช่น Pen tool หรือ Line Tool เป็นต้น ไว้ในเลเยอร์ไกด์ เพื่อใช้เป็นเส้นทางในการเคลื่อนที่ให้กับออบเจ็กต์ที่ระบุไว้ หลักสำคัญคือต้องเคลื่อนย้ายออบเจ็กต์ที่สร้างการเคลื่อนที่แบบ Motion Tween ให้เข้าประชิด (snap) กับเส้นไกด์ นอกจากนี้ ต้องเชื่อมโยงออบเจ็กต์ที่จุดเริ่มต้นและจุดสุดท้ายกับเส้นไกด์ด้วย

การใช้ Mask layer

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

8.3 ภาพเคลื่อนไหวแบบเฟรมต่อเฟรม (Frame by Frame)

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

1) เริ่มสร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม

เริ่มแรกจะต้องสร้างออบเจ็กต์ขึ้นมาก่อน จากนั้นจึงสร้างคีย์เฟรมพร้อมทั้งแก้ไขเนื้อหาต่างๆ ของออบเจ็กต์เดิม ดังตัวอย่าง

1. คลิกคีย์เฟรมแรกของภาพเคลื่อนไหว
2. สร้างออบเจ็กต์หรือองค์ประกอบต่างๆ ที่ต้องการให้ปรากฏเป็นภาพเคลื่อนไหว

1. คลิกเมาส์ขวาที่ช่องเฟรมและเลือกคำสั่ง Insert Keyframe หรือกดปุ่ม F6 จากนั้นจะปรากฏคีย์เฟรมใหม่พร้อมกับออบเจ็กต์ที่อยู่ในคีย์เฟรมทางด้านหน้าขึ้นมา

1. ปรับแต่งออบเจ็กต์หรือคลิกปุ่ม จาก Properties
2. ดับเบิลคลิกซิมโบลใหม่ที่ต้องการนำมาเป็นภาพเคลื่อนไหว

1. คลิกเมาส์ขวาที่ช่องเฟรมสุดท้ายและเลือกคำสั่ง Insert Frame หรือกดปุ่ม F5 เพื่อแสดงภาพเคลื่อนไหวในคีย์เฟรมที่ 2 ให้นานขึ้น

ตัวอย่างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม

2) ปรับแต่งภาพเคลื่อนไหวแบบเฟรมต่อเฟรม

การปรับแต่งภาพเคลื่อนไหวแบบเฟรมต่อเฟรมสามารถทำได้เพียงคลิกปุ่ม Edit Multiple Frames

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

1. คลิกปุ่ม Edit Multiple Frames ทางด้านล่างของไทม์ไลน์ จากนั้นปรากฏ Marker ที่ใช้บอกขอบเขตการแสดงเนื้อหาของเฟรมอื่นขึ้นมา

2. ลากเมาส์ปรับ Marker ให้ครอบคลุมเฟรมทั้งหมดที่ต้องการปรับแต่งแก้ไข

3. คลิกไอคอนหรือชื่อของเลเยอร์เพื่อเลือกออบเจ็กต์ทั้งหมดที่อยู่ในเลเยอร์

4. ปรับแต่งแก้ไขออบเจ็กต์ ได้ตามต้องการ

8.4 ภาพเคลื่อนไหวแบบเคลื่อนที่ (Motion Tween)

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

1) เริ่มสร้างภาพเคลื่อนไหวแบบเคลื่อนที่

ออบเจ็กต์ที่นำมาสร้างภาพเคลื่อนไหวแบบเคลื่อนที่เป็นได้ทั้ง Object Drawing ข้อความ ซิมโบล ออบเจ็กต์ที่ถูกรวมกลุ่ม ยกเว้น Merge Drawing

1. คลิกคีย์เฟรมแรกของภาพเคลื่อนไหว
2. สร้างออบเจ็กต์หรือองค์ประกอบต่างๆ ที่ต้องการให้ปรากฏเป็นภาพเคลื่อนไหว

1. คลิกเมาส์ขวาที่ช่องเฟรมสุดท้ายและเลือกคำสั่ง Insert Keyframe หรือกดปุ่ม F6 จากนั้นจะปรากฏคีย์เฟรมใหม่พร้อมกับออบเจ็กต์ที่อยู่ในคีย์เฟรมทางด้านหน้าขึ้นมา

1. ปรับแต่งแก้ไขออบเจ็กต์ ได้ตามต้องการ

1. คลิกคีย์เฟรมแรกหรือเฟรมระหว่างกลาง
2. ที่ Properties ในส่วนของ Tween ให้คลิกเลือก Motion จากนั้นปรากฏลูกศรแสดงการสร้างแอนิเมชั่นขึ้นมา

2) ปรับแต่งภาพเคลื่อนไหวแบบเคลื่อนที่ ภายหลังจากการสร้างภาพเคลื่อนไหวแบบเคลื่อนที่เรียบร้อยแล้ว ก็สามารถปรับแต่งรูปแบบ ในการเคลื่อนไหว เช่น ให้มีการปรับขนาด ให้หมุน เปลี่ยนระดับความเร็ว ในการเคลื่อนที่ ฯลฯ ได้ โดยหากคลิกปุ่ม Onion Skin

ทางด้านล่างของไทม์ไลน์ ก็จะปรากฏเนื้อหาในเฟรมอื่นๆ ขึ้นมาด้วย

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

1. ที่ Properties ให้เลือกปรับแต่งรูปแบบการเคลื่อนไหว โดยมีรายละเอียดดังนี้
• Tween ชนิดการเคลื่อนไหว โดยมี None ยกเลิกการเคลื่อนไหว, Motion สร้างภาพเคลื่อนไหวแบบเคลื่อนที่, Shape สร้างภาพเคลื่อนไหวแบบเปลี่ยนรูปร่าง
• Scale เมื่อออบเจ็กต์แรกในคีย์เฟรมแรกและคีย์เฟรมสุดท้ายมีขนาดไม่เท่ากัน ให้ปรับขนาดออบเจ็กต์ในเฟรมต่างๆ โดยอัตโนมัติ
• Ease ระดับความเร็วในการเคลื่อนที่ โดยค่าลบ เป็นการเคลื่อนที่จากช้าไปเร็ว หรือค่าบวก เป็นการเคลื่อนที่จากเร็วไปช้า ส่วน 0 เป็นค่าปกติ ที่มีระดับความเร็วในการเคลื่อนที่เท่ากันตลอด
• ปุ่ม Edit เมื่อคลิกปุ่ม [edit] จะปรากฏไดอะล็อกบ็อกซ์ Custom Ease In / Ease Out ที่ใช้ปรับระดับความเร็วในการเคลื่อนที่ให้แตกต่างกัน ซึ่งสามารถทำได้เพียงคลิกเฟรมที่ต้องการ จากนั้นจึงลากเมาส์ปรับจุดแองเคอร์ โดยหากเส้นมีความชันก็จะทำให้การเคลื่อนไหวเร็ว
• Rotate นอกจากการหมุนด้วยปุ่ม Free Transform แล้ว ยังสามารถกำหนดให้ออบเจ็กต์หมุนไปในระหว่างการเคลื่อนที่ได้ด้วย โดย None คือไม่หมุน, Auto หมุนไปตามการเปลี่ยนแปลงของออบเจ็กต์ในคีย์เฟรมสุดท้าย, CW หมุนตามเข็มนาฬิกา, CCW หมุนทวนเข็มนาฬิกา โดยกำหนดจำนวนรอบลงในช่อง times

8.5 ภาพเคลื่อนไหวตามเส้นไกด์ (Motion Guide)

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

1. สร้างเส้นขึ้นมา 1เส้นเพื่อเป็นเส้น Guide (เส้นควรเป็นเส้นแบบเปิด)

2. สร้างออบเจ็กต์ขึ้นมา 1 ชิ้นและให้อยู่คนละ

Layer กับ เส้นของเรา (ถ้าออบเจ็กต์มีหลายชิ้น

ให้สั่ง Group เอาไว้หรืออาจเปลี่ยนให้เป็น Symbol)

3. ทำการคลิกขวาที่ Layer เส้นและเลือกคำสั่ง Guide

4. ลาก Layer เส้นเข้าไปอยู่ใน Layer Guide

5. ทำการเพิ่ม Key Frame ให้กับ Layer

ทั้งสองเพื่อกำหนดความยาวของแอนิเมชั่น

6. ดูให้แน่ใจว่า Snap เปิดใช้งานอยู่

จากนั้นไปที่ Frame แรกของ Layer ออบเจ็กต์ และเลื่อนออบเจ็กต์ของเราไปยังบริเวณจุดเริ่มต้อนของเส้น

7. ให้คลิกเลือกที่ Frame สุดท้ายจากนั้นเลื่อน ออบเจ็กต์ไปยังจุดสิ้นสุดของเส้น

8. คลิกเลือก Frame แรกของ Layer ออบเจ็กต์จากนั้นคลิกขวาและเลือก

9. หากคลิกเลือก Frame แรกของ

Layer และสังเกตดูจะเห็นที่ Properties จะมีตัวเลือกเพิ่มเติม ดังนี้

Orient to Path : กำหนดให้ออบเจ็กต์วิ่งตามเส้น Path โดยให้หมุนไปตามทิศทางที่เราต้องการ

Syn : ใช้สำหรับปรับอัตราเร็วของการเคลื่อนไหวให้ตรงกันระหว่าง Timeline หลักกับ Timeline ย่อย ๆ

Snap : ให้ออบเจ็กต์ยึดเส้นไกด์ตลอดเวลา

8.6 ภาพเคลื่อนไหวแบบบังภาพ (Mask Layer)

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

1. สร้างพื้นหลังที่เลเยอร์ bg อาจจะสร้างขึ้นมาเอง หรือ importเข้ามา

2. โดยสร้างวงกลมขึ้นมา 1 วง (ที่เฟรมแรกของเลเยอร์ circle)

3. หลังจากนั้นทำวงกลมให้เป็นซิมโบล โดยการกด F8 หรือ คลิ๊กที่เมนู modify เลือก convert to symbol

4. จากนั้น คลิ๊กเพิ่ม keyframe ที่เฟรมที่ 5 แล้วนำเมาส์ไปคลิ๊กที่เฟรมที่อยู่ระหว่าง 1 - 5 เลือก Tween เป็นแบบ Motion ทำอย่างนี้ทุกเฟรมที่ 5 จนถึงเฟรมที่ 20

5. คลิ๊กขวาที่เลเยอร์ circle

6. คลิ๊กคำสั่ง Mask

7. จากนั้นกด Ctrl+Enter เพื่อดูผลที่ได้

ข้อสังเกต เลเยอร์ bg จะอยู่ล่างเลเยอร์ circle แสดงว่าถูก Mask อยู่ ให้สังเกตว่า เลเยอร์ทั้งสองจะถูกล็อคด้วยแม่กุญแจ แสดงว่าเมื่อ Mask แล้วห้ามแก้ไขข้อมูลใดๆ จะสามารถมองเห็นเฉพาะส่วนที่อยู่ในบริเวณวงกลมเท่านั้น ดังนั้นถ้าวงกลมเคลื่อนที่ไปที่ใหนก็จะมองเห็นที่นั่น