หน่วยที่9 ควบคุมมูฟวี่ด้วยไทม์ไลน์

2. หลักการสร้างภาพเคลื่อนไหวในโปรแกรม Flash จะเหมือนกับหลักการของ
การสร้างภาพยนร์การ์ตูนกล่าวคือคุณจะต้องแบ่งเนื้อหาทั้งหมดออก้ป็ น
“ตอน” หรือ “ฉาก” (scene) จากนั้นก็แบ่งย่อยแต่ละฉากลงเป็ น “เฟรม”
(frame)หรือภาพการเคลื่อนไหวแต่ละจังหวะของตัวละคร
ในเฟรมหนึ่งๆจะมีองค์ประกอบคือฉากหลังและตัวละครต่างๆในการ
สร้างภาพยนตร์การ์ตูนแต่ละเฟรม ผู้สร้างจะไม่ได้วาดองค์ประกอบทุกอย่างลง
บนกระดาษแผ่นเดียวกัน แต่จะวาดไว้บนแผ่นใสคนละแผ่นแล้วนามาซ้อนกัน
ภายหลัง เช่น ภาพฉากหลังอยู่บนแผ่นที่หนึ่ง, ภาพกระถางอยู่บนแผ่นที่สอง,
ภาพต้นไม้อยู่บนแผ่นที่สาม และภาพผีเสื้ออยู่บนแผ่นที่สี่ เป็ นต้น โดยวาง
องค์ประกอบแต่ละตัวให้อยู่ในตาแหน่งที่สัมพันธ์กัน ซึ่งในโปรแกรม Flash
แผ่นใสแต่ละแผ่นนี้เรียกว่า “เลเยอร์” (layer) ส่วนฉากหลังและตัวละครก็คือ
“ออบเจ็ค” หรือ “ซิมโบล” นั่นเอง

3. ไทม์ไลน์ (timeline) มีส่วนประกอบหลัก 2 ส่วนคือเลเยอร์แลพ
เฟรม แต่ภายในเลเยอร์และเฟรมยังมีส่วนประกอบย่อยอื่นๆอีก ดังรูป

4. เลเยอร์ เปรียบเสมือนแผ่นใสที่ใช้สาหรับวาดรูปหรือวางออบเจ็คลง
ไป และสามารถนามาวางซ้อนๆกันได้ โดยบริเวณที่ไม่มีออบเจ็คก็จะโปร่งใส
มองเห็นออบเจ็คบนเลเยอร์อื่น ข้อดีของการแบ่งแยกองค์ประกอบแบบนี้คือ
คุณสามารถสร้างการเคลื่อนไหวและจัดการกับองค์ประกอบแต่ละส่วนได้
อย่างเป็ นอิสระ
ในการสร้างมูฟวี่คุณจึงควรแยกองค์ประกอบหรือตัวละครต่างๆไว้
บนคนละเลเยอร์กัน เช่น เลเยอร์ที่1วางรูปต้นไม้ซึ่งอยู่นิ่ง, เลเยอร์ที่ 2 วาง
รูปผีเสื้อที่บินไปมา, เลเยอร์ที่ 3 วางรูปเด็กวิ่งจับผีเสื้อ,เลเยอร์ที่ 4 วางเสียง
ประกอบ, เลเยอร์ที่ 5 เป็ นเลเยอร์เปล่าสาหรับเก็บคาสั่ง ActionScript เพื่อ
ทาหน้าที่ควบคุมมูฟวี่เป็ นต้น
ในมูฟวี่หนึ่งๆคุณสามารถจะสร้างเลเยอร์ได้ไม่จากัด โดยที่ไม่ส่งผลต่อขนาด
ของไฟล์มูฟวี่ผลลัพธ์ (.swf) แต่อย่างใด

5. สร้างเลเยอร์ใหม่
เมื่อคุณสร้างไฟล์เอกสารใหม่ Flash จะสร้างเลเยอร์แรกมาให้ใน
ชื่อว่า Layer 1 (สามารถเปลี่ยนชื่อนี้ได้ภายหลัง) ซึ่งหากต้องการเพิ่มเล
เยอร์อีกก็ทาได้ โดยให้คลิกชื่อเลเยอร์ใดเลเยอร์หนึ่งที่มีอยู่ แล้วเลือกทาวิธี
ใดวิธีหนึ่ง
ปรับขนาดพื้นที่แสดงชื่อเลเยอร์และความสูงของไทม์ไลน์
คุณสามารถปรับความกว้างของพื้นที่ช่องแสดงชื่อเลเยอร์และ
ปรับความกว้างของไทม์ไลน์ได้ เพื่อให้เหมาะสมกับความยาวของชื่อหรือ
จานวนเลเยอร์ในมูฟวี่
เปลี่ยนชื่อเลเยอร์และโฟลเดอร์
ในมูฟวี่ที่ซับซ้อนคุณมักจะต้องสร้างเลเยอร์ขึ้นมเป็ นจานวนมาก
ดังนั้นเพื่อให้ง่ายต่อการจดจาและแก้ไข คุณจึงควรเปลี่ยนชื่อเลเยอร์ให้
สอดคล้องกับเนื้อหาในเลเยอร์ รวมทั้งชื่อโฟล์เดอร์ที่ใช้เก็บ
เลเยอร์ที่เกี่ยวข้องไว้ด้วยกัน

7. เลือกเลเยอร์
เมื่อจะดาเนินการใดๆกับเลเยอร์ คุณต้องเลือกเลเยอร์ที่ต้องการเสียก่อน
โดยอาจเลือกเพียงเลเยอร์เดียวหรือหลายเลเยอร์พร้อมๆกันก็ได้ ด้วยวิธีการ
ต่อไปนี้
- การเลือกเพียงเลเยอร์เดียว ใช้วิธีคลิกเมาส์บนไอคอนหรือชื่อของเล
เยอร์นั้น
- การเลือกหลายเลเยอร์ที่อยู่ติดกัน ทาโดยคลิกเลือกเลเยอร์แรกก่อน
จากนั้นกดคีย์ Shift ค้างไว้ แล้วคลิกที่เลเยอร์สุดท้าย
- การเลือกหลายเลเยอร์ที่ไม่อยู่ติดกัน ทาโดยกดคีย์ Ctrl ค้างไว้ แล้วคลิด
เลือกเลเยอร์ที่ต้องการทีละเลเยอร์
เปลี่ยนลาดับชั้นเลเยอร์
ลาดับของเลเยอร์จะส่งผลต่อการซ้อนทับกันขอลออบเจ็คที่ปรากฏ
บนสเตจโดยออบเจ็คของเลเยอร์ด้านบน จะอยู่เหนือออบเจ็คของเลเยอร์ด้านล่าง
เสมอ
การเปลี่ยนลาดับชั้นของเลเยอร์สามารถทาได้โดยคลิกลากชื่อเลเยอร์ที่

8. ลบเลเยอร์
เมื่อต้องการลบเลเยอร์ที่ไม่ใช้ท้งไปสามารถทาได้ 2 วิธีดังนี้
1.เลือกเลเยอร์ที่ต้องการ แล้วคลิก Delete Layer ด้านล่างของไทม์
ไลน์
2.คลิกขวาบนเลเยอร์ที่ต้องการลบแล้ววคลิกคาสั่ง Delete Layer
เลเยอร์โฟล์เดอร์
เมื่อคุณมีจานวนเลเยอร์มากขึ้นจะเกิดปัญหาในการจัดการเลเยอร์
เหล่านั้น ดังนั้นจึงควรสร้างเลเยอร์โฟล์เดอร์เพื่อรวมเลเยอร์ย่อยๆที่เกี่ยวข้องไว้
ภายในโฟล์เดอร์เดียวกัน รวมถึงสามารถซ้อนโฟล์เดอร์ไว้ภายในโฟล์เดอร์อื่น
อีกด้วย ซึ่งกึคล้ายกับระบบโฟล์เดอร์ Windows ของเครื่องคอมพิวเตอร์นั่นเอง

9. ก๊อปปี้ เลเยอร์
คุณไม่สามารถก๊อปปี้ ตัวเลเยอร์ได้โดยตรง แต่จะทาได้โดยสร้างเล
เยอร์ใหม่แล้วก๊อปปี้ เฟรมทั้งหมดในเลเยอร์เดิมมาใส่
หลังจากก๊อปปี้ แล้วชื่อของเลเยอร์จะเปลี่ยนไปเป็ นชื่อเดียวกับเลเยอร์
ต้นฉบับและออบเจ็คที่ได้จะวาง
ซ้อนทับออบเจ็คของเลเยอร์เดิมอยู่ดังนั้นจึงควรปรับตาแหน่งของออบเจ็คใหม่
ซ่อน/แสดงเลเยอร์
การซ่อน (hide) เลเยอร์เป็ นการทาให้เนื้อหาของเลเยอร์นั้นไม่ปรากฏ
บนสเตจ ส่วน การแสดง (show) คือการทาให้เลเยอร์ที่ซ่อนไว้กลับปรากฏ
ขึ้นมา
ล็อค/ปลดล็อคเลเยอร์
การล็อคเลเยอร์เป็ นการป้ องกันไม่ให้คุณแก้ไขเนื้อหาที่อยู่ภายในเล
เยอร์นั้นโดยไม่ตั้งใจ วิธีล็อค/ปลดล็อคเลเยอร์ทาได้หลายกรณีโดยใช้เทคนิค
แบบเดียวกับการซ่อน/แสดงเลเยอร์

10. เปลี่ยนสีเส้นโครงร่าง
ปกติเส้นโครงร่างของเลเยอร์จะถูกกาหนดมาให้อัตโนมัติ ซึ่งมีอยู่
ทั้งหมด 8 สีใช้วนกันไปแต่ละเลเยอร์อย่างไรก็ดีคุณสามารถเปลี่ยนสีใหม่ได้
โดยดับเบิลคลิกไอคอนของเลเยอร์ทีต้องการ (หรือคลิกขวาแล้วเลือกคาสั่ง
Properties) จากนั้นกาหนดสีของเลเยอร์ที่ Outline color ดังภาพ

11. เฟรมมีลักษณะเหมือนกับฟิล์มภาพยนตร์ คือแต่ละช่องจะแสดงภาพ
การเคลื่อนไหวของตัวละครในแต่ละจังหวะ ซึ่งเมื่อมีการเล่นภาพในเฟรม
ตามลาดับอย่างรวดเร็ว ก็จะทาให้มองดูเสมือนว่าตัวละครนั้นกาลัง
เคลื่อนไหวจริงๆ ส่วนจานวนของเฟรมและอัตราการแสดงเฟรมจะเป็ นตัวกา
หนระยะเวลาของมูฟวี่ ถ้าจานวนเฟรมมีมากก็จะใช้เวลาแสดงมากขึ้น แต่ถ้า
อัตราเฟรมสูงก็จะทาให้เวลาแสดงสั้นลง
ชนิดของเฟรม
เฟรมที่ใช้ในการสร้างมูฟวี่ของโปรแกรม Flash แบ่งออกได้เป็ น 2
ประเภท ได้แก่ คีย์เฟรม (keyfream) และเฟรมระหว่างกลาง (in-between
fream)

12. คีย์เฟรม (kefream) คือเฟรมที่เป็ นตัวกาหนดการเคลื่อนไหวของตัวละครและ
องค์ประกอบอื่นๆในมูฟวี่ โดยคุณจะสามารถวางออบเจ็ค หรือแก้ไขปรับแต่ง
คุณสมบัติของออบเจ็คได้ในคีย์เฟรมเท่านั้น สัญลักษณ์ของคีย์เฟรมมี 2 แบบ
คือ
หมายถึงคีย์เฟรมเปล่า และ หมายถึงคีย์เฟรมที่มีออบเจ็คอยู่ การ
สร้างภาพเคลื่อนไหวแบบ Fream-by=fream จะทาได้โดยสร้างคีย์เฟรมแต่ละ
เฟรมขึ้นมาแล้ววางออบเจ็คลงไป โดยปรับแต่งให้ออบเจ็คในแต่ละเฟรมมี
รูปทรงหรือคุณสมบัติที่แตกต่างกันเล็กน้อยเป็ นลาดับไป
เฟรมระหว่างกลาง (in-between fream) หรือเรียกสั้นๆว่า เฟรม คือ เฟรมที่ใช้
ขยายช่วงเวลาในการแสดงเนื้อหาของคีย์เฟรมที่อยู่ก่อนให้นานขึ้น โดยคุณจะ
ไม่สามารถเลือกหรือปรับแต่งออบเจ็คที่แสดงในเฟรมเหล่านี้

13. แต่อย่างไรก็ตามช่วงเวลาที่ขยายนี้คุณอาจกาหนดการเคลื่อนไหว
แบบ tween ให้ออบเจ็คในคีย์เฟรมได้ สัญลักษณ์ของเฟรมแบบนี้จะแตกต่าง
กันไปตามลักษณะขอเนื้อหาหรือการเคลื่อนไหวที่ถูกกาหนด ดังนี้
เฟรมภาพนิ่ง เฟรมเหล่านี้จะแสดงเนื้อหาของคีย์เฟรมที่อยู่ก่อนหน้า
โดยไม่มีการเปลี่ยนแปลงใดๆ พื้นของเฟรมจะเป็ นสีเทา
Motion tween เป็ นเฟรมภาพเคลื่อนไหวแบบเคลื่อนที่ โดยแสดงช่วง
ของการเคลื่อนไหวด้วยรูปลูกศรสีดาบนพื้นสีม่วง ส่วนตาแหน่งเริ่มต้นและ
สุดท้ายของออบเจ็คจะถูกกาหนดด้วยคีย์เฟรมที่หัวและท้าย
Shape tween เป็ นเฟรมภาพเคลื่อนไหวแบบเปลี่ยนแปลงรูปร่าง โดย
แสดงช่วงการเคลื่อนไหวด้วยรูปลูกศรสีดาบนพื้นสีเขียว ส่วนรูปร่างเริ่มต้น
และสุดท้ายของออบเจ็คจะถูกกาหนดด้วยคีย์เฟรมที่หัวและท้าย
เส้นประ แสดงถึงภาพเคลื่อนไหวที่ไม่สมบูรณ์ (เช่นเมื่อคีย์เฟรม
ตอนท้ายถูกลบไป)

14. สร้างคีย์เฟรม
เมื่อคุณสร้างไฟล์ใหม่โปรแกรมจะสร้างคีย์เฟรมเปล่าไว้ให้ 1 เฟรม
ซึ่งถ้าคุณวาดออบเจ็คลงไปบนสเตจ ออบเจ็คนั้นก็จะกลายเป็ นเนื้อหาของ
เฟรมดังกล่าวโดยอัตโนมัติ
เมื่อต้องการสร้างคีย์เฟรมเพิ่มก็ทาได้ โดยคลิกในช่องเฟรมที่ตองกา
รบนไทม์ไลน์แล้วทาวิธีใดวิธีหนึ่งดังนี้
- กดคีย์ F6
- คลิกคาสั่ง Insert > Timeline > Keyfream
- คลิกขวาบนเฟรมที่ต้องการ แล้วคลิกคาสั่ง Insert Kefream
- คลิกคาสั่ง Modify > Timeline > Convert to Keyfreames (เหมาะ
จะใช้ในกรณีที่ต้องการสร้างครั้งละหลายคีย์เฟรม)

15. สร้างคีย์เฟรมเปล่า
เป็ นการสร้างคีย์เฟรมเปล่าๆที่ไม่มีเนื้อหาอะไร มักใช้สาหรับการวาด
หรือวางเนื้อหาใหม่ที่ไม่เกี่ยวกับเนื้อหาของคีย์เฟรมก่อนหน้าลงไป วิธีสร้างทา
ได้โดยคลิกช่องเฟรมที่ต้องการ แล้วทาวิธีใดวิธีหนึ่ง ดังนี้
- กดคีย์ F7
- คลิกคาสั่ง Insert > Timeline > Blank Keyfream
- คลิกขวาที่ช่องเฟรม แล้วเลือกคาสั่ง Insert Blank Keyframe
- คลิกคาสั่ง Modify > Timeline > Convert to Blank Keyfream
(เหมาะจะใช้ในกรณีที่ต้องการสร้างครั้งละหลายคีย์เฟรม)

16. แทรกเฟรม
คือการแทรกเฟรมระหว่างกลางเพิ่มเพื่อขยายช่วงเวลาในการแสดง
เนื้อหาให้ยาวออกไป ซึ่งสามารถใช้ได้ทั้งกับกลุ่มเฟรมที่เป็ นภาพเคลื่อนไหว
และภาพนิ่ง วิธีแทรกให้คุณคลิกในช่องเฟรมตรงจุดที่ต้องการก่อนแล้วทาวิธี
ใดวิธีหนึ่ง
- กดคีย์ F5
- คลิกคาสั่ง Insert > Timeline > Frame
- คลิกขวาบนเฟรมที่ต้องการ แล้วเลือกคาสั่ง Insert Frame

17. Playhead คือหัวเล่นหรือเครื่องมือที่ใช้สาหรับเลื่อนไปยังเฟรมที่
ต้องการให้แสดงบนสเตจ กล่าวคือขณะที่มูฟวี่ถูกเล่น Playhead จะเลื่อนไป
ตามเฟรมต่างๆเพื่อบอกว่ากาลังเล่นถึงเฟรมไหน นอกจากนี้คุณยังสามารถ
เลื่อน Playhead เพื่อไปดูหรือแก้ไขเนื้อหาของเฟรมที่ต้องการได้ การเลื่อน
playhead สามารถทาได้ 3 วิธี
1. คลิกลาก Playhead (สี่เหลี่ยมสีแดง) ไปยังเฟรมที่ต้องการ
2. คลิกตรงหมายเลขเฟรมที่ต้องการ
3. ใช้คอนโทรลเลอร์เพื่อเลื่อนเฟรม

18. ซีน (scene) คือการแบ่งมูฟวี่ทั้งเรื่องออกเป็ นตอนหรือฉาก เปรียบ
ได้กับฉากหนึ่งๆในภาพยนตร์หรือละคร ซึ่งจะมีการเปลี่ยนแปลงสถานที่เกิด
เหตุการณ์และตัวละครที่แสดงแตกต่างกันไป โดยแต่ละซีนจะไม่ไทม์ไลน์ของ
ตัวเอง ประโยชน์ของการแบ่งซีนใน Flash ก็เพื่อช่วยลดความสับสนในกรณี
ที่มูฟวี่ที่มีความยากมาก ทาให้ง่ายต่อการสร้าง จัดการ และแก้ไข ในมูฟวี่ที่มี
หลายซีน Flash Player จะเล่นแต่ละซีนเรียงกันไปตามลาดับโดยอัตโนมัติ
ยกเว้นว่าจะมีการใช้คาสั่ง ActionScript ควยคุมให้เป็ นอย่างอื่น
สร้างซีนใหม่
เมื่อคุณสร้างไฟล์เอกสารใหม่โปรแกรมจะสร้างซีนไว้ให้อยู่แล้วชื่อ
Scene 1 หากต้องการเพิ่มซีนใหม่อีกก็สามารถทาได้โดยคลิกเลือกซีนใดซีนห
นึ่งไว้ก่อน แล้วคลิกคาสั่ง Insert > Scene หรือคลิกปุ่ ม Add scene ใน
พาเนล Scene ซึ่งซีนที่สร้างใหม่จะปรากฏด้านล่างซีนที่เลือกไว้

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

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

21. วิธีเปิ ดใช้ Onion Skin
วิธีเปิ ดใช้ Onion Skin ทาได้โดยการคลิกปุ่ ม Onion Skin
หรือ Onion Skin Outlines จากด้านล่างของไทม์ไลน์ให้ยุบตัวลงไป ซึ่ง
ทั้งสองปุ่ มจะให้ผลแตกต่างกันดังนี้
- Onion Skin จะทาให้เนื้อหาของเฟรมอื่นๆ ปรากฏให้เห็นในเฟรมปัจจุบัน
โดยมีรายละเอียดตามความเป็ นจริง เพียงแต่จะมีสีซีดจางกว่าปกติ
- Onion Skin Outlines จะทาให้เนื้อหาของเฟรมอื่นๆ ปรากฏเป็ นรูปโครงร่าง
ที่มีแต่เส้นขอบเท่านั้น ส่วนเนื้อหาของเฟรมปัจจุบันจะถูกแสดงปกติ
แก้ไขเนื้อหาหลายเฟรมพร้อมกัน
การใช้ onion skin ทาให้คุณมองเห็นภาพของหลายๆเฟรมได้พร้อม
กันก็จริง แต่การเลือกและการแก้ไขยังทาได้เฉพาะออบเจ็คที่อยู่ในคีย์เฟรม
ปัจจุบันเท่านั้น (เฟรมที่ playhead ชี้อยู่) แต่ในบางกรณีการแก้ไขทีละเฟรม
อาจทาไม่สพดวกและเสียเวลา เช่น เมื่อคุณต้องการปรับความโปร่งใสกับทุก
ออบเจ็ค หรือเคลื่อนย้ายออบเจ็คในทุกเฟรมไปยังตาแหน่งอื่นบนสเตจ เป็ น
ต้น