หนังสือเรียนรายวิชา แอนิเมชั่น 2 มิติเบื้องต้น ม.5

Workshop กจิ กรรมที่ 7 ใบงานท่ี 7.2 อิรยิ าบถการเคลือ่ นไหวของสัตว์ ใหน้ กั เรียนการวาดสตั ว์ส่เี ทา้ แบบมกี บี ตอ่ ไปน้ี ใหน้ ักเรยี นวาดสตั วส์ ี่เท้าแบบมีกีบ 3 ชนดิ ไดแ้ ก่ มา้ กวาง วัว 151

Workshop กิจกรรมที่ 7 ใบงานท่ี 7.3 อริ ยิ าบถการเคล่ือนไหวของสตั ว์ ใหน้ กั เรยี นวาดสัตวส์ ่เี ทา้ แบบมอี ้งุ เทา้ ตอ่ ไปน้ี ใหน้ กั เรยี นวาดสตั ว์สี่เท้าแบบมีอุ้งเทา้ 3 ชนิด ได้แก่ เสือ หมา แมว 152

บทที่ 8 Flash Animation 01 ภาพที่ 8.1 ภาพตวั อยา่ งการสร้างงานแอนเิ มชัน่ 8.1 การสร้างงานการ์ตนู แอนิเมชนั่ Short Animation ในบทเรยี นน้ี จะกล่าวถงึ การสรา้ งงานการต์ นู แอนเิ มช่นั ทเี่ นน้ ไปในขัน้ ตอนการสรา้ งด้วยโปรแกรม Adobe Flash ขน้ั พน้ื ฐานซง่ึ ผ้เู รยี นสามารถน�ำ มาประยกุ ตใ์ ช้ในการนำ�เสนอไตเต้ลิ หรือส่วนเปดิ เรอ่ื งราวบนชิ้น งานของแต่ละคนได้ ขน้ั ตอนในการสร้างสรรค์ Flash Animation ไอเดีย (IDEA) ภาพท่ี 8.2 ภาพตัวอยา่ งการหาไอเดยี การทำ�งาน ส่งิ สำ�คญั ประการแรกในการเร่มิ ตน้ สร้างสรรคง์ านทัง้ หลายทงั้ ปวงนั้นเริ่มต้นจาก ไอเดยี (IDEA) หรอื แรงบนั ดาลใจ (Inspiration) ซ่ึงเป็นสง่ิ แรกในการสร้างสรรค์จินตนาการ ความคิด และจุดมงุ่ หมายของการน�ำ เสนอ ว่ากลุ่มเปา้ หมายของเราคือผูช้ มกลมุ่ ใด สไตลท์ ี่เราตอ้ งการน�ำ เสนอเป็นแบบไหน และส่งิ ท่ีผู้ชมจะไดร้ บั จากการน�ำ เสนอคืออะไร เปน็ ต้น 153

โครงเรอื่ ง (Story) ภาพท่ี 8.3 ภาพตวั อย่างการเขยี นโครงเร่ือง โครงเรอื่ งจะประกอบไปด้วยการเล่าเรื่องท่ีบอกถึงเนื้อหาเร่อื งราวทุกอย่างในภาพยนตร์ ทง้ั ตัวละคร ลำ�ดบั เหตุการณ์ ฉาก แนวคิด และทสี่ ำ�คญั เราควรพจิ ราณาวา่ การเล่าเร่ืองนั้น ควรจะมกี ารหกั มุมมากน้อยเพียง ใด สามารถสร้างความบันเทงิ ไดห้ รอื ไม่ และสรา้ งความประทบั ใจให้กับคนดูไดห้ รือเปลา่ สครปิ ต์ (Script) ภาพที่ 8.4 ภาพตัวอย่างการเขียน Script เปน็ ขัน้ ตอนในการจับใจความสำ�คญั ของเนอ้ื เรอ่ื ง ให้ออกมาในแต่ละฉาก พร้อมทั้งก�ำ หนดมมุ กลอ้ ง เทคนคิ พเิ ศษ รวมถึงระยะเวลาของการเคล่ือนไหว โดยใหร้ ายละเอยี ดตา่ ง ๆ ในการวางแผนงานเพ่ือเตรียม บุคลากรในด้านต่าง ๆ เชน่ ผ้จู ดั ทำ�เสยี งดนตรี เสียงประกอบ ทีมงานดา้ นงานศิลป์ นกั ออกแบบตวั ละคร และ แอนิเมเตอร์ เปน็ ตน้ 154

สรา้ งตวั ละคร (Character Design) ภาพที่ 8.5 ภาพตวั อย่างการสรา้ งตัวละคร ขนั้ ตอนน้ี เปน็ ขนั้ ตอนในการออกแบบและกำ�หนดลกั ษณะนิสยั บุคลกิ บทบาทต่าง ๆ และทา่ ทาง การเคลื่อนไหวให้กับตวั ละคร โดยอาศยั พน้ื ฐานของการออกแบบ ไดแ้ ก่ ขนาด (Size) รูปทรง (Shape) และ สัดสว่ น (Proportion) สตอรี่บอรด์ (Storyboard) ภาพที่ 8.6 ภาพตวั อย่างการเขียนสตอร่ีบอร์ด สตอรบ่ี อร์ด หรอื บอรด์ ภาพนง่ิ เป็นการใชภ้ าพในการเล่าเร่อื งเหตุการณ์ต่าง ๆ อย่างครบถว้ น ทั้ง เหตุการณ์ทเี่ กดิ ขน้ึ อารมณใ์ นเหตุการณน์ ้นั สหี น้า ทา่ ทาง ลักษณะตา่ ง ๆ ของตวั ละคร บอกถงึ สถานท่ี และ มมุ มองของภาพ ซ่ึงภาพวาดท้ังหมดจะเรยี งต่อเนอื่ งกันไปตามล�ำ ดบั ของเรอ่ื งจากตน้ จนจบ โดยภาพแตล่ ะภาพ จะมีความต่อเน่ือง เปน็ เหตุเป็นผลกนั เมื่อดูแลว้ สามารถเข้าใจเหตกุ ารณ์ท่เี กิดข้ึนอย่างชัดเจน 155

บนั ทึกเสยี ง (Sound Recording) ภาพที่ 8.7 ภาพตวั อย่างการบนั ทกึ เสียง หลงั จากทไี่ ด้ออกแบบตวั ละครและสร้างสตอรี่บอร์ดเรยี บรอ้ ยแลว้ ข้ันตอนต่อไปจะเปน็ การบนั ทกึ เสยี ง ซง่ึ เป็นขน้ั ตอนสำ�คญั ทห่ี ลีกเล่ียงไมไ่ ดอ้ ย่างย่งิ บางสตดู โิ อ อาจเรม่ิ ตน้ ดว้ ยการอดั เสียง SoundTrack ก่อน ซึ่ง การบนั ทึกเสียงในงานแอนิเมชน่ั สามารถแบง่ ออกเปน็ ประเภทได้ดังตอ่ ไปนี้ 1) เสียงบรรยาย (Narration) เป็นส่วนสำ�คัญในการสร้างความเข้าใจ เป็นการปพู ืน้ ฐานให้ผชู้ มว่าเรื่อง เปน็ อย่างไร และยังเป็นการเช่ือมโยงให้เร่อื งราวตดิ ต่อกันด้วย 2) บทสนทนา (Dialogue) เป็นหลกั การหนึ่งในการส่ือเรอ่ื งราวตามบทบาทของตัวละคร เป็นการสื่อ ความหมายใหต้ รงตามเนือ้ เรอื่ ง ทก่ี ระชบั และสมั พันธ์กบั ภาพ 3) เสยี งประกอบ (Sound Effect) เปน็ เสยี งทน่ี อกเหนือจากเพลง เสยี งบรรยาย หรอื เสยี งสนทนา แต่เป็นเสียงจากเหตกุ ารณท์ ีเ่ กิดข้นึ ในเนื้อเรือ่ ง ท�ำ ให้เกิดความรสู้ กึ สมจริง มจี ินตนาการ ราวกบั วา่ ได้อยู่ใน เหตุการณ์นัน้ ด้วย เช่น เสียงระเบดิ เสียงวัตถกุ ระทบกนั เสียงปนื เปน็ ต้น 4) ดนตรีประกอบ (Music) เปน็ เสยี งท่ชี ่วยสรา้ งอารมณใ์ ห้กบั ผู้ชม ใหค้ ลอ้ ยตามเน้อื หา และคอยปรบั อารมณ์ของผชู้ มในระหว่างการเช่อื มต่อของฉาก จากฉากหนง่ึ ไปยังอกี ฉากหนึ่งได้อยา่ งลนื่ ไหล และต่อเนื่อง ตรวจความเรียบรอ้ ยของแอนเิ มชั่น (Animatic Checking) Ink Paint Background Composite 156 ภาพที่ 8.8 ภาพตวั อย่างการสรา้ งงานแอนิเมชนั่

Animatic คือการนำ�ภาพน่งิ มาประกอบกนั เปน็ เรอ่ื งราวให้เขา้ กบั ไฟลเ์ สียงท่ีเตรียมไว้ กล่าวคอื เป็นการแอนเิ มทโดยหยาบ ๆ ครา่ ว ๆ เพ่อื ส่ือถึงแนวคิดหลกั ๆ ในการกำ�หนดการเคลอ่ื นไหว ทง้ั ยงั เป็นเครอ่ื ง มอื ทชี่ ว่ ยใหน้ กั สร้างสรรคไ์ ด้ตรวจสอบและทบทวนแนวคดิ ก่อนท่จี ะผลิตออกมาเปน็ ภาพยนตร์ สามารถ ทบทวนกรอบเวลา ความสมเหตสุ มผลในการดำ�เนินเรื่องราว สามารถปรับแตง่ เพ่ิมเตมิ หรือสามารถตัดเขา้ สู่ ฉากอ่ืน ๆ ได้ เพือ่ ใหไ้ ด้จังหวะ และองค์ประกอบทใ่ี กล้เคียงกบั การท�ำ แอนเิ มช่นั จริง ปรบั แต่งชนิ้ งาน (Refining the Animation) หลงั จากท่ีไดท้ �ำ Animatic แล้ว จะตอ้ งน�ำ ไปปรบั ปรงุ แกไ้ ข หรอื เพิ่มเตมิ สว่ นต่าง ๆ ให้ได้ตามความ เหมาะสม ตรงตามความตอ้ งการ เชน่ การปรบั แต่งตัวละคร ฉากประกอบ เสียง เวลา และสว่ นประกอบอน่ื ๆ และเขา้ สู่กระบวนการผลติ ในขนั้ ตอนต่อไป ซ่ึงในอดตี การปรบั เปลย่ี นแผนงานในการทำ�ภาพยนตรแ์ อนเิ มช่ัน น้ัน ตอ้ งมคี า่ ใชจ้ า่ ยสงู แตใ่ นปจั จบุ ันนี้ ได้นำ�ระบบดจิ ติ อลเข้ามาช่วยในการสร้างงานแอนิเมชั่น ทำ�ให้ประหยัด เวลาและคา่ ใชจ้ า่ ยไดม้ ากยิง่ ขึน้ จากท่ีได้กลา่ วมาทงั้ หมด เปน็ ขั้นตอนการผลิตภาพยนตรแ์ อนิเมช่นั แบบครา่ ว ๆ ซ่ึงในแตล่ ะขั้นตอนจะ มีรายละเอียดและวธี ีการที่ซบั ซ้อนมากกว่าน้ี สำ�หรับผทู้ ี่ชำ�นาญแล้วอาจจะมกี ารปรับเปลีย่ นข้นั ตอนการท�ำ งาน ตามความเหมาะสมกับระยะเวลา ขนาดขององคก์ ร และทีมงาน เป็นต้น 8.2 การสร้างสว่ นเปิดเร่ืองของแอนเิ มชั่น หรอื ฉาก Title Opening เน่ืองจากในแบบฝกึ หัดน้ีจะเป็นมินมิ ฟู วี่ หรือ Short Animation ซงึ่ จะเปน็ การด�ำ เนนิ เรื่องราวและ เนือ้ หาอย่างสั้น ๆ กรณีศกึ ษาจึงแบ่งออกเปน็ 3 ส่วน คอื 1) ส่วนของการเปดิ เรอ่ื ง 2) สว่ นของการดำ�เนินเรอื่ ง 3) ส่วนของการปดิ เรอ่ื ง ซึง่ ในแบบฝกึ หัดน้จี ะเน้นทก่ี ารทำ�ส่วนเปิดเรอ่ื งแบบง่าย ๆ เพอื่ ใหผ้ ูเ้ รียนไดน้ ำ�ไปประยุกต์ใช้กบั โปรเจคชิ้นงานของตนเองไดใ้ นขน้ั ตอนตอ่ ไป และในสว่ นของการด�ำ เนินเรือ่ ง และสว่ นปิดเร่ืองนัน้ จะขอยกไปไว้ ในบทถดั ไป ซ่งึ ข้นั ตอนการเปิดเรือ่ ง สามารถทำ�ไดง้ า่ ย ๆ ดังน้ี 1 ภาพที่ 8.9 ภาพไอคอนโปรแกรม Flash 1) เปิดโปรแกรม Flash ข้นึ มา 157

2 ภาพที่ 8.10 ภาพการเลือกโหมดการท�ำ งานของโปรแกรม Flash 2) เลือก ActionScript 3.0 ในชอ่ ง Create New 3 ภาพท่ี 8.11 ภาพหน้าต่างการทำ�งานของโปรแกรม Flash 3) เข้าสหู่ นา้ ตา่ งการทำ�งานในโปรแกรม Flash 4 ภาพท่ี 8.12 ภาพการจดั เตรยี มไฟลใ์ นการทำ�งาน 4) จดั เตรียมไฟลต์ ัวละคร และ ตัวหนงั สอื ใหเ้ รียบร้อย โดยแยกแตล่ ะชน้ิ ออกเป็นเลเยอร์ ซงึ่ ในแบบฝกึ หดั น้จี ะ แยกออกเป็น 4 เลเยอร์ ดังรูป 158

5 ภาพที่ 8.13 ภาพจัดวางรูปภาพ 5) นำ�ไฟล์ท่ีเตรยี มไวม้ าจัดวางใหไ้ ด้องคป์ ระกอบตามตอ้ งการ 6 ภาพท่ี 8.14 ภาพหนา้ การเลอื กวตั ถุ 8 6) คลกิ เลอื กท่ตี วั หนงั สือดา้ นบน 7 ภาพที่ 8.15 ภาพการ Convert to symbol 7) คลกิ เมาสข์ วา > Convert to Symbol 8) ต้ังช่ือ Symbol และเลือก Type เปน็ Movie Clip > คลกิ เลือกท่ี OK 159

9 ภาพที่ 8.16 ภาพการเลือกเฟรมที่ 100 9) ทเี่ ลเยอร์ Background เลือกเฟรมท่ี 100 10 ภาพท่ี 8.17 ภาพการเลือก Insert Keyframe 10) คลกิ ขวา > เลอื กที่ Insert Keyframe 11 ภาพที่ 8.18 ภาพการ Insert Keyframe 11) บนแถบ TimeLine จะเห็นวา่ Keyframe ไดถ้ กู Add เข้าไปจนถงึ เฟรมท่ี 100 แล้ว 160

12 ภาพท่ี 8.19 ภาพการเลือกเฟรมท่ี 25 12) ท่เี ลเยอร์ Text-01 เลอื กเฟรมที่ 25 13 ภาพที่ 8.20 ภาพการเลือก Insert Keyframe 13) คลกิ ขวา > เลอื กท่ี Insert Keyframe 14 ภาพที่ 8.21 ภาพการ Insert Keyframe 14) บนแถบ TimeLine จะเห็นวา่ Keyframe ไดถ้ ูก Add เข้าไปจนถึงเฟรมที่ 25 แล้ว 161

15 ภาพท่ี 8.22 ภาพหนา้ ต่างการทำ�งานบนสเตจ 15) สงั เกตดูผลลัพธบ์ นหน้าจอ 16 ภาพท่ี 8.23 ภาพหนา้ ต่างการเลือกเฟรมบน Time Line 16) ทเี่ ลเยอร์ Text-01 เลอื กเฟรมที่ 1 17 ภาพท่ี 8.24 ภาพการก�ำ หนดการเคลอ่ื นไหวใหก้ บั วตั ถุ 17) ใช้ Selection Tool เลอ่ื น Text-01 ออกไปนอกสเตจ ดงั ภาพ 162

18 ภาพที่ 8.25 ภาพการกำ�หนดการเคลอื่ นไหวให้กบั วตั ถุ 18) เลื่อน Text-01 ออกไปดา้ นนอกสเตจ ดงั ภาพ 19 ภาพที่ 8.26 ภาพการเลือกเฟรมบนเลเยอร์ 19) ทแ่ี ถบเลเยอร์ เลือกท่เี ลเยอร์ Text-01 เลือกเฟรมท้ังหมดโดยคลิกเลือกเฟรมท่ี 1 และกด Shift > คลกิ เลือกเฟรมที่ 25 20 ภาพท่ี 8.27 ภาพการเลือกใช้ Classic Tween 20) เลือกที่ Create Classic Tween 163

21 ภาพท่ี 8.28 ภาพการตรวจสอบผลลพั ธ์ 21) ทดลอง Play เพ่อื ตรวจสอบผลลพั ธ์ 22 ภาพท่ี 8.29 ภาพการ Insert Frame 22) คลกิ ขวาบนเฟรมท่ี 26 เลอื กท่ี Insert Frame 164

23 24 ภาพท่ี 8.30 ภาพการเลือก Insert Frame 23) จากนน้ั คลกิ เลอื กเฟรมท่ี 100 24) คลกิ ขวา > Insert Frame 25 ภาพที่ 8.31 ภาพการ Insert Frame 25) เฟรมจะถกู Add เข้าไปจนถงึ เฟรมท่ี 100 ดงั รูป 165

26 ภาพท่ี 8.32 ภาพการเลือกเฟรมบนเลเยอร์ 26) ที่เลเยอร์ Text-02 เลอื กเฟรมท่ี 25 27 ภาพที่ 8.33 การ Insert Keyframe 27) เลือกที่ Insert Keyframe 28 ภาพท่ี 8.34 ภาพการ Insert Keyframe 28) บนแถบ Time Line จะเห็นวา่ Keyframe ไดถ้ ูก Add เข้าไปจนถึงเฟรมที่ 25 แล้ว 166

29 ภาพท่ี 8.35 ภาพหน้าตา่ งการเลอื กเฟรมบน Time Line 29) ที่เลเยอร์ Text-02 เลือกเฟรมท่ี 1 30 ภาพท่ี 8.36 ภาพการกำ�หนดการเคล่อื นไหวให้กับวตั ถุ 30) ใช้ Selection Tool เลอ่ื น Text-02 ออกไปนอกสเตจ ดังภาพ 31 ภาพท่ี 8.37 ภาพการเลือกเฟรมบนเลเยอร์ 31) ที่แถบเลเยอร์ เลือกท่เี ลเยอร์ Text-02 เลือกเฟรมทั้งหมดโดยคลิกเลอื กเฟรมท่ี 1 และกด Shift > คลิก เลอื กเฟรมที่ 25 167

32 ภาพที่ 8.38 ภาพการเลอื กใช้ Classic Tween 32) เลือกที่ Create Classic Tween 33 ภาพท่ี 8.39 ภาพการเลอื กใช้ Classic Tween 33) คีย์เฟรมจะถกู เชื่อมต่อการเคล่ือนไหวแบบ Classic Tween 34 ภาพท่ี 8.40 ภาพการตรวจสอบผลลพั ธ์ 34) ทดลอง Play เพ่ือตรวจสอบผลลพั ธ์ 168

35 ภาพท่ี 8.41 ภาพการเลือกเฟรม 35) ท่เี ลเยอร์ Text-02 เลือกเฟรมที่ 26 36 ภาพที่ 8.42 ภาพการ Insert Frame 36) คลิกขวา > เลอื กท่ี Insert Frame 37 ภาพที่ 8.43 ภาพการเลอื ก Insert Frame 37) จากนั้นคลิกเลือกเฟรมท่ี 100 169

38 ภาพท่ี 8.44 ภาพการเลือก Insert Frame 38) คลกิ ขวา > Insert Frame 39 ภาพที่ 8.45 ภาพการ Insert Frame 39) เฟรมจะถกู Add เข้าไปจนถงึ เฟรมท่ี 100 ดงั รูป 40 ภาพท่ี 8.46 ภาพหน้าต่างการท�ำ งานของโปรแกรม Flash 40) ทแ่ี ถบเลเยอร์แพเนลเลอื กเลเยอร์ BobRed 170

41 41) เลือกเฟรมที่ 25 ภาพที่ 8.47 ภาพการเลือกเฟรม 42 ภาพท่ี 8.48 ภาพการ Insert Keyframe 42) คลิกขวา > Insert Keyframe 43 ภาพที่ 8.49 ภาพการ Insert Keyframe 43) บนแถบ Time Line จะเห็นว่า Keyframe ได้ถูก Add เข้าไปจนถึงเฟรมที่ 25 แล้ว 171

44 44) เลือกเฟรมที่ 25 ภาพท่ี 8.50 ภาพการเลอื กเฟรม 45 ภาพที่ 8.51 ภาพการ Insert Keyframe 45) คลิกขวา > Insert Keyframe 46 ภาพที่ 8.52 ภาพการ Insert Keyframe 46) บนแถบ Time Line จะเหน็ วา่ Keyframe ไดถ้ กู Add เขา้ ไปจนถึงเฟรมท่ี 50 แล้ว 172

47 ภาพท่ี 8.53 ภาพการเลอื กเฟรม 47) กลับมาคลกิ เลือกเฟรมที่ 25 48 49 ภาพท่ี 8.54 ภาพหนา้ ตา่ งการท�ำ งานของโปรแกรม Flash 48) ทแี่ ถบ Menubar เลอื กเครอ่ื งมือ Free Transform Tool 49) เล่อื นจดุ หมุนของวัตถุมาไว้บริเวณดา้ นลา่ ง ดงั รูป 50 ภาพที่ 8.55 ภาพการเลือกเฟรม 50) กลบั มาคลิกเลอื กเฟรมที่ 25 173

51 ภาพท่ี 8.56 ภาพการปรบั ขนาดวตั ถุ 51) ท�ำ การปรบั ขนาดของวตั ถุ โดยย่อให้วัตถมุ ขี นาดเล็กท่ีสดุ 52 ภาพที่ 8.57 ภาพการปรบั ขนาดวตั ถุ 52) ยอ่ ใหว้ ตั ถุมขี นาดเล็กจนไม่สามารถมองเหน็ ด้วย Size ปกติ 174

53 53) เลือกเฟรมท่ี 25 ภาพที่ 8.58 ภาพการเลอื ก Frame 54 ภาพท่ี 8.59 ภาพการ Copy Frames 54) คลกิ ขวา > เลือก Copy Frames 55 55) กลบั ไปเลือกเฟรมที่ 1 ภาพท่ี 8.60 ภาพการเลอื ก Frame 175

56 ภาพท่ี 8.61 ภาพหน้าต่างการท�ำ งานของโปรแกรม Flash 56) คลกิ ขวา > Paste Frames Flash 58 57 ภาพที่ 8.62 ภาพการเลือกเฟรมบนเลเยอร์ 57) เลอื กเฟรมที่ 25 ถงึ เฟรมที่ 50 โดยคลิกเลอื กเฟรมที่ 25 และกด Shift > คลิกเลือกเฟรมท่ี 50 58) คลิกขวา > Create Classic Tween 176

59 ภาพที่ 8.63 ภาพการเลือกใช้ Classic Tween 59) คียเ์ ฟรมจะถูกเชอ่ื มต่อการเคลื่อนไหวแบบ Classic Tween 61 60 ภาพท่ี 8.64 ภาพการเลือกเฟรม 60) เลอื กเฟรมท่ี 51 61) คลิกขวา > เลือกท่ี Insert Frame 177

62 ภาพที่ 8.65 ภาพการเลอื ก Insert Frame 62) จากนนั้ คลิกเลือกเฟรมที่ 100 63 ภาพท่ี 8.66 ภาพหนา้ ตา่ งการท�ำ งานของโปรแกรม Flash 63) คลกิ ขวา > เลือกที่ Insert Frame 64 ภาพท่ี 8.67 ภาพการ Insert Frame 64) เฟรมจะถูก Add เขา้ ไปจนถึงเฟรมท่ี 100 ดงั รปู 178

65 ภาพท่ี 8.68 ภาพหน้าตา่ งการ Test Movie 65) เม่ือเรียบรอ้ ยแล้วให้ทำ�การทดสอบการเคลื่อนไหวโดยการกดปมุ่ Shift + Enter บนคียบ์ อรด์ เอกสารอ้างองิ ธรรมปพน ลอี ำ�นวยโชค.(2550). Intro to Animation กรงุ เทพฯ : ส�ำ นกั พมิ พ์ฐานบุค๊ ส.์ สุรพงษ์ เวชสุวรรณมณ.ี (2550). พนื้ ฐานการสรา้ งงานเคลื่อนไหว 2 มติ ิ กรงุ เทพฯ : บริษัทซีเอด็ ยเู คชน่ั จ�ำ กดั (มหาชน). ดนยั มว่ งแกว้ .(2549). Digiart Flash Workshop นนทบุรี : ไอดีซฯี โปรแกรมทใี่ ช้ประกอบการสอน Adobe Flash เวอร์ชน่ั CS 6 179

Workshop กจิ กรรมท่ี 8 ใบงานท่ี 8.1 Flash Animation 01 ให้นกั เรยี นสรา้ งสรรคแ์ ละออกแบบชิ้นงานดว้ ยโปรแกรม Flash-01 ใหน้ กั เรยี นเขยี นสตอรบี่ อรด์ งานแอนเิ มชัน่ เปดิ ตวั แบบสน้ั ๆ พร้อมทง้ั ทำ�แบบร่าง ตวั ละครและออกแบบกราฟิกตวั หนงั สอื เพือ่ ให้เห็นถึงระบบการวางแผนในการ ท�ำ งานในระดับ Pre-production ในเบื้องต้น 180

Workshop กจิ กรรมที่ 8 ใบงานท่ี 8.2 Flash Animation 01 ให้นักเรยี นสรา้ งสรรค์และออกแบบชิน้ งานด้วยโปรแกรม Flash-02 ใหน้ ักเรียนออกแบบตัวละครทจ่ี ะใชใ้ นการท�ำ แอนเิ มชน่ั เปดิ ตัวพรอ้ มทั้งกราฟิก ตวั หนังสอื ใหส้ วยงามพร้อมทงั้ เขียนอธิบายถงึ แนวคดิ และทม่ี าท่ไี ปของชน้ิ งาน 181

Workshop กจิ กรรมที่ 8 ใบงานที่ 8.3 Flash Animation 01 ใหน้ กั เรียนสร้างสรรคแ์ ละออกแบบชิ้นงานด้วยโปรแกรม Flash ให้นักเรียนสร้างสรรค์งานแอนิเมช่นั เปิดตัวส้นั ๆ โดยใหอ้ อกการเคลอ่ื นไหวโดย ใช้ชน้ิ งานจากใบงานที่ 8.1 โดยอ้างอิงจากสตอรีบ่ อร์ดท่ีท�ำ ไวใ้ นตอนตน้ 182

บทท่ี 9 Flash Animation 02 9.1 การแยกสว่ นตัวละครและกำ�หนดจดุ หมนุ ของขอ้ ตอ่ เพ่ือใช้ในการก�ำ หนดการ เคลอื่ นไหวในโปรแกรม Flash การสร้างภาพเคลอ่ื นไหวในโปรแกรมนอกจากการใช้วิธีแบบดัง้ เดมิ (Traditional) โดยการก�ำ หนดการ เคลอื่ นไหวแบบ Frame by Frame ผา่ นการวาดทีละภาพแล้ว การกำ�หนดการเคล่อื นไหวแบบ Motion Tween กเ็ ป็นสว่ นหน่ึงที่ตอ้ งมีการเตรียมการและวางแผนเปน็ อยา่ งดี มกี ารแบง่ แยกเลเยอร์ กำ�หนดจุดหมนุ ของวตั ถอุ ย่างเหมาะสม ซง่ึ มวี ิธกี ารดังน้ี 1 ภาพท่ี 9.1 ภาพไอคอนโปรแกรม Flash 1) เปดิ โปรแกรม Flash ข้ึนมา 2 ภาพท่ี 9.2 ภาพการเลือกโหมดการทำ�งานของโปรแกรม Flash 2) เลอื ก Action Script 3.0 ในชอ่ ง Create New 3 ภาพที่ 9.3 ภาพหนา้ ต่างการท�ำ งานของโปรแกรม Flash 3) เขา้ สหู่ นา้ ต่างการท�ำ งานของโปรแกรม Flash 183

4 ภาพที่ 9.4 ภาพตวั อยา่ งการสรา้ งตัวละครแบบแยกชิ้นส่วน 4) ใช้เคร่อื งมอื สรา้ งวัตถุพ้นื ฐานในโปรแกรม Flash ออกแบบตวั ละครข้นึ มา โดยแยกชิน้ ส่วนตามความละเอยี ด ทต่ี ้องการ 5 6 ภาพท่ี 9.5 ภาพการใช้ Selection Tool เลือกวัตถุ 5) ท่ีแถบเคร่อื งมือ Toolbox เลอื กที่ Selection Tool 6) แดรกเมาส์คลมุ ส่วนหัวทั้งหมด 184

8 7 ภาพท่ี 9.6 ภาพการใช้ค�ำ สัง่ Convert to Symbol 7) คลกิ ขวา > เลอื กท่ี Convert to Symbol 8) ตัง้ ชือ่ Symbol ที่ชอ่ ง Name > เลอื ก Type เปน็ Movie Clip > คลกิ ที่ OK 139 ภาพท่ี 9.7 ภาพ Symbol ทถี่ กู บันทึกลงในแพเนล Library 9) Symbol จะถกู บนั ทกึ ลงในแพเนล Library 185

10 ภาพท่ี 9.8 ภาพ Symbol ท่ีถูกบนั ทกึ ลงในแพเนล Library 10) ทำ�แบบเดียวกนั นี้กับช้นิ สว่ นอนื่ ๆ ให้ครบ 11 ภาพที่ 9.9 ภาพการ Convert to Symbol ให้กบั ชน้ิ สว่ นอ่ืน ๆ 11) สงั เกตดูวา่ เม่ือวตั ถุทุกชน้ิ ไดผ้ า่ นการ Convert to Symbol แลว้ จะมีกรอบสีฟ้าคลมุ อยู่ 186

12 13 ภาพท่ี 9.10 ภาพการปรบั เปลีย่ นตำ�แหน่งจดุ หมุน 12) ทแ่ี ถบเคร่ืองมอื Tool Box เลอื กเคร่อื งมือ Free Transform Tool 13) คลกิ เลอื กท่สี ่วนหัวของตัวละคร 14 ภาพที่ 9.11 ภาพการปรบั เปลีย่ นตำ�แหน่งจุดหมนุ 14) คลกิ ที่จดุ สขี าวตรงกลางวตั ถุ แลว้ แดรกเมาสล์ งมายังบรเิ วณคาง ดงั รปู 187

15 ภาพที่ 9.12 ภาพการปรบั เปลี่ยนต�ำ แหนง่ จุดหมนุ 15) ทำ�การย้ายจดุ หมุนให้กบั ช้นิ ส่วนอน่ื ๆ ดังรูป 16 17 ภาพที่ 9.13 ภาพการเลอื กช้นิ ส่วนทุกช้ิน 16) ทแ่ี ถบเคร่อื งมอื Tool Box เลอื กเครอ่ื งมือ Selection Tool 17) แดรกเมาสเ์ ลอื กช้ินส่วนใหค้ รบทกุ ชิน้ 188

18 19 ภาพท่ี 9.14 ภาพการใชค้ �ำ สัง่ Distribute to Layers 18) ที่แถบ Menubar เลอื กท่ี Modify > Timeline 19) คลิกเลอื กทคี่ �ำ ส่งั Distribute to Layers 20 ภาพท่ี 9.15 ภาพการใชค้ ำ�สง่ั Distribute to Layers 20) สังเกตดทู ่แี ถบเลเยอร์ วัตถุทุกช้นิ ทส่ี ร้างข้นึ จะถกู แบง่ ออกเปน็ เลเยอร์ ตามจำ�นวนชิน้ วัตถุและชอ่ื เลเยอร์ท่ี ได้ตั้งคา่ ไว้ในตอนตน้ 189

21 22 ภาพที่ 9.16 ภาพการประกอบชิ้นส่วนตวั ละครใหส้ มบรู ณ์ 21) ทแ่ี ถบเครื่องมอื Toolbox เลือกเครือ่ งมือ Selection Tool 22) ลากช้นิ สว่ นมาประกอบกันให้ครบถว้ นตามท่ีได้ออกแบบไว้ 23 ภาพที่ 9.17 ภาพการเรยี งลำ�ดบั ของเลเยอร์ 23) ทำ�การเรยี งล�ำ ดบั กอ่ นหลงั ของชนิ้ ส่วนในแต่ละเลเยอร์ ให้ได้ล�ำ ดบั ทีถ่ ูกต้องดังภาพ 190

24 ภาพที่ 9.18 ภาพการ Insert Keyframe เพือ่ ก�ำ หนดการเคล่อื นไหวของตัวละคร 24) ทีเ่ ฟรมที่ 20 ใหค้ ลิกเมาส์ขวา > เลือก Insert Keyframe เพ่ือกำ�หนดการเคลือ่ นไหวให้กบั ตวั ละคร 25 26 ภาพที่ 9.19 ภาพการกำ�หนดการเคลือ่ นไหวใหก้ บั ตวั ละคร 25) ทแ่ี ถบเคร่ืองมือ Toolbox เลือกเครือ่ งมือ Free Transform Tool 26) เลอื กคลกิ ชิน้ ส่วนท่ีตอ้ งการ และท�ำ การหมนุ เพอื่ บันทกึ เฟรมการเคล่อื นไหว โพสท่าตามตอ้ งการ 191

28 27 ภาพท่ี 9.20 ภาพการ Create Classic Tween 27) ท่แี ถบเลเยอร์ คลกิ เลอื กเฟรมแรก > Shift + คลกิ ท่เี ฟรมสดุ ทา้ ย เพือ่ การเลอื กมีการครอบคลุมทุกเฟรม 28) คลิกเมาส์ขวา > เลอื กท่ี Create Classic Tween 29 ภาพที่ 9.21 ภาพการ Create Classic Tween 29) สงั เกตดูที่เฟรมจะมีลูกศรแสดงความตอ่ เน่ืองของการเคลื่อนไหวดงั ภาพ 192

30 ภาพที่ 9.22 ภาพการ Preview ตรวจสอบการเคลอ่ื นไหว 30) ทีแ่ ถบ Menu Bar คลกิ เลอื ก Control > Test Movie 31 ภาพท่ี 9.23 ภาพการ Preview ตรวจสอบการเคล่ือนไหว 31) เลอื กท่คี ำ�สั่ง Test หรือกด Ctrl + Enter บนคียบ์ อร์ด 32 ภาพท่ี 9.24 ภาพการ Preview ตรวจสอบการเคล่อื นไหว 32) ตรวจสอบดผู ลลัพธ์ 193

9.2 การสร้างฉากแบบ ง่ายๆ 1 ภาพที่ 9.25 ภาพไอคอนโปรแกรม Flash 1) เปดิ โปรแกรม Flash ขึน้ มา 2 ภาพที่ 8.29 ภาพการเลอื กโหมดการทำ�งาน 2) เลอื ก Action Script 3.0 ในชอ่ ง Create New 3 ภาพท่ี 9.26 ภาพหน้าจอการทำ�งานของโปรแกรม Flash 3) เข้าสู่หนา้ ตา่ งการท�ำ งานของโปรแกรม Flash 194

4 ภาพที่ 9.27 ภาพการเลอื ก Pencil Tool 4) ทแ่ี ถบเครื่องมอื Toolbar เลือก Pencil Tool ท่ี Panel Properties คลิกท่ี Fill 5 ภาพท่ี 9.28 ภาพการปรับแต่งความหนาของ Stroke 5) ปรับ Alpha เหลอื 20% และปรบั ความหนาของ Stroke เหลอื 0.10 195

6 7 ภาพที่ 9.29 ภาพการร่างภาพในโปรแกรม Flash 6) ดบั เบล้ิ คลกิ ที่ชอ่ ง Layer และตงั้ ชือ่ วา่ Sketch 7) ลงมือร่างภาพต้องการ 9 8 ภาพที่ 9.30 ภาพการ Add New Layer 8) คลิกที่ Icon New Layer ดา้ นล่าง 9) ตง้ั ชอ่ื ให้ได้ต�ำ แหน่งตามต้องการ 196

10 11 ภาพที่ 9.31 ภาพการ Lock Layer 10) คลิกทเี่ ลเยอร์ Sketch 11) คลกิ ทไ่ี อคอนลกู กุญแจเพื่อ Lock Layer 12 14 13 ภาพที่ 9.32 ภาพการปรับค่าเครอื่ งมอื Line Tool 12) ท่แี ถบเครอื่ งมอื Toolbox เลือกท่ี Line Tool 13) คลิกท่ี Snap to Object เพอื่ ใหว้ ตั ถุทกุ ชนิ้ ที่สร้างข้นึ มาใหมม่ ีการเชอื่ มต่อกัน 14) ปรับ Stroke เปน็ 0.10 197

15 ภาพท่ี 9.33 ภาพการใช้เครอื่ งมอื Line Tool 15) คลกิ เลือก Layer Chair > ลากเสน้ Line ให้ตรงกับภาพทีร่ า่ งเอาไว้ในตอนต้น 16 ภาพที่ 9.34 ภาพการใช้เคร่ืองมอื Line Tool 16) ลากเสน้ ใหค้ รบตามภาพเกา้ อี้ท่รี า่ งเอาไว้ 198

17 18 19 ภาพที่ 9.35 ภาพการใช้ Selection Tool 17) ท่ีแถบเครอ่ื งมือ Tool Box เลือกท่ี Selection Tool 18) คลกิ เลอื กเสน้ ทีม่ กี ารทบั ซอ้ นกันดงั ภาพ 19) เมื่อเลือกครบแลว้ ใหก้ ดปมุ่ Delete บนคยี ์บอร์ด 20 21 ภาพท่ี 9.36 ภาพการใช้ Selection Tool 20) ทีแ่ ถบเคร่อื งมอื Tool Box เลือกเครอื่ งมือ Selection Tool 21) คลกิ เลอื กเสน้ Outline รอบ ๆ วัตถทุ ้งั หมด 199

22 23 ภาพที่ 9.37 ภาพการปรับความหนาของเสน้ Outline ของวตั ถุ 22) ปรบั Stroke ใหเ้ ปน็ 1.00 23) ดผู ลลพั ธ์จากการปรับแต่งความหนาของเส้น 25 24 ภาพที่ 9.38 ภาพการเลอื กท�ำ งานบน Layer 24) ทำ�การ Lock Layer Chair 25) เลอื กทำ�งานบน Layer Tree ซึ่งเป็นเลเยอรถ์ ัดไป 200