หน่วยที่10 สร้างภาพเคลื่อนไหว

2. ใน Flash มีวิธีการสร้างภาพเคลื่อนไหวอยู่ 2 วิธีหลักๆ คือ
- สร้างด้วยคาสั่ง Timeline Effects ซึ่งเป็ นการเคลื่อนไหวแบบ
สาเร็จรูปที่โปรแกรมมีให้
- สร้างภาพเคลื่อนไหวด้วยตัวเอง โดยวิธีนี้คุณจะสามารถ
กาหนดจังหวะ ช่วงเวลาเล่น ทิศทางการเคลื่อนไหว และการเปลี่ยนแปลง
รูปทรงได้เอง ซึ่งการสร้างด้วยวิธีนี้จะแบ่งออกเป็ น 2 ชนิด คือ แบบเฟรม
ต่อเฟรม (fream-by-fream) และแบบทวีน (Tween animation)

3. เป็ นการเคลื่อนไหวแบบสาเร็จรูปที่สร้างได้ด้วยขั้นตอนง่ายๆ โดย
โปรแกรมจะสร้างซิมโบล คีย์เฟรมและเลเยอร์ให้อัตโนมัติ เพื่อให้สอดคล้อง
กับการเคลื่อนไหวที่เลือก ซึ่งหลังจากใช้คาสั่งแล้วออบเจ็คจะถูกย้ายไปยังเล
เยอร์ใหม่ด้วย คาสั่งในชุดนี้แบ่งออกเป็ น 3 กลุ่มด้วยกันคือ Assistant, Effect
และ Transition/ Transform ซึ่งจะมีบางคาสั่งที่ใช่การสร้างภาพเคลื่อนไหว
แต่มักใช้เพื่อเพิ่มเอฟเฟ็คต์ให้กับมูฟวี่คลิปที่เป็ นภาพเคลื่อนไหวอีกที เช่น ใช้
เอฟเฟ็คต์ Drop Shadow ในการสร้างเงาให้กับภาพเคลื่อนไหว เป็ นต้น
ขั้นตอนการสร้างภาพเคลื่อนไหว
คุณสามารถคาสั่งเหล่านี้ได้กับออบเจ็คทุกแบบ ไม่ว่าจะเป็ น
อินสแตนซ์ ข้อความ ภาพบิทแมพ หรือ ออบเจ็คพื้นฐานทั่วไป ซึ่งก่อนการ
ใช้คาสั่งคุณควรวางออบเจ็คที่ต้องการไว้ในเลเยอร์ใดเลเยอร์หนึ่ง โดยไม่
ปะปนกับออบเจ็คอื่นๆ

4. ออบชั่นของกลุ่ม Timeline Effects
แต่ละคาสั่งจะทาให้ผลที่แตกต่างกัน และมีออบชั่นที่แตกต่างกันด้วยดังนี้
คาสั่ง Copy to Grid
คาสั่งนี้ไม่ทาให้เกิดการเคลื่อนไหว แต่เป็ นการก็อปปี้ ออบ
เจ็คที่เลือกไปวางเรียงต่อๆกันในแนวนอนหรือแนวตั้ง ดังภาพตัวอย่าง

5. คาสั่ง Distributed Duplicate
คาสั่งนี้สร้างความเคลื่อนไหว โดยการก๊อปปี้ ออบเจ็คไปวางซ้อนอยู่
ด้านหลังแล้วค่อยๆแสดงออกมาทีละซีน ซึ่งระหว่างแสดงสามารถกาหนดให้
ออบเจ็คแปรเปลี่ยนขนาดและสีไปทีละนิดได้อีกด้วย
คาสั่ง Blur
เป็ นคาสั่งที่ทาให้ออบเจ็คค่อยๆเบลอและจางลงไปเรื่อยๆ โดย
สามารถปรับขนาดและทิศทางการเบลอได้ด้วย ดังนั้นจึงเหมะสาหรับใช้สร้าง
เอฟเฟ็คต์ในการเปลี่ยนภาพที่กาลังแสดงไปเป็ นภาพอื่น
คาสั่ง Drop Shadow
เป็ นคาสั่งที่ใช้สร้างเงาให้กับออบเจ็คหรือภาพเคลื่อนไหวอื่น โดยไม่
สามารถสร้างการเคลื่อนไหวขึ้นในตัวเองได้
คาสั่ง Expand
เป็ นคาสั่งที่ใช้สร้างการเคลื่อนไหวแบบรวมเข้าหรือกระจายออก ของ
ข้อความหรือกลุ่มออบเจ็ค โดยคาสั่งนี้ไม่สามารถใช้กับออบเจ็คแบบ Merge
Drawing ได้

6. คาสั่ง Explode
เป็ นคาสั่งที่ใช้สร้างการเคลื่อนไหวแบบแตกกระจายออก โดยหาก
เป็ นข้อความหรือกลุ่มออบเจ็คจะเป็ นการแยกออบเจ็คแต่ละชิ้นออกจากกัน
แต่หากเป็ นออบเจ็คชิ้นเดียวก็จะการแตกออบเจ็คนั้นเป็ นชิ้นย่อยๆทั้งนี้คุณ
สามารถกาหนดทิศทางของการกระจายในลักษณะต่างๆได้
คาสั่ง Transform
เป็ นคาสั่งสาหรับทาให้ออบเจ็คเคลื่อนที่ พร้อมกับเกิดการ
เปลี่ยนแปลงต่างๆ ไปพร้อมๆกัน เช่น ปรับขนาด หมุน เปลี่ยนสี ความ
โปร่งใส และเปลี่ยนจังหวะการเคลื่อนที่
คาสั่ง Transittion
เป็ นคาสั่งที่ทาให้ออบเจ็คค่อยๆแสดงออกมาหรือจางหายไปทีน้อย
(Fade) หรือให้เลื่อนตัวออกมาหรือเลื่อนหายไป (Wipe)

7. ชนิดของภาพเคลื่อนไหว
- ภาพเคลื่อนไหวแบบเฟรมต่อเฟรม (Frame-by-Frame) คือการ
สร้างคีย์เฟรมหลายๆเฟรมเรียงต่อกัน โดยแต่ละเฟรมจะมีเนื้อหาเป็ น
ภาพนิ่งที่ค่อยๆเปลี่ยนแปลงรูปร่างหรือคุณสมบัติไปทีละนิด ซึ่งเมื่อมีการ
แสดงย่างต่อเนื่องก็จาทาให้มองเห็นการเคลื่อนไหวเกิดขึ้น
- ภาพเคลื่อนไหวแบบทวีน (Tween animation) คือการสร้าง
ภาพเคลื่อนไหวแบบอัตโนมัติโดยเพียงคุณสร้างเนื้อหาไว้ในเฟรมเริ่มต้น
และเฟรมสุดท้ายเท่านั้น ส่วนการเคลื่อนไหวที่อยู่ในเฟรมระหว่างการ
โปรแกรมจะสร้างขึ้นให้อัตโนมัติตามลักษณะต่างๆที่ได้เลือกไว้
ภาพเคลื่อนไหวแบบทวีนนี้แบ่งออกเป็ น 2 ประเภท ได้แก่

8. Motion tween เป็ นการเคลื่อนไหวแบบเคลื่อนที่ คือมีการเปลี่ยน
ตาแหน่งของออบเจ็คจากจุดหนึ่งไปยังอีกจุด รวมไปถึงการเปลี่ยนแปลง
คุณสมบัติของตัวออบเจ็คเอง เช่น ขนาด สี ความโปร่งใสและการหมุน
นอกจากนี้ยังสามารถสร้างเส้นทางการเคลื่อนที่ให้ออบเจ็คได้อีกด้วย
Shape tween เป็ นการเคลื่อนไหวแบบเปลี่ยนแปลงรูปร่าง คือการ
เปลี่ยนจากรูปร่างหนึ่งไปเป็ นอีกรูปร่างหนึ่ง โดยโปรแกรมจะสร้างรูปร่างของ
ออบเจ็คในเฟรมที่อยู่ระหว่างกลางให้เอง

9. เนื่องจากการเคลื่อนไหวแบบเฟรมต่อเฟรมนี้คุณจะต้องสร้าง
เนื้อหาขึ้นมาเองทุกเฟรม ดังนั้นแต่ละการเคลื่อนไหวจะมีความเป็ นอิสระต่อ
กัน โดยคุณสามารถเปลี่ยนแปลงเนื้อหาในเฟรมใดเฟรมหนึ่งได้โดยไม่มี
ผลกระทบกับเฟรมอื่น คืออาจเคลื่อนที่ไปในทิศทางใดก็ได้ หรือเปลี่ยนแปลง
รูปร่างไปแบบใดก็ได้ตามต้องการปรับแต่งของคุณ ซึ่งจะเหมาะกับ
ภาพเคลื่อนไหวที่ค่อนข้างซับซ้อน ไม่มีรูปแบบที่แน่นอน เกี่ยวข้องกับออบ
เจ็คหลายชิ้น หรือมีการเปลี่ยนแปลงแต่ละส่วนของออบเจ็คที่ไม่สัมพันธ์กัน
เช่น ภาพนกค่อยๆกระพือปี กบินภาพดอกไม้ที่ค่อยๆบาน หรือภาพคนที่
กาลังวิ่งหรือเต้นราอยู่ เป็ นต้น

10. สร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม
ในการสร้างภาพเคลื่อนไหวชนิดนี้ ทาได้โดยกาหนดแต่ละ
เฟรมให้เป็ นคีย์เฟรมแล้วใส่เนื้อหาที่แตกต่างกันลงไป แต่เพื่อให้ได้การ
เคลื่อนไหวที่ต่อเนื่องจึงต้องมีการก๊อปปี้ เนื้อหาจากเฟรมที่อยู่ก่อนหน้ามาใช้
แล้วค่อยๆทาการปรับแต่งทีละน้อยอย่างเป็ นลาดับขั้น หรือคุณอาจจัเพิ่ม
เนื้อหาใหม่เข้าไปก็ได้เช่นกัน

11. เนื่องจากการเคลื่อนไหวแบบเฟรมต่อเฟรมนี้คุณจะต้องสร้างเนื้อหา
ขึ้นมาเองทุกเฟรม ดังนั้นแต่ละการเคลื่อนไหวจะมีความเป็ นอิสระต่อกัน โดย
คุณสามารถเปลี่ยนแปลงเนื้อหาในเฟรมใดเฟรมหนึ่งได้โดยไม่มีผลกระทบกับ
เฟรมอื่น คืออาจเคลื่อนที่ไปในทิศทางใดก็ได้ หรือเปลี่ยนแปลงรูปร่างไปแบบ
ใดก็ได้ตามต้องการปรับแต่งของคุณ ซึ่งจะเหมาะกับภาพเคลื่อนไหวที่
ค่อนข้างซับซ้อน ไม่มีรูปแบบที่แน่นอน เกี่ยวข้องกับออบเจ็คหลายชิ้น หรือมี
การเปลี่ยนแปลงแต่ละส่วนของออบเจ็คที่ไม่สัมพันธ์กัน เช่น ภาพนกค่อยๆ
กระพือปี กบินภาพดอกไม้ที่ค่อยๆบาน หรือภาพคนที่กาลังวิ่งหรือเต้นราอยู่
เป็ นต้น

12. สร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม
ในการสร้างภาพเคลื่อนไหวชนิดนี้ ทาได้โดยกาหนดแต่ละเฟรม
ให้เป็ นคีย์เฟรมแล้วใส่เนื้อหาที่แตกต่างกันลงไป แต่เพื่อให้ได้การ
เคลื่อนไหวที่ต่อเนื่องจึงต้องมีการก๊อปปี้ เนื้อหาจากเฟรมที่อยู่ก่อนหน้ามา
ใช้ แล้วค่อยๆทาการปรับแต่งทีละน้อยอย่างเป็ นลาดับขั้น หรือคุณอาจ
จัเพิ่มเนื้อหาใหม่เข้าไปก็ได้เช่นกัน

13. เป็ นการเคลื่อนไหวที่มีการเปลี่ยนตาแหน่งของออบเจ็คจากจุดหนึ่งไป
ยังอีกจุดหนึ่ง หรือเปลี่ยนคุณสมบัติจากแบบหนึ่งไปเป็ นอีกแบบหนึ่ง โดยเป็ น
การเปลี่ยนแปลงที่แน่นอน ดังนั้น motion tween จึงเหมาะกับภาพเคลื่อนไหวที่
ต่อเนื่องสม่าเสมอ เช่น ภาพดวงอาทิตย์กาลังตกดิน ภาพกังหันที่กาลังหมุน
ภาพเครื่องบินกาลังบินขึ้น หรือภาพฉากหลังที่เปลี่ยนจากสีหนึ่งไปเป็ นอีกสีหนึ่ง
เป็ นต้น
วิธีสร้างภาพเคลื่อนไหวแบบ Motion Tween
สร้างด้วยออปชั่น Motion Tween
คุณสามารถนาออบเจ็คมาสร้างได้หลายประเภท ไม่ว่าจะเป็ น
Object Drawing, ข้อความ, ซิมโบลหรือออบเจ็คที่ถูกรวมกลุ่มก็ได้ (ยกเว้น
Merge Drawing) วิธีนี้เป็ นวิธีง่ายๆ เหมาะกับการเคลื่อนไหวจังหวะเดียว
ตัวอย่างต่อไปนี้เป็ นการสร้างการเคลื่อนไหว โดยให้รถยนต์เคลื่อนที่ไปทางขวา

14. ก๊อปปี้ การเคลื่อนไหวแบบ Motion Tween
เป็ นคาสั่งที่ช่วยให้คุฯสามารถนารูปแบบเคลื่อนไหวของออบเจ็ค
หนึ่งไปใช้กับออบเจ็คอื่นๆ โดยจะเป็ นการก๊อปปี้ คุณสมบัติทุกอย่างไม่ว่าจะ
เป็ นทิศทางการเคลื่อนที่ จังหวะ หรือจานวนเฟรมที่ใช้ และยังสามารถก๊อปปี้
จากไฟล์หนึ่งไปยังอีกไฟล์หนึ่งได้ด้วย
ปรับแต่งรูปแบบการเคลื่อนไหว
หลังจากสร้างการเคลื่อนไหวให้ออบเจ็คแล้ว คุณสามารถปรับแต่ง
รูปแบบการเคลื่อนไหวเพิ่มเติมจาก Property inspector ได้หลายรูปแบบ
ให้ออบเจ็คเคลื่อนที่ตามเส้นทาง
ตามปกติออบเจ็คที่เคลื่อนไหวแบบ Motion tween จะเคลื่อนที่เป็ น
แนวเส้นตรง แต่หากคุณต้องการเปลี่ยนแปลงทิศทางไปเป็ นแบบอื่น เช่น
เคลื่อนที่บนแนวเส้นโค้ง หรือเคลื่อนที่วนเป็ นวงกลม ก็สามารถสร้างเส้นนา
ทาง (motion path)

15. เป็ นการเปลี่ยนแปลงรูปร่างของออบเจ็คจากแบบหนึ่งให้ค่อยๆ
กลายเป็ นอีกแบบหนึ่ง ซึ่งจะต้องใช้ออบเจ็ค 2 ชิ้น ที่แตกต่างกัน เช่น การ
เปลี่ยนจากตัวอักษร A ไปเป็ น B จากเสื้อไปเป็ นกางเกง หรือจากดินสอไปเป็ น
ยางลบ เป็ นต้น (ต่างจากการเคลื่อนไหวแบบ motion tween ซึ่งจะใช้ออบเจ็ค
ชิ้นเดียว) โดยโปรแกรมจะสร้างการเปลี่ยนแปลงรูปร่างในระหว่างกลางให้
อัตโนมัติ
วิธีสร้างภาพเคลื่อนไหวแบบ Shape Tween
ออบเจ็คที่นามาสร้างภาพเคลื่อนไหวแบบ shape tween จะต้องเป็ นออบ
เจ็คพื้นฐานแบบ Merge Drawing หรือ Object Drawing ซึ่งถ้าจะใช้อินสแตนซ์
ออบเจ็คที่ร่วมกลุ่มอยู่ (group) ข้อความ หรือภาพบิทแมพ ก็จะต้องแยกส่วน
(break apart) ให้เป็ นออบเจ็คพื้นฐานก่อนที่จะนามาสร้างการเคลื่อนไหว

16. ปรับแต่งรูปแบบการเคลื่อนไหว
คุณสามารถปรับแต่งลักษณะการเคลื่อนไหวแบบ shape tween ได้
จาก Propery inspector โดยคลิกเลือกเฟรมใดเฟรมหนึ่งของการเคลื่อนไหว
แล้วกาหนดออปชั่นต่างๆดังนี้
- Ease กาหนดจังหวะในการเคลื่อนไหวระหว่างเฟรม ถ้าต้องการ
เริ่มต้นช้าๆแล้วเร่งความเร็วในช่วงท้าย ให้ใช้ค่าลบ แต่ถ้าจะให้เริ่มต้นเร็ว
แล้วค่อยๆช้าลง ให้ใช้ค่าบวก
- Blend กาหนดวิธีการแปรเปลี่ยนของรูปทรงโดย Distributive จะ
ให้รูปทรงระหว่างกลางที่เรียบกว่า ส่วน Angular จะให้รูปทรงระหว่างกลางที่คง
ลักษณะของมุมหรือเส้นตรงไว้

17. ควบคุมการเปลี่ยนรูปทรงด้วย Shape hint
ในการสร้างภาพเคลื่อนไหวของรูปทรงที่ซับซ้อน คุณสามารถใช้
shape hint เพื่อตรึงจุดที่ต้องการให้อยู่คงที่ของรูปทรงทั้งก่อนและหลังการ
เปลี่ยนแปลงได้ shape hint ประกอบด้วยตัวอักษรจาก a ถึง z โดยในคีย์
เฟรมเริ่มต้นจะเป็ นสีเหลือง และในคีย์เฟรมสุดท้ายจะเป็ นสีขาว แต่จะเป็ น
สีแดงถ้า shape hint นั้นไม่ได้วางอยู่บนเส้นขอบรูปทรง

18. เพิ่มจังหวะการเคลื่อนไหว
หากต้องการเพิ่มช่วงหรืจังหวะการเคลื่อนไหวเข้าไปใน
ภาพเคลื่อนไหวเดิม ก็ทาได้โดยเพิ่มคีย์เฟรมใหม่ โดยแบ่งเป็ น 2 กรณี คือ
- การเพิ่มช่วงเคลื่อนไหวในระหว่างกลาง ให้คุณแทรกคีย์เฟรมใหม่
ระหว่างเฟรมเคลื่อนไหวเดิม
- การเพิ่มช่วงเคลื่อนไหวต่อเนื่องไป ให้เพิ่มคีย์เฟรมใหม่ต่อจากคีย์
เฟรมสุดท้าย
ทั้ง 2 วิธีสามารถทาได้ทั้งกับการเคลื่อนไหวแบบ motion และ shape
tween (ที่สร้างด้วยคาสั่ง Create Motion / Shape Tween)

19. สลับทิศทางการเคลื่อนไหว
เป็ นย้ายตาแหน่งของคีย์เฟรมจากเฟรมแรกไปเป็ นเฟรมสุดท้าย
และเฟนมสุดท้ายมาเป็ นเฟรมแรกส่วนเฟรมอื่นๆก็จะถูกสลับในทานอง
เดียวกัน ทาให้มองเห็นการเคลื่อนไหวกลับเป็ นตรงกันข้าม การสลับนี้ทาได้
ภาพเคลื่อนไหวแบบ Frame-by-Frame, Motion tween หรือ Shape tween
แก้ไขซิมโบลภาพเคลื่อนไหว
เมื่อคุณสร้างภาพเคลื่อนไหวแบบ motion tween ด้วยคาสั่ง Create
Motion Tween โปรแกรมจะแปลงออบเจ็คเหล่านั้นให้เป็ นซิมโบลประเภท
กราฟิก ชื่อ Tween 1, Tween 2,…ตามลาดับ และเก็บไว้ในไลบรารีให้อัตโนมัติ
ซึ่งซิมโบลนี้จะถูกใช้เป็ นเนื้อหาของคีย์เฟรมในแต่ละจังหวะ ดังนั้นเมื่อคุณ
ต้องการแก้ไขคุณสมบัติพื้นฐานของออบเจ็คในภาพเคลื่อนไหว จึงทาได้ด้วย
การแก้ไขกราฟิกซิมโบล โดยออบเจ็คจะถูกอัพเดทในทุกๆคีย์เฟรมพร้อมกัน
ทันที

20. เอฟเฟ็คต์แบบ spotlight หรือ transition ซึ่งมีลักษณะเหมือนกับ
การส่องไฟไปยังตัวละครที่กาลังแสดงอยู่ หรือให้เห็นตัวละครและเนื้อหา
ค่อยๆปรากฏขึ้นทีละส่วน เอฟเฟ็คต์แบบนี้มีหลักในการสร้างคือ ให้คุณ
สร้างตัวละครหรือเนื้อหาทั้งหมดไว้ในเลเยอร์ด้านล่าง จากนั้นสร้าง
spotlight หรือช่องกรอบไว้ในเลเยอร์ด้านบน แล้วกาหนดเลเยอร์บนเป็ น
Mask layer เพื่อเจาะทะลุให้ผู้ชมมองเห็นเฉพาะเนื้อหาในช่องเท่านั้นส่วน
เนื้อหาที่อยู่ด้านนอกจะถูกบังไว้

21. สร้างการเคลื่อนไหวให้กับ Mask layer
คุณสามารถสร้างการเคลื่อนไหวของออบเจ็คใน mask layer
โดยโดยจะให้ผลเหมือนกับแสงไฟที่เคลื่อนที่เพื่อสาดส่องไปยังเนื้อหา
อื่นๆการเคลื่อนไหวนี้ทาได้ทั้งแบบ frame-by-frame,motion tween และ
shape tween สาหรับ motion นั้นยังสามารถดาหนดให้เคลื่อนที่ไปบน
motion path ได้ด้วย

22. เทคนิคการใช้ Mask layer
เปลี่ยนเลเยอร์ปกติให้เป็ นเลเยอร์ที่ถูกบัง
คุณสามารถนาเลเยอร์ปกติไปเพิ่มไว้ภายใต้เลเยอร์ mask โดย
หลายวิธีดีงนี้
- สร้างเลเยอณใหม่ภายใต้เลเยอร์ mask แล้วค่อยสร้างเนื้อหา
- คลิกลากเลเยอร์ที่มีเนื้อหาอยู่แล้ว ไปไว้ใต้เลเยอร์ mask
- สาหรับเลเยอร์ที่วางอยู่ด้านล่างของเลเยอร์ mask ให้คลิกขวาที่เล
เยอร์ แล้วเลือกคาสั่ง properties จากนั้นให้คลิกเลือกออปชั่น Masked
ยกเลิกเลเยอร์ที่ถูกบังคับ
- คลิกลากเลเยอร์นั้น ออกนอกชั้นเลเยอร์ mask
- คลิกขวาที่เลเยอร์แล้วเลือกคาสั่ง Properties จากนั้นให้คลิกเลือก
ออปชั่น Normal ก็ได้เช่นกัน