ภาพเคลื่อนไหวแบบ Tween Instances

วิธีที่ 2 ของการสร้างภาพเคลื่อนไหวใน Fireworks ก็คือการใช้คำสั่ง Tween Instances กับ instance ของ symbol ที่ใช้สร้างภาพเคลื่อนไหว วิธีนี้คุณต้องมีพื้นฐานเกี่ยวกับ symbol และ instance มาก่อน จึงจะเข้าใจได้ดียิ่งขึ้น โดยเราจะใช้ประโยชน์จากกราฟิกซิมโบล (Graphic symbol) ในการสร้างอินสแตนซ์บนเอกสาร เมื่อเรามีอินสแตนซ์ที่จะใช้เป็นหลัก 2 อินสแตนซ์หรือมากกว่า เราก็สามารถสั่งให้ Fireworks สร้างอินสแตนซ์ระหว่างอินสแตนซ์หลักเหล่านั้นได้โดยอัตโนมัติ โดยที่แต่ละอินสแตนซ์จะมีลักษณะแตกต่างกันเล็กน้อย เพื่อให้ดูเหมือนกับว่าอินสแตนซ์หนึ่งกำลังเปลี่ยนไปเป็นอีกอินสแตนซ์หนึ่ง

การสร้างภาพเคลื่อนไหวแบบนี้อาจเรียกว่า Keyframe animation ซึ่งเราจะใช้อินสแตนซ์ในการกำหนดลักษณะและตำแหน่งของภาพในเฟรมหลัก (keyframe) โดยเราสามารถมีเฟรมหลักได้มากกว่า 2 เฟรม ดังนั้น เราจึงสามารถจัดวางอินสแตนซ์หลายๆอินสแตนซ์ เพื่อใช้กำหนดทิศทางและรูปแบบของการเคลื่อนไหว ก่อนที่จะเรียกใช้คำสั่ง Tween Instances ต่อไป

ประโยชน์อย่างหนึ่งของการใช้อินสแตนซ์ในภาพเคลื่อนไหวก็คือ เราสามารถสร้างภาพเคลื่อนไหวที่เกิดจากการเปลี่ยนแปลงลักษณะของอินสแตนซ์ได้ ด้วยการปรับเปลี่ยนคุณสมบัติของอินสแตนซ์ในเฟรมหลัก เช่น Tranformation, Opacity, Blend modes และ Live Effects ก็จะทำให้เราสามารถสร้างภาพเคลื่อนไหวในลักษณะต่างๆ ดังต่อไปนี้ได้

• Tranformation : เปลี่ยนรูปร่างของอินสแตนซ์ด้วยคำสั่งต่างในเมนู Modify > Transform เพื่อเปลี่ยนขนาด บิด หมุน เอียง หรือพลิกด้านของอินสแตนซ์ ซึ่งจะทำให้เราสามารถสร้างภาพเคลื่อนไหวจากรูปร่างหนึ่งไปยังอีกรูปร่างหนึ่งได้
• Opacity : ปรับความทึบหรือโปร่งใสของอินสแตนซ์ให้แตกต่างกัน เพื่อสร้างเอฟเฟ็คต์ของการค่อยๆปรากฏชัดขึ้น (fade in) หรือค่อยๆจางลง (fade out) ได้
• Blend modes : ปรับรูปแบบการผสมออบเจ็คเข้าด้วยกันของอินสแตนซ์ เพื่อแสดงการเปลี่ยนแปลงระหว่าง Blend modes
• Live Effects : เมื่อคุณกำหนด Live Effects ชนิดเดียวกันให้กับอินสแตนซ์ คุณสามารถแสดงความเปลี่ยนแปลงของเอฟเฟ็คต์นั้นได้ เช่น การค่อยๆเพิ่มหรือลดปริมาณเอฟเฟ็คต์ หรือการเปลี่ยนสีของเอฟเฟ็คต์ เป็นต้น

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

ตัวอย่างภาพเคลื่อนไหวที่เราจะทดลองทำ

สร้างภาพเคลื่อนไหวแบบ Tween Instances

1. อิมพอร์ตซิมโบลที่ต้องการใช้เข้ามาในเอกสาร หรือคุณอาจสร้างออบเจ็คหรือกรุ๊ป (group) ของออบเจ็คตามต้องการ แล้วแปลงให้เป็นซิมโบลด้วยการกดคีย์ F8 หรือคำสั่ง Modify > Symbol > Convert to Symbol ตั้งชื่อซิมโบลพร้อมเลือกชนิดเป็นแบบ Graphic เมื่อคลิก OK คุณจะได้ซิมโบลอยู่ใน Library พร้อมกับอินสแตนซ์ของซิมโบลบนแคนวาส
   ซิมโบลรูปนกที่อิมพอร์ตเข้ามาในเอกสาร จะถูกจัดเก็บอยู่ในไลบรารี
   
2. เพิ่มอินสแตนซ์ตามจำนวนที่ต้องการ ด้วยการกดคีย์ Alt แล้วลากจากอินสแตนซ์ที่มีอยู่ หรือใช้วิธีลากชื่อซิมโบลหรือรูปตัวอย่างซิมโบลในพาเนล Library มายังแคนวาส
3. จัดวางอินสแตนซ์ตามตำแหน่งและทิศทางของการเคลื่อนที่
   วางตำแหน่งและหมุนอินสแตนซ์รูปนก ให้มีลักษณะที่ต้องการ
   
4. ถ้าต้องการ คุณสามารถปรับเปลี่ยนลักษณะของอินสแตนซ์ ด้วยเครื่องมือ Scale, Skew, Rotate รวมถึงการปรับ Opacity และการแอพพลาย Live Effects ให้กับอินสแตนซ์ได้
5. เลือกอินสแตนซ์ทั้งหมด แล้วสั่ง Modify > Symbol > Tween Instances (Ctrl+Alt+Shift+T) จะปรากฏกรอบ Tween Instances ขึ้นมา ในช่อง Steps ให้ใส่จำนวนอินสแตนซ์ที่ต้องการเพิ่มเข้ามาระหว่างอินสแตนซ์หลักที่มีอยู่ พร้อมกับเลือกออปชั่น Distribute to Frames เพื่อกระจายอินสแตนซ์ทั้งหมดไปอยู่ในเฟรม
   

กำหนดจำนวนอินสแตนซ์ ที่ต้องการเพิ่มเข้ามาระหว่างอินสแตนซ์หลัก ตัวเลข 5 ที่ใส่ลงไปทำให้ได้อินสแตนซ์ทั้งหมด 10 อินสแตนซ์ แบ่งเป็นช่วงละ 5 อินสแตนซ์จากอินสแตนซ์ที่ 1 ไปยังอินสแตนซ์ที่ 2 และจากอินสแตนซ์ที่ 2 ไปยังอินสแตนซ์ที่ 3 ซึ่งเมื่อรวมกับอินสแตนซ์หลักที่มีอยู่แล้ว 3 อินสแตนซ์ ทำให้ได้อินสแตนซ์ทั้งหมด 13 อินสแตนซ์ กระจายอยู่ในเฟรมทั้งหมด 13 เฟรม

---

ภาพเคลื่อนไหวที่ได้จากการ Tween Instances
ถ้าคุณไม่ได้เลือกออปชั่น Distribute to Frames ในกรอบ Tween Instances อินสแตนซ์ทั้งหมดที่เกิดขึ้นจะยังคงอยู่ใน Frame 1 ทำให้คุณมีโอกาสเปลี่ยนแปลงและแก้ไขอินสแตนซ์ได้อีกจนกว่าจะถูกใจ จากนั้นจึงเลือกอินสแตนซ์ทั้งหมดแล้วกดปุ่ม Distribute to Frames ที่ด้านล่างของพาเนล Frames เพื่อกระจายอินสแตนซ์ทั้งหมดไปยังเฟรม

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