พื้นฐาน adobe flash cs3 ตอนที่7

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

Upload: thanawat-boontan

Post on 23-Jul-2015

114 views

Category:

Education


7 download

TRANSCRIPT

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

CHAPTER 7

ANIMATION สรางผลงานแอนิเมชั่น

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

7. Animation [ สร้างผลงานแอนิเมชั น ] 7.1 ภาพเคลือนไหวแบบเฟรมต่อเฟรม (Frame by Frame)

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

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

อย่างต่อเนืองก็จะปรากฏเป็นภาพเคลือนไหวขึ นมา

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

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

ของออบเจ็กต์เดิม ดังตัวอย่าง

1. คลิกคีย์เฟรมแรกของภาพเคลือนไหว

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

3. คลิกเมาส์ขวาทีช่องเฟรมและเลือกคําสัง Insert Keyframe หรือกดปุ ่ ม F6 จากนั นจะปรากฏคีย์

เฟรมใหม่พร้อมกับออบเจ็กต์ทีอยู่ในคีย์เฟรมทางด้านหน้าขึ นมา

4. ปรับแต่งออบเจ็กต์หรือคลิกปุ ่ ม จาก Properties

5. ดับเบิลคลิกซิมโบลใหม่ทีต้องการนํามาเป็นภาพเคลือนไหว

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

6. คลิกเมาส์ขวาทีช่องเฟรมสุดท้ายและเลือกคําสัง Insert Frame หรือกดปุ ่ ม F5 เพือแสดง

ภาพเคลือนไหวในคีย์เฟรมที ให้นานขึ น

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

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

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

Frames จากนั นจึงลาก Maker ให้ครอบคลุมเพือให้เห็นออบเจ็กต์ทีอยู่ในเฟรมทั งหมด และเมือ

แก้ไขใดๆ ก็จะส่งผลต่อออบเจ็กต์ทีนํามาเป็นผลงานแอนิเมชันทันที

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

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

ขอบเขตการแสดงเนื อหาของเฟรมอืนขึ นมา

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

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

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

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

เป็นการกําหนดให้ออบเจ็กต์มีการเคลือนไหวเปลียนตําแหน่งหรือเปลียนคุณสมบัติแบบแน่นอน

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

และกําหนดให้เป็น Motion Tween ก็จะปรากฏภาพเคลือนไหวขึ นมา

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

ออบเจ็กต์ทีนํามาสร้างภาพเคลือนไหวแบบเคลือนทีเป็นได้ทั ง Object Drawing ข้อความ ซิ

มโบล ออบเจ็กต์ทีถูกรวมกลุ่ม ยกเว้น Merge Drawing

1. คลิกคีย์เฟรมแรกของภาพเคลือนไหว

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

3. คลิกเมาส์ขวาทีช่องเฟรมสุดท้ายและเลือกคําสัง Insert Keyframe หรือกดปุ ่ ม F6 จากนั นจะ

ปรากฏคีย์เฟรมใหม่พร้อมกับออบเจ็กต์ทีอยู่ในคีย์เฟรมทางด้านหน้าขึ นมา

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

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

5. คลิกคีย์เฟรมแรกหรือเฟรมระหว่างกลาง

6. ที Properties ในส่วนของ Tween ให้คลิกเลือก Motion จากนั นปรากฏลูกศรแสดงการสร้างแอ

นิเมชันขึ นมา

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

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

การเคลือนไหว เช่น ให้มีการปรับขนาด ให้หมุน เปลียนระดับความเร็ว ในการเคลือนที ฯลฯ ได้ โดยหาก

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

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

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

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

ทีสร้างขึ นมาใหม่

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

3. วาดรูปทรงทีใช้เป็นเส้นทางในการเคลือนทีลงในเลเยอร์ Motion Guide

4. คลิกคีย์เฟรมแรกของภาพเคลือนไหว

5. เคลือนย้ายให้จุดศูนย์กลางของออบเจ็กต์ไปยึดติดกับตําแหน่งเริมต้นของเส้น

6. คลิกคีย์เฟรมสุดท้ายของภาพเคลือนไหว

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

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. สร้างออบเจ็กต์หรือองค์ประกอบต่างๆ ทีต้องการให้ปรากฏเป็นภาพเคลือนไหว

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

3. คลิกเมาส์ขวาทีช่องเฟรมสุดท้ายและเลือกคําสัง Insert Keyframe หรือกดปุ ่ ม F6 จากนั นจะ

ปรากฏคีย์เฟรมใหม่พร้อมกับออบเจ็กต์ทีอยู่ในคีย์เฟรมทางด้านหน้าขึ นมา

4. เปลียนรูปทรงหรือปรับแต่งแก้ไขออบเจ็กต์ ได้ตามต้องการ

5. คลิกคีย์เฟรมแรกหรือเฟรมระหว่างกลาง

6. ที Properties ในส่วนของ Tween ให้คลิกเลือก Shape จากนั นปรากฏลูกศรแสดงการสร้างแอนิ

เมชันขึ นมา

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

รูปจรวดจะค่อยๆ เปลียนกลายเป็นเป้า

) ปรับแต่งภาพเคลือนไหวแบบเปลียนรูปทรง

เมือสร้างภาพเคลือนไหวแบบ 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. วาดรูปทรงทีใช้ในการบังภาพ โดยอาจเป็นข้อความหรือรูปทรงใดๆ ก็ได้

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

3. คลิกเมาส์ขวาทีช่องเฟรมสุดท้ายและเลือกคําสัง Insert Keyframe หรือกดปุ ่ ม F6 จากนั นจะ

ปรากฏคีย์เฟรมใหม่พร้อมกับออบเจ็กต์ทีอยู่ในคีย์เฟรมทางด้านหน้าขึ นมา

4. ปรับแต่งแก้ไขรูปทรง ได้ตามต้องการ

5. คลิกคีย์เฟรมแรกหรือเฟรมระหว่างกลาง

6. ที Properties ในส่วนของ Tween ให้คลิกเลือก Shape หรือ Motion และกําหนดค่าคุณสมบัติ

ต่างๆ

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

7. คลิกเมาส์ขวาบนเลเยอร์เลือกคําสัง Mask จากนั นเลเยอร์ทางด้านล่างจะถูกแสดงผลตาม

รูปทรงทีสร้างไว้ในเลเยอร์ Mask โดยโปรแกรมจะล็อคพร้อมทั งเปลียนรูปแบบของไอคอน

หน้าเลเยอร์ให้โดยอัตโนมัต ิ

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

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

ต้องการปรับแต่งแก้ไข ก็จะต้องยกเลิกการล็อคก่อน

1. คลิก บนเลเยอร์ Mask เพือยกเลิกการล็อคและการบังภาพ

2. ดับเบิลคลิกรูปทรงทีต้องการปรับแต่งแก้ไข

3. ปรับแต่งแก้ไขรายละเอียดต่างๆ ของรูปทรง

4. คลิกชือซีนหรือคลิกปุ ่ ม เพือกลับสู่มูฟวีหลัก

5. คลิก ในคอลัมน์ ของเลเยอร์ Mask จากนั นรุปทรงทีใช้ในการบังภาพจะมีลัษณะ

เปลียนแปลงไป