1

ใบความร 3

วชา การใชโปรแกรมสอประสม รหส ง23201 ชนมธยมศกษาปท3 หนวยการเรยนรท 3 เรอง การสรางภาพเคลอนไหว/Animation ดวยโปรแกรม Flash

เรอง การสรางภาพเคลอนไหว/Animation ดวยโปรแกรม Flash การสรางภาพยนต หรอภาพเคลอนไหวใด กคอการสรางอรยาบถของภาพใหมการเปลยนแปลงไปตามชวงเวลา เชน การวาดการตนลงกระดาษแตละใบ ใหมอรยาบถแตกตางกนไปเมอนาการตนทกภาพมาแสดงอยาง รวดเรว กจะทาใหภาพมลกษณะเปนภาพเคลอนไหว เมอมการนาคอมพวเตอรมาใชสรางสรรคภาพยนต หรอภาพเคลอนไหว เฟรมกเปรยบเสมอนกระดาษแตละใบ ทมการวาดอรยาบถของการตนลงไป และ Timeline กคอชวงเวลาทใชควบคมการนาเสนอดงนน Frame และ Timeline จงเปนสวนสาคญอกสวนในการสรางภาพเคลอนไหวของ Flash Timeline เปรยบเสมอนเวลาทใชในการสรางภาพเคลอนไหว หรอ Movie โปรแกรมจะแบงชวง ใหหนวยละ 5 ชวงเวลา

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

Playhead ตาแหนงของเฟรมปจจบนทจะปรากฏบน Stage

2

เฟรม และคยเฟรม (Frame & Keyframe) คยเฟรม คอ การกาหนดตาแหนงการสรางภาพเคลอนไหวทมเนอหาภายในแตกตางกนไปโดยตาแหนงเฟรมใดทตองการกาหนดใหมสถานะเปน Keyframe ใหใชคาสง Insert, Timeline, Keyframe เฟรม คอ การกาหนดตาแหนงภาพทไมมการเปลยนแปลง ไมมการเคลอนไหว เชนการทาฉากหลง โดยตาแหนงเฟรมใดทตองการกาหนดใหมสถานะเปน Frame ใหใชคาสง Insert, Timeline, Frame ควบคมเฟรม การควบคมเฟรม เชน การใสคยเฟรม หรอแทรกเฟรม นอกจากใชคาสงจากเมน Insert ยงสามารถใช Context Menu ซงเปนวธทสะดวกกวา โดยคลกขวาในเฟรมทตองการ แลวเลอกคาสงทตองการ ลบเฟรม

เลอกเฟรมทตองการลบ (สามารถใชการคลกเมาสขวาในเฟรมทตองการ) เลอกคาสง Remove, Frames

การสราง Animation แบบ Frame by Frame Movie แบบ Frame by frame เปน Movie ทมการเปลยนแปลงของวตถตลอดเวลาและวตถมการเปลยนแปลงทไมตอเนอง หรอเปลยนแปลงทกสวนอยางไมสมาเสมอไมเปนมาตรฐาน เชน ดอกไมบาน, การงอกของตนไม, การบนของนก, การเดนของสตว การสรางจะตองสรางตนแบบงานหลายชน การสราง Movie แบบนวตถทนามาสรางจะอยในสถานะใดกได การสราง Animation แบบ Motion Tweening Movie แบบ Motion Tweening เปน Movie ทอาศยหลกการเปลยนรปทรง ขนาดโดยการคานวณของโปรแกรม การสรางกระทาไดงาย โดยสรางเฉพาะภาพแรก กบภาพสดทาย โปรแกรม Flash จะเตมขบวนการเปลยนแปลงใหโดยอตโนมต เชน ลกบอลตกจากทสงมากระทบพน, การบนของเครองบน, การหมนรอบวตถใดๆ การสรางMovie แบบน วตถจะตองอยในสถานะ Symbol กอน การสราง Animation แบบ Shape Tweening Movie แบบ Shape Tweening เปน Movie ทวตถมการเปลยนแปลงรปทรง รปรางจากรปตนฉบบไปอยางสนเชง เชน เปลยนจากสเหลยมเปนวงกลม, เปลยนจากไขนกเปนตวนก การสราง Movie แบบน วตถจะตองอยในสถานะ Break Apart การสราง Animation แบบ เอคชนสครปต (Action Script)

เปนภาษาโปรแกรมทนามาใช เพมประสทธภาพการทางาน สามารถทาการตอบโต กบผใชได (Interactive) เชน การสงให

ภาพเคลอนไหวหรอหยดเคลอนไหว ActionScript ถกนามาใช เมอมการกระทาเกดขน (Event) เปนภาษาทใชในการเขยนโปรแกรม (programming language) ตวอยางการสราง Animation แบบ Frame by Frame ดวยโปรแกรม Flash 1. New File หรอ กด Ctrl + N

2. คลกเฟรมท 1 สรางวงกลม 1 วง พรอมพมพเลข 1 ลงไป ดงรป

3

2

3. สรางเฟรมท 2 โดยกดปม F6 เพอเพมคยเฟรม จะไดภาพเหมอนเฟรมแรก จากนนคลกทเมน Edit > Select All แลวค

ลกท Edit > Copy เพอคดลอกวงกลมพรอมตวเลข แลวคลก Edit > Paste in Place เพอวางรปวงกลมซอนในตาแหน

งเดม แลวใช Arrow Tool เลอกทงรปแลวยายไปทางขวาของวงกลมเดม โดยในขณะทยายใหกดปม Shift บนคยบอรดคางไวด

วย จากนน ใหเปลยนตวเลขในวงกลมขวามอในเฟรมท 2 จากเลข 1 เปนเลข 2

3

4. สรางเฟรมท 3 โดยกดปม F6 เพอเพมคยเฟรม จะไดภาพเหมอนเฟรมท 2 จากนนใช Arrow Tool เลอกวงกลมดานขวามอ

พรอมเลข 2 ในวงกลม แลวคลกท Edit >Copy เพอคดลอก แลวคลก Edit > Paste in Place เพอวางรปวงกลมซอนใน

ตาแหนงเดม แลวใช Arrow Tool เลอกตาแหนงวงกลมท 2 ทงรปแลวยายไปทางขวา โดยในขณะทยายใหกดปม Shift บน

คยบอรดคางไวดวย จะไดวงกลมชนท 3 จากนนใหเปลยนตวเลขในวงกลมจากเลข 2 เปนเลข 3

4

4

5. จากนนใชเมาสคลกทพนทวางบน Stage แลวกาหนด Frame Rate ใหเทากบ 1 เฟรมตอวนาท แลวทดลองกดปม Enter เพอดตวอยาง หรอกด Ctrl + Enter เพอดผลงาน

5

ตวยางการสรางภาพเคลอนไหวแบบ Frame by Frame (เฟรมตอเฟรม)

Frame by Frame คอ การนาภาพมาใสไวในเฟรม ทาการกาหนด KeyFrame

KeyFarme = Frame ทถกกาหนดใหมการเปลยนแปลงของวตถเพอสรางการเคลอนไหว การกาหนดคยเฟรมทมชองวางหางกน

ภาพทเปลยนแปลงอาจกระตกได เหมาะกบภาพทมการเปลยนแปลงอยางรวดเรวและซบซอน ซงตวอยางทนามาใหฝกตอไปนคอ

การสรางใหตวเลขนบถอยหลง เชน หา ส สาม สอง หนง มขนตอนการสรางดงน

1. เปดโปรแกรม Adobe Flash ขนมา ใหกาหนดสของพนหลง โดยไปท Properties > Background เลอกสท

ตองการ ดงภาพ

5

2. เมอกาหนดสพนหลงเรยบรอยแลวใหสรางรปวงกลมมา 1 รป เลอกสทตองการโดยคลกเมาสเลอกทรปภาพ แลวคลก

ท Fill color เลอกสทตองการ ดงภาพ

3. ใหสรางเลเยอรใหมขนมา 1 เลเยอร เพอจะพมพขอความลงไป (หมายเหต: การสรางเลเยอรใหมขนมานนเพอตองการ

แยกขอความและพนหลงใหอยคนละเลเยอร) โดยไปท Insert Layer

6

คลก 1 ครง แลวจะได Layer 2

4. เมอสรางเลเยอรแลวใหคลกเลอกทเลเยอร 2 เลอกเครองมอ Text Tool (T) หรอกดตว T ทคยบอรด

5. ใหสรางขอความตรงกลางรปวงกลม ดงภาพ

6. โดยเลอกทเลเยอร 1 แลวคลกทเฟรมท 10 กด F5 (Insert Frame)

7. คลกเลอกเลเยอร 2 เลอกทเฟรมท 10 กด F6 เพอ Insert Keyframe กาหนดการเคลอนไหว เมอกาหนด

Keyframe แลว ใหทาการเปลยนตวเลข โดยเลอกเครองมอ Text Tool (T) > คลกทขอความแลวเปลยนจาก 10

เปน 9 ดงภาพ

7

8. ทาอยางนไปจนถงเลข 1 ใหแตละชองหางกน 10 เฟรม เชน เลข 8 กาหนดคยเฟรมทเฟรม 20, เลข 7 กาหนดคย

เฟรมทเฟรม 30 ฯลฯ

9. เมอทาตามขนตอนเสรจจนถงเลขหนงแลว ใหเลอกทเฟรม 100 แลวกด F6 และเลเยอร 1 กกด F5 ทเฟรม 100

เหมอนกน (หมายเหต:เพราะตองการใหเลขหนงแสดงผลเทาตวเลขอนๆ) ไดผลลพธดงน

Layer 1 กด F5 (Insert Frame) Layer 2 กด F6 (Insert Keyframe)

ขอสงเกต: แตละตวเลข จะหางกน 10 เฟรม

8

10. ขนตอนนจะใหขอความแสดงหลงจากทตวเลขนบจาก 10-1 โดยการสรางฉากใหม หรอทเรยกวา Scene คลกท

Insert > Scene จะไดดงภาพ

11. ใหทาการสรางขอความขนมาโดยใชเครองมอ Text Tool (T) พมพขอความทตองการ ดงภาพ

12. ทาใหขอความเปลยนสเปนสตางๆ โดยใชวธ Insert Keyframe เหมอนกบการเปลยนตวเลข

13. เลอกเฟรมท 10 กด F6 แลวทาการเปลยนสขอความ โดยเลอกเลอกเครองมอ Selection Tool (V) คลกทขอความ

แลวเลอก Text (fill) color เลอกสทตองการ ดงภาพ

9

14. ทาการกาหนด Keyframe จนถงเฟรมท 40 โดยใหหางกนชองละ 10 เฟรม และกด F5 ทเฟรม 50 (เพอใหสสดทาย

แสดงเทากบเฟรมทผานมา) แตละขอความใหสแตกตางกน ดงภาพ

15. กด Ctrl+Enter เพอดผลลพธทงหมด ทาการ SAVE

หมายเหต: ถาตองการกลบไปแกไขหรอปรบแตงฉากทหนง หรอทเรยกวา Scene ใหเลอกท Edit Scene เลอก

Scene ทตองการ

16. ถาตองการใหแสงผลลพธเพยง Scene เดยว ใหเลอก Scene ทตองการ แลว กด Alt+Ctrl+Enter

10

Edit S

ตวอยางการสราง Animation แบบ Shape Tweening

1. New File หรอ กด Ctrl + N 2. คลกเฟรมท 1 สรางรปสเหลยม 1 รป

3. คลกทเฟรมท 30 เลอกคาสง Insert > Key frame หรอกดปม F6 เพอเพมคยเฟรม 4. กดปม Delete ทคยบอรด1 ครง เพอลบรปสเหลยมออก แลวสรางรปวงกลมขนมาแทนทสเหลยม จะไดภาพเฟรมท 1 เปนสเหลยมและภาพเฟรมท 30 เปนรปวงกลม

11

5. คลกทเฟรมท 1 กาหนด Properties ในชอง Tween เปน Shape จะพบวามเสน เชอมระหวางเฟรมท 1 กบ เฟรมท 30

4

5

3

6. ทดสอบการทางานโดยกด Ctrl+Enter หรอคลก Play ท Windows Controller จะพบวา รปสเหลยมจะเปลยนแปลงรปร

างกลายเปนรปวงกลม

12

การสราง Animation แบบ Motion Tweening

1. New File หรอ กด Ctrl + N

2. คลกทเฟรมท 1 แลวพมพขอความลงบน Stage

3. เลอกเครองมอ Arrow Tool แลวคลกเลอกขอความ “YOUNG ICT” นาไปวางไวทมมลางซายของ stage หรอในจดทตอง

การ

4. คลกทเฟรม 30 เลอก Insert > Key frame หรอกด F6 จะไดขอความเหมอนเดม (“YOUNG ICT”) ทเฟรม 30

จากนนใชเครองมอ Arrow Tool คลกลากขอความไปวางไวทมมบนขวาของ stage

3

2

13

4

5. กาหนด Properties ในชอง Tween เปน Motion กาหนด Rotate เปนแบบ CW (ตามเขมนาฬกา) จานวน 1 รอบ จะเกด

เสนเชอมระหวางเฟรมท 1 กบเฟรมท 30 ท Timeline

14

6. ทาการทดสอบโดยการกดปม Play ท Window > Tool bar > Controller จะไดขอความ “YOUNG ICT” หมน 1 รอบ

จากจดเรมตนไปยงจดสดทาย

15

การนาเทคนค Tween Animation และ Frame by Frame มาประยกตใช

1. ตงคาพนหลงใหมขนาด 800 x 600 โดยไปท Properties > Size >Document Properties > OK

2. ใหนาภาพมาสรางเปนภาพพนหลง โดยไปท File > Import > Import to Stage หรอ Ctrl+R เลอกภาพท

ตองการแลวคลก Open

16

3. เมอไดภาพทตองการใหขยายภาพ โดยเลอกเครองมอ Free Transform Tool หรอกดตว Q กได แลวทาการขยาย

ภาพใหพอดกบพนหลง ดงภาพ

4. ให Insert Frame ทเฟรม 80 โดยกด F5 ทเฟรม 80 เพราะจะสรางการเคลอนไหวมความยาวท 80 เฟรม

17

5. ใหวาดรปตจดหมายและซองจดหมายเพอจะสรางการเคลอนไหวใหซองจดหมายเขาไปอยในตจดหมาย โดยมขนตอน

ดงน

6. ใหสราง Layer ใหมขนมา โดยไปท Insert Layer ใหเปลยนชอ Layer 2 เปนตจดหมาย โดย Dabble Click

ท Layer 2 แลวพมพชอลงไป (หมายเหต: การสรางเลเยอรใหมนนเพราะจะใหเลเยอรภาพและเลเยอรพนหลงอยคน

ละเลเยอรเพอใหงายตอการแกไข)

7. ใหวาดรปตจดหมาย โดยเลอกเครองมอ Rectangle Tool (R) สรางรปสเหลยม กาหนดสเสน และสพนหลง

ทตองการ โดยสามารถเปลยนไดดานลางใหสงเกตท Properties กาหนดสของเสนเปนสดา และความหนาของเสน

เปน 3 และสพนหลงเปนสอะไรกไดตามตองการ แลวสรางรปสเหลยม

(หมายเหต: การวาดภาพนนตองเลอกเลเยอรทตองการจะวาด เชน ถาจะวาดตจดหมายกตอง เลอกเลเยอร

ตจดหมาย) ดงภาพ

คลก Insert Layer

สเสน

สพนหลง

8. ใหสรางหลงคาของตจดหมาย โดยใชเครองมอ Line Tool (N) หรอกดตว N กได แลวลากเสนใหเปนรป

สามเหลยมใหเปนหลงคาตจดหมาย ดงภาพ

18

9. ใหเตมสหลงคา โดยใชเครองมอ Paint Bucket Tool (K) หรอกดตว K กได เลอกสทตองการ แลวคลกท

หลงคากจะไดสหลงคาทตองการ

10. ใหวาดชองใสจดหมาย โดยใชเครองมอ Rectangle Tool (R) เลอกสพนหลงเปนสดา ดงภาพ

11. ทาการแปลงภาพใหเปน Movie clip โดยคลกท Layer ตจดหมาย แลวคลกขาวทภาพตจดหมายเลอก Convert to

Symbol ชอง Name ใหเปลยนชอเปน ตจดหมาย คลก OK ดงภาพ

19

12. วาดซองจดหมาย

13. ใหสราง Layer ใหมมา 1 Layer ตงชอเปน ซองจดหมาย แลวสรางรปสเหลยม โดยใชเครองมอ Rectangle Tool

(R) และเครองมอ Line Tool (N) เลอกสซองจดหมายตามทตองการ และสเสนกปรบขนาดใหเปน 2

ดงภาพ

14. ทาการแปลงภาพใหเปน Movie clip โดยคลกท Layer ซองจดหมาย แลวคลกขาวทภาพซองจดหมายเลอก Convert

to Symbol ชอง Name ใหเปลยนชอเปน ซองจดหมาย คลก OK

20

15. กาหนดการเคลอนไหวของซองจดหมาย ใหเลอก Layer ซองจดหมาย > ใหเลอกเฟรมท 40 แลวทาการ Insert

Keyframe (F6) แลวเคลอนยายซองจดหมายจากจดหนงไปอกจดหนง โดยใชเครองมอ Selection Tool (V)

ดงภาพ

16. ทาเหมอนเดมกบ ขนตอน 4.1 เลอก Layer ซองจดหมาย > ใหเลอกเฟรมท 70 แลวทาการ Insert Keyframe (F6)

แลวเคลอนยายซองจดหมายจากจดหนงไปอกจดหนง โดยใชเครองมอ Selection Tool (V) ทาการปรบซอง

จดหมายใหตงขนและลดขนาดซองจดหมายลง โดยใชเครองมอ Free Transform Tool (Q) ดงภาพ

17. เลอก Layer ซองจดหมาย > ใหเลอกเฟรมท 80 แลวทาการ Insert Keyframe (F6) ปรบซองจดหมายใหมขนาด

เลกลง โดยใชเครองมอ Free Transform Tool (Q) ดงภาพ

21

18. ใหทาการกาหนด Motion Tween โดยใหเลอก Layer ซองจดหมาย เลอกเฟรมท 1 แลวคลกขวาเลอก Create

Motion Tween

19. เลอกเฟรมท 40 แลวคลกขวาเลอก Create Motion Tween

20. เลอกเฟรมท 70 แลวคลกขวาเลอก Create Motion Tween

21. เสรจขนตอนการสรางภาพเคลอนไหว กด Ctrl+Enter เพอดผลลพธ

การสราง Animation โดยการ Mask Layer

1. New File หรอ กด Ctrl + N กาหนดสพนหลง (Background) เปนสดา

2. คลกทเฟรมท 1 พมพขอความวา “Young ICT”โดยเลอกรปแบบตวอกษรและสตาม ตองการ

22

3. จากนนคลกทเฟรม 30 กดปมเพมเฟรม (F5)

4. ทาการเพม Layer ใหม โดยคลกคาสง Insert > Layer จะได Layer 2 เพมขนมา

2

4

3

5. สรางภาพวงกลมทเฟรมท 1 ของ Layer 2 ทดานซายของคาวา “Young ICT”

23

6. จากนนเลอกคาสง Insert > Create Motion Tween แลวคลกเฟรมท 30 กดปม F6 เพอเพม Key frame จากนนใช

เมาสคลกภาพวตถวงกลมไปวางไวทางดานขวาของคาวา “Young ICT”

5

6

7. เมอทดสอบโดยการกดปม Ctrl Enter หรอ คลกปม Play จะเหนภาพวงกลมวงไปบนขอความ “Young ICT”

8. คลกเมาสท Layer 2 แลวเลอกคาสง Mask โดยคลกขวาของเมาสท Layer 2 แลวเลอกคาสง Mask

24

9. เมอทดสอบการทางานกจะพบวาขอความ “Young ICT” จะแสดงเมอม Mask (Layer บน) เคลอนทผานเทานน

ตวอยางการสราง Animation โดยใช Motion Guide

1. New File หรอกด Ctrl + N แลววาดรปปลา ไวทรม Stage ดานซาย (เพอใหลอยไปดานขวา)

2. จากนนเลอกคาสง Insert > Create Motion Tween เฟรมเรมตนอยทางดานซายในเฟรมท 1

25

2

1

3 . คลกทเฟรม 40 แลวเพม keyframe โดยการกดปม F6 จะไดภาพเหมอนเฟรมท 1 คอ ภาพจดหมายทตาแหนงเดยวกน

จากนน ใชเมาสคลกลากวตถ (จดหมาย) ไปวางทรมStage ทางดานขวาจะไดภาพจดหมายในเฟรมท 40 และจะปรากฎเส

นเชอมระหวางเฟรม ท 1 กบเฟรมท 40 ดงรป

3

4. เมอทดสอบดขณะน พบวาจดหมายจะเคลอนทจากขอบดานซายไปดานขวาลกษณะเสน ตรง

5. การกาหนดเสนทางการเคลอนท (Motion Guide) ทาไดโดยเลอกเมน Insert > Motion Guide เมอเลอกคาสงนแลวจะ

ปรากฏ Layer เพมเขามาใน Timeline ชอวา Guide Layer1

6. คลกทเฟรมท 1 ของ Layer Guide Layer 1 แลวใชเครองมอ Pencil Tool จากนนทาการลากเสนจากดานซายไปดานขวา

หรอตามลกษณะทตองการใหจดหมายเคลอนทไป ตวอยางดงรป

26

6

7. จากนนปรบจดเรมตนและจดสดทายใหกบวตถโดยคลกเมาสทเฟรมท 1 เลอกปม Snap to objects หรอเลอกทคาสงView

Snap to objects ใชเมาสลากวตถ (จดหมาย) ใหเกาะตดกบเสน ณ จดเรมตน และทเฟรม 40 ลากวตถใหเกาะตดกบปลาย

เสนทางดานขวามอ ดงรป

7

8. ท Layer 1 ใหคลกทเฟรมท1 แลวคลกท Properties เลอก Motion

27

8

9. จากนนทดสอบการเคลอนทและแกไขเสนทางไดตามตองการ แตการเคลอนทของวตถจะหนหวไปทางเดยวยงดไมเปน

ธรรมชาต กสามารถปรบใหหนตามเสนทางทเปลยนแปลงได โดยใชเมาสคลกทเฟรมท 1 แลวกาหนด Properties ในชอง

เลอกทาเครองหมายถก ในชอง Orient to path แลวลองทดสอบการทางานอกครง

9

เอกสารอางอง

ทวศกด กาญจนสวรรณ (2552).เทคโนโลยมลตมเดย (Multimedia Technology). กรงเทพ:หจก. ไทยเจรญการพมพ.