เรอง การสราง Animation

แอนเมชน (Animation) เปนการสรางออบเจกตใหมการเคลอนไหว มกนยมใชประกอบในชนงานทวไป ไมวาจะเปนเวบเพจ, เกม , หรอเอกสารสมยใหม โปรแกรม Flash ทเราก าลงใชอยน เปนโปรแกรมทดโปรแกรมหนงทสามารถสรางงานแอนเมชนไดอยางงายดาย และน าไปใชกนอยางแพรหลาย ส าหรบในเรองนเราจะไดเรยนรขนตอนการสรางแอนเมชนในรปแบบตางๆ ทงหมด เชน หากตองการน าออบเจกตหรอภาพหลายๆ ภาพมาเรยงตอกนเปนผลงานแอนเมชนกสามารถท าไดดวย Frame by Frame เมอตองการสรางแอนเมชนใหมการเคลอนไหวสามารถท าไดดวย Classic Tweening หากมออบเจกตต งแต 2 ชนและตองการแปลงจากชนหนงเปนอกชนหนงใหใช Tweening Shape หรอตองการสรางแอนเมชนใหเคลอนไหวไปตามเสนไกดสามารถท าไดดวย Guide Layer และการสรางแอนเมชนในลกษณะ Mask Layer ใชในกรณเมอตองการสรางผลงานแอนเมชนในลกษณะเหมอนมแสงไฟก าลงหมนและสองลงบนภาพ

ชนดของแอนเมชน การสรางแอนเมชนภาพตอเนองดวย Frame by Frame

การสรางแอนเมชนในลกษณะ Frame by Frame เราจะตองมออบเจกต ภาพ หรอไฟลงาน ตงแต 1 ไฟลเปนตนไป และท าการ Insert Keyframe เพอแทรกขอมลแตละชนลงในคยเฟรม หลงจากไดแทรกขอมลเรยบรอยแลว จงท าการทดสอบการแสดงผล โปรแกรมกจะท าการเลนแสดงขอมลทงหมดใหอยางตอเนองจนกลายเปนผลงานแอนเมชนขนมา ซงสามารถเปรยบเทยบการท างานไดกบการท างานของฟลมภาพยนตรจะท าการฉายเฟรมหนงแตละเฟรมจนกลายเปนภาพยนตรขนมา ในทน เราจะมาลองสรางภาพผเสอบน ซงทกๆ เฟรมจะเปลยนทวงทาและต าแหนงไปดงรป

เฟรม 1 เฟรม 6

เฟรม 3

เฟรม 2 เฟรม 4

เฟรม 5

123

1. เลอกทเลเยอรทจะสรางภาพเคลอนไหวแลวคลกทเฟรมในเลเยอรนนทจะเรมสรางในทน ใหสรางไฟลใหม และคลกทเฟรมแรกของ Layer 1

2. หากเฟรมนนยงไมเปนคยเฟรม ใหเลอกเมนค าสง Insert เลอกค าสง Keyframe

3. สรางภาพแรกของการเคลอนไหวขนในเฟรมนน โดยอาจวาดขนเองหรอน าจากไฟลอนเขามาใชดวยเมนค าสง File เลอกค าสง Import กได 4. คลกทเฟรมถดไป แลวเลอกเมนค าสง Insert เลอกค าสง Keyframe

124

5. สรางภาพถดไปของการเคลอนไหวหากน าเขาจากไฟล อยาลมลบรปเกาออกดวย 6. ท าขนตอนท 4 และ 5 ซ าจนครบทกเฟรมของการเคลอนไหว

เลอกเมนค าสง Control เลอกค าสง Play เพอดผล และกบนทกภาพเกบไวในชอ Butterfly

การปรบการเคลอนไหวดวย Onion skinning Onion skinning เปนสวนทชวยใหเราสามารถเหนภาพในเฟรมกอนหนาหรอหลงเฟรมขณะนน หรอทกๆ เฟรมพรอมๆ กนได โดยไมตองไปเลอกเฟรมกลบไปกลบมา ท าใหสามารถปรบแตงภาพในแตละเฟรมใหมการเคลอนไหวอยางนมนวลไดอยางสะดวก สวนของ Onion skinning นจะอยในตอนลางของพาเนล Timeline

Onion Skin Onion Skin Outlines

Edit Multiple Frames Modify Onion Markers

125

การขอดหลายๆ เฟรมพรอมกน 1. คลกทเฟรมหลกทจะด 2. คลกทปม Onion Skin โปรแกรมจะแสดงภาพในเฟรมกอนหนาเฟรมนนให หากตองปรบจ านวนเฟรมทจะด ให

ลากสวนของ Start Onion Skin และ End Onion Skin marker ซงอยในแถบหวของพาเนล Timeline

การปรบการแสดงของ Onion Skinning การแสดงกรอบเฟรมแทนภาพ ใหคลกทปม Onion Skin Outlines หากตองการปรบต าแหนงภาพในเฟรม ใหลากกรอบเฟรมนน หากตองการแกไขภาพในเฟรมใดๆ กได ใหคลกท Edit Multiple Frames

Start Stop Onion Skin Marker

Onion Skin Outlines

126

การปรบการแสดง Onion Skin Marker คลกทปม Modify Onion Marker แลวลกษณะการแสดงผลจากเมน

การสรางแอนเมชนภาพเคลอนไหว ดวย Classic Motion Tweening

การสรางแอนเมชนในลกษณะ Classic Motion Tweening คอ การสรางแอนเมชนโดยใชออบเจกตเพยง

แสดง Onion Skin Marker ในแถบหวของพาเนล Timeline ตลอดไมวาจะเลอกใช Onion Skinning หรอไมกตาม

ลอคไมให Onion Skin Marker เลอนตามเฟรมทเลอก

แสดง 2 เฟรมกอนหนาและถดไปจากเฟรมทเลอก แสดง 5 เฟรมกอนหนาและถดไปจากเฟรมทเลอก แสดงทกเฟรม

Edit Multiple Frames

คลกทเฟรมทจะแกไขแลวคลกป ม Edit

127

ชนเดยว จากนนจงสงใหมการเคลอนไหวและการเปลยนแปลงเกดขนมาทออบเจกตนน ดงตวอยางตอไปนจะท าการสรางแอนเมชนในลกษณะ Classic Tweening คอ ใหรถมการแลนมาถงเฟรมท 5 และมขนาดใหญขน จากนนในเฟรมท 10 ใหจานบนคนนมขนาดเลกลง ถกหมนกลบดาน และมสลดลงไปจากเดมส าหรบขนตอนการท างานสามารถท าได ดงน

1. สรางออบเจกต (รปรถ) ไวในเฟรมท 1 2. คลกขวาเฟรมท 5 และเลอกค าสง Insert Keyframe เฟรมทงหมดจะมความยาวจ านวน

5 เฟรม 3. คลกขวาเฟรมท 10 และเลอกค าสง Create Classic Tween เพอสรางการเคลอนไหว

จนถงเฟรมท 10

4. เลอนวตถลงมาขางลางและคลกปม Free Transform Tool ททลบอกซ 5. ดรากสเมาสท าการขยายขนาดตามตองการ

2.สรางออบเจกตไวในเฟรมท 10และ เลอกค าสง Insert keyframe

1.สรางออบเจกตไวในเฟรมท 1

3.คลกเมาสขวาเฟรมท 10 และเลอกค าสง Create Classic Tween

128

6. คลกเมาสขวาเฟรมท 15 และเลอกค าสง Insert Keyframe จากนนจะปรากฏคยเฟรมขนมาบนเฟรมท 15

7. ดรากสเมาสท าการยอขนาดใหเลกลงไปจากเดม 8. คลกเมนค าสง Modify เลอกค าสง Transform เลอกค าสง Flip Horizontal จากนน

ออบเจกต จะถกหมนกลบดานไป 9. คลกหนาตางค าสง Properties 10. ท Color ใหคลกเลอก Alpha จากนนออบเจกต จะมสลดลงไปจากเดม

5.ดรากสเมาสท าการขยายขนาด

4.คลกป ม Free Transform Tool

6.คลกเมาสขวาเฟรมท 15 และ เลอกค าสง Insert Keyframe

129

11. คลกขวาท keyframe ท 15 เลอก Create Classic Tween

8.คลกเมน Modify > Transform > Flip Horizontal

7.ดรากสเมาสท าการยอขนาด

9.คลกหนาตาง Properties

10.คลกเลอก Alpha

ปรบคา Alpha ตามตองการ

130

จากนนลองทดสอบภาพแอนเมชนทเราสรางขนมาโดยการ กด <Ctrl+Enter>

การสรางแอนเมชนแปลงรปโฉมรปดวย Tweening Shape การสรางแอนเมชนในลกษณะ Tweening Shape คอ การสรางแอนเมชนโดยใชออบเจกต หรอ

ภาพ 2 ชนโดยชนแรกจะวางอยทต าแหนงเรมตนของเฟรม และอกชนหนงจะวางอยทต าแหนงสดทายของเฟรม จากนนจงสงใหมการ รวมออบเจกต หรอภาพทง 2 ชนเขาดวยกน และเมอท าการแสดงผลภาพหนงกจะแปลงกลายเปนอกภาพหนง

ดงตวอยางตอไปนจะท าการสรางแอนเมชนในลกษณะ Tweening Shape โดยเรมแรกจะน า ออบเจกตท 1 ไวเฟรมท 1 และท าการ Insert Keyframe เพอวางออบเจกตท 2 ไวในเฟรมท 10 จากนนจะรวมออบเจกตทง 2 เขาดวยกน เมอท าการเลนแสดงแอนเมชน จากออบเจกตท 1 จะกลายเปนออบเจกตท 2 ใหโดยอตโนมตส าหรบขนตอน การท างานสามารถท าไดดงน

1. สรางออบเจกต ไวในเฟรมท 1 2. คลกเมาสขวาเฟรมท 10 และเลอกค าสง Insert Keyframe จากนนจะปรากฏคยเฟรม

ขนมาบนเฟรมท 10 3. เปลยนรปทรงใหมใหแตกตางจากรปภาพทอยใน เฟรมท 1

131

4. คลกหนาตางค าสง Properties คลกท Tween ใหคลกเลอก Shape จากนนเมอท าการแสดงผลออบเจกตท 1 จะถกรวมและแปลงเปนออบเจกตท 2 ใหโดยอตโนมต

1.สรางออบเจกตไวในเหรมท 1

2.คลกเมาสขวาเฟรมท 10 และ เลอกค าสง Insert Keyframe

3. เปลยนรปทรงใหมใหแตกตางจากรปภาพเดม

132

จากนนลองทดสอบภาพแอนเมชนทเราสรางขนมาโดยการ กด <Ctrl+Enter>

การสรางแอนเมชนตามเสนไกดดวย Guide Layer การสรางแอนเมชนในลกษณะ Guide Layer คอ การสรางแอนเมชนโดยใหออบเจกต

เปลยนแปลงเคลอนทไปตามเสนไกด ส าหรบขนตอนการสรางแอนเมชนในลกษณะน จะตองท าการคลกปม Add Classic Guide ทไทมไลนจากนนสรางเสนไกดทใชในการควบคมทศทางการวงของออบเจกตขนมา

5.คลกเลอก Create shape tween

การแสดงผลออบเจกตท 1 จะถกรวมและแปลงเปนออบเจกตท 2

133

ดงตวอยางตอไปนจะท าการสรางแอนเมชนในลกษณะ Guide Layer คอ ใหใบไมไป ตามเสน Guide ทไดวาดไว

1. สรางออบเจกต ไวในเลเยอรท 2 2. คลกเมาสขวาเฟรมท 20 และเลอกค าสง Insert keyframe เฟรมทงหมดจะมความยาว

จ านวน 20 เฟรม

3. คลกเมาสขวาทเฟรมท 20 และเลอกค าสง Create Classic Tween เพอสรางการเคลอนไหวจนถงเฟรมท 20

2.คลกเมาสขวาเลอกค าสง Insert keyframe

1.สรางออบเจกต

134

4. คลกขวาท เลเยอร 2 เลอกค าสง Add Classic Guide ทไทมไลน จากนนจะปรากฏ เลเยอรใหม ขนมาจ านวน 1 เลเยอร สามารถสงเกตไดวา Layer 2 ไดถอยเยองเขาไป 1 แทบ ซงหมายถง Layer 2 ไดถกไกดเรยบรอยแลว

5. คลกปม Pencil Tool ททลบอกซ 6. ดรากสเมาสสรางเสนพาธทตองการใหเปนแนววงของออบเจกต

7. คลกปม Arrow Tool ททลบอกซ 8. ดรากสเมาสยายออบเจกตมาไวยงต าแหนงสดทายของเสนไกด

5.คลกป ม Pencil Tool

4.คลกขวาเลอกค าสง Add Classic Guide

6.ดรากสเมาสสรางเสนพาธ

135

ปรบทศทางการเคลอนทใหสมจรง จากตวอยางทผานมาเมอทดสอบดการเคลอนทของออบเจกตทงหมด จะสงเกตเหนวาออบเจกตมการเคลอนทไปตามเสนไกดในทศทางแนว 180 องศา ซงท าใหดไมสมจรงเทาทควร ดงนนคณสามารถสงค าสง Orient to path เพอใหออบเจกตเคลอนทไปตามเสนพาธทสรางขน จากนนจงท าการหมนออบเจกตใหเอยงไปตามทศทางการเคลอนทของเสนพาธ และเมอท าการทดสอบการแสดงผลแอนเมชน ผลงานทสรางขนกจะมการเคลอนทไดอยางสมจรงมากขน

1. คลกเมนค าสง Window เลอกค าสง Properties ใหปรากฎเครองหมายถก 2. คลกเฟรมท 1 ของ Layer 1 เพอเลอกออบเจกต ต าแหนงแรกสด ขณะทอยในเลเยอร 2 3. คลกใหปรากฏเครองหมายถกท Orient to path เพอใหออบเจกตเคลอนทไปตามเสน

พาธทสรางขน

4. คลกปม Free Transform Tool ททลบอกซ 5. ดรากสเมาสหมนออบเจกตไปในทศทางเดยวกบเสนพาธ

7.คลกป ม Arrow Tool

9.ดรากสเมาสยายออบเจกต

136

6. คลกเฟรมท 15 ของ Layer 1 เพอเลอกออบเจกต ต าแหนงสดทายขณะทอยในเลเยอร 1 7. คลกใหปรากฏเครองหมายถกท Orient to path เพอใหออบเจกตเคลอนทไปตามเสน

พาธทสรางขน 8. คลกปม Free Transform Tool ททลบอกซดรากสเมาสหมนออบเจกตไปใน

ทศทางเดยวกนกบเสนพาธ

คลกเฟรมท 1 ของ Layer 2

ดรากสเมาสหมนออบเจกต

คลกใหปรากฏเครองหมายถกท Orient to path

คลกป ม Free Transform Tool

137

จากนนลองทดสอบภาพแอนเมชนทเราสรางขนมาโดยการ กด <Ctrl+Enter>

คลกเฟรมท 20 ของ Layer 2

คลกป ม Free Transform Tool

ดรากสเมาสหมนออบเจกต คลกใหปรากฏเครองหมายถกท Orient to path

138

สรางแอนเมชนสองไฟลงบนภาพดวย Mask Layer การสรางแอนเมชนในลกษณะ Mask Layer คอ การสรางแอนเมชนโดยแสดงภาพภายใน

ขอบเขตทก าหนดไวซงมลกษณะเหมอนกบการสองไฟลงบนเลเยอรทไดถก Mask ไว ดงนนจงตองมอยางนอย 2 เลเยอร เลเยอรหนงไวส าหรบใสขอมลทจะถก Mask เชน ออบเจกต ภาพ ซงสามารถเหนขอมลทอยในเลเยอรนได กตอเมอไดมการน าขอมลของอกเลเยอรหนงจะท าการ Mask มาวางซอนทบหรอเคลอนทผาน จงสามารถเปรยบไดวาเลเยอรทจะท าการ Mask น เปนเสมอนล าแสงไฟทสองลงไปยงขอมลของเลเยอรทจะถก Mask นนเอง ตวอยางตอไปนจะท าการสรางแอนเมชนในลกษณะ Mask Layer โดยเลเยอร ท 1 ทจะถก Mask ไดมขอมลเปนรปวงกลมกจะเคลอนสองผานไปทรปภาพ ส าหรบขนตอนการท างานสามารถท าได ดงน

1. คลกเมนค าสง Modify เลอกค าสง Document จากนนจะปรากฏไดอะลอกบอกซ Document Properties ขนมา

2. ท Background Color ใหคลกเลอกสเทา จากนนทฉากหลงจะมพนเปนสด า 3. คลกปม OK เพอยนยนค าสง

คลกเมน Modify > Document

คลกเลอกสเทา

คลกป ม OK

139

4. คลกเมนค าสง File เลอกค าสง Import แลวเลอก Import to stage เพอน าไฟลภาพ ทตองการเขามา

5. คลกเมาสขวาเฟรมท 30 และเลอกค าสง Insert Frame เฟรมทงหมดจะมความยาวจ านวน 30 เฟรม

6. คลกปม Insert Layer ทไทมไลน จากนนจะปรากฏเลเยอรใหม ขนมาจ านวน 1 เลเยอร

7. สรางออบเจกต ไวใน Layer 2

คลกเมน File > Import >Import to Stage

คลกเมาสขวาเฟรมท 30 และ เลอกค าสง Insert Frame

140

8. คลกเมาสขวาเฟรมท 30 เลอก Insert Keyframe และเลอกค าสง Create Classic Tween เพอสรางการเคลอนไหวจนถงเฟรมท 30

9. ดรากสเมาสยายออบเจกตไปอกดานหนงของออบเจกตทอยใน Layer 1

สรางออบเจกตไวใน Layer 2

คลกป ม Insert Layer

คลกเมาสขวาเฟรมท 30 เลอก Insert Keyframeและเลอกค าสง Create Classic Tween

ดรากสเมาสยายออบเจกต

141

10. คลกเมนค าสง Window เลอกค าสง Properties ใหปรากฏเครองหมายถก 11. คลกเฟรมไหนกไดระหวางเฟรมท 1 ถง เฟรม 30 ของ Layer 2 เพอเลอกออบเจกต

ต าแหนงแรกสดทอยในเลเยอร 2 12. ท Rotate ใหคลกเลอก CW เพอใหลกษณะการหมนเปนแบบตามเขมนาฬกา 13. พมพจ านวนทตองการใหมการหมน เปน 3 Times ออบเจกตจะถกหมนตามเขมนาฬกา

ไปเปนจ านวน 3 รอบ 14. คลกเมาสขวาทเลเยอร 2 เลอกค าสง Mask จากนนออบเจกตในเลเยอรท 1 ทไดถก

Mask ไวอย จะปรากฏขนมาเฉพาะบรเวณทออบเจกต ในเลเยอร 2 วางซอนทบไวอยเทานน

คลกเฟรมไหนกไดของ Layer 2

คลกเลอก CW พมพจ านวนทตองการใหมการหมน

คลกเมาสขวาทเลเยอร 2 เลอกค าสง Mask

142

จากนนทดสอบภาพแอนเมชนทเรา Mask Layer ขนมาโดยการ กด <Ctrl+Enter>