วิธีการใช้ Motion Tween และ Classic Tween ใน Adobe Flash

Adobe Flash CS5 (และ version ที่สูงกว่า) จะมีให้เราเลือก Tween 3 ชนิด คือ Motion Tween, Classic Tween และ Shape Tween ซึ่งคำว่า Classic Tween ใน Adobe Flash CS5 จะหมายถึง Motion Tween ใน version ก่อนหน้านี้
ส่วนคำว่า Motion Tween ใน Adobe flash CS5 จะเป็น Tween ในรูปแบบใหม่ที่เราสามารถควบคุมทิศทางการเคลื่อนที่, การ Blur, ตลอดจนกระทั่งการขยับขยายได้แม่นยำขึ้น

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

Classic Tween

อิเฎลแนะนำให้มาดู Motion Tween แบบดั้งเดิม หรือ ที่ปัจจุบันเรียกว่า Classic Tween กันก่อนที่จะไปเจออะไรที่มัน Hi-So กว่านี้

1. ใช้แถบเครื่องมือทางด้านซ้ายมือของหน้าจอที่เห็น มาสร้างวัตถุอันหนึ่งบนพื้นที่ทำงาน (แถบเครื่องมืออาจอยู่ที่อื่น แล้วแต่ความถนัดของผู้ใช้ว่าจะวางมันที่ไหน แต่รูปที่อิเฎลเอามาลง เป็น Wordspace แบบ Classic)

2. ตอนนี้ อิเฎลก็จะกำหนดความยาวของ Animation ที่เราจะทำ
– เงยหน้ามอง Timeline ด้านบน
– แล้วเอา Mouse ไปคลิกที่ Frame ที่ 20 บนบรรทัดของ Layer ที่มีรูปที่วาดไว้
– กด F5 (หรือ คลิกขวา แล้วเลือก Insert Frame)

3. อิเฎลก็จะใส่ Tween ลงไปให้กับวัตถุที่สร้าง
– คลิกขวาที่พื้นที่สีเทา ใน Layer ที่เราทำงานอยู่
– ถ้าใช้ Adobe Flash CS5 ขึ้นไปให้เลือก Create Classic Tween
– ถ้าใช้ Version ต่ำกว่า CS5 ให้เลือก Create Motion Tween

4. จับวัตถุเคลื่อนที่

4.1 เคลื่อนที่ธรรมดา ไม่มีการหมุนหรือย่อขนาด

– ตอนนี้เนื้อที่ Layer บน Timeline เป็นสีม่วงแล้ว
– ไปที่ Frame สุดท้าย หรือ Frame ก่อนหน้านั้น (แล้วแต่)
– กด F6 เพื่อเพิ่ม Keyframe (หรือคลิกขวา แล้วเลือก Insert Keyframe)
– ก้มลงมามองที่พื้นที่ทำงาน
– ลากวัตถุที่เราสร้างไปที่อืน
– เสร็จแล้ว!! ลองกด Ctrl+Enter เพื่อเล่น Animation

4.2 เคลื่อนที่แบบมีการหมุน หรือ ย่อ ขยาย
เนื่องจากเวลาหมุนวัตถุ จะต้องมีแกนหมุน
เนื่องจากเวลาจะย่อ หรือขยาย ก็ต้องมีจุดอ้างอิง เช่น ย่อจากซ้ายไปขวา ให้ลากจุดอ้างอิงไปทางขวา เป็นต้น

– ตอนนี้เนื้อที่ Layer บน Timeline เป็นสีม่วงแล้ว
– ไปคลิกที่ Frame แรกของ Timeline
– มองที่ Tool Bar หรือแถบเครื่องมือ
– คลิกที่ Free Transform Tool (ตัวที่ 3 นับจากตัวแรก ดูตามรูปด้านล่าง)
– ตอนนี้หน้าตาวัตถุของเราจะดูเหมือนสามารถย่อ ขยายได้ แล้วมีจุดสีขาวตรงกลาง
– จุดสีขาวตรงกลางคือจุดอ้างอิง เพื่อที่จะหมุนหรือย่อ ขยาย ถ้าอิเฎลต้องการให้หมุนรอบมุมว้ายบน อิเฎลก็จะลากจุดสีขาวนั้นไปที่มุมซ้ายบน เป็นต้น
– เมื่อจุดสีขาวอยู่ในตำแหน่งที่ต้องการแล้ว ให้เงยหน้าดู Timeline
– ไปที่ Frame สุดท้าย หรือ Frame ก่อนหน้านั้น (แล้วแต่)
– กด F6 เพื่อเพิ่ม Keyframe (หรือคลิกขวา แล้วเลือก Insert Keyframe)
– ก้มลงมามองที่พื้นที่ทำงาน
– จับวัตถุหมุน ย่อ ขยาย หรือลากไปที่อื่นด้วยก็ได้
– เสร็จแล้ว!! ลองกด Ctrl+Enter เพื่อเล่น Animation

Motion Tween

Motion Tween ใน Adobe Flash CS5 จะเหมือนเอา Classic Tween (Motion Tween รุ่นเก่า) มารวมกับการเคลื่อนที่ของวัตถุตาม Guild Line เพราะเมื่อสร้าง Motion Tween แล้วจะมีเส้นสีเขียว บอกเส้นทางการเคลื่อนที่ของวัตถุ ซึ่งเราสามารถใช้ Mouse ดึง ดัด เส้นนั้นให้โค้งไปมาได้

ตอนนี้ ก็มาลองทำ Motion Tween ไปพร้อม ๆ กับอิเฎลเลย!! ต้องเป็น CS5 ขึ้นไปเท่านั้น Versionต่ำกว่าจะไม่มี

1. หลังจากข้อ 1 และข้อ 2 ข้างต้น อิเฎลก็จะใส่ Motion Tween ลงไป
– คลิกขวาที่พื้นที่สีเทา ใน Layer ที่เราทำงานอยู่
– ให้เลือก Create Motion Tween

– พื้นที่ของ Layer จะเป็นสีฟ้า

2. ไปที่ Motion Editor
ถ้าไม่เจอหน้าต่างนี้ ให้คลิก Window ที่ Menu Bar และเลือก “Motion Editor”
– จุด ดำ ๆ ที่เห็นที่ Timeline ในหน้าต่างของ Motion Editor คือ Keyframe ที่เราสร้างเอาไว้แล้ว
– เวลาจะเลื่อน ให้เลือนจุดดำบนบรรทัดของ X และ Y
– เวลาจะหมุน ให้เลือนจุดดำบนบรรทัดของ Rotation X และ Rotation Y
– เวลาจะย่อ หรือ ขยาย ให้เลือนจุดดำบนบรรทัดของ Scale X และ Scale Y
– เวลาจะบิด ให้เลือนจุดดำบนบรรทัดของ Skew X และ Skew Y
– นอกจากนี้ยังมี Color Effect ให้เล่นเกี่ยวกับสี
– และมีการทำ Blur Filter อีกด้วย

3. เมื่อตั้งค่าการเคลื่อนที่เสร็จเรียบร้อยแล้ว เราจะเห็นได้ว่า ตรงพื้นที่ที่เราทำงานจะมีเส้นสีเขียว โยงบอกทิศทางการเคลื่อนที่ และมีจุด ๆๆๆ อยู่บนเส้น จุดหนึ่งจุดที่เราเห็น หมายถึง Frame แต่ละ Frame เรายังสามารถเอา Mouse จับที่เส้นแล้วดึงให้โค้งไปมาตามต้องการ