92 

เอกสารประกอบการเรียนการสอน รายวิชา  แอนิเมชนักบัการสรางสรรค (ง40202) 

บทที่ 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 ซึ่งชวยในการนําทาง ซึ่งนับวาเปนลูกเลนสําคัญอีกอยางหนึ่งใน

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

94 

Convert รูปวงกลมเปน Symbol แบบ Graphic เก็บไวใน Library

95 

4.  เลอืกเมนู View� Snapping� Snap to Object  เพื่อจดัตาํแหนงวตัถใุหตดิกบัเสนกริด 

5.  คลกิขวาที่เลเยอร Circle เลอืก Add Motion Guide จะหรือกดปุม  จะไดดงัรูป 

6.  เลือก Pencil Tool  ปรับ Pencil mode การวาดเปนแบบ  Ink  แลวทาํการวาดเสนที่ Guide Layer จากขวาไปซายดังรูป

96 

7.  ที่เฟรมที่ 1 ของ Layer วงกลมสแีดง ลากวงกลมมายังจุดเริม่ตน วางใหเกิดวงกลมเลก็ตรง กลางวงกลมถือวาวงกลมนั้นไดสัมผัสกับเสนแลว 

8.  คลกิที่เฟรมที่ 20 ใหกดปุม F6  หรือ  Insert� Keyframe ทั้ง 2 เลเยอร คอืเลเยอร circle และ เลเยอร Guide circle

97 

9.  ที่เลเยอร circle  เฟรมที่ ลากวงกลมมาที่ปลายสดุของเสนโคง ใหเกดิวงกลมเล็ก ๆ ภายใน ดังรูป 

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

98 

11.  ใหทาํการทดสอบโดยกดปุม Enter จะเห็นวงกลมวิ่งตามGuideline ที่วาดไวดังรูป 

12.  ที่เลเยอร (Layer)  Guideline  คลกิที่ใตตา (ปดตา) เพื่อซอนเสน  Guideline ที่วาดไว 

13.  ทําการทดสอบการแสดงผลโดยกดปุม Enter หรือกดคียลดั Ctrl + Enter สังเกต ภาพเคลือ่นไหวจะไมเสน Guideline 

คลกิเพื่อซอนเสน 

เสน Guideline

99

100 

ใบงานที่ 7 เรื่อง การสรางภาพเคลือ่นไหวแบบMotion Guide วิชา  แอนิเมชนักับการสรางสรรค (ง40202) ใชคูกับ แผนการจัดการเรียนรู หนวยที่ 7 

กิจกรรมท่ี 1ใหนักเรยีนทาํการสรางกอนหนิวิ่งขึน้ภูเขา และลงภูเขาโดยใช ความรูเกี่ยวกับAnimation 

Motion Guide โดยครจูะตัดสนิจากความสวยงามและความคิดสรางสรรค 

.

101 

เฉลยใบงานที่ 7 เรื่อง การสรางภาพเคลือ่นไหวแบบ Motion Guide วิชา แอนิเมชันกบัการสรางสรรค (ง40202) ใชคูกับ แผนการจัดการเรียนรู หนวยที่ 7 

กิจกรรมท่ี 1ใหนักเรยีนทาํการสรางกอนหนิวิ่งขึน้ภูเขา และลงภูเขาโดยใช ความรูเกี่ยวกับAnimation 

Motion Guide โดยครจูะตัดสนิจากความสวยงามและความคิดสรางสรรค 

ขั้นตอนในการทํามีดังนี้ 1.  เปลี่ยนชือ่เลเยอร เปน ภูเขา 2.  เลเยอรภูเขา คลกิเฟรมที่ 1 วาดรูปภูเขา

102 

3.  เพิ่มเลเยอร ตั้งชื่อวา กอนหนิ 4.  ที่เลเยอรกอนหินวาดรูปวงกลมไวเฟรมที่ 1 ตามภาพขางลางนี้ 

5.  เพิ่มเลเยอร Guide Line 6.  ที่เลเยอรนี้ คลิกเฟรมท่ี 1 เริ่มวาดเสน Guideline โดยใช Pencil Tool เลือกแบบ Ink เริ่มวาด 

จากดานขวาไปตามแนวภูเขา

103 

7.  คลกิคาํสั่ง View� Snapping � Snap to Objects 

8.  ลากวงกลมมายังจดุเริ่มตนของเสน Guideline จนเกิดวงกลมเล็กบนวงกลมใหญ

104 

9.  คลกิเมาสที่เฟรม 20 และกดคางลากลงมาจนครบทั้ง 3 เลเยอร จะมีแถบระบายท่ีเฟรม 20 ของทั้ง 3 เลเยอร 

10.  คลิกเมาสขวาเลอืกคําสั่ง Insert Keyframe

105 

11.  ที่เลเยอร วงกลม ลากวงกลมจากเฟรม ที่ 1 มายังเฟรมที่ 20 โดยใหเกิดวงกลมเลก็บน วงกลมใหญ แสดงวา วงกลมติดกับเสน Guideline 

12.  เลือกเฟรมที่ 1 ถึง เฟรมที่ 20 โดยคลิกเมาสเฟรมที่1 บนเลเยอรวงกลม และกดปุม Shift คาง คลกิเฟรมที่ 20 บน เลเยอรเดียวกัน จะ เกิดแถบระบายสดีาํตั้งแตเฟรมท่ี 1 ถึง เฟรมที่ 20 

13.  คลกิเมาสขวาเลือก Create Motion Tween

106 

14.  ทดสอบการแสดงผลโดยกดปุม Enter หรือกดปุม Ctrl + Enter 

15.  ถาไมตองการใหมีเสน Guideline  ใหคลกิที่ใตตา เพื่อซอนเสน Guideline