Download to read offline
หน่วยที่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. ก๊อปปี้ การเคลื่อนไหวแบบ MotionTween เป็ นคาสั่งที่ช่วยให้คุฯสามารถนารูปแบบเคลื่อนไหวของออบเจ็ค หนึ่งไปใช้กับออบเจ็คอื่นๆ โดยจะเป็ นการก๊อปปี้ คุณสมบัติทุกอย่างไม่ว่าจะ เป็ นทิศทางการเคลื่อนที่ จังหวะ หรือจานวนเฟรมที่ใช้ และยังสามารถก๊อปปี้ จากไฟล์หนึ่งไปยังอีกไฟล์หนึ่งได้ด้วย ปรับแต่งรูปแบบการเคลื่อนไหว หลังจากสร้างการเคลื่อนไหวให้ออบเจ็คแล้ว คุณสามารถปรับแต่ง รูปแบบการเคลื่อนไหวเพิ่มเติมจาก 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 ก็ได้เช่นกัน