เรื่ การสรอง้างภาพเคลื่/animation อนไหว...
Post on 17-Jul-2020
3 Views
Preview:
TRANSCRIPT
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). กรงเทพ:หจก. ไทยเจรญการพมพ.
top related