Chapter 4 : Animation แบบ Motion Tween

Motion Tween 

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

 

 

 

แบบที่ 1 การสร้างภาพเคลื่อนไหวแบบลอยในแนวเส้นตรง

 

ขั้นที่ 1 คลิกเลือกคีย์เฟรมจุดเริ่มต้น สร้างวัตถุ หรือเนื้อหาตามต้องการ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ขั้นที่ 2 คลิกขวาที่คีย์เฟรม คลิกเลือกเมนู Create Motion Tween

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ขั้นที่ 3 กำหนดระยะห่างจากจุดแรกตามต้องการ เช่น ห่าง 15 เฟรม คลิกที่เฟรมที่ 15 แล้วเพิ่มคีย์เฟรม โดยกด F6 หรือคลิกเมนู Insert > Timeline > Keyframe

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ขั้นที่ 4 ที่เฟรม 15 จับวัตถุที่ stage แล้วปรับเปลี่ยนคุณลักษณะ เช่น ย้ายไปอยู่ตำแหน่งขวาสุดของ Stage

ขั้นที่ 5 ทดสอบ Movie โดยกด Ctrl+ Enter หรือ คลิกเมนู Control > Test Movie จะได้ไฟล์ Movie เป็น .swf

 

      

แบบที่ 2 ภาพเคลื่อนไหวแบบหมุนไปพร้อมกับเคลื่อนที่

ขั้นที่ 1  คลิกเลือกคีย์เฟรมแรกหรือเฟรมที่อยู่ระหว่างคีย์เฟรมทั้งสองของการเคลื่อนไหว (ขั้นตอนต่อเนื่องจากแบบที่ 1 ด้านบน)

 

 

 

 

 

ขั้นที่ 2 กำหนดค่าต่างๆ ที่หน้าต่าง Properties

 

 

 

 

 

 

 

Rotate : CW  หมายถึงลักษณะการหมุนแบบตามเข็มนาฬิกา  

1 times  หมายถึงจำนวนรอบของการหมุนภายใน 15 เฟรม (ในที่นี้กำหนดให้หมุน 1 ครั้ง)

ขั้นที่ 3 คลิกเฟรม 30 กดปุ่ม F6 เพื่อ Insert keyframe แล้วย้ายตำแหน่งของภาพไปไว้ด้านซ้ายสุด

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ขั้นที่ 4 ทำซ้ำขั้นที่ 2 แต่เปลี่ยนกำหนด Rotate เป็น CCw หมายถึงลักษณะการหมุนทวนเข็มนาฬิกา

ขั้นที่ 5 ทดสอบการเคลื่อนที่โดยกดปุ่ม Ctrl+Enter

 

      

แบบที่ 3 ภาพเคลื่อนไหวแบบย่อ-ขยาย

ขั้นที่ 1 คลิกที่เฟรมที่ 1 แล้ววาดรูปที่ต้องการลงไป

ขั้นที่ 2 คลิกขวาที่เฟรมที่ 1 แล้วเลือกคำสั่ง Create Motion Tween

 

 

 

 

 

 

 

 

 

 

 

 

 

ขั้นที่ 3 คลิกขวาเฟรมที่ 20 เลือกคำสั่ง Insert Keyframe หรือกดปุ่ม F6 แล้วขยายรูปให้ใหญ่ขึ้นด้วย Free Transform Tool

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ขั้นที่ 4 กดปุ่ม Ctrl+Enter เพื่อดูตัวอย่างภาพเคลื่อนไหว จะเห็นภาพจากขนาดเล็กค่อยๆ ใหญ่ขึ้น

 

      

 

แบบที่ 4 ภาพเคลื่อนไหวแบบปรับให้ค่อยชัดขึ้นหรือจางลง (Alpha)

Alpha เป็นการปรับค่าความโปร่งของวัตถุ ถ้าค่า alpha (อัลฟ่า) มาก เราจะมองวัตถุนั้นชัดเจน ถ้าค่า alpha น้อยลงเราจะมองเห็นภาพวัตถุนั้นลางๆ

 

ขั้นที่ 1 คลิกที่วัตถุเพื่อให้ตัวเลือกปรากฏขึ้นที่ Properties จากนั้นเลือก Color: Alpha แล้วปรับค่า Alpha เป็นค่าที่น้อยลง เช่น 20 % จะได้ภาพที่จางลงมองทะลุพื้นหลังได้ (ขั้นตอนต่อเนื่องจากแบบที่ 3 ด้านบน)

 

 

 

 

 

 

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