1. 92
เอกสารประกอบการเรียนการสอน
รายวิชา แอนิเมชันกับการสรางสรรค (ง42104)
บทที่ 5 การสรางภาพเคลือนไหวแบบ Motion Guide Tween
่
สาระสําคัญ
การสรางภาพเคลื่อ นไหวแบบ Motion Guide หรือโดยใช Guideline หรือ Path นั้น เปนการ
สรางภาพเคลื่อนไหว โดยใหวัตถุหรือภาพที่กําหนดเคลื่อนที่ไปตามเสนทางที่ไดกําหนดเอาไวโดยผาน
Guideline ซึ่งชวยในการนําทาง ซึ่งนับวาเปนลูกเลนสําคัญอีกอยางหนึงในการสรางภาพเคลือนไหวดวย
่
่
โปรแกรม Flash ทั้งนี้ Motion Guide สามารถนํามาประยุกตใชสรางภาพเคลื่อนไหว (Animation) ไดอก
ี
หลายรูปแบบ
จุดประสงคการเรียนรู
จุดประสงคปลายทาง
1. นักเรียนสามารถทําใบงานเกียวกับหัวขอที่ไดเรียนไดอยางถูกตอง
่
2. นักเรียนสามารถนําความรูทไดไปใชในการทําโครงงานได
ี่
3. นักเรียนมีความรู และเกิดทักษะดานการจัดการขอมูล และการใชซอฟตแวร
จุดประสงคนาทาง
ํ
1. นักเรียนสามารถที่จะอธิบายเกียวกับขั้นตอนและหลักการในการสรางภาพเคลือนไหว
่
่
(Animation) แบบ Motion Guide ไดอยางถูกตอง
2. นักเรียนสามารถสรางภาพเคลื่อนไหวแบบ Motion Guide ไดถกตองและสวยงาม
ู
สาระการเรียนรู
การสราง Animation แบบ Motion Guide
การสราง ภาพเคลื่อ นไหว (Animation) แบบ Motion Guide หรือโดยใช Guideline หรือ Path
นั้นเปนการสรางภาพเคลื่อนไหว (Animation) โดยใหวัตถุหรือภาพที่กําหนดเคลื่อนที่ไปตามเสนทางที่
ไดกําหนดเอาไวโดยผาน Guideline ซึ่งชวยในการนํา ทาง ซึ่งนับวาเปนลูก เลนสําคัญอีกอยางหนึ่งใน

2. 93
การสราภาพเคลื่อนไหว (Animation) ดวยโปรแกรม Flash ทั้งนี้ Motion Guide สามารถ นํามาประยุกตใ ช
สรางภาพเคลื่อนไหว (Animation) ไดอีกหลายรูปแบบ
ตัวอยาง การสรางภาพเคลื่อนไหว (Animation) แบบ Motion Guide
1. เปลี่ยนชือ Layer เปน Circle
่
2. วาดวงกลมสีแดงไมมีเสนขอบวางไวมุมลางดานขวามือ ดังรูป
3. คลิกที่วงกลม ทําการเปลี่ยนรูปวงกลมใหเปน Symbol โดยไปที่เมนูบาร คลิกเลือกคําสั่ง
Modify „ Convert to Symbol หรือ กดปุม F8 จะขึ้นหนาตาง Convert to Symbol ใหทําการ
ตั้งชื่อ Symbol และเลือกรูปแบบที่ตอ งการ ในที่นี้ใหตั้งชื่อวา G Circle และที่รูปแบบ
(Type) คลิกเลือก Graphic คลิก OK

3. 94
Convert รูปวงกลมเปน Symbol
แบบ Graphic เก็บไวใน Library

4. 95
4. เลือกเมนู View „ Snapping „ Snap to Object เพื่อจัดตําแหนงวัตถุใหตดกับเสนกริด
ิ
5. คลิกขวาที่เลเยอร Circle เลือก Add Motion Guide จะหรือกดปุม
จะไดดงรูป
ั
6. เลือก Pencil Tool ปรับ Pencil mode การวาดเปนแบบ Ink แลวทําการวาดเสนที่
Guide Layer จากขวาไปซายดังรูป

5. 96
7. ที่เฟรมที่ 1 ของ Layer วงกลมสีแดง ลากวงกลมมายังจุดเริมตน วางใหเกิดวงกลมเล็กตรง
่
กลางวงกลมถือวาวงกลมนั้นไดสัมผัสกับเสนแลว
8. คลิกที่เฟรมที่ 20 ใหกดปุม F6 หรือ Insert „ Keyframe ทั้ง 2 เลเยอร คือเลเยอร circle
และ เลเยอร Guide circle

6. 97
9. ที่เลเยอร circle เฟรมที่ ลากวงกลมมาที่ปลายสุดของเสนโคง ใหเกิดวงกลมเล็ก ๆ ภายใน
ดังรูป
10. จากนันใหทาการเลือกเฟรมที่ 1 ถึง เฟรมที่ 20 ของเลเยอร circle และทําการ คลิก ขวา
้
ํ
ภายในชวงเฟรมที่เลือก (เฟรมที่ 1 ถึง เฟรม 20) เลือกคําสัง Create Motion Tween ที่
่
Timeline จะปรากฏลูกศรดําจากเฟรมที่ 1 ถึงเฟรมที่ 20 ดังรูป

7. 98
11. ใหทาการทดสอบโดยกดปุม Enter จะเห็นวงกลมวิ่งตาม Guideline ที่วาดไวดังรูป
ํ

เสน Guideline
12. ที่เลเยอร (Layer) Guideline คลิกที่ใตตา (ปดตา) เพื่อซอนเสน Guideline ที่วาดไว
คลิกเพื่อซอนเสน
13. ทําการทดสอบการแสดงผลโดยกดปุม Enter หรือกดคียลด Ctrl + Enter สังเกต
ั
ภาพเคลือนไหวจะไมเสน Guideline
่

8. 99

9. 100
ใบงานที่ 7 เรื่อง การสรางภาพเคลือนไหวแบบ Motion Guide
่
วิชา แอนิเมชันกับการสรางสรรค (ง42104)
ใชคูกับ แผนการจัดการเรียนรู หนวยที่ 7
กิจกรรมที่ 1
ใหนักเรียนทําการสรางกอนหินวิ่งขึนภูเขา และลงภูเขาโดยใช ความรูเกี่ยวกับ Animation
้
Motion Guide โดยครูจะตัดสินจากความสวยงามและความคิดสรางสรรค
.

10. 101
เฉลยใบงานที่ 7 เรื่อง การสรางภาพเคลือนไหวแบบ Motion Guide
่
วิชา แอนิเมชันกับการสรางสรรค (ง42104)
ใชคูกับ แผนการจัดการเรียนรู หนวยที่ 7
กิจกรรมที่ 1
ใหนักเรียนทําการสรางกอนหินวิ่งขึนภูเขา และลงภูเขาโดยใช ความรูเกี่ยวกับ Animation
้
Motion Guide โดยครูจะตัดสินจากความสวยงามและความคิดสรางสรรค
ขั้นตอนในการทํามีดังนี้
1. เปลี่ยนชือเลเยอร เปน ภูเขา
่
2. เลเยอรภูเขา คลิกเฟรมที่ 1 วาดรูปภูเขา

11. 102
3. เพิ่มเลเยอร ตั้งชื่อวา กอนหิน
4. ที่เลเยอรกอนหินวาดรูปวงกลมไวเฟรมที่ 1 ตามภาพขางลางนี้
5. เพิ่มเลเยอร Guide Line
6. ที่เลเยอรนี้ คลิกเฟรมที่ 1 เริ่มวาดเสน Guideline โดยใช Pencil Tool เลือกแบบ Ink เริ่มวาด
จากดานขวาไปตามแนวภูเขา

12. 103
7. คลิกคําสั่ง View „ Snapping „ Snap to Objects
8. ลากวงกลมมายังจุดเริ่มตนของเสน Guideline จนเกิดวงกลมเล็กบนวงกลมใหญ

13. 104
9. คลิกเมาสที่เฟรม 20 และกดคางลากลงมาจนครบทั้ง 3 เลเยอร จะมีแถบระบายที่เฟรม 20
ของทั้ง 3 เลเยอร
10. คลิกเมาสขวาเลือกคําสั่ง Insert Keyframe

14. 105
11. ที่เลเยอร วงกลม ลากวงกลมจากเฟรม ที่ 1 มายังเฟรมที่ 20 โดยใหเกิดวงกลมเล็กบน
วงกลมใหญ แสดงวา วงกลมติดกับเสน Guideline
12. เลือกเฟรมที่ 1 ถึง เฟรมที่ 20 โดยคลิกเมาสเฟรมที่1 บนเลเยอรวงกลม และกดปุม Shift คาง
คลิกเฟรมที่ 20 บน เลเยอรเดียวกัน จะ เกิดแถบระบายสีดาตั้งแตเฟรมที่ 1 ถึง เฟรมที่ 20
ํ
13. คลิกเมาสขวาเลือก Create Motion Tween

15. 106
14. ทดสอบการแสดงผลโดยกดปุม Enter หรือกดปุม Ctrl + Enter
15. ถาไมตองการใหมีเสน Guideline ใหคลิกที่ใตตา เพื่อซอนเสน Guideline
