วิธีการใช้ Shape Tween ใน Adobe Flash

Shape Tween คือการเปลี่ยนแปลงรูปร่าง จากรูปร่างหนึ่งไปอีกรูปร่างหนึ่ง ลองคิดถึงตัว Upgrade ในเรื่อง Ben 10 ที่ตอนแรกมีรูปทรงของตัวเอง แต่สามารถแปลงให้เป็นรูปร่างของสิ่งของที่ตนจะเข้าไปควบคุม

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

1. อิเฎลต้องสร้าง Keyframe ไว้ 2 ที่ สำหรับ 2 รูป ถ้าใครอยากแปลง 3 ร่าง ก็สร้างไป 3 Keyframe
– เอา Mouse คลิกที่ Timeline ว่าอยากให้ Animation ยาวเท่าไร แบบในรูป ถ้าอิเฎลต้องการให้ Animation ยาว 20 Frame ก็คลิกที่ Frame ที่ 20
– กด F5 เพื่อให้ความยาวของ Frame ยืดออกไป
– คลิกตรงพื้นที่ Frame สีขาวบน Layer ในส่วนที่ต้องการสร้าง Keyframe
– สร้าง Keyframe ด้วย F6 (กรณีนี้ใช้ F6 หรือ F7 ก็ได้ เพราะยังเป็น Blank Keyframe อยู่ แต่ถ้าเคยวาดอะไรลงไปแล้ว ต้องกด F7 เพื่อสร้าง Blank Keyframe)
– อาจสร้าง 1, 2, 3 Keyframe ก็ได้ แต่ Keyframe ไม่ควรติดกัน เพราะจะทำให้ไม่เห็นการเปลี่ยนแปลง

2. วาด หรือสร้างรูปเลขาคณิตลงไปในแต่ละ Keyrame
– ในกรณีตัวอย่างที่เอามาให้ดู มี Keyframe ที่ Frame ที่ 1 และ 20
– คลิกที่ Frame ที่ 1 แล้ววาดรูป 5 เหลี่ยมลงไปในพื้นที่ทำงาน
– คลิกที่ Frame ที่ 20 แล้ววาดรูป 4 เหลี่ยมลงไปในพื้นที่ทำงาน
– เอา Mouse ลาก Highlight พื้นที่ Frame บน Layer นั้น ๆ ทั้งหมด
– คลิกขวา
– เลือก Create Shape Tween
– ตอนนี้จะเห็นได้ว่า พื้นที่ Frame จะกลายเป็นสีเขียว และระหว่าง Keyframe จะมีการเปลี่ยนแปลงรูปร่างจาก 5 เหลี่ยมเป็น 4 เหลี่ยม
– ถ้าพอใจแล้วก็ถือว่า เสร็จ แต่ถ้ายังไม่พอใจ ก็ดูต่อข้อ 3

3. ถ้าอิเฎลต้องการควบคุมการเปลี่ยนแปลงรูปร่าง ต้องมีการสร้างจุดอ้างอิง เช่น มุมขวาของ 5 เหลี่ยม จะกลายเป็นมุมขวาของ 4 เหลี่ยม เป็นต้น
– คลิกที่ Keyframe แรกใน Layer
– กด Ctrl+Shift+H เพื่อสร้างจุดอ้างอิง หรือ Command+Shift+H สำหรับเครื่อง Mac (อาจใช้ Modify บน Menu Bar แล้วเลือก Shape เลือก Add Shape Hint)

– จะเห็น a อยู่ในวงกลมเล็ก ๆ สีแดง อยู่ตรงกลางของรูปทรงที่เราสร้าง
– ลาก a ไปวางที่มุมใดมุมหนึ่งของรูปทรงใน Keyframe แรก
– กด Ctrl+Shift+H อีกครั้ง เพื่อสร้างจุดต่อไป ทำซ้ำไปจนครบทุกมุม หรือด้านที่ต้องการให้กลายเป็นมุม (จุดต่อไปจะชื่อ b, c, d, e, …)

– จากนั้นไปคลิกที่ Keyframe ที่ 2 จะเห็นว่าจุดอ้างอิงที่เราสร้าง จะกองอยู่รวมกันตรงกลางของวัตถุ
– ให้ลากจุดต่าง ๆ ไปไวเตามมุมหรือตามด้านที่ต้องการ
– เมื่อทำสำเร็จแล้ว จุดเหล่านี้จะเปลี่ยนจากสีแดงเป็นสีเขียว
– ให้ลองกด Ctrl+Enter เพื่อแสดงผล