แนวคิดพ้ืนฐานสาหรบั การสร้างภาพเคลอ่ื นไหว 1. การซมู (Zoom In/Out) การซมู ภาพเปน็ หลักการในการขยายรปู หรอื ย่อสว่ นรูป โดยใช้การปรับขนาด Scale เพอ่ื ให้มกี ารเคลื่อนไหวเปน็ ลาดับของการยอ่ และ ขยายชนิ้ งาน ตวั อยา่ งการซมู (Zoom In/Out) 1. ทาการ Import ไฟล์ภาพเข้ามาที่ Stage
2. เปล่ียนภาพใหเ้ ปน็ มฟู วคี่ ลปิ 3. คลกิ ขวาที่เฟรมท่ี 1 เลอื ก Create Classic Tween
4. คลกิ ขวาทีเ่ ฟรมที่ 20 เลือก Insert Keyframe 5. ทาการปรบั ขนาด Scale เพ่ือขยายรูป
6. คลกิ ขวาทเี่ ฟรมท่ี 40 เลือก Insert Keyframe 7. ทาการปรับขนาด Scale เพอ่ื ลดขนาดรูป
8. จะไดผ้ ลลัพธด์ ังรูป การหมุน (Rotate) เราจะใช้หลกั การหมนุ ในการสร้างภาพแอนิเมชันเพ่ือทาการหมุน ภาพไปในทศิ ทางท่ีตา่ งกนั เพอื่ ให้เกิดภาพเคลอื่ นไหวเช่นเดียวกับการสร้างพัดลมหรอื พายุหมุน โดยการใชค้ าสั่ง Rotate เพ่อื ให้มกี ารเคลอ่ื นไหวเป็นลาดับของการขยับช้นิ งานรอบจดุ หมนุ
ตัวอย่างการหมุน (Rotate) 1. ทาการ Import ไฟลภ์ าพเข้ามาที่ Stage 2. เปลย่ี นภาพใหเ้ ป็นมูฟวค่ี ลิป
3. คลิกขวาท่เี ฟรมท่ี 1 เลือก Create Classic Tween 4. คลิกขวาท่เี ฟรมที่ 20 เลือก Insert Keyframe
5. คลิกที่มูฟวคี่ ลิปและเลือกเมนู Free Transform Tool 6. ทาการหมนุ ดงั รูป
7. คลิกขวาท่เี ฟรมท่ี 40 เลอื ก Insert Keyframe 8. คลิกท่มี ฟู วค่ี ลิปและเลอื กเมนู Free Transform Tool
10. จะไดผ้ ลลัพธด์ งั รปู 9. ทาการหมุนดงั รปู
การเขยา่ ภาพ (Tilting) หลกั การเขย่าภาพนเี้ หมาะสาหรับการสรา้ ง ภาพเคล่อื นไหวในลกั ษณะท่ที า ใหภ้ าพเฉพาะส่วนใดส่วนหนึง่ ขยบั ขนึ้ - ลงสลบั กนั ไป ตัวอย่างการเขย่าภาพ (Tilting) 1. ทาการ Import ไฟลภ์ าพเข้ามาที่ Stage
2. เปล่ยี นภาพใหเ้ ป็นมฟู วค่ี ลิป 3. คลกิ ขวาท่เี ฟรมท่ี 1 เลอื ก Create Classic Tween
4. คลกิ ขวาท่เี ฟรมที่ 10 เลอื ก Insert Keyframe 5. ทาการเล่อื นตาแหนง่ รปู ขึ้นขา้ งบน
6. คลกิ ขวาท่เี ฟรมที่ 30 เลอื ก Insert Keyframe 7. ทาการเล่อื นตาแหนง่ รปู ลงขา้ งลา่ ง
8. คลิกขวาท่เี ฟรมท่ี 40 เลือก Insert Keyframe 9. ทาการเลื่อนตาแหน่งรปู กลบั ไปตาแหน่งแรก
10. จะไดผ้ ลลัพธ์ดงั รูป การวิง่ ตามภาพ (Tracking) เทคนคิ ในการวงิ่ ตามภาพนจ้ี ะนยิ มนาไปใช้ในการเล่นเกม ซึ่งอาจจะใชเ้ ทคนิคการ Scale ผสมผสานกับ Pan, Tilting รวมถึงใช้เอฟเฟก็ ตต์ า่ ง ๆ เขา้ ช่วยท่ี ค่อนข้างจะยากและซับซอ้ นขึน้ มาอกี กไ็ ด้
ตวั อย่างการวิ่งตามภาพ (Tracking) 1. ทาการ Import ไฟลภ์ าพเขา้ มาที่ Stage
2. เปล่ยี นภาพใหเ้ ปน็ มฟู วคี่ ลิป 3. คลิกขวาท่เี ฟรม 1 เลอื ก Create Classic Tween
4. คลกิ ขวาท่เี ฟรมท่ี 15 เลือก Insert Keyframe 5. เล่อื นรปู ไปทางดา้ นขวา
6. คลกิ ขวาท่เี ฟรมท่ี 30 เลือก Insert Keyframe 7. เล่อื นรปู ไปทางดา้ นซา้ ย
8. คลกิ ที่ เพ่อื สรา้ ง Layer ใหม่ 9. พมิ พข์ ้อความลงใน Layer ดา้ นบน
10. คลิกขวาที่เฟรมท่ี 1 เลอื ก Create Classic Tween 11. คลิกขวาทีเ่ ฟรมท่ี 15 เลอื ก Insert Keyframe
12. เล่ือนรปู ไปทางดา้ นขวา 13. คลิกขวาท่เี ฟรมที่ 30 เลอื ก Insert Keyframe
14. เลื่อนรูปไปทางดา้ นซ้าย 15. จะไดผ้ ลลพั ธด์ ังรปู
การทาทรานซชิ น่ั (Transition) จะมลี ักษณะคล้ายกบั การนาเสนองานดว้ ยโปรแกรม Power-Point ที่ตอนเปิดฉากคัน่ ระหว่างภาพจะมกี ารใช้เอฟเฟ็กต์ตัวละลาย กวาดภาพมาจาก ทางซ้ายบ้างขวาบ้าง หรือจากมุมบา้ งสลับกนั ไป ส่วนการสร้างงานใน Flash CS6 อาจจะใช้เทคนคิ การทาเลเยอร์มาสค์ มาช่วยไดเ้ ช่นกัน ตัวอย่างการทาทรานซชิ ่นั (Transition) 1. ทาการ Import ไฟลภ์ าพเขา้ มาที่ Stage 2. ทาการเปลย่ี นรูปเป็นมฟู ว่ี
3. คลิกขวาที่เฟรมท่ี 1 เลือก Create Classic Tween 4. คลิกขวาท่เี ฟรมท่ี 30 เลอื ก Insert Keyframe
5. ทาการย่อรปู และเลื่อนมาตรงทม่ี ุมซา้ ยลา่ ง 6. คลิกที่ เพอ่ื สร้าง Layer ใหม่
7. คลกิ ขวาท่เี ฟรมท่ี 30 เลือก Insert Keyframe 8. ทาการ Import ไฟลภ์ าพใหมเ่ ขา้ มาท่ี Stage วางไวท้ ม่ี มุ บนขวา
9. คลิกขวาที่เฟรมท่ี 30 เลอื ก Create Classic Tween 10. คลกิ ขวาท่เี ฟรมท่ี 40 เลอื ก Insert Keyframe
11. ทาการขยายรูปและเล่อื นมาตรงกลางของ Stage 12. คลกิ ขวาที่เฟรมที่ 50 เลือก Insert Frame
13. จะไดผ้ ลลพั ธด์ งั รูป การปรบั ความโปร่งใสของภาพ (Alpha) เทคนิคนีจ้ ะนยิ มใช้กนั มากในการสรา้ งงาน ดว้ ยFlash CS6 โดยการปรบั ความโปรง่ ใสของภาพให้คอ่ ย ๆ ปรากฏชิน้ งานชดั เจนขึ้นมาเรื่อย ๆ หรือค่อย ๆเลือนหายไปทลี ะนดิ หรอื เกดิ ภาพชนิ้ งานซอ้ นกนั ได้
ตวั อยา่ งการปรับความโปร่งใสของภาพ (Alpha) 1. ทาการ Import ไฟลภ์ าพเขา้ มาท่ี Stage 2. คลิกขวาที่เฟรมท่ี 1 เลอื ก Create Classic Tween
3. กาหนดคา่ Alpha เป็น 10 4. คลกิ ขวาท่ีเฟรมท่ี 30 เลือก Insert Keyframe
5. กาหนดคา่ Alpha เป็น 100 6. จะได้ผลลพั ธด์ งั รปู
กาหนดทศิ ทางของช้ินงานด้วย Guide Layer การกาหนดเส้นทางใหช้ น้ิ งาน เคล่อื นไหวไปตามทศิ ทางทตี่ อ้ งการ มีความยืดหยุน่ มากสาหรบั การสรา้ งภาพเคลอ่ื นไหวท่ี สลบั ซับซ้อน การเปลีย่ นรูป (Shape Tween) หากไดร้ ้จู ักโปรแกรม Flash CS6 เป็นอยา่ งดีแล้วก็ จะสามารถใช้เทคนคิ Shape Tween ทา ใหเ้ ปลย่ี นรูปสลบั กบั ขอ้ ความไปมาได้ ตวั อยา่ งการเปล่ยี นรูป (Shape Tween) 1. สรา้ งรูปดาวขึ้นบน Stage
2. ทาการ Break Apart 3. คลกิ ขวาท่ีเฟรมท่ี 1 เลอื ก Create Shape Tween
4. คลิกขวาทเ่ี ฟรมท่ี 20 เลือก Insert Keyframe 5. คลกิ เลือก Subselection Tool และ ทาการปรับเปลี่ยนรูปทรงดาว
6. จะได้ผลลัพธด์ ังรปู การสรา้ งเกม ในการสรา้ งเกมดว้ ยโปรแกรม Flash CS6 นนั้ จะตอ้ งใชก้ ารเขียน ActionScriptเขา้ มาช่วย ซ่ึงจะตอ้ งมีการศกึ ษาและทาความเข้าใจจึงจะสามารถนาไปเขยี นใหเ้ ปน็ เกมที่มคี วามนา่ สนใจไดเ้ ปน็ อย่างดี
ตวั อย่างเกมตอบคาถาม 2. คลิกเลือกที่ Text Tool แล้วเปล่ียนเปน็ Input Text 1. ทาการพิมพ์ตัวเลข 100 + 100 = ลงบน Stage
3. คลกิ ที่ Stage ดังรปู 4. ทาการสร้างปุ่มตรวจคาตอบเลือก Text Tool แลว้ เปลี่ยนเปน็ Static Text
5. โดยพิมพ์คาวา่ “ตรวจคาตอบ” ลงบน Stage 6. คลกิ ขวาทค่ี าวา่ “ตรวจคาตอบ” เลือก Convert to Symbol…
7. ต้งั ชื่อและเลอื กเป็น Button 8. สรา้ งมูฟวขี่ อ้ ความแสดง คาตอบ “ถกู ” และ “ผิด” เลอื ก Text Tool แลว้ พิมพ์คาวา่ ถกู
9. คลกิ ขวาท่ีคา ว่า “ถูก” แล้วเลอื ก Convert to Symbol… 10. ทาการตง้ั ชอ่ื และเลือก Movie Clip
11. ดบั เบ้ลิ คลกิ ท่มี ูฟว่ีคลปิ แลว้ ทาการคลกิ สร้างเลเยอร์ใหม่ 12. คลกิ ขวาทีเ่ ฟรมในเลเยอร์ที่ไดส้ ร้างมาใหม่ แล้วเลอื ก Actions
13. พิมพ์ stop(); ลงไป 14. ทาการเล่อื นเฟรมที่มีคา ว่า “ถกู ” ไปไว้เฟรมท่ี 2
15. คลกิ ขวาท่เี ฟรมท่ี 3 เลอื ก Insert Keyframe 16. เปล่ยี นขอ้ ความเปน็ คาวา่ “ผดิ ”
17. คลกิ ออกมาท่ีนอกมฟู วแี่ ลว้ ตั้งช่อื วา่ check 18. คลกิ ที่ชอ่ งคาตอบแลว้ ต้งั ชื่อวา่ ans
19. คลกิ ท่ปี ่มุ ตรวจคาตอบแล้วเลือก Actions 20. พมิ พ์ Action ตามน้ี
21. จะไดผ้ ลลพั ธด์ ังรปู
Search
