AODTO : Flash ActionScript and FLEX

การทำภาพเคลื่อนไหวแบบ Motion Tween

Posted on: September 12, 2007

Step 1
ให้เราสร้างไฟล์เอกสาร มาตามปกตินะครับ คงสร้างกันเป็นนะครับ

Converting a circle to a symbol

ต่อไปเราจะเห็นมี หน้าเอกสาร เปล่าขึ้นมา แล้วดูที่ Panel Layer
โปรแกรม Flash จะทำการสร้าง Layer ให้เรา 1 Layer นะครับ
เราสามารถ วาดงาน อะไรได้เลย แต่ในที่นี้ เราจะมาสร้าง การทำภาพเคลื่อนไหว
แบบ Motion Tween นะครับ
ให้เราเปลี่ยนชื่อตามต้องการนะครับ โดยการเปลี่ยนชื่อให้ ดับเบิ้ลคลิกที่ Layer นั้น แล้วพิมพ์
ชื่อที่เราต้องการ อะไรก็ได้ แล้วกด Enter ไป

Renaming Layers in Flash

Step 2
ที่ Stage ของเราจะว่างเปล่านะครับไม่มีอะไร
ให้เราไปคลิกที่ Frame ที่ 1 ที่อยู่ใน Layer ที่เราพึ่งตั้งชื่อเมื่อกี้นี้นะครับ
แล้วไปที่ Panel Tools ซึ่งก็คือหน้าต่างเครื่องมือของเรา

ให้คลิกที่ Oval Tool Flash Oval Tool แล้วให้เราเลื่อนเมาท์ไปวาดรูปที่ Stage ของเราวาดอะไรก็ได้
ใครชอบเล็กชอบใหญ่ก็วาดเข้าไป

Step 3
เราจะทำ Animation การเคลื่อนที่ จากที่หนึ่งไปอีกที่หนึ่ง
คือจาก ซ้าย วิ่งไปทางขวา ดังนั้นรูปที่เราวาดนั้นเรา จะต้องย้ายมันมาทางซ้าย ก่อน
จะได้มีพื้นที่ในการวิ่ง จาก ซ้าย ไป ขวา
- ให้เราไปคลิกที่ Arrow tool Flash Arrow tool
เพิ่มจะไปเลือกที่วงกลมของเรา สังเกตจากรูปด้านล่าง ถ้ามีการเลือกที่วงกลม รูปวงกลมนั้นจะเป็นจุด
ถ้าเราไม่ได้เลือกที่ วงกลม มันก็จะเป็นเนื้อรูปวงกลม ธรรมดา

Selected and unselected objects

การทำการเคลื่อนไหวแบบ Motion Tween นั้นจะมีกฏอยู่ง่ายๆ ว่า
การจะให้วัตถุเคลื่อนที่นั้น วัตถุนั้น จะต้องจับกลุ่มเป็นก้อนเดียวกัน
ดังนั้น จะสังเกตเห็นว่ารูปวงกลมเรานั้น จะมีการแยก เส้นขอบและ เนื้อวงกลมออกจากกัน
เราจะได้ทำการ Group หรือทำให้ เส้นและเนื้องานนี้เป็น อันเดียวกัน
หรือเราจะแปลงให้ รูปที่เราวาดเป็น Symbol ต่างๆก็ได้ (ดูได้จากหัวข้อการแปลงวัตถุเป็น Symbol)

ในที่นี้ เราจะแปลง วัตถุที่เราวาดเป็น Symbol แบบ Graphic

วิธีการแปลงก็ให้เรา

- ลากเมาท์ค้าง แล้วลากคุม รูปวงกลมที่เราวาด ก็จะทำให้รูปวงกลมที่เราวาด เป็นจุดๆ เหมือนรูปตัวอย่างด้านบน
- หรืออีกวิธีที่ง่าย ให้เรา ดับเบิ้ลคลิก ที่รูปวงกลมก็ได้ จะเป็นการเลือกวัตถุเหมือนกัน
ส่วนตัวผมทำวิธีนี้เหละ เร็วดี
- แล้วให้คลิกที่เมนู Insert – Convert to Symbol.

Symbol properties window

- จะมีหน้าต่าง โชว์ขึ้นมา ให้เราตั้งชื่อของ Graphic ของเราตามต้องการ ในที่นี้จะตั้งชื่อว่า Ball
- เลือก Type ที่ช่อง Behavior เป็นแบบ Graphic
- ได้แล้วให้คลิกที่ปุ่ม OK เปิดหน้าต่าง Library ขึ้นมา โดยคลิกที่เมนู window > Library
หรือกด Ctrl+L ก็ได้
- เราก็จะเห็น Item ชื่อ ball อยู่ในหน้าต่าง Library ของเรา

Step 4
การสร้างการเคลื่อนที่จากที่หนึ่งไปอีกที่หนึ่งนั้น
เราจะต้องมีจุดเริ่มต้น และจุดปลายทางที่เราจะไป
ดังนั้นเราจะต้องมีการสร้างจุดเริ่มต้น และ จุดสิ้นสุดให้กับรูปวงกลมของเรา

โดยจุดเริ่มต้นนั้นเรามีการสร้างไว้แล้ว ก็คือ Key Frame ที่ 1
ต่อไปให้เราสร้าง Key Frame ปลายทาง
โดยให้นำเมาท์ไปคลิกขวาที่ Frame ที่ 36
แล้วเลือกคำสั่ง Insert Keyframe ดังรูป

Adding a key frame

เราก็จะได้ Keyframe 2 จุดคือ อยู่ที่ Frame ที่1 และ Frame ที่ 36
สังเกต ถ้า Keyframe เฟรมนั้นจะเป็นจุดสีดำ ที่เฟรมนั้น
ส่วน Frame ที่สีทึบๆนั้น จะเรียกว่า Frame ธรรมดา
จะไม่เรียกว่า Keyframe

Step 5
- ต่อไปให้เรานำเมาท์คลิกที่ Keyframe ที่ 36
แล้วคลิกเลือก รูปวงกลมของเรา
แล้วคลิกเมาท์ค้างไว้ ลากไปทางด้านขวา ตามต้องการ

step 6
- ต่อไปให้เรานำเมาท์มาคลิกขวาที่ Frame ธรรมดา
Frame อะไรก็ได้
ดังรูป แล้วเลือกเมนู Create Motion Tween ดังรูป

Creating a motion tween

- เราก็จะเห็นเป็นเส้นลูกศรตรงที่ Frame ขอเราแล้ว
- ให้เราลองกด Ctrl+Enter ดู
- จะเห็นลูกบอลเราเคลื่อนที่แล้ว
- ถ้าเราต้องการที่จะให้ลูกบอลเคลื่อนที่ไปที่จุดปลายทางไหน
ก็ไปคลิกที่ Keyframe ปลายทาง (Keyframe ปลายทางของเราคือ Keyframe 36)

Final - Motion Tween

ก็ให้คลิกที่ Keyframe นั้นก่อน แล้วค่อยทำการย้าย รูปวงกลมไปยังตำแหน่งที่ต้องการนะครับ
- ส่วนจะย้ายตำแหน่งเริ่มต้นเคลื่อนที่ของ รูปวงกลมเรา ก็ทำเช่นกัน
คือให้นำเมาท์ไปคลิกที่ Keyframe ต้นทางก่อน (Keyframe ต้นทางของเราคือ Keyframe 1)
แล้วก็ค่อย ย้ายรูปวงกลมเรานะครับ

เห็นไหมง่ายไหมครับ ลองทำดูนะครับ
ไม่ยากอย่างที่คิด

About these ads

5 Responses to "การทำภาพเคลื่อนไหวแบบ Motion Tween"

มีภาพอยู่ 5 ภาพมาซ้อนกันแล้วภาพค่อยๆสลับขึ้นมาแบบนุ่มนวล
สอนให้หน่อยนะ

ขอบคุณมากๆ

ลองใช้เรื่องทวีน ดูเยอะๆ เเล้วจะเห็นเองครับ ความนุ่มนวล

ลอง FreeTran. ผสมไป ต้องหัดบ่อยๆคับ

แยกรูปภาพแต่ละภาพ ให้อยู่คนละ Layer
แล้วลองเลื่อนให้ภาพมีความเลืียมล้ำกันของภาพ

ใช้เป็น Motion Tween ดู
ก็ได้ล่ะ

ลองทำดูครับ
ไม่ยากๆ

ผมจะเอาภาพเคลื่อนไหวที่่ใส่ effects blur มาวาง บนภาพ background อะคับปัญหาคือ ผมวางถาพbackground ก่อน แล้ว ผมก็เอาภาพเคลื่อนไหวมาวางทับ
จากนั้นพอใส่ effects ปุ็ป มันก็ ขึ้นอีก layer และภาพเคลื่อนไหวก็หายไป ผม งง มากเลย คับ ช่วยแนะนำ ทีคับ

I truly appreciate this blog article.Much thanks again. Much obliged.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Top Clicks

  • None

Blog Stats

  • 163,274 hits

calendar

September 2007
M T W T F S S
« Aug   Oct »
 12
3456789
10111213141516
17181920212223
24252627282930
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: