แบบ ป.ป.ช. 1 ตารางแสดงวงเงินงบประมาณที่ได้รับจัดสรรและราคา ... · 4.1 แบบ
แบบ Motion Guide - kts.ac.thkts.ac.th/kts/kanghan/animation/d05.pdf · 7....
15
ﾁｰｭｵｦｦｳｰｵｦﾁｦｸ･ｵｦｭｰ ｦｵ･ｪｷｵ ﾂｰｷﾁ､ｴｴｵｦｭｦoｵｭｦｦr ｸﾉ ｵｦｭｦoｵ｣ｵ｡ﾁｨｺﾉｰﾅｮｪﾂ 0RWLRQ *XLGH 7ZHHQ ｭｵｦｳｭﾎｵｴ ｵｦｭｦoｵ｣ｵ｡ﾁｨｺﾉｰﾅｮｪﾂ 0RWLRQ *XLGH ｮｦｺｰﾃ･ﾄo *XLGHOLQH ｮｦｺｰ 3DWK ｴﾊ ﾁ}ｵｦ ｭｦoｵ｣ｵ｡ﾁｨｺﾉｰﾅｮｪ ﾃ･ﾄｮoｪｴｻｮｦｺｰ｣ｵ｡ｸﾉﾎｵｮﾁｨｺﾉｰｸﾉﾅｵ､ﾁｭoｵｸﾉﾅoﾎｵｮﾁｰｵﾅｪoﾃ･nｵ *XLGHOLQH ｹﾉnｪ･ﾄｵｦﾎｵｵ ｹﾉｴｪnｵﾁ}ｨｼﾁｨnｭﾎｵｴｰｸｰ･nｵｮｹﾉﾄｵｦｭｦoｵ｣ｵ｡ﾁｨｺﾉｰﾅｮｪoｪ･ ﾃｦﾂｦ､ )ODVK ｴﾊｸﾊ 0RWLRQ *XLGH ｭｵ､ｵｦﾎｵ､ｵｦｳ･ｻrﾄoｭｦoｵ｣ｵ｡ﾁｨｺﾉｰﾅｮｪ $QLPDWLRQ ﾅoｰｸ ｮｨｵ･ｦｼﾂ ｻｦｳｭrｵｦﾁｦｸ･ｦｼo ｻｦｳｭrｨｵ･ｵ ｴﾁｦｸ･ｭｵ､ｵｦﾎｵﾄｵﾁｸﾉ･ｪｴｮｴｪoｰｸﾉﾅoﾁｦｸ･ﾅoｰ･nｵｼoｰ ｴﾁｦｸ･ｭｵ､ｵｦﾎｵｪｵ､ｦｼoｸﾉﾅoﾅﾄoﾄｵｦﾎｵﾃｦｵﾅo ｴﾁｦｸ･､ｸｪｵ､ｦｼo ﾂｨｳﾁｷｴｬｳoｵｵｦｴｵｦoｰ､ｼｨ ﾂｨｳｵｦﾄoｰ｢rﾂｪｦr ｻｦｳｭrﾎｵｵ ｴﾁｦｸ･ｭｵ､ｵｦｸﾉｳｰｷｵ･ﾁｸﾉ･ｪｴｴﾊｰﾂｨｳｮｨｴｵｦﾄｵｦｭｦoｵ｣ｵ｡ﾁｨｺﾉｰﾅｮｪ $QLPDWLRQ ﾂ 0RWLRQ *XLGH ﾅoｰ･nｵｼoｰ ｴﾁｦｸ･ｭｵ､ｵｦｭｦoｵ｣ｵ｡ﾁｨｺﾉｰﾅｮｪﾂ 0RWLRQ *XLGH ﾅoｼoｰﾂｨｳｭｪ･ｵ､ ｭｵｦｳｵｦﾁｦｸ･ｦｼo ｵｦｭｦoｵ $QLPDWLRQ ﾂ 0RWLRQ *XLGH ｵｦｭｦoｵ ｣ｵ｡ﾁｨｺﾉｰﾅｮｪ $QLPDWLRQ ﾂ 0RWLRQ *XLGH ｮｦｺｰﾃ･ﾄo *XLGHOLQH ｮｦｺｰ 3DWK ｴﾊﾁ}ｵｦｭｦoｵ｣ｵ｡ﾁｨｺﾉｰﾅｮｪ $QLPDWLRQ ﾃ･ﾄｮoｪｴｻｮｦｺｰ｣ｵ｡ｸﾉﾎｵｮﾁｨｺﾉｰｸﾉﾅｵ､ﾁｭoｵｸﾉ ﾅoﾎｵｮﾁｰｵﾅｪoﾃ･nｵ *XLGHOLQH ｹﾉnｪ･ﾄｵｦﾎｵｵ ｹﾉｴｪnｵﾁ}ｨｼﾁｨnｭﾎｵｴｰｸｰ･nｵｮｹﾉﾄ
Transcript of แบบ Motion Guide - kts.ac.thkts.ac.th/kts/kanghan/animation/d05.pdf · 7....
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
