พื้นฐาน Adobe Flash CS3 ตอนที่7

1. CHAPTER 7
ANIMATION
สรางผลงานแอนิเมชั่น

2. 7. Animation [ สร้างผลงานแอนิเมชัน]
7.1 ภาพเคลือนไหวแบบเฟรมต่อเฟรม (Frame by Frame)
การสร้างภาพเคลือนไหวแบบเฟรมต่อเฟรมเป็นการนําเอาออบเจ็กต์แต่ละชิ นมาเรียงต่อกัน โดย
อาจมีการปรับแต่งรูปร่างหรือคุณสมบัติให้เปลียนแปลงไปจากออบเจ็กต์ทีอยู่ก่อนหน้า และมีการแสดง
อย่างต่อเนืองก็จะปรากฏเป็นภาพเคลือนไหวขึ นมา
) เริมสร้างภาพเคลือนไหวแบบเฟรมต่อเฟรม
เริมแรกจะต้องสร้างออบเจ็กต์ขึ นมาก่อน จากนั นจึงสร้างคีย์เฟรมพร้อมทั งแก้ไขเนื อหาต่างๆ
ของออบเจ็กต์เดิม ดังตัวอย่าง
1. คลิกคีย์เฟรมแรกของภาพเคลือนไหว
2. สร้างออบเจ็กต์หรือองค์ประกอบต่างๆ ทีต้องการให้ปรากฏเป็นภาพเคลือนไหว
3. คลิกเมาส์ขวาทีช่องเฟรมและเลือกคําสังInsert Keyframe หรือกดปุ่มF6 จากนั นจะปรากฏคีย์
เฟรมใหม่พร้อมกับออบเจ็กต์ทีอยู่ในคีย์เฟรมทางด้านหน้าขึ นมา
4. ปรับแต่งออบเจ็กต์หรือคลิกปุ่ม จาก Properties
5. ดับเบิลคลิกซิมโบลใหม่ทีต้องการนํามาเป็นภาพเคลือนไหว

3. 6. คลิกเมาส์ขวาทีช่องเฟรมสุดท้ายและเลือกคําสังInsert Frame หรือกดปุ่มF5 เพือแสดง
ภาพเคลือนไหวในคีย์เฟรมที ให้นานขึ น
ตัวอย่างภาพเคลือนไหวแบบเฟรมต่อเฟรม
) ปรับแต่งภาพเคลือนไหวแบบเฟรมต่อเฟรม
การปรับแต่งภาพเคลือนไหวแบบเฟรมต่อเฟรมสามารถทําได้เพียงคลิกปุ่มEdit Multiple
Frames จากนั นจึงลากMaker ให้ครอบคลุมเพือให้เห็นออบเจ็กต์ทีอยู่ในเฟรมทั งหมด และเมือ
แก้ไขใดๆ ก็จะส่งผลต่อออบเจ็กต์ทีนํามาเป็นผลงานแอนิเมชันทันที

4. 1. คลิกปุ่มEdit Multiple Frames ทางด้านล่างของไทม์ไลน์ จากนั นปรากฏMarker ทีใช้บอก
ขอบเขตการแสดงเนื อหาของเฟรมอืนขึ นมา
2. ลากเมาส์ปรับ Marker ให้ครอบคลุมเฟรมทั งหมดทีต้องการปรับแต่งแก้ไข
3. คลิกไอคอนหรือชือของเลเยอร์เพือเลือกออบเจ็กต์ทั งหมดทีอยู่ในเลเยอร์
4. ปรับแต่งแก้ไขออบเจ็กต์ ได้ตามต้องการ
7. ภาพเคลือนไหวแบบเคลือนที (Motion Tween)
เป็นการกําหนดให้ออบเจ็กต์มีการเคลือนไหวเปลียนตําแหน่งหรือเปลียนคุณสมบัติแบบแน่นอน
โดยไม่เกียวกับการเปลียนแปลงของรูปร่าง ซึงจะต้องสร้างคีย์เฟรมเริมต้นและสิ นสุด จากนั นจึงปรับแต่ง
และกําหนดให้เป็น Motion Tween ก็จะปรากฏภาพเคลือนไหวขึ นมา
) เริมสร้างภาพเคลือนไหวแบบเคลือนที
ออบเจ็กต์ทีนํามาสร้างภาพเคลือนไหวแบบเคลือนทีเป็นได้ทั งObject Drawing ข้อความ ซิ
มโบล ออบเจ็กต์ทีถูกรวมกลุ่ม ยกเว้นMerge Drawing
1. คลิกคีย์เฟรมแรกของภาพเคลือนไหว
2. สร้างออบเจ็กต์หรือองค์ประกอบต่างๆ ทีต้องการให้ปรากฏเป็นภาพเคลือนไหว
3. คลิกเมาส์ขวาทีช่องเฟรมสุดท้ายและเลือกคําสังInsert Keyframe หรือกดปุ่มF6 จากนั นจะ
ปรากฏคีย์เฟรมใหม่พร้อมกับออบเจ็กต์ทีอยู่ในคีย์เฟรมทางด้านหน้าขึ นมา

5. 4. ปรับแต่งแก้ไขออบเจ็กต์ ได้ตามต้องการ
5. คลิกคีย์เฟรมแรกหรือเฟรมระหว่างกลาง
6. ที Properties ในส่วนของTween ให้คลิกเลือกMotion จากนั นปรากฏลูกศรแสดงการสร้างแอ
นิเมชันขึ นมา
2) ปรับแต่งภาพเคลือนไหวแบบเคลือนที
ภายหลังจากการสร้างภาพเคลือนไหวแบบเคลือนทีเรียบร้อยแล้ว ก็สามารถปรับแต่งรูปแบบใน
การเคลือนไหว เช่น ให้มีการปรับขนาด ให้หมุน เปลียนระดับความเร็ว ในการเคลือนที ฯลฯ ได้ โดยหาก
คลิกปุ่มOnion Skin ทางด้านล่างของไทม์ไลน์ ก็จะปรากฏเนื อหาในเฟรมอืนๆ ขึ นมาด้วย
1. คลิกเลือกคีย์เฟรมหรือเฟรมระหว่างกลางทีใช้แสดงภาพเคลือนไหว

6. 2. ที Properties ให้เลือกปรับแต่งรูปแบบการเคลือนไหว โดยมีรายละเอียดดังนี
 Tween ชนิดการเคลือนไหว โดยมี None ยกเลิกการเคลือนไหว, Motion สร้าง
ภาพเคลือนไหวแบบเคลือนที, Shape สร้างภาพเคลือนไหวแบบเปลียนรูปร่าง
 Scale เมือออบเจ็กต์แรกในคีย์เฟรมแรกและคีย์เฟรมสุดท้ายมีขนาดไม่เท่ากัน ให้ปรับขนาด
ออบเจ็กต์ในเฟรมต่างๆ โดยอัตโนมัติ
 Ease ระดับความเร็วในการเคลือนที โดยค่าลบ เป็นการเคลือนทีจากช้าไปเร็ว หรือค่าบวก
เป็นการเคลือนทีจากเร็วไปช้า ส่วน เป็นค่าปกติ ทีมีระดับความเร็วในการเคลือนทีเท่ากัน
ตลอด
 ปุ่มEdit เมือคลิกปุ่ม[edit] จะปรากฏไดอะล็อกบ็อกซ์Custom Ease In / Ease Out ทีใช้
ปรับระดับความเร็วในการเคลือนทีให้แตกต่างกันซึงสามารถทําได้เพียงคลิกเฟรมที
ต้องการ จากนั นจึงลากเมาส์ปรับจุดแองเคอร์ โดยหากเส้นมีความชันก็จะทําให้การ
เคลือนไหวเร็ว
 Rotate นอกจากการหมุนด้วยปุ่มFree Transform แล้ว ยังสามารถกําหนดให้ออบเจ็กต์
หมุนไปในระหว่างการเคลือนทีได้ด้วย โดยNone คือไม่หมุน,Auto หมุนไปตามการ
เปลียนแปลงของออบเจ็กต์ในคีย์เฟรมสุดท้าย,CW หมุนตามเข็มนาฬิกา,CCW หมุนทวน
เข็มนาฬิกา โดยกําหนดจํานวนรอบลงในช่องtimes
7.3 ภาพเคลือนไหวตามเส้นไกด์ (Motion Guide)
ในกรณีทีสร้างภาพเคลือนไหวแบบ Motion Tween ไว้ออบเจ็กต์จะเคลือนทีในลักษณะเป็นแนว
เส้นตรง ซึงหากต้องการกําหนดเส้นทางในการเคลือนทีให้มีรูปแบบอืนๆ เช่น เส้นโค้ง เส้นหยัก เส้น
วงกลม ฯลฯ ก็สามารถสร้างเส้นนําทางขึ นมาใช้กํากับการเคลือนทีของออบเจ็กต์ได้
) เริมสร้างภาพเคลือนไหวตามเส้นไกด์
หากกําหนดให้ออบเจ็กต์มีการเคลือนไหวแบบเคลือนที (Motion Tween) เรียบร้อยแล้ว ก็
สามารถสร้างเส้นไกด์จากปุ่มเครืองมือPen, Pencil, Line ฯลฯ ไว้ภายในเลเยอร์ Motion Guide ได้ ดังนี
1. สร้างและคลิกเลเยอร์ทีกําหนดให้เป็นภาพเคลือนไหวแบบเคลือนที (Motion Tween) ไว้
2. คลิกปุ่มAdd Motion Guide จากนั นเลเยอร์ทีเลือกจะไปอยู่ภายใต้เลเยอร์Motion Guide
ทีสร้างขึ นมาใหม่

7. 3. วาดรูปทรงทีใช้เป็นเส้นทางในการเคลือนทีลงในเลเยอร์ Motion Guide
4. คลิกคีย์เฟรมแรกของภาพเคลือนไหว
5. เคลือนย้ายให้จุดศูนย์กลางของออบเจ็กต์ไปยึดติดกับตําแหน่งเริมต้นของเส้น
6. คลิกคีย์เฟรมสุดท้ายของภาพเคลือนไหว

8. 7. เคลือนย้ายให้จุดศูนย์กลางของออบเจ็กต์ไปยึดติดกับปลายเส้น
) ปรับแต่งภาพเคลือนไหวตามเส้นไกด์
การวาดภาพเคลือนไหวตามเส้นไกด์สามารถปรับแต่งรูปแบบในการเคลือนไหว เช่นเดียวกับ
Motion Tween แต่จะมีค่าคุณสมบัติอืนๆ เพิม ดังนี
1. คลิกคีย์เฟรมหรือเฟรมระหว่างกลางทีใช้แสดงภาพเคลือนไหว
2. ที Properties ให้เลือกปรับแต่งรูปแบบการเคลือนทีบนเส้นไกด์ โดยมีรายละเอียดดังนี
 Orient to Path ให้ออบเจ็กต์เคลือนทีหมุนเอียงไปตามความโค้งของเส้นไกด์
 Sync หากภาพเคลือนไหวเป็นกราฟิกซิมโบล ให้ปรับการเคลือนไหวให้สอดคล้องกับไทม์
ไลน์หลัก
 Snap ยึดติดออบเจ็กต์เข้ากับเส้นไกด์โดยอัตโนมัติ
7.4 ภาพเคลือนไหวแบบเปลียนรูปทรง(Shape Tween)
เมือต้องการให้มีการเปลียนแปลงรูปทรงของออบเจ็กต์จากภาพนิงภาพหนึงไปเป็นอีกภาพหนึง
สามารถทําได้ด้วย Shape Tween โดยโปรแกรมจะสร้างการเปลียนแปลงระหว่างเฟรมต่างๆ ให้โดย
อัตโนมัติ
) เริมสร้างภาพเคลือนไหวแบบเปลียนรูปทรง
การสร้างภาพเคลือนไหวแบบเปลียนรูปทรงจะต้องใช้ออบเจ็กต์แบบ Merge Drawing หรือ
Object Drawing ซึงหากเป็นอินสแตนซ์ ข้อความ หรือออบเจ็กต์ทีรวมกลุ่ม ก็จะต้องแยกส่วน (Break
Apart) ก่อน
1. คลิกคีย์เฟรมแรกของภาพเคลือนไหว
2. สร้างออบเจ็กต์หรือองค์ประกอบต่างๆ ทีต้องการให้ปรากฏเป็นภาพเคลือนไหว

9. 3. คลิกเมาส์ขวาทีช่องเฟรมสุดท้ายและเลือกคําสังInsert Keyframe หรือกดปุ่มF6 จากนั นจะ
ปรากฏคีย์เฟรมใหม่พร้อมกับออบเจ็กต์ทีอยู่ในคีย์เฟรมทางด้านหน้าขึ นมา
4. เปลียนรูปทรงหรือปรับแต่งแก้ไขออบเจ็กต์ ได้ตามต้องการ
5. คลิกคีย์เฟรมแรกหรือเฟรมระหว่างกลาง
6. ที Properties ในส่วนของTween ให้คลิกเลือกShape จากนั นปรากฏลูกศรแสดงการสร้างแอนิ
เมชันขึ นมา

10. รูปจรวดจะค่อยๆ เปลียนกลายเป็นเป้ า
) ปรับแต่งภาพเคลือนไหวแบบเปลียนรูปทรง
เมือสร้างภาพเคลือนไหวแบบ Shape Tween เรียบร้อยแล้ว ก็สามารถเปลียนระดับความเร็วใน
การเคลือนไหวได้เช่นเดียวกับMotion Tween แต่สําหรับรูปทรงทีมีความซับซ้อนก็สามารถสร้าง Shape
Hint เพือกําหนดเป็นตําแหน่งทีใช้ในการเปลียนแปลงรูปทรงของออบเจ็กต์ต้นทางและปลายทางได้ ดังนี
1. คลิกคีย์เฟรมแรกและคลิกเมนูModify > Shape > Add Shape Hint หรือกดปุ่ม Ctrl +
Shift + H จากนั นจะปรากฏShape Hunt สีแดงทีเป็นตัวอักษรa-z ขึ นมา
2. ลากเมาส์นํา Shape Hint มาวางยังเส้นขอบของออบเจ็กต์ต้นทาง
3. คลิกคีย์เฟรมสุดท้าย
4. เมาส์นํา Shape Hint มาวางยังเส้นขอบของออบเจ็กต์ปลายทาง โดยให้เทียบกับตําแหน่งทีได้
วางไว้ในออบเจ็กต์ต้นทาง จากนั นให้ดําเนินการซํ าในขั นตอนที- โดยเรียงจากมุมบนซ้ายวน
ไปแบบทวนเข็มนาฬิกา และเมือเรียงเรียบร้อยแล้วShape Hint ตําแหน่งต้นทางจะเป็นสีเหลือง
ส่วนปลายทางจะเป็นสีเขียว
. ภาพเคลือนไหวแบบบังภาพ (Mask Layer)
เป็นการกําหนดให้แสดงออบเจ็กต์ภายในรูปทรงทีสร้างไว้ เหมือนกับการส่องไฟไปทีตัวละครใน
ลักษณะเป็นสปอตไลต์ โดยสามารถกําหนดให้เป็นภาพนิงหรือภาพเคลือนไหวก็ได้
) เริมสร้างภาพเคลือนไหวแบบบังภาพ
ในการสร้างภาพเคลือนไหวแบบบังภาพจะต้องสร้างรูปทรงไว้ในเลเยอร์ทางด้านบนก่อน
จากนั นสามารถกําหนดการเคลือนไหวในรูปแบบต่างๆ ก็จะปรากฏเป็นภาพเคลือนไหวแบบบังภาพ
ขึ นมา
1. คลิกคีย์เฟรมแรกของภาพเคลือนไหว
2. วาดรูปทรงทีใช้ในการบังภาพ โดยอาจเป็นข้อความหรือรูปทรงใดๆ ก็ได้

11. 3. คลิกเมาส์ขวาทีช่องเฟรมสุดท้ายและเลือกคําสังInsert Keyframe หรือกดปุ่มF6 จากนั นจะ
ปรากฏคีย์เฟรมใหม่พร้อมกับออบเจ็กต์ทีอยู่ในคีย์เฟรมทางด้านหน้าขึ นมา
4. ปรับแต่งแก้ไขรูปทรง ได้ตามต้องการ
5. คลิกคีย์เฟรมแรกหรือเฟรมระหว่างกลาง
6. ที Properties ในส่วนของTween ให้คลิกเลือกShape หรือ Motion และกําหนดค่าคุณสมบัติ
ต่างๆ

12. 7. คลิกเมาส์ขวาบนเลเยอร์เลือกคําสังMask จากนั นเลเยอร์ทางด้านล่างจะถูกแสดงผลตาม
รูปทรงทีสร้างไว้ในเลเยอร์ Mask โดยโปรแกรมจะล็อคพร้อมทั งเปลียนรูปแบบของไอคอน
หน้าเลเยอร์ให้โดยอัตโนมัติ
) ปรับแต่งภาพเคลือนไหวแบบบังภาพ
เมือสร้างภาพเคลือนไหวแบบบังภาพโปรแกรมจะล็อคเลเยอร์ทั งหมดให้โดยอัตโนมัติ ซึงหาก
ต้องการปรับแต่งแก้ไข ก็จะต้องยกเลิกการล็อคก่อน
1. คลิก บนเลเยอร์ Mask เพือยกเลิกการล็อคและการบังภาพ
2. ดับเบิลคลิกรูปทรงทีต้องการปรับแต่งแก้ไข
3. ปรับแต่งแก้ไขรายละเอียดต่างๆ ของรูปทรง
4. คลิกชือซีนหรือคลิกปุ่ม เพือกลับสู่มูฟวีหลัก
5. คลิก ในคอลัมน์ ของเลเยอร์ Mask จากนั นรุปทรงทีใช้ในการบังภาพจะมีลัษณะ
เปลียนแปลงไป