2901-2011 การสร้างภาพเคลื่อนไหวเบื้องต้น

Adobe19F4lash CS6 บทท่ี 8 การสรา้ งผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 4. คลกิ ขวาที่เฟรมท่ี 10 เลือก Insert Keyframe 4 5. ท�ำการเลื่อนต�ำแหน่งรปู ขน้ึ ข้างบน 5

การสร้างภาพเคล่ือนไหวเบอ้ื งตน้ Adobe Fla1s95h CS6 6. คลกิ ขวาที่เฟรมท่ี 30 เลอื ก Insert Keyframe 6 7. ท�ำการเล่อื นต�ำแหนง่ รปู ลงขา้ งลา่ ง 7

Adobe19F6lash CS6 บทที่ 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 8. คลกิ ขวาทเี่ ฟรมท่ี 40 เลอื ก Insert Keyframe 8 9. ท�ำการเลื่อนต�ำแหนง่ รูปกลับไปต�ำแหนง่ แรก 9

การสร้างภาพเคลอ่ื นไหวเบอื้ งตน้ Adobe Fla1s97h CS6 10. จะได้ผลลัพธด์ งั รูป 10 การวงิ่ ตามภาพ (Tracking) เทคนิคในการว่ิงตามภาพนี้จะนยิ มน�ำไปใช้ในการเลน่ เกม ซงึ่ อาจ จะใช้เทคนคิ การ Scale ผสมผสานกบั Pan, Tilting รวมถึงใช้เอฟเฟก็ ต์ต่าง ๆ เข้าชว่ ยทค่ี ่อนขา้ งจะยาก และซับซ้อนขึน้ มาอกี กไ็ ด้ ตัวอย่างการวง่ิ ตามภาพ (Tracking) 1. ท�ำการ Import ไฟลภ์ าพเขา้ มาที่ Stage 1

Adobe19F8lash CS6 บทท่ี 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 2. เปลี่ยนภาพให้เป็นมฟู ว่ีคลปิ 2 3. คลิกขวาที่เฟรม 1 เลือก Create Classic Tween 3

การสร้างภาพเคล่ือนไหวเบอ้ื งตน้ Adobe Fla1s99h CS6 4. คลิกขวาทีเ่ ฟรมที่ 15 เลอื ก Insert Keyframe 4 5. เล่ือนรูปไปทางดา้ นขวา 5

Adobe20F0lash CS6 บทท่ี 8 การสรา้ งผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 6. คลิกขวาท่ีเฟรมที่ 30 เลือก Insert Keyframe 6 7. เลอ่ื นรูปไปทางด้านซ้าย 7

การสรา้ งภาพเคลอ่ื นไหวเบอื้ งตน้ Adobe Fla2s01h CS6 8. คลิกที่ เพ่อื สรา้ ง Layer ใหม่ 8 9. พิมพข์ ้อความลงใน Layer ดา้ นบน 9

Adobe20F2lash CS6 บทที่ 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 10. คลกิ ขวาท่ีเฟรมที่ 1 เลือก Create Classic Tween 10 11. คลิกขวาทเี่ ฟรมท่ี 15 เลอื ก Insert Keyframe 11

การสรา้ งภาพเคล่อื นไหวเบือ้ งตน้ Adobe Fla2s03h CS6 12. เล่ือนรูปไปทางด้านขวา 12 13. คลิกขวาท่เี ฟรมท่ี 30 เลอื ก Insert Keyframe 13

Adobe20F4lash CS6 บทท่ี 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 14. เล่ือนรูปไปทางด้านซา้ ย 14 15. จะไดผ้ ลลัพธ์ดงั รปู 15

การสรา้ งภาพเคลื่อนไหวเบือ้ งตน้ Adobe Fla2s05h CS6 การทำ� ทรานซิชั่น (Transition) จะมีลกั ษณะคลา้ ยกับการน�ำเสนองานด้วยโปรแกรม Power- Point ที่ตอนเปิดฉากค่ันระหว่างภาพจะมีการใช้เอฟเฟ็กต์ตัวละลาย กวาดภาพมาจากทางซ้ายบ้าง ขวาบ้าง หรือจากมุมบ้างสลับกันไป ส่วนการสร้างงานใน Flash CS6 อาจจะใช้เทคนิคการท�ำเลเยอร์มาส์ค มาช่วยไดเ้ ช่นกัน ตัวอยา่ งการทำ� ทรานซิชนั่ (Transition) 1. ท�ำการ Import ไฟลภ์ าพเข้ามาท่ี Stage 1 2. ท�ำการเปลี่ยนรูปเป็นมูฟว่ี 2

Adobe20F6lash CS6 บทที่ 8 การสรา้ งผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 3. คลกิ ขวาทีเ่ ฟรมท่ี 1 เลือก Create Classic Tween 3 4. คลกิ ขวาท่เี ฟรมท่ี 30 เลอื ก Insert Keyframe 4

การสร้างภาพเคลอ่ื นไหวเบ้ืองตน้ Adobe Fla2s07h CS6 5. ท�ำการยอ่ รูปและเลอ่ื นมาตรงทม่ี ุมซา้ ยล่าง 5 6. คลิกที่ เพอื่ สร้าง Layer ใหม่ 6

Adobe20F8lash CS6 บทที่ 8 การสรา้ งผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 7. คลกิ ขวาที่เฟรมที่ 30 เลือก Insert Keyframe 7 8. ท�ำการ Import ไฟลภ์ าพใหมเ่ ข้ามาที่ Stage วางไว้ทมี่ ุมบนขวา 8

การสร้างภาพเคลือ่ นไหวเบอ้ื งตน้ Adobe Fla2s09h CS6 9. คลกิ ขวาที่เฟรมที่ 30 เลอื ก Create Classic Tween 9 10. คลกิ ขวาทเ่ี ฟรมที่ 40 เลือก Insert Keyframe 10

Adobe21F0lash CS6 บทท่ี 8 การสรา้ งผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 11. ท�ำการขยายรปู และเล่ือนมาตรงกลางของ Stage 11 12. คลกิ ขวาที่เฟรมที่ 50 เลอื ก Insert Frame 12

การสรา้ งภาพเคลอ่ื นไหวเบือ้ งตน้ Adobe Fla2s11h CS6 13. จะไดผ้ ลลัพธ์ดังรปู 13 การปรับความโปร่งใสของภาพ (Alpha) เทคนิคนี้จะนิยมใช้กันมากในการสร้างงานด้วย Flash CS6 โดยการปรบั ความโปรง่ ใสของภาพใหค้ ่อย ๆ ปรากฏช้นิ งานชัดเจนขนึ้ มาเรอื่ ย ๆ หรอื ค่อย ๆ เลือนหายไปทีละนิด หรือเกดิ ภาพช้ินงานซอ้ นกนั ได้ ตวั อย่างการปรบั ความโปร่งใสของภาพ (Alpha) 1. ท�ำการ Import ไฟล์ภาพเข้ามาที่ Stage 1

Adobe21F2lash CS6 บทที่ 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 2. คลกิ ขวาท่เี ฟรมท่ี 1 เลือก Create Classic Tween 2 3. ก�ำหนดคา่ Alpha เปน็ 10 3

การสร้างภาพเคล่ือนไหวเบอื้ งต้น Adobe Fla2s13h CS6 4. คลิกขวาทเี่ ฟรมท่ี 30 เลือก Insert Keyframe 4 5. ก�ำหนดค่า Alpha เปน็ 100 5

Adobe21F4lash CS6 บทท่ี 8 การสร้างผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 6. จะไดผ้ ลลัพธด์ ังรปู 6 ก�ำหนดทิศทางของช้ินงานด้วย Guide Layer การก�ำหนดเส้นทางให้ชิ้นงานเคล่ือนไหว ไปตามทิศทางท่ีต้องการ มคี วามยืดหยุ่นมากส�ำหรับการสรา้ งภาพเคลื่อนไหวท่สี ลับซับซ้อน การเปลี่ยนรูป (Shape Tween) หากได้รู้จักโปรแกรม Flash CS6 เป็นอย่างดีแล้วก็จะ สามารถใชเ้ ทคนคิ Shape Tween ท�ำให้เปล่ียนรูปสลบั กับข้อความไปมาได้ ตวั อย่างการเปลยี่ นรูป (Shape Tween) 1. สรา้ งรปู ดาวขนึ้ บน Stage 1

การสรา้ งภาพเคลื่อนไหวเบอื้ งต้น Adobe Fla2s15h CS6 2. ท�ำการ Break Apart 2 3. คลิกขวาทีเ่ ฟรมที่ 1 เลือก Create Shape Tween 3

Adobe21F6lash CS6 บทท่ี 8 การสรา้ งผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 4. คลิกขวาที่เฟรมท่ี 20 เลือก Insert Keyframe 4 5. คลิกเลอื ก Subselection Tool และท�ำการปรับเปลยี่ นรปู ทรงดาว 5

การสรา้ งภาพเคล่อื นไหวเบอื้ งตน้ Adobe Fla2s17h CS6 6. จะได้ผลลพั ธด์ ังรปู 6 การสรา้ งเกม ในการสรา้ งเกมดว้ ยโปรแกรม Flash CS6 น้ันจะตอ้ งใชก้ ารเขยี น ActionScript เข้ามาช่วย ซ่งึ จะต้องมกี ารศึกษาและท�ำความเข้าใจจึงจะสามารถน�ำไปเขยี นใหเ้ ป็นเกมทมี่ คี วามน่าสนใจ ได้เปน็ อย่างดี ตวั อย่างเกมตอบค�ำถาม 1. ท�ำการพมิ พต์ วั เลข 100 + 100 = ลงบน Stage 1

Adobe21F8lash CS6 บทท่ี 8 การสร้างผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 2. คลกิ เลอื กที่ Text Tool แลว้ เปล่ยี นเปน็ Input Text 2 3. คลกิ ที่ Stage ดงั รปู 3

การสรา้ งภาพเคล่อื นไหวเบ้อื งต้น Adobe Fla2s19h CS6 4. ท�ำการสรา้ งปมุ่ ตรวจค�ำตอบเลอื ก Text Tool แลว้ เปล่ยี นเปน็ Static Text 4 5. โดยพิมพค์ �ำวา่ “ตรวจค�ำตอบ” ลงบน Stage 5

Adobe22F0lash CS6 บทท่ี 8 การสรา้ งผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 6. คลกิ ขวาที่ค�ำว่า “ตรวจค�ำตอบ” เลอื ก Convert to Symbol… 6 7. ต้ังชอื่ และเลอื กเปน็ Button 7

การสร้างภาพเคล่ือนไหวเบ้ืองตน้ Adobe Fla2s21h CS6 8. สร้างมูฟว่ีขอ้ ความแสดงค�ำตอบ “ถกู ” และ “ผิด” เลอื ก Text Tool แล้วพิมพค์ �ำวา่ ถูก 8 9. คลกิ ขวาท่ีค�ำว่า “ถูก” แลว้ เลือก Convert to Symbol… 9

Adobe22F2lash CS6 บทท่ี 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 10. ท�ำการตง้ั ช่ือและเลือก Movie Clip 10 11. ดบั เบล้ิ คลิกที่มฟู ว่คี ลิปแลว้ ท�ำการคลิกสร้างเลเยอร์ใหม่ 12. คลกิ ขวาที่เฟรมในเลเยอรท์ ่ีได้สร้างมาใหม่ แล้วเลอื ก Actions 12

การสร้างภาพเคล่ือนไหวเบอื้ งตน้ Adobe Fla2s23h CS6 13. พมิ พ์ stop(); ลงไป 13 14. ท�ำการเลื่อนเฟรมท่มี ีค�ำวา่ “ถูก” ไปไว้เฟรมท่ี 2 14

Adobe22F4lash CS6 บทที่ 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 15. คลกิ ขวาท่เี ฟรมที่ 3 เลอื ก Insert Keyframe 15 16. เปลย่ี นข้อความเปน็ ค�ำวา่ “ผิด” 16

การสรา้ งภาพเคล่ือนไหวเบอื้ งต้น Adobe Fla2s25h CS6 17. คลิกออกมาทีน่ อกมูฟวีแ่ ล้วต้งั ชอ่ื ว่า check 17 18. คลกิ ที่ช่องค�ำตอบแล้วต้งั ช่ือว่า ans 18

Adobe22F6lash CS6 บทที่ 8 การสร้างผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 19. คลิกที่ป่มุ ตรวจค�ำตอบแลว้ เลอื ก Actions 19 20. พิมพ์ Action ตามนี้ on (press) { if (ans.text == “200”) { check.gotoAndStop(2); } else { check.gotoAndStop(3); } }

การสรา้ งภาพเคล่ือนไหวเบื้องต้น Adobe Fla2s27h CS6 20 21. จะไดผ้ ลลัพธด์ งั รปู 21

Adobe22F8lash CS6 บทที่ 8 การสรา้ งผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 21 การปิด - เปิดรูป หากจะท�ำตาของตัวการ์ตูนให้ปิด - เปิดได้ ก็สามารถท�ำได้ด้วยการสร้างปุ่ม (Button) หรือการก�ำหนดที่เฟรมต่าง ๆ ทีละเฟรมให้มีการเปิด - ปิดลูกตา หรือเกลือกกล้ิงได้ตามท่ี ตอ้ งการ ตัวอย่างการปิด - เปดิ รูป 1. น�ำรปู ทเ่ี ตรียมไว้มาลง Stage 1

การสร้างภาพเคลือ่ นไหวเบอ้ื งตน้ Adobe Fla2s29h CS6 2. คลกิ ขวาที่ภาพและเลือก Convert to Symbol… 2 3. ท�ำการตั้งช่ือและเลอื กเป็น Movie Clip 3

Adobe23F0lash CS6 บทที่ 8 การสร้างผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 4. ดบั เบ้ลิ คลกิ ท่มี ฟู ว่คี ลิปและท�ำการสร้างเลเยอร์ใหม่ 4 5. น�ำภาพปากแบบท่ี 1 มาวางไว้ที่เฟรมที่ 1 ของเลเยอร์ใหมห่ รือ Layer 2 5

การสรา้ งภาพเคลอื่ นไหวเบือ้ งต้น Adobe Fla2s31h CS6 6. คลิกขวาที่เฟรมที่ 2 ของ Layer 2 แลว้ เลอื ก Insert Keyframe 6 7. คลิกขวาที่เฟรมท่ี 2 ของ Layer 1 แลว้ เลอื ก Insert Frame 7

Adobe23F2lash CS6 บทท่ี 8 การสรา้ งผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 8. ลบภาพปากแบบแรกจากเฟรมที่ 2 ของ Layer 2 8 9. น�ำภาพปากแบบท่ี 2 ไปวางทีเ่ ฟรมท่ี 2 ของ Layer 2 9

การสร้างภาพเคล่อื นไหวเบื้องตน้ Adobe Fla2s33h CS6 10. สงั เกตผลลัพธ์ดงั รปู 10 แนวคิดต่าง ๆ เหล่าน้ีเป็นแนวทางส�ำหรับการสร้างสรรค์งาน อาจจะน�ำแนวคิดส่วนหน่ึง ไปสร้างสรรค์งานของตนเองข้ึนมาแล้วตกแต่งดัดแปลงไปตามต้องการได้ ซ่ึงจะต้องอาศัยเวลาและ การฝกึ ฝนจนเกิดความช�ำนาญ สรา้ งการเคล่ือนไหวดว้ ยตัวเอง ชนิดของภาพเคล่อื นไหว 1. เคลอ่ื นไหวแบบเฟรมต่อเฟรม (Frame by Frame Animation) คือ การสรา้ งคียเ์ ฟรม หลาย ๆ เฟรมเรยี งตอ่ กนั โดยแตล่ ะเฟรมจะมเี นอื้ หาทเี่ ปน็ ภาพนง่ิ และคอ่ ย ๆ เปลย่ี นแปลงไปทลี ะเฟรม เมอ่ื มีการแสดงจะท�ำใหม้ องเหน็ การเคลอื่ นไหวเกดิ ข้ึน 2. เคลอ่ื นไหวแบบทวนี (Tween Animation) คอื การสรา้ งภาพเคลอื่ นไหวแบบอตั โนมัติ โดยสร้างเพียงแค่เน้ือหาในเฟรมเร่ิมต้นและเฟรมสุดท้ายเท่าน้ัน ส่วนการเคล่ือนไหวท่ีอยู่ในเฟรม ระหว่างกลางโปรแกรมจะสร้างข้ึนให้อัตโนมัติตามลักษณะต่าง ๆ ที่ได้เลือกไว้ ซ่ึงภาพเคลื่อนไหวแบบ ทวีนแบง่ ออกเป็น 2 ประเภท ไดแ้ ก่ 2.1 Motion Tween เปล่ียนแปลงแบบเคล่ือนท่ี คือ การเปล่ียนต�ำแหน่งหรือทิศทาง และรวมไปถงึ การเปลยี่ นแปลงคณุ สมบตั ขิ องตวั ออบเจก็ ตเ์ อง เชน่ การเปลยี่ นขนาด การเปลยี่ นสี การหมนุ และการจางหาย เป็นตน้ นอกจากนี้ ยงั สามารถสร้างเส้นทางการเคลื่อนทใี่ ห้ออบเจ็กตไ์ ดอ้ กี ด้วย 2.2 Shape Tween เปลย่ี นแปลงรปู ร่าง โดยเปลย่ี นจากรูปรา่ งหน่ึงไปเปน็ อกี รูปร่างหน่ึง โดยโปรแกรมจะสอดแทรกคา่ การเปล่ยี นรปู รา่ งของออบเจก็ ต์ในเฟรมท่อี ยู่ระหวา่ งนั้นให้เอง

Adobe23F4lash CS6 บทท่ี 8 การสรา้ งผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 การสร้างภาพเคล่อื นไหวแบบแยกเฟรม (Cell Animation/Frame by Frame) การสร้างภาพเคล่ือนไหวแบบแยกเฟรมจะมีอิสระมากท่ีสุด เนื่องจากเราสามารถก�ำหนด ความเป็นไปของการเคลื่อนไหวในแต่ละเฟรมได้โดยแยกกัน แต่จะเหมาะส�ำหรับการเคล่ือนไหว ที่มีจ�ำนวนเฟรมไม่มากและภาพเคลื่อนไหวท่ีได้อาจจะไม่เนียนมากนัก แต่ข้อเสียของการสร้างภาพ เคล่ือนไหวแบบแยกเฟรม คอื จะท�ำใหเ้ สียเวลาในการสรา้ งเฟรมขึ้นมาทลี ะเฟรมนนั่ เอง 1. คลิกคีย์เฟรมเปล่าท่ีจะเป็นเฟรมเร่ิมต้นของภาพเคลื่อนไหว หากยังไม่มีคีย์เฟรมก็ให้สร้าง โดยคลิกเลือกเฟรม แลว้ กดคยี ์ F7 หรือคลกิ ค�ำสง่ั Insert > Timeline > Blank Keyframe 2. สรา้ งออบเจ็กต์หรือเนอ้ื หาท่ตี อ้ งการในเฟรมแรก 1 2 3. คลกิ เฟรมทางดา้ นขวา แล้วกดคีย์ F6 เพ่อื กอ๊ ปปเี้ นือ้ หาจากคียเ์ ฟรมก่อนหน้า 4. ปรับแต่งเนอื้ หาภายในคียเ์ ฟรมท่ี 2

การสร้างภาพเคลื่อนไหวเบื้องตน้ Adobe Fla2s35h CS6 3 4 5. ท�ำซำ�้ ขนั้ ตอนที่ 2 และ 3 ต่อไปเรือ่ ย ๆ จนได้ภาพเคล่อื นไหวครบตามทต่ี ้องการ 6. ทดสอบการเคลอื่ นไหวโดยกดคยี ์ Enter 5

Adobe23F6lash CS6 บทท่ี 8 การสรา้ งผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 การปรบั แตง่ ทศิ ทางการเคลอ่ื นไหวของ Motion Tween 1. เลือ่ นเมาส์ไปที่ต�ำแหน่งเส้นไกด์ 2. ลากปรบั ทิศทางการเคลอื่ นไหวตามตอ้ งการ 3. ทดสอบการเคลอ่ื นไหวโดยกดคีย์ Enter 12 การปรบั แต่งจังหวะการเคลอื่ นไหวของ Motion Tween 1. คลิกช่องเฟรมทจ่ี ะปรบั กดคีย์ F6 เพ่ือสร้างคยี ์เฟรมที่เปน็ จดุ เปลย่ี นจงั หวะการเคล่อื นไหว 2. ลากปรบั เสน้ ไกด์ ก�ำหนดจงั หวะการเคลอ่ื นไหวของออบเจ็กต์ 3. ทดสอบการเคล่อื นไหวโดยกดคีย์ Enter 2 1

การสร้างภาพเคลื่อนไหวเบ้อื งต้น Adobe Fla2s37h CS6 การเคลือ่ นไหวแบบย้ายตำ�แหน่งดว้ ย Motion Tween เป็นการเคลื่อนที่เนื้อหาจากจุดหนึ่งไปยังจุดหนึ่ง หรือเปล่ียนคุณสมบัติจากแบบหน่ึงไปเป็นอีก แบบหน่ึง ซึ่งมีการเปลี่ยนแปลงที่แน่นอน ดังนั้น การเคลื่อนไหวแบบ Motion Tween จะเหมาะกับ ภาพเคลอื่ นไหวทต่ี อ้ งการความตอ่ เนอ่ื งสมำ่� เสมอ เชน่ ภาพดวงอาทติ ยก์ �ำลงั ตกดนิ ภาพกงั หนั ทก่ี �ำลงั หมนุ ภาพเครอ่ื งบินก�ำลังบนิ ข้ึน หรือภาพก้อนเมฆที่ลอยอยู่ ภาพเคลื่อนไหวแบบ Motion Tween เราสามารถน�ำออบเจ็กต์ประเภทใดมาสร้างก็ได้ ไม่วา่ จะเปน็ ออบเจก็ ต์พน้ื ฐาน (แบบ Merge Drawing หรือ Object Drawing) ข้อความ ซิมโบล หรอื ออบเจ็กต์ที่ถูกรวมกลุ่มก็ได้ โดยหลังจากสร้างการเคลื่อนไหวแล้วโปรแกรมจะแปลงออบเจ็กต์น้ันให้เป็น ซมิ โบลประเภทกราฟิกช่ือ Tween 1, Tween 2,… ตามล�ำดบั ใหอ้ ตั โนมตั ิ สรา้ งดว้ ยคำ� สงั่ Classic Tween วธิ นี เ้ี ปน็ วิธงี า่ ย ๆ เหมาะกับการเคลอื่ นไหวทมี่ คี วามตอ่ เน่อื งกัน ดงั นี้ 1. คลิกคยี ์เฟรมเปลา่ ท่จี ะเป็นเฟรมเรมิ่ ต้นของภาพเคลือ่ นไหว 2. สรา้ งออบเจ็กตห์ รือเนื้อหาที่ตอ้ งการ 2 1

Adobe23F8lash CS6 บทที่ 8 การสรา้ งผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 3. คลิกเลือกคีย์เฟรม เลือกค�ำสั่ง Insert > Classic Tween หรือคลิกขวาท่ีคีย์เฟรมนี้ แล้ว เลอื กค�ำส่ัง Classic Tween ออบเจก็ ต์จะถกู เปล่ียนให้เป็นซิมโบล 3 4. ปรบั แตง่ ออบเจ็กต์ เช่น ยา้ ยต�ำแหน่ง ปรบั ขนาด เป็นต้น 5. ทดสอบการเคลื่อนไหวโดยกดคยี ์ Enter 4 สรา้ งด้วยคำ� ส่งั Motion Tween วิธีการสร้างด้วยค�ำส่ัง Motion Tween จะแตกต่างกับ Classic Tween ตรงท่ีจะมีเส้นไกด์ อัตโนมัติมาใหเ้ ราสามารถปรบั แตง่ จงั หวะและทิศทางการเคลื่อนไหวได้ทันที ดังนี้ 1. คลิกขวาท่ีคีย์เฟรม เลือกค�ำสั่ง Create Motion Tween หรือคลิกค�ำสั่ง Insert > Motion Tween

การสร้างภาพเคล่ือนไหวเบ้อื งต้น Adobe Fla2s39h CS6 2. คลิกคยี ์เฟรมเปลา่ ทจ่ี ะเป็นเฟรมเริ่มต้นของภาพเคล่ือนไหว 2 1 3. คลิกเลอื กคียเ์ ฟรมปลายทาง 4. ยา้ ยปรบั ต�ำแหน่งออบเจก็ ต์ 4 3 5. ทดสอบการเคลอ่ื นไหวโดยกดคยี ์ Enter

Adobe24F0lash CS6 บทท่ี 8 การสร้างผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 การสรา้ งแอนิเมชันใหป้ รบั ขนาดได้ (Rotation Tween) 1. ที่หน้าต่าง Properties ในช่อง Rotate : CW ให้ท�ำการคลิกก�ำหนดทิศทางการหมุนให้ เป็นการหมุนแบบตามเขม็ นาฬกิ า (Clock Wise) 2. ก�ำหนดจ�ำนวนรอบในการหมุนโดยใส่จ�ำนวนรอบในช่อง Rotate จากนั้นให้กดปุ่ม Enter เพอ่ื ทดสอบการหมุน 21 การเคลอ่ื นไหวแบบยา้ ยตำ�แหนง่ ด้วย Shape Tween เป็นการเปล่ียนแปลงจากรูปร่างแบบหน่ึงค่อย ๆ กลายไปเป็นอีกแบบหน่ึง ซึ่งจะแตกต่างจาก แบบ Motion คือ Motion จะเกิดการเคล่ือนไหวของออบเจ็กต์นั้นเพียงชิ้นเดียว แต่แบบ Shape จะ เกิดการเคล่ือนไหวโดยใช้ออบเจ็กต์สองช้ิน ซ่ึงเหมาะส�ำหรับภาพเคล่ือนไหวที่มีการแปรเปลี่ยนจากแบบหน่ึง ไปเป็นแบบอน่ื อย่างสิ้นเชงิ

การสรา้ งภาพเคลื่อนไหวเบ้อื งตน้ Adobe Fla2s41h CS6 การปรับแตง่ ออบเจ็กต์ใหเ้ คลอ่ื นไหวแบบ 3 มิติ วิธีการ คือ เราจะใช้เครื่องมือ 3D Rotation เพ่ือก�ำหนดการหมุนออบเจ็กต์แบบ 3 มิติ และเครอื่ งมอื 3D Translation เพอื่ ก�ำหนดการเปลย่ี นแปลงหรอื การเคลอ่ื นไหวของออบเจก็ ตแ์ บบ 3 มติ ิ เคร่อื งมอื 3D Rotation 1. วางออบเจ็กต์ที่เป็นซิมโบลแบบมูฟว่ีคลิปบนสเตจ คลิกขวาที่คีย์เฟรมแรก เลือกค�ำส่ัง Create Motion Tween 1 2. คลกิ ช่องเฟรมท่จี ะปรับกดคยี ์ F6 เพ่ือสรา้ งคียเ์ ฟรมทีเ่ ป็นจดุ เปลีย่ นจังหวะการเคลื่อนไหว 3. คลกิ ที่ 4. ลากปรบั หมุนออบเจก็ ตต์ รงต�ำแหน่งของเสน้ แกน X, Y, Z ตามตอ้ งการ 5. ทดสอบการเคลื่อนไหวโดยกดคยี ์ Enter

Adobe24F2lash CS6 บทท่ี 8 การสรา้ งผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 3 2 เครื่องมือ 3D Translation 1. วางออบเจก็ ตท์ เ่ี ปน็ ซมิ โบลแบบมฟู วค่ี ลปิ บนสเตจ คลกิ ขวาทคี่ ยี เ์ ฟรมแรก เลอื กค�ำสง่ั Create Motion Tween 1

การสร้างภาพเคลื่อนไหวเบือ้ งตน้ Adobe Fla2s43h CS6 2. คลิกที่ 3. ย้ายต�ำแหน่งออบเจ็กต์ตามเส้นแกน 4. ทดสอ2บการเคลื่อนไหวโดยกดคยี ์ Enter 4 การเคลอ่ื นไหวดว้ ยการสรา้ ง Bone & Bind Tool Bone Tool เปน็ เครอื่ งมอื ท่ใี ช้ในการสรา้ งกระดกู เพ่อื ที่จะควบคมุ การเคลอ่ื นไหวของ วัตถุทีน่ �ำมาประกอบกนั โดยการสรา้ งจดุ หมนุ ใหก้ บั วตั ถทุ เี่ ปน็ สว่ นประกอบทงั้ หมด Bind Tool เปน็ เครอ่ื งมอื ที่ใช้ในการแก้ไขจดุ เช่อื มต่อของวตั ถทุ ท่ี �ำการสรา้ งข้นึ การสร้าง Bone Tool จากวตั ถุหลาย ๆ ชิ้น 1. คลกิ คีย์เฟรมเปลา่ ท่ีจะเปน็ เฟรมเริ่มตน้ ของภาพเคลือ่ นไหว 2. สรา้ งมูฟวว่ี างทส่ี เตจ