Flash7

โรงเรียนตาพระยา อาเภอตาพระยา จังหวัดสระแก้ว สานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 7 หน้า 123
แอนิเมชัน (Animation) เป็นการสร้างออบเจ็กต์ให้มีการเคลื่อนไหว มักนิยมใช้ประกอบในชิ้นงาน
ทั่วไป ไม่ว่าจะเป็นเว็บเพจ, เกม , หรือเอกสารสมัยใหม่ โปรแกรม Flash ที่เรากาลังใช้อยู่นี้ เป็นโปรแกรมที่ดี
โปรแกรมหนึ่งที่สามารถสร้างงานแอนิเมชันได้อย่างง่ายดาย และนาไปใช้กันอย่างแพร่หลาย
สาหรับในเรื่องนี้เราจะได้เรียนรู้ขั้นตอนการสร้างแอนิเมชันในรูปแบบต่างๆ ทั้งหมด เช่น หากต้องการ
นาออบเจ็กต์หรือภาพหลายๆ ภาพมาเรียงต่อกันเป็นผลงานแอนิเมชันก็สามารถทาได้ด้วย Frame by Frame
เมื่อต้องการสร้างแอนิเมชันให้มีการเคลื่อนไหวสามารถทาได้ด้วย Classic Tweening หากมีออบเจ็กต์ตั้งแต่ 2
ชิ้นและต้องการแปลงจากชิ้นหนึ่งเป็นอีกชิ้นหนึ่งให้ใช้ Tweening Shape หรือต้องการสร้างแอนิเมชันให้
เคลื่อนไหวไปตามเส้นไกด์สามารถทาได้ด้วย Guide Layer และการสร้างแอนิเมชันในลักษณะ Mask Layer
ใช้ในกรณีเมื่อต้องการสร้างผลงานแอนิเมชันในลักษณะเหมือนมีแสงไฟกาลังหมุนและส่องลงบนภาพ
การสร้างแอนิเมชันในลักษณะ Frame by Frame เราจะต้องมีออบเจ็กต์ ภาพ หรือไฟล์งาน
ตั้งแต่ 1 ไฟล์เป็นต้นไป และทาการ Insert Keyframe เพื่อแทรกข้อมูลแต่ละชิ้นลงในคีย์เฟรม หลังจากได้
แทรกข้อมูลเรียบร้อยแล้ว จึงทาการทดสอบการแสดงผล โปรแกรมก็จะทาการเล่นแสดงข้อมูลทั้งหมดให้อย่าง
ต่อเนื่องจนกลายเป็นผลงานแอนิเมชันขึ้นมา ซึ่งสามารถเปรียบเทียบการทางานได้กับการทางานของฟิล์ม
ภาพยนตร์จะทาการฉายเฟรมหนังแต่ละเฟรมจนกลายเป็นภาพยนตร์ขึ้นมา
ในที่นี้ เราจะมาลองสร้างภาพผีเสื้อบิน ซึ่งทุกๆ เฟรมจะเปลี่ยนท่วงท่าและตาแหน่งไปดังรูป
1. เลือกที่เลเยอร์ที่จะสร้างภาพเคลื่อนไหวแล้วคลิกที่เฟรมในเลเยอร์นั้นที่จะเริ่มสร้างในที่นี้
ให้สร้างไฟล์ใหม่ และคลิกที่เฟรมแรกของ Layer 1
เฟรม 1
เฟรม 6
เฟรม 3
เฟรม 2
เฟรม 4
เฟรม 5

2. หากเฟรมนั้นยังไม่เป็นคีย์เฟรม ให้เลือกเมนูคาสั่ง Insert เลือกคาสั่ง Keyframe
3. สร้างภาพแรกของการเคลื่อนไหวขึ้นในเฟรมนั้น โดยอาจวาดขึ้นเองหรือนาจากไฟล์อื่นเข้ามาใช้
ด้วยเมนูคาสั่ง File เลือกคาสั่ง Import ก็ได้
4. คลิกที่เฟรมถัดไป แล้วเลือกเมนูคาสั่ง Insert เลือกคาสั่ง Keyframe
5. สร้างภาพถัดไปของการเคลื่อนไหวหากนาเข้าจากไฟล์ อย่าลืมลบรูปเก่าออกด้วย
6. ทาขั้นตอนที่ 4 และ 5 ซ้าจนครบทุกเฟรมของการเคลื่อนไหว

เลือกเมนูคาสั่ง Control เลือกคาสั่ง Play เพื่อดูผล และก็บันทึกภาพเก็บไว้ในชื่อ Butterfly
Onion skinning เป็นส่วนที่ช่วยให้เราสามารถเห็นภาพในเฟรมก่อนหน้าหรือหลังเฟรมขณะนั้น หรือ
ทุกๆ เฟรมพร้อมๆ กันได้ โดยไม่ต้องไปเลือกเฟรมกลับไปกลับมา ทาให้สามารถปรับแต่งภาพในแต่ละเฟรมให้
มีการเคลื่อนไหวอย่างนุ่มนวลได้อย่างสะดวก
ส่วนของ Onion skinning นี้จะอยู่ในตอนล่างของพาเนล Timeline
การขอดูหลายๆ เฟรมพร้อมกัน
1. คลิกที่เฟรมหลักที่จะดู
2. คลิกที่ปุ่ม Onion Skin
โปรแกรมจะแสดงภาพในเฟรมก่อนหน้าเฟรมนั้นให้ หากต้องปรับจานวนเฟรมที่จะดู ให้
ลากส่วนของ Start Onion Skin และ End Onion Skin marker ซึ่งอยู่ในแถบหัวของพาเนล Timeline
Onion Skin
Onion Skin Outlines
Edit Multiple Frames
Modify Onion
Markers

การแสดงกรอบเฟรมแทนภาพ ให้คลิกที่ปุ่ม Onion Skin Outlines หากต้องการปรับตาแหน่ง
ภาพในเฟรม ให้ลากกรอบเฟรมนั้น หากต้องการแก้ไขภาพในเฟรมใดๆ ก็ได้ ให้คลิกที่ Edit Multiple
Frames
Start Stop
Onion Skin
Marker
Onion Skin
Outlines

คลิกที่ปุ่ม Modify Onion Marker แล้วลักษณะการแสดงผลจากเมนู
แสดง Onion Skin Marker ในแถบหัวของพาเนล Timeline ตลอด
ไม่ว่าจะเลือกใช้ Onion Skinning หรือไม่ก็ตาม
ล็อคไม่ให้ Onion Skin Marker เลื่อนตามเฟรมที่เลือก
แสดง 2 เฟรมก่อนหน้าและถัดไปจากเฟรมที่เลือก
แสดง 5 เฟรมก่อนหน้าและถัดไปจากเฟรมที่เลือก
แสดงทุกเฟรม
Edit Multiple Frames
คลิกที่เฟรมที่จะแก้ไขแล้ว
คลิกปุ่ม Edit

การสร้างแอนิเมชันในลักษณะ Classic Motion Tweening คือ การสร้างแอนิเมชันโดยใช้ออบเจ็กต์เพียง
ชิ้นเดียว จากนั้นจึงสั่งให้มีการเคลื่อนไหวและการเปลี่ยนแปลงเกิดขึ้นมาที่ออบเจ็กต์นั้น
ดังตัวอย่างต่อไปนี้จะทาการสร้างแอนิเมชันในลักษณะ Classic Tweening คือ ให้รถมีการแล่นมาถึง
เฟรมที่ 5 และมีขนาดใหญ่ขึ้น จากนั้นในเฟรมที่ 10 ให้จานบินคันนี้มีขนาดเล็กลง ถูกหมุนกลับด้าน และมีสี
ลดลงไปจากเดิมสาหรับขั้นตอนการทางานสามารถทาได้ ดังนี้
1. สร้างออบเจ็กต์ (รูปรถ) ไว้ในเฟรมที่ 1
2. คลิกขวาเฟรมที่ 5 และเลือกคาสั่ง Insert Keyframe เฟรมทั้งหมดจะมีความยาวจานวน 5 เฟรม
3. คลิกขวาเฟรมที่ 10 และเลือกคาสั่ง Create Classic Tween เพื่อสร้างการเคลื่อนไหวจนถึงเฟรม
ที่ 10
2.สร้างออบเจ็กต์ไว้ในเฟรมที่ 10
และ เลือกคาสั่ง Insert keyframe
1.สร้างออบเจ็กต์ไว้ในเฟรมที่ 1
3.คลิกเมาส์ขวาเฟรมที่ 10 และเลือก
คาสั่ง Create Classic Tween

4. เลื่อนวัตถุลงมาข้างล่างและคลิกปุ่ม Free Transform Tool ที่ทูลบ็อกซ์
5. ดรากส์เมาส์ทาการขยายขนาดตามต้องการ
6. คลิกเมาส์ขวาเฟรมที่ 15 และเลือกคาสั่ง Insert Keyframe จากนั้นจะปรากฏคีย์เฟรมขึ้นมาบน
เฟรมที่ 15
7. ดรากส์เมาส์ทาการย่อขนาดให้เล็กลงไปจากเดิม
8. คลิกเมนูคาสั่ง Modify เลือกคาสั่ง Transform เลือกคาสั่ง Flip Horizontal จากนั้นออบเจ็กต์
จะถูกหมุนกลับด้านไป
9. คลิกหน้าต่างคาสั่ง Properties
5.ดรากส์เมาส์ทาการขยายขนาด
4.คลิกปุ่ม Free Transform Tool
6.คลิกเมาส์ขวาเฟรมที่ 15 และ เลือก
คาสั่ง Insert Keyframe

10. ที่ Color ให้คลิกเลือก Alpha จากนั้นออบเจ็กต์ จะมีสีลดลงไปจากเดิม
11. คลิกขวาที่ keyframe ที่ 15 เลือก Create Classic Tween
8.คลิกเมนู Modify > Transform
> Flip Horizontal
7.ดรากส์เมาส์ทาการย่อขนาด
9.คลิกหน้าต่าง Properties
10.คลิกเลือก Alpha
ปรับค่า Alpha ตามต้องการ

จากนั้นลองทดสอบภาพแอนิเมชันที่เราสร้างขึ้นมาโดยการ กด <Ctrl+Enter>
การสร้างแอนิเมชันในลักษณะ Tweening Shape คือ การสร้างแอนิเมชันโดยใช้ออบเจ็กต์ หรือ
ภาพ 2 ชิ้นโดยชิ้นแรกจะวางอยู่ที่ตาแหน่งเริ่มต้นของเฟรม และอีกชิ้นหนึ่งจะวางอยู่ที่ตาแหน่งสุดท้ายของ
เฟรม จากนั้นจึงสั่งให้มีการ รวมออบเจ็กต์ หรือภาพทั้ง 2 ชิ้นเข้าด้วยกัน และเมื่อทาการแสดงผลภาพหนึ่งก็จะ
แปลงกลายเป็นอีกภาพหนึ่ง
ดังตัวอย่างต่อไปนี้จะทาการสร้างแอนิเมชันในลักษณะ Tweening Shape โดยเริ่มแรกจะนา
ออบเจ็กต์ที่ 1 ไว้เฟรมที่ 1 และทาการ Insert Keyframe เพื่อวางออบเจ็กต์ที่ 2 ไว้ในเฟรมที่ 10 จากนั้นจะ
รวมออบเจ็กต์ทั้ง 2 เข้าด้วยกัน เมื่อทาการเล่นแสดงแอนิเมชัน จากออบเจ็กต์ที่ 1 จะกลายเป็นออบเจ็กต์ที่ 2
ให้โดยอัตโนมัติสาหรับขั้นตอน การทางานสามารถทาได้ดังนี้
1. สร้างออบเจ็กต์ ไว้ในเฟรมที่ 1
2. คลิกเมาส์ขวาเฟรมที่ 10 และเลือกคาสั่ง Insert Keyframe จากนั้นจะปรากฏคีย์เฟรมขึ้นมาบน
เฟรมที่ 10
3. เปลี่ยนรูปทรงใหม่ให้แตกต่างจากรูปภาพที่อยู่ใน เฟรมที่ 1

4. คลิกหน้าต่างคาสั่ง Properties คลิกที่ Tween ให้คลิกเลือก Shape จากนั้นเมื่อทาการแสดงผล
ออบเจ็กต์ที่ 1 จะถูกรวมและแปลงเป็นออบเจ็กต์ที่ 2 ให้โดยอัตโนมัติ
1.สร้างออบเจ็กต์ไว้ในเหรมที่ 1
2.คลิกเมาส์ขวาเฟรมที่ 10 และ
เลือกคาสั่ง Insert Keyframe
3. เปลี่ยนรูปทรงใหม่ให้แตกต่างจาก
รูปภาพเดิม

การสร้างแอนิเมชันในลักษณะ Guide Layer คือ การสร้างแอนิเมชันโดยให้ออบเจ็กต์
เปลี่ยนแปลงเคลื่อนที่ไปตามเส้นไกด์ สาหรับขั้นตอนการสร้างแอนิเมชันในลักษณะนี้ จะต้องทาการคลิกปุ่ม
Add Classic Guide ที่ไทม์ไลน์จากนั้นสร้างเส้นไกด์ที่ใช้ในการควบคุมทิศทางการวิ่งของออบเจ็กต์ขึ้นมา
ดังตัวอย่างต่อไปนี้จะทาการสร้างแอนิเมชันในลักษณะ Guide Layer คือ ให้ใบไม้ไป
ตามเส้น Guide ที่ได้วาดไว้
5.คลิกเลือก Create shape tween
การแสดงผลออบเจ็กต์ที่ 1
จะถูกรวมและแปลงเป็น
ออบเจ็กต์ที่ 2

1. สร้างออบเจ็กต์ ไว้ในเลเยอร์ที่ 2
2. คลิกเมาส์ขวาเฟรมที่ 20 และเลือกคาสั่ง Insert keyframe เฟรมทั้งหมดจะมีความยาวจานวน
20 เฟรม
3. คลิกเมาส์ขวาที่เฟรมที่ 20 และเลือกคาสั่ง Create Classic Tween เพื่อสร้างการเคลื่อนไหว
จนถึงเฟรมที่ 20
4. คลิกขวาที่ เลเยอร์ 2 เลือกคาสั่ง Add Classic Guide ที่ไทม์ไลน์ จากนั้นจะปรากฏเลเยอร์ใหม่
ขึ้นมาจานวน 1 เลเยอร์ สามารถสังเกตได้ว่า Layer 2 ได้ถอยเยื้องเข้าไป 1 แท็บ ซึ่งหมายถึง
Layer 2 ได้ถูกไกด์เรียบร้อยแล้ว
2.คลิกเมาส์ขวาเลือกคาสั่ง
Insert keyframe
1.สร้างออบเจ็กต์

5. คลิกปุ่ม Pencil Tool ที่ทูลบ็อกซ์
6. ดรากส์เมาส์สร้างเส้นพาธที่ต้องการให้เป็นแนววิ่งของออบเจ็กต์
7. คลิกปุ่ม Arrow Tool ที่ทูลบ็อกซ์
8. ดรากส์เมาส์ย้ายออบเจ็กต์มาไว้ยังตาแหน่งสุดท้ายของเส้นไกด์
5.คลิกปุ่ม Pencil Tool
4.คลิกขวาเลือกคาสั่ง Add
Classic Guide
6.ดรากส์เมาส์สร้างเส้นพาธ

จากตัวอย่างที่ผ่านมาเมื่อทดสอบดูการเคลื่อนที่ของออบเจ็กต์ทั้งหมด จะสังเกตเห็นว่าออบเจ็กต์มีการ
เคลื่อนที่ไปตามเส้นไกด์ในทิศทางแนว 180 องศา ซึ่งทาให้ดูไม่สมจริงเท่าที่ควร
ดังนั้นคุณสามารถสั่งคาสั่ง Orient to path เพื่อให้ออบเจ็กต์เคลื่อนที่ไปตามเส้นพาธที่สร้างขึ้น
จากนั้นจึงทาการหมุนออบเจ็กต์ให้เอียงไปตามทิศทางการเคลื่อนที่ของเส้นพาธ และเมื่อทาการทดสอบการ
แสดงผลแอนิเมชัน ผลงานที่สร้างขึ้นก็จะมีการเคลื่อนที่ได้อย่างสมจริงมากขึ้น
1. คลิกเมนูคาสั่ง Window เลือกคาสั่ง Properties ให้ปรากฎเครื่องหมายถูก
2. คลิกเฟรมที่ 1 ของ Layer 1 เพื่อเลือกออบเจ็กต์ ตาแหน่งแรกสุด ขณะที่อยู่ในเลเยอร์ 2
3. คลิกให้ปรากฏเครื่องหมายถูกที่ Orient to path เพื่อให้ออบเจ็กต์เคลื่อนที่ไปตามเส้นพาธที่สร้าง
ขึ้น
4. คลิกปุ่ม Free Transform Tool ที่ทูลบ็อกซ์
5. ดรากส์เมาส์หมุนออบเจ็กต์ไปในทิศทางเดียวกับเส้นพาธ
7.คลิกปุ่ม Arrow
Tool
9.ดรากส์เมาส์ย้ายออบเจ็กต์

6. คลิกเฟรมที่ 15 ของ Layer 1 เพื่อเลือกออบเจ็กต์ ตาแหน่งสุดท้ายขณะที่อยู่ในเลเยอร์ 1
7. คลิกให้ปรากฏเครื่องหมายถูกที่ Orient to path เพื่อให้ออบเจ็กต์เคลื่อนที่ไปตามเส้นพาธที่สร้าง
ขึ้น
8. คลิกปุ่ม Free Transform Tool ที่ทูลบ็อกซ์ดรากส์เมาส์หมุนออบเจ็กต์ไปในทิศทาง
เดียวกันกับเส้นพาธ
คลิกเฟรมที่ 1 ของ Layer 2
ดรากส์เมาส์หมุนออบเจ็กต์
คลิกให้ปรากฏเครื่องหมายถูก
ที่ Orient to path
คลิกปุ่ม Free Transform Tool
คลิกเฟรมที่ 20 ของ Layer 2
คลิกปุ่ม Free Transform Tool
ดรากส์เมาส์หมุนออบเจ็กต์
คลิกให้ปรากฏเครื่องหมายถูก
ที่ Orient to path

การสร้างแอนิเมชันในลักษณะ Mask Layer คือ การสร้างแอนิเมชันโดยแสดงภาพภายใน
ขอบเขตที่กาหนดไว้ซึ่งมีลักษณะเหมือนกับการส่องไฟลงบนเลเยอร์ที่ได้ถูก Mask ไว้
ดังนั้นจึงต้องมีอย่างน้อย 2 เลเยอร์ เลเยอร์หนึ่งไว้สาหรับใส่ข้อมูลที่จะถูก Mask เช่น ออบเจ็กต์ ภาพ
ซึ่งสามารถเห็นข้อมูลที่อยู่ในเลเยอร์นี้ได้ ก็ต่อเมื่อได้มีการนาข้อมูลของอีกเลเยอร์หนึ่งจะทาการ Mask มาวาง
ซ้อนทับหรือเคลื่อนที่ผ่าน จึงสามารถเปรียบได้ว่าเลเยอร์ที่จะทาการ Mask นี้ เป็นเสมือนลาแสงไฟที่ส่องลงไป
ยังข้อมูลของเลเยอร์ที่จะถูก Mask นั่นเอง
ตัวอย่างต่อไปนี้จะทาการสร้างแอนิเมชันในลักษณะ Mask Layer โดยเลเยอร์ ที่ 1 ที่จะถูก Mask ได้
มีข้อมูลเป็นรูปวงกลมก็จะเคลื่อนส่องผ่านไปที่รูปภาพ สาหรับขั้นตอนการทางานสามารถทาได้ ดังนี้
1. คลิกเมนูคาสั่ง Modify เลือกคาสั่ง Document จากนั้นจะปรากฏไดอะล็อกบ็อกซ์ Document
Properties ขึ้นมา
2. ที่ Background Color ให้คลิกเลือกสีเทา จากนั้นที่ฉากหลังจะมีพื้นเป็นสีดา
3. คลิกปุ่ม OK เพื่อยืนยันคาสั่ง
4.

5.
6. คลิกเมนูคาสั่ง File เลือกคาสั่ง Import แล้วเลือก Import to stage เพื่อนาไฟล์ภาพ ที่ต้องการ
เข้ามา
7. คลิกเมาส์ขวาเฟรมที่ 30 และเลือกคาสั่ง Insert Frame เฟรมทั้งหมดจะมีความยาวจานวน 30
เฟรม
คลิกเมนู Modify > Document
คลิกเลือกสีเทา
คลิกปุ่ม OK
คลิกเมนู File > Import >Import to Stage

8. คลิกปุ่ม Insert Layer ที่ไทม์ไลน์ จากนั้นจะปรากฏเลเยอร์ใหม่ ขึ้นมาจานวน 1 เลเยอร์
9. สร้างออบเจ็กต์ ไว้ใน Layer 2
10. คลิกเมาส์ขวาเฟรมที่ 30 เลือก Insert Keyframe และเลือกคาสั่ง Create Classic Tween เพื่อ
สร้างการเคลื่อนไหวจนถึงเฟรมที่ 30
11. ดรากส์เมาส์ย้ายออบเจ็กต์ไปอีกด้านหนึ่งของออบเจ็กต์ที่อยู่ใน Layer 1
คลิกเมาส์ขวาเฟรมที่ 30 และ
เลือกคาสั่ง Insert Frame

12. คลิกเมนูคาสั่ง Window เลือกคาสั่ง Properties ให้ปรากฏเครื่องหมายถูก
13. คลิกเฟรมไหนก็ได้ระหว่างเฟรมที่ 1 ถึง เฟรม 30 ของ Layer 2 เพื่อเลือกออบเจ็กต์ ตาแหน่ง
แรกสุดที่อยู่ในเลเยอร์ 2
สร้างออบเจ็กต์ไว้ใน Layer 2
คลิกปุ่ม Insert Layer
คลิกเมาส์ขวาเฟรมที่ 30
เลือก Insert Keyframe
และเลือกคาสั่ง Create
Classic Tween
ดรากส์เมาส์ย้ายออบเจ็กต์

14. ที่ Rotate ให้คลิกเลือก CW เพื่อให้ลักษณะการหมุนเป็นแบบตามเข็มนาฬิกา
15. พิมพ์จานวนที่ต้องการให้มีการหมุน เป็น 3 Times ออบเจ็กต์จะถูกหมุนตามเข็มนาฬิกาไปเป็น
จานวน 3 รอบ
16. คลิกเมาส์ขวาที่เลเยอร์ 2 เลือกคาสั่ง Mask จากนั้นออบเจ็กต์ในเลเยอร์ที่ 1 ที่ได้ถูก Mask ไว้อยู่
จะปรากฏขึ้นมาเฉพาะบริเวณที่ออบเจ็กต์ ในเลเยอร์ 2 วางซ้อนทับไว้อยู่เท่านั้น
จากนั้นทดสอบภาพแอนิเมชันที่เรา Mask Layer ขึ้นมาโดยการ กด <Ctrl+Enter>
คลิกเฟรมไหนก็ได้ของ Layer 2
คลิกเลือก CW
พิมพ์จานวนที่ต้องการให้มีการหมุน
คลิกเมาส์ขวาที่เลเยอร์ 2
เลือกคาสั่ง Mask

Flash7

More Related Content

What's hot (13)

Similar to Flash7 (20)

More from เนส เหงาจัง (19)

Flash7