2901-2011 การสร้างภาพเคลื่อนไหวเบื้องต้น

Adobe14F4lash CS6 บทที่ 6 รจู้ กั กบั Timeline และ Frame การเปลี่ยนช่ือซนี ซีนปกติเมื่อท�ำการสร้างข้ึนมาใหม่จะมีช่ือตามล�ำดับ Scene 1, Scene 2, … ไปเร่ือย ๆ เพื่อ ความง่ายและสะดวกในการจ�ำ เราสามารถเปลีย่ นชอ่ื ซนี ได้ใหม่โดยมีวิธีการดงั น้ี 1. สรา้ งไฟลง์ านขน้ึ มาใหม่จะสังเกตไดว้ า่ มีซนี อยู่ 1 ซีนชอ่ื Scene 1 1 2. ท�ำการเพิ่มซนี ขึ้นมาใหม่โดย Insert > Scene 2

การสรา้ งภาพเคลือ่ นไหวเบือ้ งตน้ Adobe Fla1s45h CS6 3. จะได้ซีนใหมเ่ พ่ิมมาดังรปู 3 4. ท�ำการเลือก Window > Other Panels > Scene เพอ่ื เปิดพาเนล Scene ข้ึนมา 4 5 5. หน้าตาพาเนล Scene

Adobe14F6lash CS6 บทที่ 6 รจู้ กั กบั Timeline และ Frame 6. ดับเบิ้ลคลกิ ที่ชื่อซีนเพื่อท�ำการเปลย่ี นชือ่ ซีน 6 7. เม่ือท�ำการเปล่ยี นชอ่ื ซีนจะได้ผลดงั รูป 7 สรปุ ท้ายบท ไทมไ์ ลน์ (Timeline) มีส่วนประกอบหลัก 2 สว่ น คอื เลเยอร์ ซงึ่ เลเยอรเ์ ป็นเหมอื นการวาง แผ่นใสซ้อนทับกันเป็นล�ำดับขั้นข้ึนมา และเฟรม โดยเฟรมคือส่วนท่ีแสดงภาพเคลื่อนไหว และในส่วน ของซีนจะเปรยี บเสมือนส่วนทเ่ี ป็นฉากยอ่ ย ๆ เพือ่ ให้ท�ำงานไดส้ ะดวกย่งิ ขึน้

การสร้างภาพเคลอ่ื นไหวเบ้ืองตน้ Adobe Fla1s47h CS6 แบบทดสอบและกจิ กรรมการฝกึ ทกั ษะ บทท่ี 6 รจู้ ักกับ Timeline และ Frame ตอนท่ี 1 : อธบิ าย (หมายถงึ การใหร้ ายละเอยี ดเพม่ิ เติม ขยายความ ถ้ามตี วั อย่างให้ยกตัวอย่าง ประกอบ) 1. Timeline คืออะไร จงอธิบาย 2. Timeline ประกอบด้วยกี่ส่วนหลกั อะไรบา้ ง จงอธบิ าย 3. Layer ในโปรแกรม Adobe Flash คืออะไร 4. Frame ในโปรแกรม Adobe Flash คืออะไร 5. Frame แบ่งออกไดเ้ ป็นก่ีประเภท อะไรบา้ ง 6. ซนี (Scene) คอื อะไร 7. Keyframe คืออะไร 8. เฟรมระหว่างกลาง (In - Between Frame) คืออะไร 9. การขยายเฟรมคอื อะไร และสามารถทำ�ได้อย่างไร อธบิ ายเปน็ ขน้ั ตอน 10. Onion Skin คืออะไร ตอนท่ี 2 : จงเลือกคำ�ตอบทถี่ ูกต้องทีส่ ดุ เพียงข้อเดียว 1. Timeline ประกอบดว้ ย 2 สว่ นหลัก คอื อะไรบา้ ง ก. เลเยอร์ (Layer) และคียเ์ ฟรม (Keyframe) ข. เลเยอร์ (Layer) และซีน (Scene) ค. เลเยอร์ (Layer) และเฟรม (Frame) ง. เลเยอร์ (Layer) เฟรม (Frame) และซนี (Scene) 2. ข้อใดเปรยี บเสมอื นเป็นแผน่ ใสทีใ่ ชจ้ ัดวางออบเจ็กตห์ ลาย ๆ ชน้ั ให้เรยี งซอ้ นกนั ก. Layer ข. Frame ค. Scene ง. Frame Rate

Adobe14F8lash CS6 บทท่ี 6 รจู้ กั กบั Timeline และ Frame 3. ข้อใดคอื สว่ นประกอบใน Timeline อยบู่ นสุดเหนอื เฟรมทงั้ หลายข้นึ ไป โดยจะแสดงเปน็ ตัวเลข 1, 5, 10, ….. ก. Layer ข. Frame ค. Frame Rate ง. Frame Number 4. Play Head มีหน้าทีอ่ ะไร ก. การก�ำ หนดความเรว็ ในการแสดงภาพเคลอ่ื นไหวน้ัน ข. คอยบอกต�ำ แหน่งว่าก�ำ ลังท�ำ งานอยทู่ เ่ี ฟรมใด ค. แสดงล�ำ ดบั ทข่ี องเฟรมทเ่ี รยี งกันไปเรื่อย ๆ ง. ใชข้ ยายช่วงเวลาในการแสดงเนือ้ หาของคียเ์ ฟรมให้ยาวขึ้น 5. รูปภาพนม้ี คี วามหมายวา่ อย่างไร ก. ภาพเคลือ่ นไหวท่ไี ม่สมบรู ณ์ ข. ภาพเคลื่อนไหวแบบเปลยี่ นแปลงรปู รา่ ง ค. ภาพเคลือ่ นไหวแบบเคลื่อนที่ ง. ขยายเวลาในการแสดงเนื้อหาทไ่ี ม่เปลย่ี นแปลงของคยี ์เฟรม 6. ภาพเคลอ่ื นไหวทไ่ี ม่สมบูรณ์จะแสดงสัญลกั ษณ์ตามรปู ภาพในข้อใด ก. ข. ค. ง. 7. วิธีการขยายเฟรมสามารถกดปุม่ ใดบนคียบ์ อรด์ ได้ ก. F4 ข. F6 ค. F5 ง. F2 8. การเลือกหลายเฟรมท่ไี ม่ตดิ กันเราตอ้ งกดคีย์ใดคา้ งไว้ ก. Ctrl ข. Alt ค. Shift ง. Shift + Ctrl 9. การก�ำ หนดความเรว็ ในการเคล่อื นไหวภาพเอาไวท้ ี่ 12 fps หมายความว่าอย่างไร ก. ในเวลา 1 นาที จะสามารถแสดงภาพเคลอ่ื นไหวได้จ�ำ นวน 12 เฟรมแบบตอ่ เนอ่ื ง ข. ในเวลา 1 วินาที จะสามารถแสดงภาพเคล่อื นไหวไดจ้ �ำ นวน 12 เฟรมแบบต่อเน่อื ง ค. ในเวลา 12 วนิ าที จะสามารถแสดงภาพเคล่อื นไหวไดจ้ �ำ นวน 12 เฟรมแบบตอ่ เน่อื ง ง. ในเวลา 12 วินาที จะสามารถแสดงภาพเคล่อื นไหวได้จ�ำ นวน 1 เฟรมแบบต่อเน่ือง

การสร้างภาพเคล่ือนไหวเบอ้ื งตน้ Adobe Fla1s49h CS6 10. การกดปุม่ F6 บนคีย์บอรด์ คือค�ำ ส่งั ให้ท�ำ หน้าทใ่ี ด ก. การเพมิ่ ซนี (Scene) ข. การเพ่มิ เฟรมแบบ Insert Frame ค. การเพม่ิ เฟรมแบบ Insert Blank Keyframe ง. การเพ่มิ เฟรมแบบ Insert Keyframe ตอนที่ 3 : อธิบายคำ�ศพั ท์ (หมายถงึ การใหร้ ายละเอียดเพิ่มเตมิ ขยายความ ถา้ มีตวั อยา่ งใหย้ ก ตัวอยา่ งประกอบ) 1. Timeline 2. Play Head 3. Frame 4. Frame Number 5. Keyframe 6. In - Between Frame 7. Frame Rate 8. Scene 9. Onion Skin 10. Onion Skin Outlines

Adobe15F0lash CS6 บทท่ี 6 รจู้ กั กบั Timeline และ Frame ใบงานที่ 6.1 ใหน้ กั ศึกษาสร้างผลงาน Flash โดยใชค้ วามรจู้ ากบทเรียน ให้ได้ผลลพั ธ์ดงั ตวั อยา่ ง มกี ารเปลยี่ นแปลงรูปร่างจาก 1 > 2 > 3 1 23 สามารถทำ�ตามขนั้ ตอนไดด้ ังน้ี 1. คลิกทเ่ี ฟรม 1 แลว้ วาดรูปวงกลม 1 2 2. คลิกทเี่ ฟรม 60 แล้ว Insert Keyframe โดยกดปุ่ม F6 บนคีย์บอรด์

การสรา้ งภาพเคลอ่ื นไหวเบ้ืองต้น Adobe Fla1s51h CS6 3. วาดรูปดาวขน้ึ มา 1 รปู วางในต�ำ แหนง่ ดงั ภาพ 43 4. ลบรปู วงกลมที่อยใู่ นเฟรมท่ี 60 ท้ิงไป 5 5. คลิกขวาทเี่ ฟรม 1 เลอื กคำ�ส่ัง Create Shape Tween จะปรากฏลกู ศรแบบในภาพ 5 6. ทดสอบผลงานที่สร้างโดยกดปุ่ม Ctrl + Enter บนคีย์บอร์ด จะเห็นผลลัพธ์การเปล่ียน รูปร่าง 6

Adobe15F2lash CS6 บทท่ี 6 รจู้ กั กบั Timeline และ Frame ใบงานท่ี 6.2 ให้นกั ศกึ ษาสรา้ งงาน Flash แบบ Frame by Frame ให้ไดผ้ ลลพั ธ์ตามตัวอยา่ ง 12 34 สามารถท�ำ ตามขน้ั ตอนได้ดงั นี้ โดยเลอื กรปู แบบ ขนาด และสขี องตวั อกั ษรตามความพอใจ 1. คลิกท่ีเฟรม 1 พิมพค์ ำ�ว่า Are จัดวางในต�ำ แหนง่ ท่ีเหมาะสมและสวยงาม 1

การสร้างภาพเคลอื่ นไหวเบ้อื งต้น Adobe Fla1s53h CS6 2. คลกิ ทีเ่ ฟรม 25 ทำ�การ Insert Keyframe 2 3. พิมพค์ ำ�วา่ You แทนทีค่ �ำ ว่า Are 3 4. คลิกที่เฟรม 50 ทำ�การ Insert Keyframe 5. พมิ พค์ �ำ ว่า Ready แทนทคี่ �ำ ว่า You 4 6 5 8 6. คลกิ ท่เี ฟรม 75 ทำ�การ Insert Keyframe 7. พิมพค์ ำ�วา่ ? แทนท่คี ำ�วา่ Ready 7 8. คลิกที่เฟรม 100 ทำ�การ Insert Frame 9. จากนน้ั ทดสอบงาน โดยกดปุ่ม Ctrl + Enter เพ่อื ดูผลลพั ธ์

Adobe Flash CS6 7บทที่ ให้ Layer ชว่ ยจดั การ ภาพทซี่ บั ซอ้ น จุดประสงค์เชงิ พฤติกรรม (Behavioral Objectives) หลงั จากศึกษาจบบทเรียนนแี้ ล้ว นกั ศึกษาจะมีความสามารถดงั น้ี 1. บอกวธิ กี ารสร้างเลเยอร์ได้ 2. ระบวุ ธิ ีการจดั ลำ�ดับเลเยอรไ์ ด้ 3. อธิบายคุณสมบตั ิของเลเยอรไ์ ด้ 4. ปฏบิ ตั กิ ารสร้างเลเยอรม์ าสค์ ได้ 5. บอกขั้นตอนการกำ�หนดเส้นทางและทิศทางใหก้ ับชนิ้ งานได้

การสร้างภาพเคลื่อนไหวเบ้อื งตน้ Adobe Fla1s55h CS6 บทท่ี ให้ Layer ชว่ ยจดั การ 7 ภาพทซ่ี บั ซอ้ น จากท่ีเราได้รู้จักกับไทม์ไลน์ไปแล้วว่า ไทม์ไลน์เป็นส่วนท่ีใช้ส�ำหรับควบคุมแอนิเมชันหรือ ภาพเคล่ือนไหว ตอ่ ไปเราจะมาท�ำความรจู้ ักกบั เลเยอรว์ า่ เป็นอย่างไร และมีวิธกี ารใชง้ านอยา่ งไร เลเยอร์ (Layer) เลเยอร์เปรียบเสมือนกับแผ่นใสหลาย ๆ แผ่นวางซ้อนกัน โดยในเลเยอร์ที่ไม่มีรูปจะสามารถ มองเห็นเลเยอร์ที่อยู่ด้านล่าง ส�ำหรับการสร้างช้ินงานหรือภาพเคลื่อนไหวต่าง ๆ ด้วย Flash ควรแยก ช้ินงานออกเป็นอิสระจากกันในแต่ละเลเยอร์ เพ่ือให้เกิดความสะดวกในการแก้ไขและปรับแต่งชิ้นงาน ได้ง่ายยงิ่ ขึ้น การใช้งานเลเยอร์ วธิ ีการสรา้ งเลเยอร์ใหม่ วธิ ที ี่ 1 เลือกเมนู Insert > Timeline > Layer วิธีที่ 2 คลกิ ขวาทีเ่ ลเยอร์ แลว้ เลือกค�ำสง่ั Insert Layer วธิ ีท่ี 3 คลิกที่ปมุ่ New Layer ดา้ นล่างของไทม์ไลน์ 1

Adobe15F6lash CS6 บทท่ี 7 ให้ Layer ชว่ ยจดั การภาพทซี่ ับซ้อน การลบเลเยอร์ เมอ่ื ต้องการลบเลเยอร์ที่ไม่ใช้ทง้ิ ไป สามารถท�ำได้ 2 วิธี ดงั น้ี 1. เลอื กเลเยอรท์ ่ีต้องการ แล้วคลกิ Delete Layer ด้านลา่ งของไทม์ไลน์ 2. คลิกขวาบนเลเยอร์ทต่ี อ้ งการลบ แลว้ คลิกค�ำสง่ั Delete Layer 1 การเปลี่ยนชอ่ื เลเยอร์ ในมูฟว่ที ซ่ี ับซ้อนเรามกั จะต้องสรา้ งเลเยอรข์ น้ึ มาเป็นจ�ำนวนมาก ดังนัน้ เพือ่ ใหง้ า่ ยตอ่ การจดจ�ำ และแกไ้ ข เราควรเปลย่ี นชอื่ เลเยอรใ์ หส้ อดคลอ้ งกบั เนอ้ื หาในเลเยอรน์ น้ั วธิ กี ารเปลยี่ นชอ่ื เลเยอรท์ �ำดงั น้ี 1. ดบั เบล้ิ คลกิ บนช่อื เลเยอรท์ ีต่ อ้ งการเปล่ียน 2. ป้อนช่อื ใหมล่ งไปแทน 3. กดปุม่ Enter 1 การจดั ลำ� ดับเลเยอร์ ล�ำดับชั้นของเลเยอร์จะส่งผลต่อการซ้อนทับกันของออบเจ็กต์ที่ปรากฏบนสเตจ โดยออบเจ็กต์ ของเลเยอร์ด้านบนจะปรากฏอยูเ่ หนอื ออบเจ็กตข์ องเลเยอรด์ า้ นล่างเสมอ การเปลี่ยนล�ำดับชั้นของเลเยอร์ สามารถท�ำได้โดยคลิกลากเลเยอร์ที่ต้องการย้ายไปแทรกไว้ ตรงต�ำแหนง่ ใหม่ โดยสงั เกตวา่ มเี ส้นประสีเทาปรากฏข้นึ มาตรงต�ำแหน่งท่ตี อ้ งการกอ่ นจึงปลอ่ ยเมาส์ 1. คลิกเมนู File > Import to Library… เพ่อื ท�ำการดึงไฟล์ภาพจากภายนอกเข้ามาใชง้ าน 2. ดับเบ้ลิ คลิกไฟลร์ ปู ท่ีต้องการเพอ่ื น�ำไปเกบ็ ไว้ในหน้าตา่ งไลบรารี่ จ�ำนวน 2 รูป 3. หากพาเนล Library ไม่ปรากฏข้ึนมาให้คลิกที่ Window > Library หรอื กดปุ่ม Ctrl + L

การสรา้ งภาพเคล่ือนไหวเบอื้ งตน้ Adobe Fla1s57h CS6 1 4. ลากรูปภาพในพาเนล Library มาวางบนสเตจ แล้วต้งั ชื่อใหเ้ ลเยอร์ 4

Adobe15F8lash CS6 บทท่ี 7 ให้ Layer ช่วยจดั การภาพท่ซี ับซอ้ น 5. สรา้ งเลเยอรใ์ หม่แล้วต้ังช่ือให้กบั เลเยอรน์ ัน้ พรอ้ มทัง้ ลากรูปภาพมาวางบนสเตจ 5 6. สร้างเลเยอรใ์ หม่ ต้งั ชอื่ วา่ Text แล้วสร้างขอ้ ความบนสเตจนี้ 6

การสร้างภาพเคลือ่ นไหวเบอ้ื งตน้ Adobe Fla1s59h CS6 ให้สังเกตว่าหากต้องการให้รูปภาพใดอยู่ก่อนหรืออยู่บนอีกรูปภาพหนึ่งให้คลิกเลื่อนเลเยอร์น้ัน มาอยู่ล�ำดบั ก่อนหน้า ก�ำหนดคณุ สมบัตขิ องเลเยอร์ (Layer Properties) การก�ำหนดคุณสมบตั ขิ อง Layer สามารถปรับเปลย่ี นได้โดยตรงในหน้าตา่ ง Properties ดงั นี้ 1. เปิดไฟลง์ านท่ีตอ้ งการขน้ึ มา คลิกเมาส์ขวาที่เลเยอรเ์ ลือกเมนู Properties 2. ในหนา้ ต่าง Properties จะสามารถปรบั เปลีย่ นคณุ สมบัติได้ ดงั รปู 2 1

Adobe16F0lash CS6 บทท่ี 7 ให้ Layer ช่วยจัดการภาพทซ่ี ับซ้อน การเลือกเลเยอร์ - การเลือกเพียงเลเยอรเ์ ดียว ใชว้ ธิ ีคลกิ เมาส์บนไอคอนหรอื ช่ือของเลเยอรน์ ้ัน - เลือกหลายเลเยอร์ท่ีอยู่ติดกัน คลิกเลือกเลเยอร์แรกก่อน จากน้ันกดคีย์ Shift ค้างไว้ แล้วคลกิ ที่เลเยอร์สดุ ทา้ ย - เลือกหลายเลเยอร์ที่ไม่อยู่ติดกัน กดคีย์ Ctrl ค้างไว้ แล้วคลิกเลือกเลเยอร์ท่ีต้องการทีละ เลเยอร์ การซ่อน/แสดงเลเยอร์ การซ่อนเลเยอร์จะท�ำให้เนื้อหาของเลเยอร์น้ันไม่ปรากฏบนสเตจ ท�ำได้โดยในคอลัมน์รูป คลิกรูป ของเลเยอร์น้ันจะปรากฏรูป เน้ือหาของเลเยอร์จะหายไป แต่หากต้องการแสดงเนื้อหาอีก ให้คลกิ ทร่ี ูป การล็อค/ปลดล็อคเลเยอร์ เป็นการปอ้ งกันไมใ่ หแ้ กไ้ ขเนอ้ื หาทอ่ี ยใู่ นเลเยอร์ โดยในคอลัมน์รปู คลกิ ที่ ของเลเยอร์นนั้ จะปรากฏรูป เม่ือต้องการล็อค และหากต้องการปลดล็อคให้คลิกท่ีรูป ซ่ึงเม่ือคลิกจะเปล่ียน เป็นรปู เมื่อปลดลอ็ ค เทคนคิ การใช้เลเยอร์มาสค์ (Layer Mask) 1 เลเยอร์มาส์ค หมายถึง วิธีการสร้างเลเยอร์ท่ีเสมือน เป็นการเจาะช่องเอาไว้เพื่อให้สามารถมองทะลุไปยังเลเยอร์อื่น ทอ่ี ยู่ในล�ำดบั ถัดลงไป ซ่งึ เราสามารถก�ำหนดลกั ษณะของชอ่ งน้ไี ด้ ตามปกติ และมักจะก�ำหนดให้มกี ารเคลอ่ื นไหวเหมือนกบั ลอ่ งหน ไปบนเลเยอร์ในล�ำดับถดั ไป ซึ่งสามารถท�ำไดด้ ังน้ี 1. เปดิ มูฟวี่ใหม่ คลกิ เมนู File > New

การสร้างภาพเคลือ่ นไหวเบ้ืองต้น Adobe Fla1s61h CS6 2. คลกิ ท่ีเมนู File > Import > Import to Stage 2 3. คลิกเลอื กรูปทจ่ี ะ Import ขน้ึ มา 3

Adobe16F2lash CS6 บทที่ 7 ให้ Layer ชว่ ยจดั การภาพท่ีซับซอ้ น 4. คลกิ ปมุ่ เพื่อเพม่ิ เลเยอรข์ น้ึ มาอกี 1 เลเยอร์ ในทน่ี ้ีจะไดช้ ื่อวา่ “Layer 2” 4 5. คลิกปุ่ม Oval Tool สร้างวงรีขึ้นมา 1 วง ในเลเยอร์ 2 ให้มีความสูงมากกว่ารูป และวางอยดู่ า้ นซา้ ยมอื ของรูป

การสร้างภาพเคลื่อนไหวเบ้ืองตน้ Adobe Fla1s63h CS6 6. คลิกที่วงรี แล้วคลิกขวาเลือกเมนู Convert to Symbol 7. ทช่ี ่อง Name ใหใ้ สช่ อื่ ทต่ี ้องการ 6 8. ท่ชี อ่ ง Type เลือก Graphic 9 9. คลกิ ปุ่ม OK 7 8 10. คลิกเฟรมท่ี 15 เลเยอร์ 2 แลว้ กดปมุ่ <F6> หรอื คลิกขวาเลอื กเมนู Insert Keyframe เพ่ือ สร้างคยี ์เฟรมใหม่

Adobe16F4lash CS6 บทที่ 7 ให้ Layer ชว่ ยจดั การภาพที่ซบั ซอ้ น 10 11. คลิกเฟรมท่ี 15 เลเยอร์ 1 แลว้ กดปมุ่ <F6> หรอื คลิกขวาเลอื กเมนู Insert Keyframe เพ่ือ สร้างคียเ์ ฟรมใหม่ 12. ในขณะทีม่ ีการเลือกเฟรมที่ 15 นนั้ คลกิ ทีว่ งรแี ล้วลากมาวางทบั รูป 13. คลกิ ขวาทเี่ ลเยอร์ 2 แล้วคลกิ เมนู Create Motion Tween 14. กดปุ่ม <Enter> 1 คร้ัง เพ่ือทดสอบการเคล่ือนไหวของวงรี หากมีการเล่ือนต�ำแหน่งจาก ซ้ายมาขวาก็แสดงว่าสามารถใชง้ านได้ตามทต่ี อ้ งการ 15. คลิกขวาท่ีชื่อ Layer 2 เลอื กเมนู Mask 12 11

การสร้างภาพเคลื่อนไหวเบื้องต้น Adobe Fla1s65h CS6 16. ทดสอบการสร้าง Mask เลอื กเมนู Windows > Toolbar > Controller และใหค้ ลกิ ท่ปี ่มุ ความรู้เก่ียวกับเรื่องของเลเยอร์มาส์ค สามารถน�ำไปประยุกต์ใช้งานได้กับการสร้างผลงาน แอนเิ มชนั โดยทวั่ ไป เชน่ การท�ำตวั หนงั สอื ใหค้ ลา้ ยกบั มไี ฟสปอตไลทส์ อ่ งอยู่ หรอื การท�ำคลน่ื นำ้� ในทะเล เป็นต้น ก�ำ หนดทศิ ทางการเคลอ่ื นทด่ี ว้ ยไกดเ์ ลเยอร์ (Guide Layer) ในบางครั้งการสร้างภาพเคลื่อนไหวก็อาจจะต้องมีการก�ำหนดเส้นทางและทิศทางให้กับชิ้นงาน ว่าจะให้ไปในทศิ ทางใด ซึง่ เรากส็ ามารถท�ำได้ด้วยการใชไ้ กดเ์ ลเยอร์ เปน็ การก�ำหนดเสน้ ทางหรอื ทิศทาง ให้กับการเคลอื่ นไหวของช้นิ งานตามท่ีเราต้องการ โดยท�ำได้ตามข้ันตอนดังน้ี 1. คลิกเมนู File > Import to Library… 2. คลกิ เลือกรูปภาพ 1 2 3. กดปุ่ม Ctrl + L เปิดหน้าต่างไลบราร่ีข้นึ มา 4. ดับเบล้ิ คลิกทช่ี ื่อ Layer 1 เพ่อื เปล่ียนช่ือเลเยอร์ 5. คลิกท่ีภาพจากหน้าตา่ งไลบรารีค่ า้ งไวแ้ ลว้ น�ำมาวางบน Stage ทางดา้ นซา้ ยมอื

Adobe16F6lash CS6 บทท่ี 7 ให้ Layer ช่วยจัดการภาพทีซ่ ับซ้อน 3 5 4 6. คลิกขวาแล้วเลือก Add Classic Motion Guide เพ่ือเพิ่ม Guide Layer ให้กับเลเยอร์ ซ่ึงสามารถสังเกตได้ว่า ชื่อเลเยอรใ์ หมน่ ีจ้ ะมชี ่ือเลเยอรท์ ต่ี ั้งอยดู่ ้วย 7. คลกิ เลอื กเครอ่ื งมอื Pencil Tool ท่ี Tools Panel 8. ลากเส้นก�ำหนดทิศทางให้รูปภาพเคลื่อนท่เี ปน็ เสน้ โคง้ ไปมา 7 8 6

การสร้างภาพเคลือ่ นไหวเบ้อื งต้น Adobe Fla1s67h CS6 9. คลกิ ขวาทเ่ี ฟรม 20 ของเลเยอร์ Guide : man เลอื ก Insert Keyframe เพอื่ สรา้ งเฟรมใหม่ 10. คลกิ ขวาท่ีเฟรม 20 ของเลเยอร์ man เลือกเมนู Insert Keyframe เพอื่ สรา้ งเฟรมใหม่ 11. เลอื กเฟรมที่ 1 ถึงเฟรมท่ี 20 ในเลเยอร์ man คลกิ ขวาเลอื กเมนู Create Motion Tween 11 9 10 12. คลิกปุม่ Selection Tool ที่ Tools Panel 13. คลิกเมาส์ค้างไว้ที่รูป แล้ววางท่ีปลายข้างหน่ึงของเส้นโค้ง จากนั้นจะสังเกตเห็นได้ว่ามี เคร่ืองหมายวงกลมทป่ี รากฏอยกู่ ลางรปู คอ่ ย ๆ ลากช้นิ งานไปตามเสน้ ทางจนไปสิ้นสดุ ทปี่ ลายอกี ขา้ งหนึ่ง ของเส้นโค้ง 14. เพื่อทดสอบการเคล่ือนท่ีบนเส้น Guide Layer ที่ได้มีการก�ำหนดทิศทางการเคล่ือนท่ี เอาไว้แล้ว เลือกเมนู Windows > Toolbar > Controller และใหค้ ลิกท่ปี มุ่ 15. หากวิธกี ารก�ำหนดถูกต้อง รปู ภาพก็จะว่งิ ไปตามเส้นทางท่ีเราก�ำหนดให้ โดยทเ่ี ส้น Guide Layer จะถูกซอ่ นเอาไวโ้ ดยอตั โนมตั ิ

Adobe16F8lash CS6 บทท่ี 7 ให้ Layer ชว่ ยจัดการภาพทีซ่ ับซ้อน สรปุ ทา้ ยบท เลเยอร์ เปน็ การวางแผน่ ใสซอ้ นทบั กนั การใชเ้ ลเยอรท์ �ำใหเ้ ราสามารถวาดรปู แกไ้ ข และปรบั แตง่ รูป แต่ละเลเยอร์ได้อย่างอิสระต่อกัน ซึ่งสามารถสร้างเลเยอร์ใหม่และจัดการเลเยอร์ ปรับเปล่ียนและ โยกย้ายเลเยอร์ ลบหรอื ซ่อนเลเยอร์ได้ตามต้องการ

การสร้างภาพเคล่อื นไหวเบือ้ งต้น Adobe Fla1s69h CS6 แบบทดสอบและกิจกรรมการฝึกทกั ษะ บทท่ี 7 ให้ Layer ช่วยจดั การภาพทีซ่ บั ซ้อน ตอนท่ี 1 : อธิบาย (หมายถงึ การใหร้ ายละเอยี ดเพิ่มเตมิ ขยายความ ถา้ มตี ัวอย่างให้ยกตัวอย่าง ประกอบ) 1. เลเยอร์เปรียบเสมอื นอะไร และมีลกั ษณะอย่างไร 2. เหตุใดควรแยกช้นิ งานออกเป็นอิสระจากกนั ออกไปในแต่ละเลเยอร์ 3. จงบอกวิธกี ารสร้างเลเยอร์ใหม่มา 1 วธิ ี 4. การลบเลเยอร์สามารถท�ำ ไดก้ ่ีวธิ ี แตล่ ะวธิ มี ีวิธกี ารอย่างไร 5. การซอ่ นเลเยอรจ์ ะมผี ลอยา่ งไร 6. การล็อค/ปลดล็อคเลเยอรเ์ พ่ืออะไร 7. Layer Mask คอื อะไร 8. Guide Layer มหี นา้ ท่ีอะไร 9. การเลอื กเลเยอรม์ ีกีแ่ บบ อะไรบา้ ง 10. การเปล่ยี นล�ำ ดับชน้ั ของเลเยอรส์ ามารถทำ�ไดอ้ ยา่ งไร ตอนท่ี 2 : จงเลอื กคำ�ตอบท่ีถกู ต้องท่ีสดุ เพยี งขอ้ เดียว 1. เลเยอร์เปรียบเสมอื นกบั อะไร ก. แผน่ ใสหลาย ๆ แผ่นวางซ้อนกนั ข. กระดาษหลาย ๆ แผ่นวางซ้อนกนั ค. รปู ภาพหลาย ๆ รูปวางซอ้ นกัน ง. กระจกหลาย ๆ แผน่ วางซ้อนกัน 2. ข้อใดไมใ่ ชว่ ธิ กี ารสร้างเลเยอรใ์ หม่ ก. คลกิ ทป่ี ุ่ม New Layer ด้านล่างของไทมไ์ ลน์ ข. คลิกขวาทเี่ ลเยอร์ แล้วเลือกคำ�สั่ง Insert Layer ค. เลอื กเมนู Insert > Timeline > Layer ง. คลกิ ขวาบนเลเยอร์ แลว้ คลกิ ค�ำ สั่ง Delete Layer 3. หากพาเนล Library ไมป่ รากฏขึน้ มาตอ้ งกดปมุ่ ใด ก. Alt + L ข. Ctrl + L ค. Shift + Alt + L ง. Shift + Ctrl + L 4. การก�ำ หนดคณุ สมบัตขิ อง Layer สามารถปรบั เปล่ียนไดโ้ ดยตรงในหนา้ ตา่ งใด ก. Library ข. Properties ค. Import ง. Timeline

Adobe17F0lash CS6 บทท่ี 7 ให้ Layer ช่วยจดั การภาพทซ่ี ับซ้อน 5. สัญลักษณน์ ้ี ใชส้ �ำ หรบั ทำ�หน้าท่ใี ด ข. การจดั ลำ�ดับเลเยอร์ ก. การเปลย่ี นชอ่ื เลเยอร ์ ค. การซอ่ นเลเยอร์ ง. การล็อค/ปลดล็อคเลเยอร์ 6. วิธีการสร้างเลเยอร์ที่เสมือนเป็นการเจาะช่องเอาไว้เพื่อให้สามารถมองทะลุไปยังเลเยอร์อ่ืนที่อยู่ใน ล�ำ ดบั ถัดลงไปเรียกว่าอะไร ก. New Layer ข. Layer Mask ค. Guide Layer ง. Insert Layer 7. การก�ำ หนดเส้นทางและทิศทางใหก้ ับชิ้นงานว่าจะให้ไปในทศิ ทางใด ซ่งึ เราก็สามารถท�ำ ไดด้ ว้ ยการใช้ วธิ ีใด ก. New Layer ข. Layer Mask ค. Guide Layer ง. Insert Layer 8. การเลอื กหลายเลเยอร์ท่ีอยู่ตดิ กนั ตอ้ งกดป่มุ ใดคา้ งไว้ ก. Shift ข. Ctrl ค. Shift + Ctrl ง. Shift + Alt 9. การล็อค/ปลดลอ็ คเลเยอรท์ ำ�เพ่ืออะไร ก. กำ�หนดเสน้ ทางและทศิ ทางให้กบั ชิน้ งาน ข. ปอ้ งกันไม่ให้แกไ้ ขเนอื้ หาทีอ่ ย่ใู นเลเยอร์ ค. ทำ�ใหเ้ น้อื หาของเลเยอรน์ น้ั ไมป่ รากฏบนสเตจ ง. การก�ำ หนดคุณสมบตั ขิ อง Layer 10. การทดสอบชน้ิ งานที่สรา้ งข้ึนตอ้ งเลือกค�ำ ส่งั ในขอ้ ใด ก. File > Export > Export Movie ข. Control > Test Movie ค. Control > Test Scene ง. Windows > Toolbar > Controller ตอนท่ี 3 : อธิบายคำ�ศัพท์ (หมายถงึ การให้รายละเอยี ดเพ่มิ เตมิ ขยายความ ถ้ามตี วั อยา่ งใหย้ ก ตัวอยา่ งประกอบ) 1. Layer 2. Layer Properties 3. Layer Mask 4. Guide Layer

การสรา้ งภาพเคลือ่ นไหวเบื้องตน้ Adobe Fla1s71h CS6 ใบงานท่ี 7.1 ใหน้ ักศึกษาสรา้ งผลงาน Flash จากเทคนคิ Layer Mask ใหไ้ ด้ผลลพั ธด์ งั ตัวอย่าง

Adobe17F2lash CS6 บทที่ 7 ให้ Layer ช่วยจัดการภาพที่ซับซอ้ น สามารถท�ำ ตามขั้นตอนดงั นี้ 1. คลิกเมนู File เลือกคำ�สั่ง Import > Import to Library เพื่อนำ� รูปภาพเขา้ มา 21 2. ไปที่ Library คลกิ ท่ีรปู ภาพคา้ งไว้ แล้วลาก มาที่ Stage จัดต�ำ แหนง่ รปู ภาพให้เหมาะสมสวยงาม 3 3. จากน้ันคลิกท่ี Layer 1 ทำ�การเปลีย่ นชอ่ื เป็น Picture 4. สร้างเลเยอร์ใหม่ โดยคลิก ที่ไอคอนตามรูป เพ่ือสร้างเลเยอร์ใหม่ ขน้ึ มา 4

การสร้างภาพเคล่อื นไหวเบ้ืองตน้ Adobe Fla1s73h CS6 5. เปล่ียนช่ือเลเยอร์ เป็น Mask 5 6. วาดรปู ส่เี หลย่ี มสีใดกไ็ ด้ ตามภาพตัวอย่าง 6 7. คลกิ ขวาท่เี ลเยอร์ Mask เลือกคำ�ส่งั Mask 7 8. คลกิ เลือกเลเยอร์ Picture คลกิ ทเ่ี ฟรม 60 แลว้ ทำ�การ Insert Frame 8

Adobe17F4lash CS6 บทที่ 7 ให้ Layer ชว่ ยจัดการภาพทซ่ี บั ซ้อน 9. คลิกเลือกเลเยอร์ Mask ทำ�การปลดล็อกเลเยอรก์ ่อน โดยคลิกท่รี ปู แม่กญุ แจเพอื่ ปลดล็อก 10. คลิกท่ีเฟรม 20 ทำ�การ Insert Keyframe แล้วเคล่ือนย้ายรูปส่ีเหลี่ยมไปทางขวา และ ทำ�การขยายรปู เหลย่ี มดว้ ยเคร่ืองมอื Free Transform Tool 9 10 11. คลกิ เฟรม 40 ทำ�การ Insert Keyframe แลว้ เคลือ่ นย้ายรปู สเ่ี หลยี่ มไปทางขวา และท�ำ การ ขยายรูปเหลย่ี มดว้ ยเครือ่ งมือ Free Transform Tool 11 12. คลิกเฟรม 60 ทำ�การ Insert Keyframe ทำ�การขยายรูปเหล่ียมด้วยเคร่ืองมือ Free Transform Tool ใหค้ รอบคลุมพื้นที่รปู ภาพทัง้ หมด

การสร้างภาพเคลื่อนไหวเบ้ืองตน้ Adobe Fla1s75h CS6 12 13. คลิกพ้ืนท่ีระหว่างเฟรม 1 ถึง 20 แล้วทำ�การ Create Shape Tween และทำ�เช่นนี้กับ ทุกชว่ งเฟรมที่ทำ�การเปลี่ยนแปลง ดังภาพ 13 14. จากน้ันทดสอบผลลพั ธท์ ่ไี ด้ โดยกด Ctrl + Enter

Adobe17F6lash CS6 บทท่ี 7 ให้ Layer ชว่ ยจดั การภาพทีซ่ บั ซ้อน ใบงานที่ 7.2 ให้นักศึกษาสร้างผลงานจากโปรแกรม Flash โดยใช้เทคนิค Guide Layer ให้ได้ผลลัพธ์ตาม ตวั อย่าง

การสรา้ งภาพเคล่อื นไหวเบื้องต้น Adobe Fla1s77h CS6 สามารถทำ�ตามขน้ั ตอนได้ดงั นี้ 1. วาดรูปจดหมายง่าย ๆ ข้ึนมา 1 รูป และ เปลี่ยนชอ่ื เลเยอร์เป็น Letter 1 2 2. คลิกขวาที่รูปจดหมายท่ีวาด แล้วเลือก Convert to Symbol ต้ังช่ือว่า Letter และ เลือก Type เป็น Graphic 3. สรา้ งเลเยอร์ใหม่ ตั้งชอ่ื ว่า Text 3 4. ใช้เคร่ืองมือ Text Tool พิมพ์คำ�ว่า Love Letter ใช้ตัวอักษรแบบใดก็ได้ ปรับแต่งให้ สวยงาม 5. ท�ำ การ Convert to Symbol ตง้ั ช่ือวา่ Text และเลือก Type เป็น Graphic 45

Adobe17F8lash CS6 บทท่ี 7 ให้ Layer ช่วยจัดการภาพทีซ่ บั ซอ้ น 6. ท่เี ลเยอร์ Letter คลกิ เฟรมท่ี 30 ทำ�การ Insert Keyframe แล้วจดั วางรปู ภาพไว้ตำ�แหน่ง ดงั รูปตัวอย่าง 6 7. คลิกเฟรมท่ี 1 นำ�รูปจดหมายออกไปวางนอก Stage 8 7 8. ยังอยู่ท่ีเลเยอร์ Letter คลิกขวาเลือกคำ�สั่ง Create Classic Tween 9 9. คลิกขวาที่เลเยอร์ Letter เลือก คำ�สั่ง Add Classic Motion Guide

การสร้างภาพเคล่ือนไหวเบอ้ื งตน้ Adobe Fla1s79h CS6 10. จะมเี ลเยอร์ Guide : Letter เกิดขน้ึ ทเี่ ลเยอร์น้ีใหว้ าดเส้นไกดข์ องจดหมาย เมือ่ วาดเสรจ็ ต้องจับรูปภาพให้ Snap ไปกับเส้นไกด์ โดยสังเกตท่ีจุดวงกลมบนรูปจดหมายต้องอยู่บนเส้นไกด์ทั้งจุด เริม่ ตน้ และจดุ ส้นิ สดุ 10 11. ท่ีเลเยอร์ Text คลิกเฟรมท่ี 40 ท�ำ การ Insert Keyframe จากนั้นคลกิ ท่ีเฟรมใดก็ได้ระหว่างเฟรม 1 ถึง 39 แล้ว กดปุ่ม Delete บนคีย์บอร์ด เพ่ือลบเฟรม ทั้งหมดก่อนเฟรม 40 11 12. คลกิ เฟรมที่ 70 แล้วท�ำ การ Insert Keyframe จัดวางตวั อักษรใหอ้ ยู่ในตำ�แหนง่ ทต่ี ้องการ 12

Adobe18F0lash CS6 บทท่ี 7 ให้ Layer ช่วยจัดการภาพท่ซี ับซอ้ น 13. คลิกเฟรมท่ี 1 แล้วท�ำ การเล่ือน 13 ตัวอักษรออกไปนอก Stage ในตำ�แหน่งที่ ตอ้ งการ 14 14. จากนั้นคลิกขวา แล้วเลือกคำ�ส่ัง Create Classic Tween 15. คลกิ ขวาทเี่ ลเยอร์ Text เลือก ค�ำ สั่ง Add Classic Motion Guide 15 16. จะได้เลเยอร์ Guide : Text คลกิ เลือกเฟรมท่ี 40 แลว้ Insert Keyframe 16

การสร้างภาพเคลือ่ นไหวเบื้องต้น Adobe Fla1s81h CS6 17. จากนั้นท�ำ การวาดรูปเส้น Guide และท�ำ เชน่ เดียวกับขอ้ 10. 17 18. เม่อื สร้างเส้นไกดแ์ ล้ว คลิกเฟรมที่ 90 ของเลเยอร์ Text แล้ว Insert Frame 18 19. ท่เี ลเยอร์ Letter ก็ตอ้ งทำ�การ Insert Frame ไปจนถงึ เฟรมที่ 90 เช่นกัน 20 20. ทดสอบดูผลลพั ธ์ที่ได้ โดยกดปุ่ม Ctrl + Enter

Adobe Flash CS6 8บทที่ การสรา้ งผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 จุดประสงค์เชงิ พฤติกรรม (Behavioral Objectives) หลังจากศกึ ษาจบบทเรียนนีแ้ ล้ว นกั ศึกษาจะมีความสามารถดังน้ี 1. อธบิ ายความหมายของภาพเคลื่อนไหวได้ 2. เปรียบเทียบฟิลม์ ภาพยนตรแ์ ละโปรแกรม Adobe Flash CS6 ได้ 3. บอกแนวคิดพนื้ ฐานในการสร้างภาพเคลื่อนไหวได้ 4. ระบชุ นดิ ของภาพเคล่ือนไหวได้ 5. ปฏิบัตกิ ารสร้างภาพเคล่ือนไหวแบบแยกเฟรมได้ 6. ล�ำ ดบั ข้ันตอนการเคลื่อนไหวแบบยา้ ยตำ�แหน่งดว้ ย Motion Tween ได้ 7. ปรบั แตง่ ออบเจ็กต์ใหเ้ คลื่อนไหวแบบสามมิติได้ 8. ปฏิบตั กิ ารเคลื่อนไหวดว้ ยการสร้าง Bone & Bind Tool ได้

การสร้างภาพเคล่ือนไหวเบือ้ งต้น Adobe Fla1s83h CS6 บทท่ี การสร้างผลงาน Animation ด้วย 8 CS6โปรแกรม Adobe Flash แนวคิดพื้นฐานสำ�หรบั การสร้างภาพเคลื่อนไหว การสรา้ งผลงานดว้ ยโปรแกรม Flash จะเปน็ งานในลกั ษณะ 2 มติ ิ ดงั น้นั การเคลือ่ นไหวตา่ ง ๆ ท่ีจะสามารถท�ำขึ้นได้อย่างสะดวกก็มักจะเป็นเทคนิคท่ีไม่ซับซ้อนมากเท่าใด มีแนวคิดหลายอย่าง ท่ีนา่ สนใจเกย่ี วกับการสร้างภาพเคลอื่ นไหว เพ่ือเป็นแนวทางพ้นื ฐานก่อนการสรา้ งผลงานดว้ ยโปรแกรม Adobe Flash CS6 คือ 1. การซูม (Zoom In/Out) การซูมภาพเป็นหลักการในการขยายรูปหรือย่อส่วนรูป โดยใช้ การปรบั ขนาด Scale เพอ่ื ใหม้ ีการเคลอื่ นไหวเปน็ ล�ำดับของการยอ่ และขยายชน้ิ งาน ตัวอยา่ งการซูม (Zoom In/Out) 1. ท�ำการ Import ไฟลภ์ าพเขา้ มาท่ี Stage 1

Adobe18F4lash CS6 บทท่ี 8 การสรา้ งผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 2. เปล่ียนภาพให้เป็นมูฟวคี่ ลปิ 2 3. คลกิ ขวาท่เี ฟรมท่ี 1 เลือก Create Classic Tween 3

การสร้างภาพเคลอ่ื นไหวเบือ้ งตน้ Adobe Fla1s85h CS6 4. คลกิ ขวาที่เฟรมท่ี 20 เลือก Insert Keyframe 4 5. ท�ำการปรบั ขนาด Scale เพือ่ ขยายรูป 5

Adobe18F6lash CS6 บทท่ี 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 6. คลกิ ขวาทีเ่ ฟรมท่ี 40 เลือก Insert Keyframe 6 7. ท�ำการปรับขนาด Scale เพือ่ ลดขนาดรปู 7

การสร้างภาพเคลอื่ นไหวเบื้องตน้ Adobe Fla1s87h CS6 8. จะได้ผลลัพธ์ดงั รูป 8 การหมุน (Rotate) เราจะใช้หลักการหมุนในการสร้างภาพแอนิเมชันเพื่อท�ำการหมุนภาพ ไปในทิศทางท่ีต่างกัน เพื่อให้เกิดภาพเคล่ือนไหวเช่นเดียวกับการสร้างพัดลมหรือพายุหมุน โดย การใชค้ �ำสั่ง Rotate เพ่อื ใหม้ กี ารเคล่อื นไหวเปน็ ล�ำดับของการขยบั ช้ินงานรอบจุดหมุน ตัวอยา่ งการหมุน (Rotate) 1 1. ท�ำการ Import ไฟลภ์ าพเข้ามาท่ี Stage

Adobe18F8lash CS6 บทท่ี 8 การสรา้ งผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 2. เปล่ยี นภาพให้เปน็ มูฟวค่ี ลปิ 2 3. คลกิ ขวาทเี่ ฟรมที่ 1 เลือก Create Classic Tween 3

การสรา้ งภาพเคลอ่ื นไหวเบ้ืองต้น Adobe Fla1s89h CS6 4. คลิกขวาท่เี ฟรมท่ี 20 เลือก Insert Keyframe 4 5. คลิกท่มี ฟู วค่ี ลิปและเลือกเมนู Free Transform Tool 5

Adobe19F0lash CS6 บทที่ 8 การสร้างผลงาน Animation ดว้ ยโปรแกรม Adobe Flash CS6 6. ท�ำการหมนุ ดงั รปู 6 7. คลกิ ขวาท่เี ฟรมท่ี 40 เลือก Insert Keyframe 7

การสร้างภาพเคล่อื นไหวเบื้องต้น Adobe Fla1s91h CS6 8. คลิกท่มี ฟู วีค่ ลิปและเลอื กเมนู Free Transform Tool 8 9. ท�ำการหมุนดังรปู 9

Adobe19F2lash CS6 บทท่ี 8 การสรา้ งผลงาน Animation ด้วยโปรแกรม Adobe Flash CS6 10. จะได้ผลลพั ธด์ ังรปู 10 การเขยา่ ภาพ (Tilting) หลักการเขย่าภาพนี้เหมาะส�ำหรบั การสร้างภาพเคล่อื นไหวในลักษณะ ที่ท�ำใหภ้ าพเฉพาะส่วนใดส่วนหนง่ึ ขยบั ขน้ึ - ลงสลบั กนั ไป ตวั อยา่ งการเขยา่ ภาพ (Tilting) 1. ท�ำการ Import ไฟลภ์ าพเข้ามาท่ี Stage 1

การสรา้ งภาพเคล่ือนไหวเบอ้ื งตน้ Adobe Fla1s93h CS6 2. เปลีย่ นภาพให้เป็นมฟู ว่คี ลปิ 2 3. คลิกขวาท่เี ฟรมที่ 1 เลอื ก Create Classic Tween 3