1. เอกสารประกอบการจัดการเรียนรู้วิชา มัลติมีเดีย ม.6โรงเรียนศรีสวัสดิ์วิทยาคารจังหวัดน่าน หน้า1
ใบความรู้ที่ 4 เรื่อง การสร้างการเคลื่อนไหว
Animation [ สร้างผลงานแอนิเมชั่น ]
ภาพเคลื่อนไหวแบบเฟรมต่อเฟรม (Frame by Frame)
การสร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรมเป็นการนาเอาออบเจ็กต์แต่ละ
ชิ้นมาเรียงต่อกัน
โดยอาจมีการปรับแต่งรูปร่างหรือคุณสมบัติให้เปลี่ยนแปลงไปจากออบเจ็กต์ที่อยู่
ก่อนหน้า และมีการแสดงอย่างต่อเนื่องก็จะปรากฏเป็นภาพเคลื่อนไหวขึ้นมา
1) เริ่มสร้างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม
เริ่มแรกจะต้องสร้างออบเจ็กต์ขึ้นมาก่อน จากนั้นจึงสร้างคีย์เฟรมพร้อมทั้งแก้ไขเนื้อหาต่างๆ
ของออบเจ็กต์เดิม ดังตัวอย่าง
1. คลิกคีย์เฟรมแรกของภาพเคลื่อนไหว
2. สร้างออบเจ็กต์หรือองค์ประกอบต่างๆ ที่ต้องการให้ปรากฏเป็นภาพเคลื่อนไหว
นักเรียนทราบไหมครับว่าการสร้างการเคลื่อนไหวมีหลักการทางานอย่างไร
?

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

3. เอกสารประกอบการจัดการเรียนรู้วิชา มัลติมีเดีย ม.6โรงเรียนศรีสวัสดิ์วิทยาคารจังหวัดน่าน หน้า3
ตัวอย่างภาพเคลื่อนไหวแบบเฟรมต่อเฟรม
2) ปรับแต่งภาพเคลื่อนไหวแบบเฟรมต่อเฟรม
การปรับแต่งภาพเคลื่อนไหวแบบเฟรมต่อเฟรมสามารถทาได้เพียงคลิกปุ่ม Edit Multiple Frames
จากนั้นจึงลาก Maker ให้ครอบคลุมเพื่อให้เห็นออบเจ็กต์ที่อยู่ในเฟรมทั้งหมด และเมื่อแก้ไขใดๆ
ก็จะส่งผลต่อออบเจ็กต์ที่นามาเป็นผลงานแอนิเมชั่นทันที
1. คลิกปุ่ม Edit Multiple Frames ทางด้านล่างของไทม์ไลน์ จากนั้นปรากฏ Marker
ที่ใช้บอกขอบเขตการแสดงเนื้อหาของเฟรมอื่นขึ้นมา
2. ลากเมาส์ปรับ Marker ให้ครอบคลุมเฟรมทั้งหมดที่ต้องการปรับแต่งแก้ไข
3. คลิกไอคอนหรือชื่อของเลเยอร์เพื่อเลือกออบเจ็กต์ทั้งหมดที่อยู่ในเลเยอร์
4. ปรับแต่งแก้ไขออบเจ็กต์ ได้ตามต้องการ
ภาพเคลื่อนไหวแบบเคลื่อนที่ (Motion Tween)
เป็นการกาหนดให้ออบเจ็กต์มีการเคลื่อนไหวเปลี่ยนตาแหน่งหรือเปลี่ยนคุณสมบัติแบบแน่นอนโด
ยไม่เกี่ยวกับการเปลี่ยนแปลงของรูปร่าง ซึ่งจะต้องสร้างคีย์เฟรมเริ่มต้นและสิ้นสุด
จากนั้นจึงปรับแต่งและกาหนดให้เป็น Motion Tween ก็จะปรากฏภาพเคลื่อนไหวขึ้นมา
1) เริ่มสร้างภาพเคลื่อนไหวแบบเคลื่อนที่

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

5. เอกสารประกอบการจัดการเรียนรู้วิชา มัลติมีเดีย ม.6โรงเรียนศรีสวัสดิ์วิทยาคารจังหวัดน่าน หน้า5
5. คลิกคีย์เฟรมแรกหรือเฟรมระหว่างกลาง
6. ที่ Properties ในส่วนของ Tween ให้คลิกเลือก Motion
จากนั้นปรากฏลูกศรแสดงการสร้างแอนิเมชั่นขึ้นมา
2) ปรับแต่งภาพเคลื่อนไหวแบบเคลื่อนที่
ภายหลังจากการสร้างภาพเคลื่อนไหวแบบเคลื่อนที่เรียบร้อยแล้ว
ก็สามารถปรับแต่งรูปแบบในการเคลื่อนไหว เช่น ให้มีการปรับขนาด ให้หมุน เปลี่ยนระดับความเร็ว
ในการเคลื่อนที่ ฯลฯ ได้โดยหากคลิกปุ่ม Onion Skin ทางด้านล่างของไทม์ไลน์
ก็จะปรากฏเนื้อหาในเฟรมอื่นๆ ขึ้นมาด้วย
1. คลิกเลือกคีย์เฟรมหรือเฟรมระหว่างกลางที่ใช้แสดงภาพเคลื่อนไหว

6. เอกสารประกอบการจัดการเรียนรู้วิชา มัลติมีเดีย ม.6โรงเรียนศรีสวัสดิ์วิทยาคารจังหวัดน่าน หน้า6
2. ที่ Properties ให้เลือกปรับแต่งรูปแบบการเคลื่อนไหว โดยมีรายละเอียดดังนี้
 Tween ชนิดการเคลื่อนไหว โดยมี None ยกเลิกการเคลื่อนไหว, Motion
สร้างภาพเคลื่อนไหวแบบเคลื่อนที่, Shape สร้างภาพเคลื่อนไหวแบบเปลี่ยนรูปร่าง
 Scale เมื่อออบเจ็กต์แรกในคีย์เฟรมแรกและคีย์เฟรมสุดท้ายมีขนาดไม่เท่ากัน
ให้ปรับขนาดออบเจ็กต์ในเฟรมต่างๆ โดยอัตโนมัติ
 Ease ระดับความเร็วในการเคลื่อนที่ โดยค่าลบ เป็นการเคลื่อนที่จากช้าไปเร็ว หรือค่าบวก
เป็นการเคลื่อนที่จากเร็วไปช้า ส่วน 0 เป็นค่าปกติ
ที่มีระดับความเร็วในการเคลื่อนที่เท่ากันตลอด
 ปุ่ม Edit เมื่อคลิกปุ่ม [edit] จะปรากฏไดอะล็อกบ็อกซ์ Custom Ease In / Ease Out
ที่ใช้ปรับระดับความเร็วในการเคลื่อนที่ให้แตกต่างกัน
ซึ่งสามารถทาได้เพียงคลิกเฟรมที่ต้องการ จากนั้นจึงลากเมาส์ปรับจุดแองเคอร์
โดยหากเส้นมีความชันก็จะทาให้การเคลื่อนไหวเร็ว
 Rotate นอกจากการหมุนด้วยปุ่ม Free Transform แล้ว
ยังสามารถกาหนดให้ออบเจ็กต์หมุนไปในระหว่างการเคลื่อนที่ได้ด้วย โดย None คือไม่หมุน,
Auto หมุนไปตามการเปลี่ยนแปลงของออบเจ็กต์ในคีย์เฟรมสุดท้าย, CW หมุนตามเข็มนาฬิกา,
CCW หมุนทวนเข็มนาฬิกา โดยกาหนดจานวนรอบลงในช่อง times
ภาพเคลื่อนไหวตามเส้นไกด์ (Motion Guide)
ในกรณีที่สร้างภาพเคลื่อนไหวแบบ Motion Tween
ไว้ออบเจ็กต์จะเคลื่อนที่ในลักษณะเป็นแนวเส้นตรง
ซึ่งหากต้องการกาหนดเส้นทางในการเคลื่อนที่ให้มีรูปแบบอื่นๆ เช่น เส้นโค้ง เส้นหยัก เส้นวงกลม ฯลฯ
ก็สามารถสร้างเส้นนาทางขึ้นมาใช้กากับการเคลื่อนที่ของออบเจ็กต์ได้
1) เริ่มสร้างภาพเคลื่อนไหวตามเส้นไกด์
หากกาหนดให้ออบเจ็กต์มีการเคลื่อนไหวแบบเคลื่อนที่ (Motion Tween) เรียบร้อยแล้ว
ก็สามารถสร้างเส้นไกด์จากปุ่มเครื่องมือ Pen, Pencil, Line ฯลฯ ไว้ภายในเลเยอร์ Motion Guide ได้ดังนี้
1. สร้างและคลิกเลเยอร์ที่กาหนดให้เป็นภาพเคลื่อนไหวแบบเคลื่อนที่ (Motion Tween) ไว้
2. คลิกปุ่ม Add Motion Guide จากนั้นเลเยอร์ที่เลือกจะไปอยู่ภายใต้เลเยอร์ Motion Guide
ที่สร้างขึ้นมาใหม่

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

8. เอกสารประกอบการจัดการเรียนรู้วิชา มัลติมีเดีย ม.6โรงเรียนศรีสวัสดิ์วิทยาคารจังหวัดน่าน หน้า8
2) ปรับแต่งภาพเคลื่อนไหวตามเส้นไกด์
การวาดภาพเคลื่อนไหวตามเส้นไกด์สามารถปรับแต่งรูปแบบในการเคลื่อนไหว เช่นเดียวกับ
Motion Tween แต่จะมีค่าคุณสมบัติอื่นๆ เพิ่ม ดังนี้
1. คลิกคีย์เฟรมหรือเฟรมระหว่างกลางที่ใช้แสดงภาพเคลื่อนไหว
2. ที่ Properties ให้เลือกปรับแต่งรูปแบบการเคลื่อนที่บนเส้นไกด์ โดยมีรายละเอียดดังนี้
 Orient to Path ให้ออบเจ็กต์เคลื่อนที่หมุนเอียงไปตามความโค้งของเส้นไกด์
 Sync หากภาพเคลื่อนไหวเป็นกราฟิกซิมโบล
ให้ปรับการเคลื่อนไหวให้สอดคล้องกับไทม์ไลน์หลัก
 Snap ยึดติดออบเจ็กต์เข้ากับเส้นไกด์โดยอัตโนมัติ
ภาพเคลื่อนไหวแบบเปลี่ยนรูปทรง (Shape Tween)
เมื่อต้องการให้มีการเปลี่ยนแปลงรูปทรงของออบเจ็กต์จากภาพนิ่งภาพหนึ่งไปเป็นอีกภาพหนึ่ง
สามารถทาได้ด้วย Shape Tween โดยโปรแกรมจะสร้างการเปลี่ยนแปลงระหว่างเฟรมต่างๆ
ให้โดยอัตโนมัติ
1) เริ่มสร้างภาพเคลื่อนไหวแบบเปลี่ยนรูปทรง
การสร้างภาพเคลื่อนไหวแบบเปลี่ยนรูปทรงจะต้องใช้ออบเจ็กต์แบบ Merge Drawing หรือ Object
Drawing ซึ่งหากเป็นอินสแตนซ์ ข้อความ หรือออบเจ็กต์ที่รวมกลุ่ม ก็จะต้องแยกส่วน (Break Apart) ก่อน
1. คลิกคีย์เฟรมแรกของภาพเคลื่อนไหว
2. สร้างออบเจ็กต์หรือองค์ประกอบต่างๆ ที่ต้องการให้ปรากฏเป็นภาพเคลื่อนไหว

9. เอกสารประกอบการจัดการเรียนรู้วิชา มัลติมีเดีย ม.6โรงเรียนศรีสวัสดิ์วิทยาคารจังหวัดน่าน หน้า9
3. คลิกเมาส์ขวาที่ช่องเฟรมสุดท้ายและเลือกคาสั่ง Insert Keyframe หรือกดปุ่ม F6
จากนั้นจะปรากฏคีย์เฟรมใหม่พร้อมกับออบเจ็กต์ที่อยู่ในคีย์เฟรมทางด้านหน้าขึ้นมา
4. เปลี่ยนรูปทรงหรือปรับแต่งแก้ไขออบเจ็กต์ ได้ตามต้องการ
5. คลิกคีย์เฟรมแรกหรือเฟรมระหว่างกลาง
6. ที่ Properties ในส่วนของ Tween ให้คลิกเลือก Shape
จากนั้นปรากฏลูกศรแสดงการสร้างแอนิเมชั่นขึ้นมา

10. เอกสารประกอบการจัดการเรียนรู้วิชา มัลติมีเดีย ม.6โรงเรียนศรีสวัสดิ์วิทยาคารจังหวัดน่าน หน้า10
รูปจรวดจะค่อยๆ เปลี่ยนกลายเป็นเป้ า
2) ปรับแต่งภาพเคลื่อนไหวแบบเปลี่ยนรูปทรง
เมื่อสร้างภาพเคลื่อนไหวแบบ Shape Tween เรียบร้อยแล้ว
ก็สามารถเปลี่ยนระดับความเร็วในการเคลื่อนไหวได้เช่นเดียวกับ Motion Tween
แต่สาหรับรูปทรงที่มีความซับซ้อนก็สามารถสร้าง Shape Hint
เพื่อกาหนดเป็นตาแหน่งที่ใช้ในการเปลี่ยนแปลงรูปทรงของออบเจ็กต์ต้นทางและปลายทางได้ดังนี้
1. คลิกคีย์เฟรมแรกและคลิกเมนู Modify > Shape > Add Shape Hint หรือกดปุ่ม Ctrl + Shift + H
จากนั้นจะปรากฏ Shape Hunt สีแดงที่เป็นตัวอักษร a-z ขึ้นมา
2. ลากเมาส์นา Shape Hint มาวางยังเส้นขอบของออบเจ็กต์ต้นทาง
3. คลิกคีย์เฟรมสุดท้าย
4. เมาส์นา Shape Hint มาวางยังเส้นขอบของออบเจ็กต์ปลายทาง
โดยให้เทียบกับตาแหน่งที่ได้วางไว้ในออบเจ็กต์ต้นทาง จากนั้นให้ดาเนินการซ้าในขั้นตอนที่ 1-5
โดยเรียงจากมุมบนซ้ายวนไปแบบทวนเข็มนาฬิกา และเมื่อเรียงเรียบร้อยแล้ว Shape Hint
ตาแหน่งต้นทางจะเป็นสีเหลือง ส่วนปลายทางจะเป็นสีเขียว

11. เอกสารประกอบการจัดการเรียนรู้วิชา มัลติมีเดีย ม.6โรงเรียนศรีสวัสดิ์วิทยาคารจังหวัดน่าน หน้า11
ภาพเคลื่อนไหวแบบบังภาพ (Mask Layer)
เป็นการกาหนดให้แสดงออบเจ็กต์ภายในรูปทรงที่สร้างไว้
เหมือนกับการส่องไฟไปที่ตัวละครในลักษณะเป็นสปอตไลต์
โดยสามารถกาหนดให้เป็นภาพนิ่งหรือภาพเคลื่อนไหวก็ได้
1) เริ่มสร้างภาพเคลื่อนไหวแบบบังภาพ
ในการสร้างภาพเคลื่อนไหวแบบบังภาพจะต้องสร้างรูปทรงไว้ในเลเยอร์ทางด้านบนก่อน
จากนั้นสามารถกาหนดการเคลื่อนไหวในรูปแบบต่างๆ ก็จะปรากฏเป็นภาพเคลื่อนไหวแบบบังภาพขึ้นมา
1. คลิกคีย์เฟรมแรกของภาพเคลื่อนไหว
2. วาดรูปทรงที่ใช้ในการบังภาพ โดยอาจเป็นข้อความหรือรูปทรงใดๆ ก็ได้
3. คลิกเมาส์ขวาที่ช่องเฟรมสุดท้ายและเลือกคาสั่ง Insert Keyframe หรือกดปุ่ม F6
จากนั้นจะปรากฏคีย์เฟรมใหม่พร้อมกับออบเจ็กต์ที่อยู่ในคีย์เฟรมทางด้านหน้าขึ้นมา

12. เอกสารประกอบการจัดการเรียนรู้วิชา มัลติมีเดีย ม.6โรงเรียนศรีสวัสดิ์วิทยาคารจังหวัดน่าน หน้า12
4. ปรับแต่งแก้ไขรูปทรง ได้ตามต้องการ
5. คลิกคีย์เฟรมแรกหรือเฟรมระหว่างกลาง
6. ที่ Properties ในส่วนของ Tween ให้คลิกเลือก Shape หรือ Motion และกาหนดค่าคุณสมบัติต่างๆ
7. คลิกเมาส์ขวาบนเลเยอร์เลือกคาสั่ง Mask
จากนั้นเลเยอร์ทางด้านล่างจะถูกแสดงผลตามรูปทรงที่สร้างไว้ในเลเยอร์ Mask
โดยโปรแกรมจะล็อคพร้อมทั้งเปลี่ยนรูปแบบของไอคอนหน้าเลเยอร์ให้โดยอัตโนมัติ

13. เอกสารประกอบการจัดการเรียนรู้วิชา มัลติมีเดีย ม.6โรงเรียนศรีสวัสดิ์วิทยาคารจังหวัดน่าน หน้า13
2) ปรับแต่งภาพเคลื่อนไหวแบบบังภาพ
เมื่อสร้างภาพเคลื่อนไหวแบบบังภาพโปรแกรมจะล็อคเลเยอร์ทั้งหมดให้โดยอัตโนมัติ
ซึ่งหากต้องการปรับแต่งแก้ไข ก็จะต้องยกเลิกการล็อคก่อน
1. คลิก บนเลเยอร์ Mask เพื่อยกเลิกการล็อคและการบังภาพ
2. ดับเบิลคลิกรูปทรงที่ต้องการปรับแต่งแก้ไข
3. ปรับแต่งแก้ไขรายละเอียดต่างๆ ของรูปทรง
4. คลิกชื่อซีนหรือคลิกปุ่ม เพื่อกลับสู่มูฟวี่หลัก
5. คลิก ในคอลัมน์ ของเลเยอร์ Mask
จากนั้นรุปทรงที่ใช้ในการบังภาพจะมีลัษณะเปลี่ยนแปลงไป