1. 1
ใบความรูที่ 6
Animation
ภาพเคลื่อนไหว หรือที่เราเรียกกันวา Animation คือ การเปลี่ยนแปลงของวัตถุ
โดยมีความสัมพันธกับเวลา เชน ภาพยนตรการตูนที่มีการเคลื่อนที่ การเดิน การวิ่ง เปน
ตน สําหรับ Flash นั้น จะมี การเคลื่อนมีอยู 2 ลักษณะ คือ
1. การเคลื่อนที่แบบยายสถานที่ (Motion) เชน วัตถุเคลื่อนที่จากจุด A ไปจุด B
เวลาผานไป
A B
2. การเคลื่อนที่โดยการเปลียนแปลงลักษณะ (Transform) เชน วงกลม
่
เปลี่ยนแปลงรูปราง
A B
เวลาผานไป

2. 2
ประเภทของการเคลื่อนไหว
การเคลื่อนไหวชนิดภาพตอภาพ (Frame By Frame Animation)
เปนการเคลื่อนไหวชนิด ภาพที่ 1 ไปภาพที่ 2 ไปภาพที่ 3 ไป...ภาพสุดทาย หรือ
เปนลักษณะการเคลื่อนไหวของการตูนนั่นเอง
1 2 3 4 5 6
การเปลี่ยนแปลงของภาพแตละภาพที่เรียงอยางตอเนื่องกันลักษณะนี้ เหมาะกับ
การทํา Animation ที่ซับซอน เชน Animation ที่มีการเคลื่อนไหวลักษณะทาทางมาก เปน
ตน ซึ่งจะใชภาพจํานวนมาก โดยแตละ Frame จะใสภาพในลักษณะทาทางตางๆ 1 ภาพ
ทําใหเสียเวลา แตจะใหภาพที่มการเคลื่อนไหวที่เหมือนกับความเปนจริง
ี
การเคลื่อนไหวชนิดกําหนดจุดเริ่มตนและจุดสิ้นสุด (Tweened Animation)
การเคลื่อนไหวของ Animation ลักษณะนี้จะมีการกําหนดจุดเริ่มตนในการแสดง
ภาพเคลื่อนไหวและใชวิธีการคํานวณของ Flash ในการแสดงภาพตางๆโดยที่เราไมตอง 
ไปหาภาพมาเรียงตอกัน เราสามารถแบงการเคลื่อนไหวลักษณะนี้เปน 2 ลักษณะดวยกัน
คือ
1. เปลี่ยนแปลงสถานที่ (Motion Tween)
เปนการเคลื่อนที่แบบมีการยายสถานที่ โดยไมมการเปลี่ยนแปลงรูปรางของ
ี
วัตถุ แตสามารถเปลี่ยนสีหรือขนาดได คือ การเปลี่ยนแปลงจากจุด A ไป จุด B นั่นเอง
โดยที่ระหวางการเคลื่อนที่จาก A ไป B สามารถมีการเปลี่ยนแปลง ขนาด เปลี่ยนสี หรือ
คอยๆจางหายไป แตไมสามารถเปลี่ยนจากรูปหนึ่งไปยังอีกรูปหนึ่งได เปนตน การทํา
Animation ลักษณะนี้ Flash Movie จะมีขนาดเล็กกวา การเคลื่อนไหวชนิดภาพตอภาพ
(Frame By Frame Animation) เพราะใชการคํานวณการเคลื่อนไหวแทนการใชภาพจริง
หลายๆภาพมาแสดงตอๆกัน

3. 3
วิธีการสราง Animaition แบบ Motion Tween
1. สรางภาพหรือ Import ภาพเขามาไวท่ี Stage
2. ทําการ Selection ภาพ แลวเลือก Insert > Convert to Symbol หรือกดคีย
<F8> เพื่อทําการแปลงเปน Symbol
3. จะมีหนาตาง Symbol Property ขึ้นมา ใหเราเลือก Movie Clip และ กด
ปุม เพื่อแปลงภาพที่เลือกเปน Symbol แบบ Movie Clip ซึ่งเปน
การกําหนดใหวัตถุนี้เปนภาพเคลื่อนไหว
4. เลือก Frame ที่ 30 และ เลือก Insert Keyframe เพื่อเปนการบอกวาเราจะ
แสดงภาพตั้งแต Frame ที่ 1 ถึง Frame ที่ 30
5. กลับไปเลือกที่ Frame ที่ 1 เพื่อกําหนดจุดเริ่มตนของการเคลื่อนไหว

4. 4
6. เลือก Insert > Create Motion Tween เพื่อให Flash ทําการสราง Animation
ตั้งแต Frame ที่ 1 ถึง Frame ที่ 30
7. เราจะเห็นวามีลูกศรที่ Frame ของเราแสดงวา Flash ไดสรางการเคลื่อนไหว
ตั้งแต Frame ที่ 1ถึง Frame ที่ 30 เรียบรอยแลว
เราจะเห็นวามีลูกศรที่ Frame

5. 5
8. Click mouse เลือกที่ Frame ที่ 30 ยายตําแหนง Movie Clip ของเรา เพื่อ
กําหนดจุดสิ้นสุดในการเคลื่อนที่ของ Animation
9. ทําการทดสอบ Animation โดยกดคีย <Ctrl+Enter> หรือ Control > Test
Movie เราจะเห็นวัตถุของเราเคลื่อนที่
2. เปลี่ยนแปลงลักษณะเดิม (Shape Tween)
เปนการเคลื่อนไหวโดยมีการเปลี่ยนแปลงรูปรางหรือเปลี่ยนจากวัตถุหนึ่งไป
เปนอีกวัตถุหนึ่ง โดยเราจะใช Flash ใหทาการคํานวณเปลี่ยนแปลงรูปรางให ซึ่งวิธีนี้จะ
ํ
ใชภาพ 2 ภาพ เปนจุดเริ่มตนและจุดปลาย และกําหนดให Flash ทําการเปลี่ยนแปลง
ระหวางภาพทั้ง 2 เพื่อใหภาพหนึ่งกลายเปนอีกภาพหนึ่ง

6. 6
วิธีการสราง Animation แบบ Shape Animation
1. สรางภาพหรือ Import ภาพเขามาไวท่ี Stage
2. เลือก Modify > Break Apart เพื่อ แยกองคประกอบของวัตถุ ทําใหเรา
สามารถปรับแตงวัตถุที่เรา Import เขามาได
3. เลือก Frame ที่ 30 และ เลือก Insert Keyframe เพื่อเปนการบอกวาเราจะ
แสดงภาพตั้งแต Frame ที่ 1 ถึง Frame ที่ 30

7. 7
4. ทําการลบภาพหรือวัตถุใน Frame ที่ 30 เพื่อที่เราจะนําภาพอื่น (Import หรือ
สราง) เขามาใสแทนไวที่ Frame ที่ 30 เพื่อใหภาพที่เรา Import เขามานั้น
แทนที่ภาพแรกที่จะถูกเปลี่ยนมาเปนภาพนี้
5. เลือก Modify > Break Apart เพื่อ แยกองคประกอบของวัตถุ ทําใหเรา
สามารถปรับแตงวัตถุที่เรา Import เขามาได
6. กลับมาเลือกที่ Frame ที่ 1 สังเกตวาหนาตาง Properties จะเปลี่ยนไป ที่ชอง
Tween เลือกคําสั่ง Shape เพื่อทําใหวัตถุหรือภาพของเราเกิดการเปลี่ยนแปลง
7. เราจะเห็นวามีลูกศรที่ Frame ของเราแสดงวา Flash ไดทําการคํานวณเพื่อ
เปลี่ยนแปลงภาพทั้ง 2 ภาพแลว
เราจะเห็นวามีลูกศรที่ Frame

8. 8
8. ทําการทดสอบ Animation โดยกดคีย <Ctrl+Enter> หรือ Control > Test
Movie เราจะเห็นวัตถุของเราเคลื่อนที่