การใช้โปรแกรม FLASH 8 ในการสร้างภาพเคลื่อนไหว

การสร้างภาพเคลื่อนไหวด้วย Timeline effect

โปรแกรม Flash มีวิธีการสร้างภาพเคลื่อนไหว 2 วิธี คือ
1. การสร้างภาพเคลื่อนไหวด้วยคำสั่ง Timeline effect
2. การสร้างภาพเคลื่อนไหวด้วยตนเอง โดยแบ่งเป็น 2 ชนิด คือ
2.1 แบบเฟรมต่อเฟรม (Frame-by-Frame animation)
2.2 แบบทวีน (Tween animation)

การสร้างภาพเคลื่อนไหวด้วยคำสั่ง Timeline effect

การสร้างาพเคลื่อนไหวแบบ Timeline effect เป็นการสร้างภาพเคลื่อนไหวแบบง่ายๆ โดยโปรแกรมจะสร้างเฟรม
สร้างซิมโบล และอื่นๆ แบบอัตโนมัติ ซึ่งมีข้อจำกัดคือ รูปแบบการเคลื่อนไหวมีจำกัด ไม่หลากหลาย

ขั้นที่ 1 นำภาพบิตแมพเข้ามาในโปรแกรม โดยคลิกเมนู File -> Import > Import to Stage... (ภาพที่ 1)

ภาพที่ 1

ขั้นที่ 2 คลิกขวาที่ภาพ เลือกเมนู > Timeline Effects > Effects > (แล้วเลือก Effects ตามต้องการ)
ในตัวอย่างนี้ เลือก Blur (ภาพที่ 2 )

ภาพที่ 2

ขั้นที่ 3 ตั้งค่าการเคลื่อนไหวตามต้องการ แล้วคลิก OK (ภาพที่ 3 )

เมื่อดูที่ Timeline จะพบว่า โปรแกรมได้สร้างเฟรมเพิ่มขึ้นจากเดิม (ความยาวของเฟรมจะอยู่ที่ Effect ที่เลือก)
ดังภาพที่ 4

ภาพที่ 4

ขั้นที่ 1 พิมพ์ตัวอักษร หรือข้อความตามต้องการ (ภาพที่ 5)

ภาพที่ 5

ขั้นที่ 2 คลิก Selection Tool สัญลักษณ์ แล้วคลิกขวาที่ตัวอักษร เลือกเมนู
Timeline Effects > Effects> (แล้วเลือก Effects ตามต้องการ) ในตัวอย่างนี้ เลือก Expand
(ภาพที่ 6 )

ภาพที่ 6

ขั้นที่ 3 ตั้งค่าการเคลื่อนไหวตามต้องการ แล้วคลิก OK (ภาพที่ 7 )

ภาพที่ 7

เมื่อดูที่ Timeline จะพบว่า โปรแกรมได้สร้างเฟรมเพิ่มขึ้นจากเดิม (ความยาวของเฟรมจะอยู่ที่ Effect ที่เลือก)

ดังภาพที่ 8

ภาพที่ 8

การสร้างภาพเคลื่อนไหวด้วยตนเอง

การสร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม (Frame-by-Frame animation)
การสร้างภาพเคลื่อนไหวแบบนี้ เป็นการสร้างคีย์เฟรม หลายๆ คีย์เฟรมต่อเรียงกัน แต่ละเฟรมจะเป็นอิสระต่อกัน การแก้ไขเฟรมใดเฟรมหนึ่ง ไม่ส่งผลต่อเฟรมอื่นๆ

การสร้างข้อความเคลื่อนไหวแบบเฟรมต่อเฟรม

ขั้นที่ 1 พิมพ์ข้อความลงบน Stage โดยเริ่มที่คีย์เฟรมใดคีย์เฟรมหนึ่ง (ภาพที่ 1)

ภาพที่ 1

ขั้นที่ 2 เพิ่มคีย์เฟรมที่ 2 โดย กด F6 หรือ คลิกขวาที่คีย์เฟรมที่ 1 แล้วคลิก Insert Keyframe (ภาพที่ 2 )

ภาพที่ 2

ขั้นที่ 3 คลิกที่คีย์เฟรมที่ 2 พิมพ์ตัวอักษรตัวที่ 2 หรือข้อความที่ต้องการ (ภาพที่ 3 )

ภาพที่ 3

ขั้นที่ 4 ทำขั้นตอนที่ 2 ต่อด้วยขั้นตอนที่ 3 วนอย่างนี้ จนกว่าจะครบข้อความที่ต้องการ ( ภาพที่ 4)

ภาพที่ 4

ขั้นที่ 5 ทำจนครบข้อความที่ต้องการ ดังภาพที่ 5

ภาพที่ 5

ขั้นที่ 6 ทดสอบ Movie โดยกด Ctrl+ Enter หรือ คลิกเมนู Ctrol > Test Movie Z(ภาพที่ 6)

ภาพที่ 6

สร้างข้อความเคลื่อนไหวแบบเฟรมต่อเฟรม

ขั้นที่ 1 คลิกเลือกคีย์เฟรมจุดเริ่มต้น (ภาพที่ 1)

ภาพที่ 1

ขั้นที่ 2 สร้างวัตถุ หรือเนื้อหาตามต้องการ (ภาพที่ 2 )

ภาพที่ 2

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

ภาพที่ 3

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

ขั้นที่ 5 จับวัตถุที่ stage แล้วปรับเปลียนคุณลักษณะ เช่น ย้ายตำแหน่ง ย่อ-ขยาย เปลี่ยนสี หรืออื่นๆ
ตามต้องการ (ภาพที่ 5)

ภาพที่ 5

ขั้นที่ 6 ทดสอบ Movie โดยกด Ctrl+ Enter หรือ คลิกเมนู Ctrol > Test Movie (ภาพที่ 6)

ภาพที่ 6

การเคลื่อนที่ตามเส้นทาง

การเคลื่อนไหวโดยปกติจะเป็นแบบ Motion Tween แต่หากต้องการให้วัตถุเคลื่อนไหวไปตามเส้นทางที่กำหนด
ก็สามารถทำได้ โดยสร้างเส้นนำทางขึ้นมา ซึ่งเรียกว่า Motion Path

ขั้นตอนการสร้าง

ขั้นที่ 1 คลิกเลือกคีย์เฟรมแรกของการเคลื่อนไหว (ภาพที่ 1)
ขั้นที่ 2 สร้างวัตถุ บน Stage หรือ สร้าง Movie Clip แล้วลากมาวาง (ภาพที่ 2 )

ภาพที่ 1

ขั้นที่ 3 สร้าง Guide Layer โดยคลิกปุ่ม Add Motion Guide (ภาพที่ 2 )

ภาพที่ 2

ขั้นที่ 4 สร้างเส้น Motion Path ที่ Guide Layer โดยคลิกที่เฟรม (หมายเลข 4 ภาพที่ 3 ) แล้วสร้างเส้นโดยใช้เครื่องมือต่างๆ
เช่น สร้างด้วยการวาดด้วยดินสอ (หมายเลข 5 ภาพที่ 3 ) โดยสร้างเป็นรูปปลายเปิด (หมายเลข 6 ภาพที่ 3 )

ภาพที่ 3

ขั้นที่ 5 ที่ Guide Layer กำหนดระยะห่างตามต้องการ แล้วสร้างคีย์เฟรม โดย กด F6 (หมายเลข 7 ภาพที่ 4 )

ภาพที่ 4

ขั้นที่ 6 ที่ Layer ของวัตถุ กำหนดให้เป็น Motion Tween โดยคลิกขวา คลิก Create Motion Tween
และกำหนดระยะห่างให้เท่ากับ Guide Layer แล้วสร้างคีย์เฟรม โดย กด F6 (ภาพที่ 5 )

ภาพที่ 5

ขั้นที่ 7 นำวัตถุไปวางที่ปลายเส้นแต่ละข้าง โดยคลิกเฟรมเริ่มต้นของ Layer วัตถุ จับวัตถุ มาวางที่ปลายเส้นเริ่มต้น
(ให้จุดวงกลมศูนย์กลางของวัตถุอยู่ที่ปลายเส้น) และคลิกเฟรมสุดท้ายของ Layer วัตถุ จับวัตถุ มาวางที่ปลายสุดท้าย
เช่นเดียวกัน (ภาพที่ 6)

ภาพที่ 6

กรณีที่ต้องการให้วัตถุ หันหัววิ่งตามเส้น ให้คลิกเฟรมเริ่มต้น ของ Layer วัตถุ
แล้วคลิกช่อง Orient to path ที่หน้าต่าง Properties

ภาพที่ 7

หมายเหตุ กรณีที่ต้องการให้โชว์เส้น Motion path ด้วย ให้ Copy เส้นจาก Guide Layer และนำไปวางที่ Layer ใหม่
โดยควรสร้าง Layer ใหม่อยู่ข้างล่าง Layer ของวัตถุ ( เวลาวางให้คลิก Edit > Paste in Place ซึ่งเป็นการวางตำแหน่งเดิม)

การ Mask และสร้างการเคลื่อนไหวให้กับ Mask Layer

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

ขั้นตอนการสร้าง

ขั้นที่ 1 เขียนวัตถุ หรือนำภาพที่ต้องการที่ เฟรมแรก ของ Layer 1(ภาพที่ 1)

ภาพที่ 1

ขั้นที่ 2 เพิ่ม Layer โดยคลิกสัญลักษณ์หมายเลข 1 ภาพที่ 2
แล้วเขียนรูปทรงส่วนที่จะไม่บัง (ส่วนที่เป็นไฟส่อง) ตามตัวอย่างเป็นรูปทรงวงกลม โดยเขียนที่ Layer 2
(หมายเลข 2 ภาพที่ 2)

ภาพที่ 2

ขั้นที่ 3 ทำ Mask โดยคลิกขวาที่ Layer รูปทรงในช่องของ Layer (หมายเลข 3 ภาพที่ 3)
(หมายเลข 4 ภาพที่ 3) และจะเกิด Mask ( ภาพที่ 4 )

ภาพที่ 3

ภาพที่ 4

ขั้นที่ 4 จับรูปทรง (รูปวงกลม) เลื่อนไปตำแหน่งอื่น หรือขยายรูปให้มีขนาดใหญ่ขึ้นตามต้องการ
(หมายเลข 9 ภาพที่ 8)

ภาพที่ 8

ขั้นที่ 5 ล็อก Layer รูปวงกลมตามเดิม (หมายเลข 10 ภาพที่ 9 )

ภาพที่ 9

การนำเข้าไฟล์เสียง

เสียงประกอบในมูฟวี่ของ Flash แบ่งออกเป็น 2 ประเภทคือ

Event Sound หมายถึงเสียงที่ต้องถูกดาวน์โหลด มาครบสมบูรณ์ก่อน
จึงจะเริ่มเล่นได้ และเมื่อเล่นแล้ว
ก็จะ เล่นอย่างต่อเนื่องจนกว่าเราจะสั่งให้หยุด
Stream Sound หมายถึงเสียงซึ่งจะเริ่มเล่นทันที่ ที่ข้อมูลของเฟรมแรกๆ
ถูกดาวน์โหลดเข้ามามากพอที่จะ เล่นได้

ไฟล์เสียงที่เราสามารถอิมพอร์ตเข้ามาใช้ใน โปรแกรม Flash คือไฟล์ประเภท WAV,AIFF (.aif)
และ MP3 นอกจากนี้หากเครื่องติดตั้งโปรแกรม QuickTime 4 ขึ้นไป ก็จะสามารถใช้ไฟล์เสียงประเภทอื่นๆ
ได้อีกหลายชนิด คือ AIFF,AU,QuickTime,System7 และ Sound Designer II

ขั้นตอนกการอิมพอร์ตเสียง

ขั้นที่ 1การอิมพอร์ตเสียง
1. เลือกคำสั่ง File > Import > Import to Library...

ภาพที่ 1

2. ในกรอบ Import เปิดหาไฟล์เสียงที่ต้องการ (หมายเลข 1 ภาพที่ 2)
3. คลิกที่ชื่อไฟล์นั้น (หมายเลข 2 ภาพที่ 2)
4. คลิก Open (หมายเลข 3 ภาพที่ 2)

ภาพที่ 2

. ไฟล์เสียงจะถูกนำมาเก็บไว้ในไลบรารีโดยมี ไอคอนเป็นรูปลำโพง (ภาพที่ 3)

ภาพที่ 3

4. ที่เฟรมที่ต้องการแทรกเสียง (ตามภาพคือเฟรมที่ 10) ให้กด F6 เพื่อแทรกคีย์เฟรม (ภาพที่ 4)

ภาพที่ 3

5. เลือกเพลงที่จะให้เริ่มเล่นที่เฟรมที่ 10 โดยเลือกชื่อเพลงที่ช่อง Sound ในหน้าต่าง Properties
(หมายเลข 4 ภาพที่ 4) และเลือกแบบ Stream (หมายเลข 5 ภาพที่ 4)

ภาพที่ 4

6. กำหนดช่วงเวลาในการเล่น เช่น ต้องการเล่นเพลงไปถึงเฟรมที่ 40 ให้คลิกที่ 40 แล้วกด F6
เพลงจะเล่นจากเฟรมที่ 10 - 40 (ภาพที่ 5)

ภาพที่ 5

7. หากต้องการใส่ effect ให้กับเสียง สามารถใส่ได้จากหน้าต่าง properties ที่ช่อง Effect
ซึ่งมีให้เลือกหลายแบบ (หมายเลข 8 ภาพที่ 6)

ภาพที่ 6

สร้างการเคลื่อนไหวให้กับ Mask Layer

ขั้นที่ 1 ปลดล็อก Layer รูปทรง (ตามตัวอย่างคือรูปวงกลม) โดยคลิกที่สัญลักษณ์รูปกุญแจ
( หมายเลข 5 ภาพที่ 5 )

ภาพที่ 5

ขั้นที่ 2 สร้าง Motion ที่ Layer วงกลม โดยคลิกขวาเฟรมแรก และคลิก Create Motion Tween
( หมายเลข 6 ภาพที่ 6 )

ภาพที่ 6

ขั้นที่ 3 กำหนดระยะห่าง แล้วสร้างคีย์เฟรม ตามตัวอย่างกำหนดระยะห่าง 40 เฟรม
โดยกด F6 ที่ Layer ล่างก่อน (หมายเลข 7 ภาพที่ 7) และ กด F6 ที่ Layer วงกลม ให้ยาวเท่ากัน
(หมายเลข 8 ภาพที่ 7)

ภาพที่ 7