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

หนงั สือเรยี นรายวชิ าพืน้ ฐาน การใช้งานโปรแกรมคอมพวิ เตอร์ แอนิเมชน่ั 2 มติ เิ บือ้ งต้น ชั้นมธั ยมศึกษาปีที่ 5 โครงการบ่มเพาะและพฒั นาอาชีพเชงิ บูรณาการ ดา้ นเทคโนโลยสี ารสนเทศและการสื่อสาร ภายใตโ้ ครงการปฏริ ปู หลกั สตู รการศึกษา พุทธศกั ราช ๒๕๕๕ 1

คำ�น�ำ ส�ำ นกั งานคณะกรรมการการอดุ มศกึ ษา กระทรวงศกึ ษาธกิ าร ไดม้ ขี อ้ ตกลงความรว่ มมอื กบั มหาวทิ ยาลยั พะเยา ภายใต้โครงการปฏิรปู หลกั สตู รการศกึ ษาแห่งชาติ ได้ให้มกี ารพัฒนาหลกั สตู รและแผนการสอน เอกสาร ประกอบการสอน คู่มือครู ท่ีบูรณาการความรู้ด้านเทคโนโลยีสารสนเทศและการส่ือสารกับกลุ่มอาชีพ เพื่อใช้ ประกอบการเรียนการสอนของสถานศึกษาท่เี ขา้ ร่วมโครงการ เอกสารประกอบการสอนรายวิชาพนื้ ฐาน แอนิเมชั่น 2 มติ ิเบอ้ื งตน้ ชัน้ มธั ยมศึกษาปีที่ ๕ น้ี มเี นื้อหา สาระเก่ยี วกบั งานแอนิเมช่นั 2 มติ ิ บทนำ�ของการสร้างงานแอนเิ มชนั่ เบ้ืองต้น การสรา้ งตวั ละครขัน้ พื้นฐาน ขนั้ ตอนในการสรา้ ง Motion Graphic ทฤษฎกี ารออกแบบตวั ละคร การออกแบบฉากพน้ื หลงั การสรา้ ง Character Presentation ดว้ ยโปรแกรม Flash ทฤษฎใี นการสรา้ งอนเิ มชน่ั การสรา้ ง Flash Animation 01 การสรา้ ง Flash Animation 02 การแปลงไฟล์เพอ่ื นำ�เสนองาน การจัดเตรียมไฟลน์ �ำ เสนองาน และการท�ำ Individual Project ผจู้ ดั ท�ำ เอกสารประกอบการสอนหวงั เปน็ อยา่ งยงิ่ วา่ เอกสารประกอบการสอนเลม่ นจี้ ะเปน็ ประโยชนต์ อ่ ผู้เรียนและผู้ท่ีสนใจ เพ่ือให้ผู้เรียนสามารถนำ�ความรู้ที่ได้ไปประยุกต์ใช้ได้ในอนาคต และขอขอบคุณ สำ�นักงาน คณะกรรมการการอดุ มศกึ ษา(สกอ.) ส�ำ นกั งานคณะกรรมการการศกึ ษาขนั้ พน้ื ฐาน (สพฐ.) และสถานศกึ ษาทเ่ี ขา้ รว่ มโครงการ ผู้จัดทำ� สิรวิ ชิ ย ์ พังสุวรรณ 12 กุมภาพนั ธ์ 2557 2

สารบัญ ค�ำ นำ� บทท่ี 1 บทนำ�ของการสร้างงานแอนเิ มชน่ั เบอ้ื งต้น................................................................................5 1.1 ความหมายของแอนเิ มชนั่ ...............................................................................................................5 1.2 ชนิดของแอนเิ มช่นั ..........................................................................................................................5 1.3 ข้นั ตอนในการสรา้ งงานแอนเิ มชนั่ ..................................................................................................6 1.4 บทนำ�ของโปรแกรม Adobe Flash..............................................................................................16 บทที่ 2 Flash Workshop การสรา้ งตัวละครขน้ั พ้นื ฐาน................................................................39 2.1 สว่ นประกอบในการสรา้ งวัตถุของโปรแกรม Flash.......................................................................39 2.2 ข้อควรระวงั ในการสรา้ งวัตถขุ องโปรแกรม Flash.........................................................................39 2.3 แบบฝึกหัดการสร้าง รปู ทรงเรขาคณติ และลงสแี บบงา่ ย ๆ ด้วยคำ�สง่ั พ้ืนฐานใน Flash...............40 2.4 สร้างตวั ละครด้วยค�ำ ส่งั พ้นื ฐานใน Flash ส�ำ หรับเตรียมการกำ�หนดการเคลอ่ื นไหว....................48 2.5 การก�ำ หนดการเคลอื่ นไหวขน้ั พนื้ ฐานใหก้ ับตวั ละครและการใส่ไฟลเ์ สียงลงในงานแอนเิ มชัน่ ......63 บทที่ 3 ขน้ั ตอนในการสรา้ ง Motion Graphic...................................................................................76 3.1 การศึกษาถึงข้นั ตอนในการควบคุมให้วัตถุประสงคใ์ นการท�ำ งาน.................................................76 3.2 การจัดลำ�ดบั ของตวั ละครหลัก ตวั แสดงสนับสนนุ และตัวประกอบ..............................................78 บทท่ี 4 ทฤษฎีการออกแบบตัวละคร........................................................................................................84 4.1 การสรา้ งบคุ ลกิ ใหก้ บั ตัวละคร.......................................................................................................84 4.2 7-archetypes of Character......................................................................................................90 4.3 รูปทรงทีก่ ำ�หนดบุคลกิ ลกั ษณะภายนอกของตัวละคร...................................................................91 4.4 จิตวิทยาการใช้สใี นการออกแบบตัวละคร.....................................................................................93 4.5 ขนั้ ตอนการออกแบบตัวละคร.......................................................................................................99 บทท่ี 5 การออกแบบฉากพนื้ หลัง...........................................................................................................105 5.1 การออกแบบฉากให้สวยงามและมีมิติ มอี ยู่ดว้ ยกัน 3 วธิ ดี งั นดี้ งั นี้..............................................106 5.2 การออกแบบฉาก Perspective..................................................................................................107 5.3 การอา้ งองิ ต�ำ แหนง่ ตัวละครกับเสน้ Horizon Line....................................................................117 บทที่ 6 การสร้าง Character Presentation ด้วยโปรแกรม Flash............................................123 6.1 วิธีการการสรา้ ง Character Presentation ดว้ ยโปรแกรม Flash.............................................123 บทท่ี 7 ทฤษฎใี นการสรา้ งอนเิ มช่นั .......................................................................................................139 7.1 การศกึ ษาเรื่องกฎ 12 ข้อของการทำ�แอนิเมช่นั ...........................................................................139 7.2 ศึกษาอิรยิ าบถการเคล่อื นไหวของสัตว์.......................................................................................146 บทท่ี 8 Flash Animation 01...............................................................................................................153 8.1 การสรา้ งงานการต์ นู แอนิเมชัน่ เรือ่ งสน้ั ......................................................................................153 8.2 การสร้างส่วนเปดิ เรือ่ งของแอนเิ มช่ัน หรอื ฉาก Title Opening..................................................157 3

บทท่ี 9 Flash Animation 02...............................................................................................................183 9.1 การแยกสว่ นตวั ละครและกำ�หนดจุดหมนุ ของข้อตอ่ ..................................................................183 9.2 การสรา้ งฉากแบบ ง่ายๆ.............................................................................................................194 บทท่ี 10 การแปลงไฟลเ์ พ่อื น�ำ เสนองาน...............................................................................................226 10.1 การจัดเตรยี มและนำ�เสนองาน.................................................................................................226 4

บทท่ี 1 บทน�ำ ของการสรา้ งงานแอนิเมช่ันเบ้ืองต้น ภาพท่ี 1.1 ตัวอย่างฉากในงานแอนิเมชนั่ 1.1 ความหมายของแอนิเมช่นั หมายถึงองค์ประกอบของภาพและเสียงที่ลงตัวเพื่อตอบสนองความต้องการของจินตนาการที่ไม่ สามารถเปน็ ไปได้ในยคุ ปัจจบุ ัน ซึ่งเกิดจากการสร้างภาพเคล่ือนไหวด้วยการน�ำ ภาพนง่ิ มาเรียงลำ�ดับกนั และ แสดงผลอยา่ งตอ่ เนอ่ื งท�ำ ให้ดวงตาเหน็ ภาพทมี่ ีการเคลือ่ นไหวในลกั ษณะภาพตดิ ตา (Persistence of Vision) เม่อื ตามนษุ ย์มองเห็นภาพทีฉ่ าย อยา่ งต่อเนือ่ ง เรตนิ าจะรกั ษาภาพน้ไี ว้ในระยะสั้น ๆ ประมาณ 1/3 วนิ าที หาก มีภาพอน่ื แทรกเข้ามาในระยะเวลาดังกลา่ ว สมองของมนษุ ยจ์ ะเชอื่ มโยงภาพทั้งสองเขา้ ดว้ ยกันทำ�ใหเ้ หน็ เป็น ภาพเคลอื่ นไหวทมี่ คี วามตอ่ เนื่องกนั ในปัจจบุ นั แแอนเิ มชนั่ ไดถ้ ูกน�ำ ไปประยุกตใ์ ชก้ ับงานต่าง ๆ มากมาย เชน่ งานภาพยนตร์ งานโทรทัศน์ งานพัฒนาเกมส์ งานสถาปัตย์งานก่อสรา้ ง งานดา้ นวิทยาศาสตร์ หรืองานพัฒนาเวบ็ ไซต ์ เป็นต้น 1.2 ชนิดของแอนิเมชนั่ แบง่ ออกได้เปน็ 3 ชนิดคือ 1) Drawn Animation คือแอนเิ มชนั่ ท่ีเกดิ จากการวาดภาพทีละภาพจากหลาย ๆ พันภาพและน�ำ มาฉายผา่ นกล้อง ขอ้ ดคี ือ มี ความสวยงาม และมรี ูปแบบเป็นงานศลิ ปะ แตข่ ้อเสยี ของเทคนิคน้คี อื ใช้เวลาในการผลติ นาน ต้องใช้ แอนเิ มเตอร์จำ�นวนมากและมตี ้นทนุ การผลติ สูง 2) Stop Motion หรอื เรียกว่า Model Animation เป็นการถ่ายภาพแตล่ ะขณะของหนุ่ จำ�ลองทค่ี ่อย ๆ ขยบั ห่นุ จ�ำ ลอง 5

ดงั กลา่ ว อาจเป็นของเล่น หรือ วสั ดทุ ม่ี ลี ักษณะคล้ายกับดนิ น้�ำ มนั เทคนิคนี้ สามารถใชโ้ มเดลได้หลายตัว และ สามารถถา่ ยไดห้ ลายฉากในเวลาเดียวกัน แต่การท�ำ Stop Motion นน้ั ตอ้ งอาศยั ความอดทนและทุ่มเทมาก เพราะเปน็ เทคนิคทใี่ ช้เวลานาน เชน่ แอนเิ มชน่ั Stop Motion บางเรือ่ งสามารถผลิตไดเ้ พยี ง 10 วินาทตี ่อวัน เทา่ นั้น วธิ นี จี้ ึงเปน็ งานที่ตอ้ งใชค้ วามอดทนมาก 3) Computer Animation ปจั จุบันมซี อฟตแ์ วรท์ ่ีสามารถช่วยใหก้ ารทำ�แอนิเมช่นั ง่ายข้นึ เชน่ โปรแกรม Maya , Adobe Flash , 3Ds Max เป็นตน้ ซ่งึ วธิ ีดงั กล่าวนเ้ี ปน็ วิธีท่ีประหยดั ระยะเวลาในการผลติ และเปน็ การลดต้นทุนเปน็ อยา่ งมาก เช่น ภาพยนตร์เรื่อง Toy Story ทใ่ี ช้แอนเิ มเตอรเ์ พียง 110 คนเท่าน้นั 1.3 ขั้นตอนในการสรา้ งงานแอนิเมชั่น ภาพท่ี 1.2 ตัวอย่างภาพการเคลือ่ นไหว วธิ ีการในการผลติ งานแอนิเมชัน่ นน้ั ไดถ้ กู ก�ำ หนดไว้อยา่ งเปน็ ขน้ั ตอน ซ่งึ จ�ำ นวนคนที่ใชใ้ นการผลิตอาจ เปน็ เพียงคนกลมุ่ เดยี วหรือหลาย ๆ กล่มุ ก็เป็นได้ ขึน้ อย่กู บั ขนาดของงาน (Size Of Project) ซึ่งการทำ�งาน ในแตละขน้ั ตอนจะมี รายละเอยี ดในการทํางานท่ีแตกตางกันไปสามารถอธบิ ายภาพรวมการทํางานในแตละขน้ั ตอนออกเปน็ 3 ช่วง ดงั น้ี 1.3.1 Pre-production ข้นั ตอนนีเ้ ปน็ ข้ันตอนทคี่ อ่ นข้างมีความส�ำ คัญ เพราะเปน็ ขั้นตอนในการก�ำ หนดทศิ ทางของทงั้ โปรเจค เริม่ ต้ังแต่การเตรยี มเนอื้ เรอื่ งให้เปน็ ภาพครา่ ว ๆ การวางแผนกลยทุ ธ์ การเตรยี มงบประมาณและทรัพยากร ตา่ ง ๆ ที่ใชใ้ นการทำ�งาน เรียกได้วา่ เป็นชว่ งการเตรยี มงาน ในขั้นตอนนอ้ี าจจะต้องใช้เวลามากที่สุด ถา้ ในช่วง Pre-production วางแผนไวอ้ ย่างสมบูรณ์ ก็จะชว่ ยให้ขนั้ ตอนอืน่ ๆ สามรถดำ�เนินไปไดอ้ ย่างราบรนื่ 1) การเขยี นเอกสารรายละเอียดของโครงงาน ขัน้ ตอนนใ้ี นกรณีที่เป็นงานแอนเิ มชั่นโปรเจคใหญ่ และใชจ้ �ำ นวนคนมาก เพอื่ ไมใ่ ห้การวางแผนงานเกดิ ความสับสน จึงควรจะมีการทำ�การเขยี นเอกสารรายละเอยี ดของโครงงาน (Project Document Writing) เพ่ือ บนั ทึกทกุ ๆ รายละเอียดของโครงการ เชน่ ท�ำ อะไร อย่างไร ระยะเวลาเทา่ ไหร่ กลุม่ เป้าหมาย ใครรับบิดชอบ หน้าทส่ี ว่ นไหนของงาน แนวทางการทำ�งาน ใชง้ บประมาณเทา่ ไหร่ เป็น ต้น ซง่ึ รายละเอยี ดภายในเอกสารนั้น สามารถเพิม่ เติมไดต้ ามต้องการ เนอื่ งจากวตั ถปุ ระสงค์น้ี คือ เพือ่ เป็นหลักฐานให้ทกุ คนในทมี งานเข้าใจและ 6

ปฏบิ ัติงานไปในแนวทางเดียวกัน 2) การวางตารางเวลา ข้นั ตอนนเี้ ปน็ การทำ�ก�ำ หนดการ เพอ่ื ใหท้ มี งานทกุ คนร้วู า่ เวลาไหนท�ำ อะไร ตรงตามเวลาที่ก�ำ หนดหรือ ไม่ และมีก�ำ หนดตอ้ งสง่ โปรเจคเมอื่ ใด สามารถเขยี นได้หลายวิธี เช่น เขียนเป็นกราฟแท่ง (Bar Graph) เปน็ ต้น 3) เนอ้ื เรอ่ื ง การแตง่ เน้อื เร่ือง เป็นจดุ เริม่ ต้นทมี่ ีความสำ�คัญ เพราะจะเปน็ ตวั ก�ำ หนดความนา่ สนใจของแอนเิ มช่ันท้ัง โปรเจค ซ่งึ ในเบอื้ งต้นควรระบุกลุ่มเปา้ หมาย และแนวหรือประเภทของงาน เช่น แนวตลก แนวสยองขวญั แนว ผจญภยั เปน็ ต้น หลังจากสรปุ ไดแ้ ลว้ เนอ้ื เรือ่ งทั้งหมดจะถกู เขยี นขนึ้ มาในรูปแบบของต้นฉบับ (Script) เนือ้ เร่ืองทด่ี คี วรประกอบไปด้วย - ให้ความบันเทิง (Entertaining) เรื่องราวต้องสนุก ชวนให้คิด และสามารถดึงดดู ความ สนใจจากคนดูได้ - เขา้ ใจได้งา่ ย (Accessible) เน้อื เรอ่ื งทน่ี �ำ เสนอควรจะสมเหตสุ มผลและนา่ เช่ือถอื - มคี วามเป็นเอกลักษณ์ (Unique) การนำ�เสนอเนือ้ เรื่องที่แปลก แหวกแนว และน่าจดจำ� เม่ือสามารถสรุปเน้อื เรอื่ งไดอ้ ย่างลงตวั แล้ว กจ็ ะสามารถจำ�แนกจ�ำ นวนและลกั ษณะของตวั ละครได้ง่าย และชดั เจนย่งิ ข้นึ 4) การออกแบบตัวละคร การออกแบบตัวละครเปน็ อกี หนง่ึ ส่วนทีม่ ีความส�ำ คัญในการสร้างสรรคง์ านแอนเิ มช่นั ท้งั นี้เพราะเรื่อง ราวทัง้ หมดจะถา่ ยทอดโดยตวั ละครเป็นหลัก โดยการพดู การแสดงออก รวมท้ังความสัมพนั ธก์ บั ตวั ละครตวั อน่ื ๆ ซง่ึ สามารถบ่งบอกถึงบุคลกิ ลักษณะของตวั ละคร โดยเรม่ิ ต้นจากการ เขียนรายละเอยี ดต่าง ๆ ของตวั ละคร เชน่ ชื่ออะไร เพศอะไร อายุเทา่ ไหร ่ ชอบหรือไมช่ อบอะไร มอี ปุ นิสยั ใจคออย่างไร เปน็ ตน้ ซงึ่ ขอ้ มลู เหลา่ น้ีจะถูก ถ่ายทอดออกมาเปน็ รูปธรรม ผา่ นรูปลกั ษณข์ องตัวละครใหท้ ุกคนเห็นภาพชดั เจนย่ิงข้ึน 5) กระดานภาพนิ่ง การออกแบบตัวละครเปน็ อีกหนึ่งสว่ นท่ีมีความสำ�คญั ในการสร้างสรรค์งานแอนเิ มชั่น ทง้ั นเ้ี พราะเร่อื ง ราวท้ังหมดจะถา่ ยทอดโดยตัวละครเปน็ หลกั โดยการพดู การแสดงออก รวมทง้ั ความสมั พนั ธ์กบั ตวั ละครตวั อน่ื ๆ ซ่ึงสามารถบ่งบอกถึงบคุ ลกิ ลักษณะของตวั ละคร โดยเรมิ่ ตน้ จากการ เขยี นรายละเอยี ดต่าง ๆ ของตัวละคร เช่น ชอื่ อะไร เพศอะไร อายุเทา่ ไหร่ ชอบหรอื ไมช่ อบอะไร มอี ปุ นสิ ัยใจคออย่างไร เป็นต้น ซง่ึ ข้อมลู เหลา่ น้ีจะถกู ถา่ ยทอดออกมาเปน็ รปู ธรรม ผ่านรูปลักษณ์ของตัวละครให้ทกุ คนเหน็ ภาพชดั เจนยง่ิ ข้ึน เนื้อเรื่อง ควรจะบอกอยา่ งชดั เจนว่า ใคร ท�ำ อะไร ที่ไหน อยา่ งไร รวมไปถึงการแสดงอารมณ์ของตัว ละครดว้ ย มมุ กล้อง มุมกลอ้ งทแี่ ตกต่างกันจะใหค้ วามรู้สกึ และอารมณท์ ตี่ า่ งกนั ดงั นั้นจึงจำ�เป็นอย่างยงิ่ ที่ Storyboard จะตอ้ งนำ�เสนอถงึ ต�ำ แหนง่ และการเคล่ือนที่ของมมุ กลอ้ ง รวมถึงองคป์ ระกอบของภาพทป่ี รากฏ ในมมุ กล้องอีกดว้ ย 7

1.3.2 Production ขนั้ ตอนน้ีเปน็ ขั้นตอนการผลิต หรือ สรา้ งงานทีว่ างแผนกนั ไว้ในขา้ งต้น เชน่ การวาดรูป การออกแบบ ฉาก และการสร้างการเคลือ่ นไหวใหก้ บั ตัวละคร ตามได้ก�ำ หนดไว้ใน Storyboard 1) การบนั ทกึ เสยี ง ภาพท่ี 1.3 ตวั อยา่ งภาพการบันทึกเสียงภาพยนตรแ์ อนเิ มชั่น Despicible Me เป็นขนั้ ตอนการบันทกึ เสยี ง ไม่วา่ จะเปน็ บทสนทนาของตัวละคร หรือ เสยี งเอฟเฟกต์ตา่ ง ๆ พร้อมท้งั ตัดแต่งเสยี งใหไ้ ดค้ วามคมชดั และชว่ งเวลาท่ีเหมาะสม เมือ่ ไดไ้ ฟล์เสียงท่ีสมบูรณ์และตรงตามช่วงเวลาท่ีกำ�หนด แล้ว จงึ จะเริ่มทำ�การเคลื่อนไหวให้กบั ตัวละครได้ 2) การสรา้ งภาพเคลอ่ื นไหว ภาพที่ 1.4 ตวั อย่างภาพการทำ�แอนเิ มชนั่ 2 มิติ เม่อื ได้ไฟลท์ ุกอย่างทไ่ี ดเ้ ตรยี มไว้ในข้ันตอน Pre-production แลว้ ขนั้ ตอนค่อไปจะเป็นการสรา้ งการ เคลอื่ นไหวให้กับตัวละคร โดยเริม่ จากการวาดตำ�แหน่งหลักและท่าทางของตัวละคร (Key) ให้ตรงตามไฟลเ์ สยี ง และชว่ งเวลาที่ก�ำ หนดไว้ใน Storyboard กอ่ น แล้วจงึ ค่อย ๆ วาดสว่ นย่อยของการเคลื่อนไหวให้เช่ือมตอ่ กนั อย่างตอ่ เน่อื ง (In-Between) ซง่ึ มสี ง่ิ ท่ตี อ้ งค�ำ นึงในขณะทสี่ รา้ งการเคลือ่ นไหวของตัวละครอยู่ นัน่ คือ การปรับ แตง่ ชว่ งเวลาใหเ้ หมาะสม (Timing Editing) การแสดงอารมณ์ทางสีหนา้ ของตวั ละคร (Facial Expression) การขยบั ปากตามบทพดู ของตวั ละคร (Lip Synching) การเคล่ือนไหวของสว่ นประกอบตา่ ง ๆ ในซีนนน้ั ๆ (Secondary Object) และการเคล่อื นไหวของกลอ้ ง (Camera) เป็นต้น 8

การวาดหรือการก�ำ หนดการเคลือ่ นไหวของตวั ละครสามารถทำ�ได้ 2 วิธีหลกั ๆ คือ • การวาดแบบ Straight Ahead ภาพที่ 1.5 ตวั อย่างภาพการเคล่ือนไหวแบบ Straight Ahead คอื การวาดทลี ะเฟรม ทีละภาพ เรยี งกันไปเรอ่ื ย ๆ จนถงึ ภาพสุดท้าย ยกตวั อยา่ งเช่น การวาดเทคนคิ Flip Book นนั่ เอง ขอ้ ดีคือ สามารถสร้างสรรค์การเคล่อื นไหวไดอ้ ยา่ งอสิ ระไมต่ ายตัว สว่ นข้อเสยี คอื คาดเดา ตำ�แหนง่ ได้ยาก เสย่ี งตอ่ การวาดผิดต�ำ แหนง่ ใช้เวลาในการผลติ นานเนื่องจากขาดการวางแผน • การวาดแบบ Pose-to-Pose ภาพท่ี 1.6 ตวั อยา่ งภาพการเคลอื่ นไหวแบบ Pose-to-Pose คอื การวาดอย่างมกี ารวางแผน มกี ารเรยี งล�ำ ดบั กอ่ นหลงั เปน็ ขน้ั เป็นตอนตามความสำ�คญั ทำ�ให้งา่ ย ต่อการควบคมุ ต�ำ แหน่ง ซ่งึ เป็นวิธที ี่ไดร้ บั ความนิยมและมมี าตราฐานทส่ี ดุ สว่ นประกอบของการวาดแบบ Pose- To-Pose ประกอบไปดว้ ย 1) Frame คือช่ือเรียกภาพแต่ละภาพทฉี่ ายต่อเนื่องกนั เฟรมจะถูกกำ�หนดล�ำ ดบั ทตี่ ามหมายเลข เช่น เฟรมที่ 1 เฟรมที่ 2 เปน็ ตน้ 2) Key คือต�ำ แหน่งเหตุการณห์ ลัก ซงึ่ เป็นการวาดลงบนต�ำ แหน่งเหตุการณท์ จ่ี ะเกดิ ข้นึ ทลี ะรูปพรอ้ มทั้ง กำ�หนดทา่ ทางของตัวละครตามเน้ือหาที่วางไว้ เช่น ตัวละครทก่ี �ำ ลังเดิน จะมลี ักษณะในการก�ำ หนด Key ได้ ดังน้ี 9

Frame Frame Frame Frame Frame Key Key ภาพท่ี 1.7 ตัวอย่างภาพการวางต�ำ แหน่ง Key บน Frame Frame Frame Frame Frame Frame Extreme Extreme Position Position ภาพที่ 1.8 ตัวอยา่ งภาพการวางต�ำ แหนง่ Extreme Position 3) Extreme Position คือการก�ำ หนดตำ�แหน่งแรกและต�ำ แหนง่ สุดท้ายของการเคลื่อนไหว โดยอยู่ภาพในแต่ละชว่ งของ Key เช่น ยกตัวอยา่ งการเดนิ Extreme จะเป็นตำ�แหนง่ ที่ เทา้ สัมผสั พ้นื ในทุก ๆ ก้าว เป็นต้น 10

Frame Frame Frame Frame Frame Extreme BreakDownn Extreme Position Position ภาพท่ี 1.9 ตัวอยา่ งภาพการวางต�ำ แหนง่ Breakdown 4) Breakdown / Passing Position คือต�ำ แหน่งกง่ึ กลางระหว่าง Extreme Position ซง่ึ จะช่วยใหก้ ารเคลื่อนไหวมคี วามตอ่ เนอ่ื งมากยง่ิ ข้ึน กล่าวคอื เปน็ ตวั เชอ่ิ มระหว่าง Extreme หน่งึ ไปยงั อกี Extreme หนึง่ น่นั เอง Frame Frame Frame Frame Frame In-Between Extreme BreakDownn Extreme Position Position ภาพท่ี 1.10 ตัวอย่างภาพการวางต�ำ แหนง่ In-Between 5) In-Between หรือ Middle คอื ภาพทุกภาพท่ีอยู่ระหว่างกลางของ Extreme Position และ Breakdown Passion Position เปน็ ส่วนทสี่ �ำ คญั ค่อนขา้ งมาก เพราะการจัดวางของตำ�แหนง่ In-Between จะสง่ ผลต่อความน่าสนใจของการ เคลอ่ื นไหวในงานแอนิเมชน่ั 11

ภาพที่ 1.11 ตัวอยา่ งภาพการวางตำ�แหน่ง In-Between ครบทกุ Frame แล้ว เม่ือมีการ Play หรือ Preview ดคู วามผลลพั ธ์ของภาพ กจ็ ะเห็นถึงความต่อเนอ่ื งของภาพ ซง่ึ การวาง ต�ำ แหนง่ In-Between ละเอยี ดมากเทา่ ไหร่ ภาพกจ็ ะมีความตอ่ เนอ่ื ง ล่ืนไหล สวยงามและสมจรงิ มากเทา่ นน้ั 1.3.3 Post-production ภาพท่ี 1.12 ตวั อย่างภาพการโปสเตอร์โปรโมทแอนเิ มชั่นโฆษณา M&M ข้นั ตอนนเี้ ป็นขน้ั ตอนการเกบ็ งาน เชน่ การตัดต่อ การรวมไฟล์แอนิเมช่นั ต่าง ๆ เข้าดว้ ยกนั การใส่ไฟล์ เสยี ง การปรับแต่งสี เป็นตน้ กล่าวได้ว่าขัน้ ตอนนี้ เปน็ ขัน้ ตอนการตรวจทานและแกไ้ ขงานท้ังหมดใหถ้ กู ต้อง และสมบรู ณก์ ่อนท่จี ะน�ำ งานแอนิเมชัน่ ชิ้นนน้ั ๆ ออกไปเผยแพร่ ในทีน่ ้ีอาจหมายรวมถงึ การท�ำ การตลาด หรอื การประชาสัมพนั ธ์ เช่น การออกแบบโปสเตอร์ หรอื การตดั ตอ่ หนังตวั อยา่ ง (Teaser) เป็นตน้ 12

Workshop กิจกรรมท่ี 1 ใบงานที่ 1.1 ความหมายและความสำ�คัญของแอนิเมชนั่ ความรเู้ กี่ยวกบั ขน้ั ตอนในการทำ�แอนเิ มชนั่ ใหน้ กั เรยี นตอบค�ำ ถามดังตอ่ ไปน้ี มาพอสังเขป 1. ใหอ้ ธิบายความหมายของงานแอนเิ มชน่ั __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ 2. ให้อธิบายรายละเอียดของแอนิเมช่ันท้ัง 3 ชนดิ __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ 13

3. ให้อธบิ ายรายละเอียดของขนั้ ตอนการสรา้ งแอนิเมชน่ั ทงั้ 3 ขั้นตอน ตามความเขา้ ใจ พอ สงั เขป 3.1. Pre-production __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ 3.2. Production __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ 3.2. Post-production __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ __________________________________________ 14

4. ใหน้ ักเรยี นแบง่ กลุ่มภายในชน้ั เรียน เขียนบทความเกย่ี วกบั บทความเกี่ยวกบั แอนเิ มชั่นที่ ตนเองช่ืนชอบ วิเคราะห์ในเชงิ วธิ กี ารสรา้ งสรรค์ พร้อมกับรว่ มอภิปรายหนา้ ชัน้ เรยี น _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ ____________________________________________ ____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ _____________________________________________ 15

1.4 บทนำ�ของการใชโ้ ปรแกรม Adobe Flash ปจั จุบันการนำ�เสนอข้อมลู บนสอ่ื ชนิดตา่ ง ๆ ไดม้ กี ารพัฒนาขึน้ อย่างรวดเร็วและมีเครอื่ งมอื ท่หี ลาก หลาย ซึง่ เคร่อื งมือที่เปน็ ที่นยิ มมากท่ีสุดในปจั จบุ นั น่ันก็คอื โปรแกรม Adobe Flash นน่ั เอง Flash เปน็ โปรแกรมส�ำ หรบั สร้างสรรคง์ านกราฟิก ภาพเคลื่อนไหว และมลั ตมิ เี ดยี บนเวบ็ ซงึ่ ผู้ใช้ สามารถนำ�มาประยกุ ต์ใชง้ านไดห้ ลากหลายรูปแบบ เช่น - ภาพเคลอื่ นไหวของ ตัวอักษร ภาพ หรือ โลโก้ กราฟกิ ต่าง ๆ เช่น การนำ� เสนอขอ้ มูลแบบ สไลด์โชว์ โมช่นั กราฟกิ ต่าง ๆ หรอื แบนเนอรโ์ ฆษณา - เกมสแ์ ละโปรแกรมทมี่ กี ารตอบโต้กบั ผู้ใชง้ าน - สามารถสรา้ ง Website ได้ www.behance.net/gallery/Anubhzz www.behance.net/gallery/Squiryl www.behance.net/gallery/CataMoeda ภาพที่ 1.13 ภาพตวั อยา่ งงานจากโปรแกรม Flash Flash เปน็ เครื่องมอื ทีอ่ ำ�นวยความสะดวกในการสรา้ งภาพเคลอ่ื นไหว และงานมลั ตมิ เี ดยี ได้เปน็ อยา่ งดี และมภี าษาของโปรแกรมส�ำ หรบั ใชค้ วบคมุ การทำ�งานของช้ินงาน นอกจากน้ีงานทส่ี ร้างด้วยแฟลชนนั้ มีขนาด ทค่ี อ่ นข้างเลก็ จึงสามารถเผยแพร่ทางอนิ เตอร์เน็ตได้งา่ ย และแสดงผลได้อย่างรวดเรว็ ดงั นั้น Flash จึงเปน็ ตวั เลอื กทดี่ ีสำ�หรับงานน�ำ เสนอข้อมลู มัลตมิ ีเดยี และโมชน่ั กราฟิกชนดิ ตา่ ง ๆ ซง่ึ สร้างความนา่ สนใจให้กบั ช้นิ งาน และทำ�ใหก้ ารนำ�เสนอขอ้ มูลตา่ ง ๆ เปน็ ไปอยา่ งมีประสทิ ธิภาพ 16

เข้าสู่โปรแกรม Flash เม่ือเปดิ โปรแกรม Flash ครงั้ แรกจะปรากฏหน้าตา่ ง ให้เลอื กรูปแบบของการทำ�งาน เลอื กสร้างไฟลง์ านใหมจ่ าก Tem- plete เลือกสรา้ งไฟล์งานใหม่ จากรูปแบบท่ี ตอ้ งการ เลอื กทำ�งานจากไฟล์เดิม โดยคลกิ ท่ี Open เพือ่ ค้นหาไฟล์ ภาพท่ี 1.14 หน้าตา่ ง Create New Project ของโปรแกรม Flash เม่ือเขา้ สโู่ ปรแกรม Flash จะพบหน้าจอท่ีมีส่วนประกอบสำ�คญั ต่าง ๆ ดังน้ี แถบเมนูบาร์ (Menu Bar) สเตจ (Stage) พ้ืนที่ท�ำ งาน (Pasteboard) ไทม์ไลน์ (Timeline) พาเนล (Panels) และ Property กล่องเคร่ืองมอื Inspector (Toolbox) 17

ภาพที่ 1.15 ภาพสว่ นประกอบของโปรแกรม Flash แถบเมนบู าร์ (Menu Bar) แถบเมนบู าร์เปน็ แถบท่ีรวบรวมค�ำ สัง่ ในการใชง้ านทั้งหมดเกย่ี วกบั การสร้างชน้ิ งาน รวมไปถึงการต้งั คา่ เก่ยี วกับการใช้งานในโปรแกรมทง้ั หมด กลอ่ งเครื่องมือ (Toolbox) กลอ่ งเครือ่ งมือเป็นท่รี วบรวมเคร่อื งมอื ต่าง ๆ ในการใชส้ รา้ ง และปรับแตง่ วัตถุ ซึง่ สามารถแบง่ เครอื่ ง มอื ต่าง ๆ ออกเป็น 5 กลมุ่ ดังนี้ กลุ่มเครื่องมอื Selection Tool เปน็ เครอื่ งมือทเ่ี กี่ยวกับการเลือกวตั ถบุ น Stage กลมุ่ เครื่องมือ Edit Tool เปน็ เครอื่ งมือทใ่ี ช้ในการสรา้ งวัตถุ การวาด และตกแต่งภาพ กลมุ่ เครอ่ื งมือ Color Tool เปน็ เคร่ืองมอื ทีใ่ ช้จดั การกบั สีของวัตถุ กลุ่มเครอ่ื งมอื View Tool เป็นเคร่ืองมอื ทเี่ กี่ยวกับมุมมองบน Stage กลุ่มเครือ่ งมือ Option Tool เป็นเคร่อื งมือท่ใี ช้ในการปรับแตง่ คา่ เพมิ่ เตมิ ของเครอ่ื งมอื ตา่ ง ๆ ท่ีกล่าวมาในข้างต้น ภาพท่ี 1.16 ภาพกลอ่ งเครอ่ื งมอื (Toolbox) สเตจ (Menu Bar) และพืน้ ทที่ ำ�งาน (Pasteboard) สเตจ (Stage)คอื บริเวณหน้า กระดาษสีขาวตรงกลางซึ่งจะเปน็ สว่ น แสดงผลของชน้ิ งานทไี่ ดจ้ ดั วางลงไป พ้นื ท่ที �ำ งาน (Pasteboard) คือ บริเวณสีเทารอบ ๆ สเตจ ซ่งึ เปน็ บรเิ วณ ท่ใี ช้เตรียมวตั ถทุ จ่ี ะนำ�มาจัดวางบนสเตจ วัตถทุ อี่ ย่บู รเิ วณนีจ้ ะไม่แสดงผล ภาพที่ 1.17 ภาพสเตจ (Stage) และ พื้นทีท่ ำ�งาน (Pasteboard) 18

ไทมไ์ ลน์ (Timeline) เป็นเครอื่ งมือทใี่ ช้ในการกำ�หนดการเคลือ่ นไหว โดยการนำ�วัตถมุ าจดั เรียงใหเ้ กิดความต่อเนอ่ื งกนั ใน แต่ละเฟรม (ภาพในแตล่ ะช่วงเวลา เรียกวา่ เฟรม) ไทม์ไลนส์ ามารถแบ่งออกเปน็ 2 สว่ นดังน้ี 1. เลเยอร์ (Layer) จะมีการทำ�งานแบบเดียวกบั แผ่นใส ใช้วางวัตถทุ ่ีทับซอ้ นกนั โดยแตล่ ะเลเยอร์จะแยกกันอย่างเปน็ อสิ ระ แต่ประกอบกันเปน็ ช้ินงานเดียว 2. เฟรม (Frame) เฟรมคือภาพในแต่ละช่วงเวลา ทเ่ี รียงตอ่ กนั อย่างตอ่ เนื่อง ซึง่ จะแสดงผลเปน็ ภาพเคลอื่ นไหวผา่ นการ อ่านของ หวั อา่ น (Playhead) มลี กั ษณะเปน็ เส้นสแี ดงและเปน็ ตวั บอกตำ�แหนง่ วา่ เราท�ำ งานอย่ทู ีเ่ ฟรมใด หัวอา่ น (Playhead) เฟรม (Frame) เลเยอร์ (Layer) ภาพท่ี 1.17 ภาพไทมไ์ ลน์ (Timeline) ในหนงึ่ มูฟว่ีเราสามารถแบ่งไฟลอ์ อกเป็นสว่ นย่อยไดห้ ลายฉาก (Scene) ซึ่งเราสามารถท�ำ งานได้ทีละ ฉากเท่านัน้ สามารถเพิ่มจ�ำ นวนฉากได้ตามความต้องการ ฉาก (Scene) ภาพที่ 1.18 ภาพหน้าต่างเลอื ก Scene แพเนล (Panels) หนา้ ต่างทใี่ ช้ในการกำ�หนดค่าการปรับแตง่ วัตถุ ซง่ึ พาเนลตา่ ง ๆ ไดถ้ ูกจดั ไวอ้ ย่างเปน็ หมวดหมู่ในการ ทำ�งาน สามารถเลือกใชไ้ ด้อย่างหลากหลาย ดงั นี้ พาเนล Color และ Swatches เปน็ พาเนลทใี่ ช้เลือกสแี ละผสมสีตามตอ้ งการ ซง่ึ สามารถใช้ได้กบั วัตถุ รูปภาพ และตวั อกั ษร โดยมใี หเ้ ลอื ก 2 พาเนล คอื Color (ผสมสีเอง) และ Swatches (เลอื กจากสีทมี่ ีให้) 19

แพเนล Color แพเนล Swatches ภาพท่ี 1.19 ภาพแพเนล Color และ แพเนล Swatches พาเนล Align เปน็ พาเนลทใี่ ชใ้ นการจัดเรียงวตั ถุให้เรยี งอยูใ่ นแนวเดยี วกนั ในรปู แบบตา่ ง ๆ ภาพท่ี 1.20 ภาพแพเนล Align พาเนล Info ใชใ้ นการแสดงรายละเอยี ดของวัตถุ เช่น W สร้างความกว้างของวตั ถุ H แสดงความสงู ของวตั ถุ X แสดงตำ�แหนง่ ของวัตถุในแกน X Y แสดงต�ำ แหน่งของวตั ถุในแกน X ภาพที่ 1.21 ภาพแพเนล Info 20

ภาพที่ 1.22 ภาพแพเนล Transform พาเนล Transform เป็นพาเนลที่ใชใ้ นการปรบั ขนาด การบิด และการหมนุ วตั ถุ Rotate กำ�หนดมมุ เพ่ือหมนุ วตั ถ ุ Skew ก�ำ หนดค่าสำ�หรบั การบิดวตั ถุ 3D Rotation กำ�หนดมมุ เพอ่ื หมนุ วัตถุ 3 มิติ 3D Center point กำ�หนดจดุ ศนู ยก์ ลางวัตถุ 3 มติ ิ พาเนล Library เปน็ พาเนลท่ีใชเ้ ก็บองค์ประกอบ เชน่ ซมิ โบล รูปภาพ มูฟวี่ ไฟล์วดิ โี อ หรอื ไฟลเ์ สยี ง ซ่งึ เรา สามารถจัดเก็บองค์ประกอบเหลา่ น้ไี ด้อยา่ งเปน็ ระเบยี บในโฟลเดอรท์ เี่ ราสรา้ งขน้ึ มาได้ ภาพท่ี 1.23 ภาพแพเนล Library พาเนล Motion Preset เปน็ พาเนลทเี่ กบ็ การเคล่ือนไหวส�ำ เรจ็ รูปไว้ เพอ่ื ความสะดวกในการใช้งาน 21

ภาพท่ี 1.24 ภาพแพเนล Motion Preset พาเนล Action เป็นพาเนลทใ่ี ช้สำ�หรับเขียนโค๊ด Actionscript (ภาษาท่ีใช้ควบคมุ การทำ�งานใน Flash) เพื่อ ให้ช้นิ งานนน้ั สามารถตอบโตก้ บั ผ้ใู ช้งานได้ เชน่ การท�ำ เกมส์ หรอื ปุ่มที่ทีการตอบโตก้ ับผใู้ ช้ เรียกใช้โดยเป็นตน้ กด<F9> ภาพท่ี 1.25 ภาพแพเนล Action พาเนล Scene เปน็ พาเนลทใ่ี ชส้ �ำ หรบั สลบั ฉากในการทำ�งาน ซึ่งจะใช้ในกรณีที่มกี ารสร้างช้ินงานท่มี คี วามยาว และมี การเปล่ียนแปลงของฉาก 22

ภาพท่ี 1.26 ภาพแพเนล Scene พาเนล Movie Explorer เป็นพาเนลทใ่ี ช้ดโู ครงสร้างของชิ้นงาน รวมท้ังใช้ค้นหาวัตถทุ ีอ่ ยูใ่ นชนิ้ งานนนั้ ด้วย ซ่งึ จะมีปุ่มตา่ ง ๆ ดงั น้ี Show เปน็ ปมุ่ ทีใ่ ชแ้ สดงวตั ถชุ นดิ ต่าง ๆ ที่อยูใ่ นชิ้นงาน Find ใชส้ �ำ หรับคน้ หาวตั ถทุ อ่ี ยู่ในชิ้นงาน ภาพท่ี 1.27 ภาพแพเนล Movie Explorer พาเนล Properties หรือ Property Inspector เปน็ พาเนลทใ่ี ช้แสดงคณุ สมบตั ติ ่าง ๆ ของวตั ถุทีเ่ ราคลกิ เลอื ก ซ่งึ เราสามารถปรบั แตง่ คณุ สมบตั ิเหลา่ น้ไี ด้ ท้งั นีร้ ายละเอยี ดในพาเนลจะเปลีย่ นไปตามวตั ถทุ เี่ ราคลิกเลอื ก ภาพที่ 1.28 ภาพแพเนล Properties 23

พาเนล Properties มรี ายละเอยี ดต่าง ๆ ที่นา่ สนใจ ดังน้ี Filter ภาพที่ 1.29 ภาพ Filter ใชป้ รบั แตง่ หรือใสเ่ อฟเฟกตใ์ หก้ ับตัวอักษร มูฟว่ี และป่มุ กด Component Parameters ภาพที่ 1.30 ภาพ Component Parameters ใชก้ �ำ หนดค่าพารามิเตอร์ให้กบั คอมโพเนนต์ หรอื ซมิ โบลส�ำ เรจ็ รูป Properties ภาพที่ 1.31 ภาพ Properties ใช้กำ�หนดคา่ ชิ้นงาน และความเร็วในการเล่น (Frame per Second) 24

Fill and Stroke ภาพที่ 1.32 ภาพ Filland Stroke ใช้ก�ำ หนดสเี ส้น สพี นื้ และรายละเอยี ดตา่ ง ๆ ของเส้น แถบเคร่ืองมือ (Toolbar) แถบเคร่ืองมอื เป็นแถบที่รวบรวมคำ�สั่ง ในรูปแบบป่มุ ไอคอน ซง่ึ เราสามารถเรียกใช้ไดท้ ันที โดยไม่ตอ้ ง เปิดหาในแถบเมนู แถบเคร่ืองมอื สามารถแบง่ ออกเปน็ 3 ชดุ ดังน้ี 1. แถบเครอ่ื งมือหลกั (Main) ภาพท่ี 1.33 ภาพ Main เป็นแถบเครื่องมอื ท่รี วบรวมคำ�สง่ั ทใี่ ชบ้ อ่ ย 2. แถบเคร่ืองมือควบคมุ การแสดงผล (Controller) ภาพท่ี 1.34 ภาพ Controller ใช้ส�ำ หรบั ควบคุมการแสดงภาพเคล่อื นไหว หรอื มูฟว่ที ่ีเราสรา้ ง 3. แถบเครือ่ งมอื แก้ไข (Edit Bar) ใชส้ �ำ หรบั แก้ไขสเตจ โดยจะมีปมุ่ ค�ำ สัง่ เพ่ิมเติม และเมนใู ช้ยอ่ /ขยายสเตจ นอกจากนย้ี ังใช้ใน การเลอื กท�ำ งานกบั ฉากและซมิ โบลได้อกี ด้วย 25

ใชย้ ่อ/ขยายสเตจ เลอื กท�ำ งานกับฉากและซิมโบล ภาพที่ 1.35 ภาพ Edit Bar Note : ในส่วนของพาเนล หรือ เคร่อื งมอื ตา่ ง ๆ บางสว่ นท่ีไมแ่ สดงบนหนา้ จอ สามารถเปดิ ค�ำ สัง่ ได้โดย คลกิ Window ที่อยูบ่ น Menu Bar เมื่อคลิกเขา้ ไปจะเหน็ เครอื่ งมือชนิดตา่ ง ๆ พรอ้ มคยี ์ลดั ซึ่งเราสามารถคลิกเพอื่ ใชง้ านได้เลย 26

Workshop กจิ กรรมที่ 1 ใบงานท่ี 1.2 การสรา้ งแอนิเมชั่นเบื้องตน้ การเด้งของลกู บอล ดว้ ยการสร้างรปู ทรง พื้นฐาน และการใสค่ ียเ์ ฟรมในงานแอนเิ มชนั่ เบ้ืองต้น 1 ภาพท่ี 1.36 ภาพไอคอนโปรแกรม Flash 1) เปดิ โปรแกรม Flash ขน้ึ มา 2 เลอื ก ActionScript 3.0 ในชอ่ ง Create New ภาพที่ 1.37 ภาพการเลอื กโหมดการท�ำ งาน 2) เขา้ สหู่ นา้ ต่างการท�ำ งาน ของโปรแกรม Flash 3 ภาพท่ี 1.38 ภาพการเลอื ก Oval Tool 3) คลิกท่ี Oval Tool เพอ่ื สร้างรูปวงกลม(ซึง่ ในเครื่องมือชดุ นีม้ ีรูปทรงเรขาคณติ พื้นฐานอกี มากมาย) 27

4 ภาพที่ 1.39 ภาพการสรา้ งรปู ทรง 4) แดรกเมาส์ทะแยงลงมาดา้ นลา่ งเพอ่ื สรา้ งรูปทรง (กด Shift บนคยี ์บอรด์ ดว้ ยเพอ่ื ให้ได้สเกลที่ถูกต้อง) 5 ภาพที่ 1.40 ภาพการปรับ Stroke 5) ปรับ Stroke ท่ี Properties ใหม้ ีความหนาเทา่ กบั 4 6 ภาพท่ี 1.40 ภาพการปรบั Stroke 6) ปรับสเกลใหเ้ หมาะสมกับขนาดของสเตจ โดยใช้เครอื่ งมอื Free Transform Tool 28

8 7 9 ภาพท่ี 1.41 ภาพการ Insert Keyframe 7) ทห่ี นา้ ต่าง TimeLine คลกิ ขวาทเ่ี ฟรม 50 8) จากนน้ั คลิกที่ InsertFrame 9) หนา้ ตาของเฟรมท่เรียงกนั จะเปลย่ี นไปดงั รูป 10 11 12 ภาพท่ี 1.42 ภาพการ Convert to Symbol 10) คลิกขวาที่ลูกบอลทสี่ ร้างไว้ 11) คลิกเลือกท่ี Convert to Symbol 12) ท่ี Type ให้เลือกท่ี Movie Clip 29

13 14 ภาพท่ี 1.43 ภาพการ Free Transform 13) คลกิ เลือกที่ Free Transform Tool 14) ย้ายจุดหมุนสขี าวตรงกลางมาไวด้ า้ นลา่ งดังรูป 15 17 16 ภาพท่ี 1.44 ภาพการ Create Motion Tween 15) ทห่ี น้าต่างไทม์ไลน์ เลือกเฟรม 12 16) คลิกขวาท่ีลูกบอล 17) คลิกเลือกท่ี Create Motion Tween 30

19 18 ภาพที่ 1.44 ภาพการแดรกเมาส์เพอ่ื กำ�หนดการเคลื่อนไหว 18) แดรกเมาสล์ ากลูกบอลตามรูปภาพ 19) จากนนั้ จะเห็นเส้น path แสดงทศิ ทางการเคล่ือนท่ี 20 21 ภาพท่ี 1.45 ภาพการแดรกเมาสเ์ พอ่ื กำ�หนดการเคลอ่ื นไหว 20) ทห่ี น้าต่างไทม์ไลน์ เลือกเฟรม 50 21) เล่อื นลกู บอลไปด้านหน้าดังรปู 23 22 ภาพที่ 1.46 ภาพการ Insert Keyframe 22) ทหี่ น้าตา่ งไทม์ไลน์ คลกิ ขวาท่ีเฟรม 22 23) เลือก Insert Keyframe > เลอื กท่ี Position (เป็นส่วนทใี่ ช้ในการกำ�หนดการเคลอ่ื นย้ายตำ�แหนง่ ) 31

24 27 25 ภาพที่ 1.47 ภาพการ Insert Keyframe 24) เลื่อน Playhead ไปทเ่ี ฟรม 22 25) เลอ่ื นตำ�แหน่งลกู บอลขน้ึ ดา้ นบนเล็กน้อย ดังภาพ 26 ภาพที่ 1.48 ภาพการ Insert Keyframe 26) เลื่อน Playhead ไปท่เี ฟรม 28 27) เลอื ก Insert Keyframe > เลือกที่ Position 28 29 ภาพท่ี 1.49 ภาพการ Insert Keyframe 28) เล่ือน Playhead ไปทเ่ี ฟรม 25 29) เลื่อนต�ำ แหน่งลูกบอลขน้ึ ด้านบนเลก็ น้อย ดังภาพ 32

31 30 ภาพที่ 1.50 ภาพการ Insert Keyframe 30) ที่หนา้ ต่างไทมไ์ ลน์ คลิกขวาทเี่ ฟรม 32 31) เลือก Insert Keyframe > เลอื กที่ Position 32 33 34 ภาพที่ 1.51 ภาพการ Play 32) เลอ่ื น Playhead ไปทเี่ ฟรม 30 33) เลือ่ นต�ำ แหนง่ ลูกบอลข้นึ ด้านบนเล็กนอ้ ย ดงั ภาพ 34) ทดลอง Play ดจู ากปมุ่ ด้านล่าง เมอ่ื เราทดลอง Play ดู จะเห็นว่าการเคลื่อนไหวของลูกบอลน้ันจะเป็นไปตามตำ�แหน่งของ Keyframe เท่าเราได้ Add เข้าไป 33

สังเกตดใู ห้ดี จะพบวา่ ลกั ษณะการเด้งของลกู บอล ยังไมค่ ่อยมีความเปน็ ธรรมชาติ ยังดูแขง็ ๆ ไม่ ยืดหยุ่นตามหลกั ฟสิ กิ ส์เทา่ ท่ีควร ดังนน้ั เราจึงตอ้ งเพิ่มคียก์ ารเคลือ่ นไหวให้กับลกู บอล ในชว่ งเวลาท่มี ีการ ตกกระทบกบั พน้ื เพื่อให้เกิดความสมจรงิ ในการเดง้ มากยิง่ ข้นึ 35 ภาพท่ี 1.52 ภาพการ Insert Keyframe 35) เลือ่ น Playhead ไปทเ่ี ฟรม 11 (เฟรมก่อนทล่ี ูกบอลจะกระทบกบั พ้นื ) 36 ภาพท่ี 1.53 ภาพการ Insert Keyframe 36) เลอื ก Insert Keyframe > เลอื กท่ี Scale (เป็นสว่ นทใี่ ชใ้ นการกำ�หนดการปรบั ขนาด) 38 37 ภาพที่ 1.54 ภาพการ Insert Keyframe 37) เล่อื น Playhead ไปทเี่ ฟรม 11 (เฟรมถดั จากท่ลี กู บอลจะกระทบกบั พื้น) 38) เลอื ก Insert Keyframe > เลอื กท่ี Scale 34

40 39 41 ภาพที่ 1.55 ภาพการ Scale ลกู บอล 39) เลอ่ื น Playhead ไป Frame ที่ 12 คลิกเลอื กท่ี ลกู บอล แลว้ ไปท่ี Free Transform Tool 40) กดจดุ Scale ด้านบน ใหล้ ูกบอลกลายเปน็ วงรี 41) ทดลอง Play ดูจากปุ่มด้านลา่ ง สงั เกตดใู ห้ดี จะพบวา่ ลักษณะการเดง้ ของลกู บอล จะดูมีความยดื หยุ่นมากข้นึ และมลี กั ษณะการ เด้งตามหลกั ฟสิ ิกส์มากยิ่งขน้ึ ดงั น้นั ในข้ันตอนต่อไปคอื การเพมิ่ คีย์ให้กบั การเด้งในคร้ังตอ่ ๆ ไป ซึ่งจะมีความ ยดื หยุ่นที่น้อยลงตามแรงประทะทีล่ ดลง 43 42 ภาพที่ 1.56 ภาพการ Insert Keyframe 42) เลือ่ น Playhead ไปท่เี ฟรม 21 (เฟรมถดั จากที่ลกู บอลจะกระทบกับพืน้ ) 43) เลอื ก Insert Keyframe > เลอื กท่ี Scale 35

44 45 ภาพที่ 1.57 ภาพการ Insert Keyframe 44) เลื่อน Playhead ไปทเ่ี ฟรม 23 (เฟรมกอ่ นท่ลี กู บอลจะกระทบกับพืน้ ) 45) เลอื ก Insert Keyframe > เลอื กท่ี Scale 47 46 ภาพที่ 1.58 ภาพการ Scale ลกู บอล 46) เล่ือน Playhead ไป Frame ท่ี 22 47) กดจุด Scale ดา้ นบน ให้ลกู บอลกลายเปน็ วงรี 48 ภาพท่ี 1.59 ภาพการ Scale ลูกบอล 48) ทดลอง Play ดูจากปุม่ ด้านลา่ ง ข้นั ตอนสุดทา้ ย เปน็ การ Export Movie เพื่อนำ�ไฟล์ภาพเคลื่อนไหวนไี้ ปใชร้ ว่ มกับงานชนิด อ่นื ๆ ใน ลำ�ดบั ตอ่ ไป 36

49 50 ภาพท่ี 1.60 ภาพการ Export งาน 49) ทเี่ มนบู ารด์ ้านบน เลือกที่ File 50) เลือกที่ Export > Export Movie 51 52 ภาพที่ 1.61 ภาพการ Export งาน 51) เลอื ก Folder ทีต่ อ้ งการจะ Save งาน 52) ตง้ั ชื่อไฟล์ และเลอื กนามสกุลไฟล์ ซ่ึงปกติ Flash Movie จะมีนามสกุลเปน็ (.swf) 37

53 ภาพท่ี 1.61 ภาพการ Export งาน 53) สามารถทดลอง Play บนโปรแกรม Flash Player ไดท้ นั ที จากที่ไดล้ องปรับแตง่ และเพิ่มเติมในสว่ นของ Scale เข้าไปแลว้ จะเห็นได้ว่าการเดง้ ของลูกบอลน้นั มี ความสมจรงิ มากข้นึ ซึ่งขน้ั ตอนเหลา่ นี้ นกั แอนิเมเตอรท์ ั้งหลายตอ้ งอาศัยความชา่ งสงั เกต และเรยี นรู้ลกั ษณะ การเคลื่อนไหวของสง่ิ ตา่ ง ๆ รอบตวั อยา่ งสมำ�่ เสมอ จะช่วยให้งานออกมาสมจริงและมีความนา่ สนใจมากยิ่งขึ้น เอกสารอา้ งองิ ธรรมปพน ลีอำ�นวยโชค.(2550).Intro to Animation กรุงเทพฯ: สำ�นักพมิ พ์ฐานบคุ๊ ส.์ Chris Georgenes.(2552). เรียนลดั เลห่ โ์ กง Adobe Flash กรงุ เทพฯ: บรษิ ทั ซเี อ็ดยูเคช่ัน จ�ำ กัด(มหาชน) ดนัย มว่ งแก้ว.(2549). Digiart Flash Workshop นนทบรุ ี : ไอดีซีฯ สืบค้นเมื่อ 11 กมุ ภาพันธ์ 2556 จาก (http://tv.adobe.com/search/?q=Flash%20Tutorial) Adobe Flash เวอรช์ ั่น CS 6 โปรแกรมที่ใช้ประกอบการสอน 38

บทท่ี 2 Flash Workshop การสร้างตัวละครข้ันพ้ืนฐาน 2.1 ส่วนประกอบในการสรา้ งวัตถขุ องโปรแกรม Flash ในส่วนของบทท่ี 2 น้จี ะเป็นสว่ นของแบบฝึกหดั ในการใช้เคร่ืองมอื พ้นื ฐานของโปรแกรม Flash ในการ สร้างรูปทรง ปรบั แต่งและสรา้ งการเคลอ่ื นไหวแบบง่าย ๆ เพื่อให้เขา้ ใจถงึ Concept ในการใชเ้ ครอื่ งตา่ ง ๆ ของ โปรแกรม Flash ซึง่ จะแบ่งออกเป็น 3 แบบฝึกหัด ดังน ้ี 1. การสรา้ ง Object รปู ทรงเรขาคณิตและลงสีแบบง่าย ๆ ด้วยคำ�สั่งพน้ื ฐานใน Flash 2. การสร้างตัวละครดว้ ยค�ำ สัง่ พน้ื ฐานใน Flash สำ�หรับเตรียมการกำ�หนดการเคลอื่ นไหว 3. การก�ำ หนดการเคลอ่ื นไหวขัน้ พน้ื ฐานและการใส่ไฟลเ์ สียง ก่อนทีจ่ ะเร่ิมเขา้ สู่แบบฝึกหดั เราต้องเข้าใจถึงส่วนประกอบของการสรา้ งวัตถุในโปแกรม Flash กอ่ น Stroke เส้นรอบวตั ถุ Fill ส่วนทเ่ี ปน็ พื้นผวิ ของวัตถุ ภาพที่ 2.1 ภาพส่วนประกอบของการสรา้ งวตั ถใุ นโปรแกรม Flash Stroke และ Fill นนั้ สามารถปรบั แตง่ และเปล่ียนแปลงสีได้ตามความเหมาะสมของชนิ้ งาน 2.2 ข้อควรระวงั ในการสร้างวัตถุของโปรแกรม Flash การสร้างรปู ทรงในโปรแกรม Flash นั้น จะมีความแตกต่างจากการสรา้ งวตั ถุในโปรแกรมอืน่ ๆ เชน่ Illustrator กับ Photoshop คอ่ นข้างมาก ดงั น้นั การทำ�ความเขา้ ใจกับพื้นฐานการใชง้ านจงึ เปนสิ่งสำ�คัญ ภาพที่ 2.2 ภาพข้อควรระวังในการสรา้ งวตั ถขุ องโปรแกรม Flash 39

การใช้เครอ่ื งมือ Selection Tool ของโปรแกรม Flash นัน้ จะส่งผลต่อบรเิ วณทแ่ี ดรกเมาส์ผา่ น โดยตรง ซึ่งทำ�ใหเ้ ราสามารถแยกส่วนหรอื จัดการกับบริเวณดงั กล่าวได้เลย ดังภาพ ภาพที่ 2.3 ภาพขอ้ ควรระวังในการสรา้ งวัตถขุ องโปรแกรม Flash การสร้างวตั ถุทมี่ ีการทบั ซ้อน หรอื การยา้ ยวตั ถมุ าซ้อนกัน จะสง่ ผลให้วัตถชุ ้นั ท่ีอยู่บนสุดลบบริเวณที่ ทบั ซอ้ นกนั ของวตั ถุชน้ิ ลา่ งออกไป ดงั ภาพ จากตัวอย่างขา้ งตน้ นน้ั จึงกลา่ วได้ว่า ไมว่ า่ การเร่มิ ตน้ ท�ำ งานในโปรแกรมใด ๆ ส่ิงแรกที่ต้องคำ�นึงถึง น่นั กค็ ือการวางแผนงานทร่ี ัดกมุ และการดำ�เนนิ งานท่ีรอบคอบ จะเป็นสง่ิ ท่ีช่วยหลีกเล่ียงขอ้ ผดิ พลาดตา่ ง ๆ ใน การท�ำ งานได้เปน็ อยา่ งดี 2.3 แบบฝกึ หัดการสร้าง รูปทรงเรขาคณิตและลงสีแบบงา่ ย ๆ ด้วยคำ�ส่งั พืน้ ฐานใน Flash 1 ภาพท่ี 2.4 ภาพไอคอนโปรแกรม Flash 1) เปิดโปรแกรม Flash ขึ้นมา 2 ภาพท่ี 2.5 ภาพการเลอื กโหมดการท�ำ งาน 2) เลอื ก ActionScript 3.0 ในช่อง Create New 40

34 ภาพท่ี 2.6 ภาพหนา้ ต่างโปรแกรม Flash 3) เข้าสหู่ น้าต่างการทำ�งาน ของโปรแกรม Flash 4) คลิกท่ี Oval Tool เพอื่ สรา้ งรูปวงกลม(ซ่งึ ในเคร่อื งมือชดุ น้ีมีรูปทรงเรขาคณติ พ้นื ฐานอีก มากมาย) 5 ภาพท่ี 2.6 ภาพหน้าตา่ ง Fill and Stroke 5) คลิกเลือกสีที่ Fill และ Stroke 6 ภาพท่ี 2.7 ภาพการสรา้ งวัตถุ 6) แดรกเมาส์ทะแยงลงมาด้านลา่ งเพ่อื สร้างรูปทรง (กด Shift บนคีย์บอรด์ ดว้ ยเพ่อื ใหไ้ ด้สเกลทีถ่ กู ตอ้ ง) 41

7 ภาพที่ 2.8 ภาพการปรบั ความหนาของ Stroke 7) เลอื กทีเ่ ครอ่ื งมือ Selection Tool จากนั้นให้ ดับเบิ้ลคลิกทีว่ งกลมท่สี ร้างขน้ั ปรบั Stroke ที่ Properties ให้ มคี วามหนามากขนึ้ 8 ภาพท่ี 2.9 ภาพวัตถทุ มี่ กี ารปรบั ความหนาของ Stroke 8) จะได้รูปวงกลมทมี่ คี วามหนาของ Stroke ตามทต่ี อ้ งการ 9 ภาพท่ี 2.10 ภาพวตั ถุทมี่ กี ารปรับความหนาของ Stroke 9) เลือกท่ีเครอ่ื งมอื Line Tool แล้วปรบั ความหนาของ Stroke ให้น้อยที่สุด 42

10 11 ภาพที่ 2.11 ภาพการร่างเสน้ ด้วย Line Tool 10) คลกิ ท่ี Snap to Objects ทบี่ รเิ วณด้านลา่ ง แลว้ ท�ำ การแดรกเมาส์ใหไ้ ดเ้ สน้ ตรงตามรปู ภาพ 11) จะไดร้ ูปวงกลมทม่ี เี สน้ ก�ำ หนดขอบเขตของบริเวณทเ่ี ปน็ เงา ดังภาพ 12 13 ภาพท่ี 2.12 ภาพการปรบั แตง่ เส้น Stroke 12) ขน้ั ตอนตอ่ ไปจะเปน็ การปรับแต่งเสน้ Stroke โดยใช้ Selection Tool 13) เลื่อนเมาสเข้าไปใกล้ ๆ บรเิ วณ Stroke ทีเ่ พิง่ สร้างขน้ึ โดยสงั เกตบริเวณ Cursor ของเมาส์ จะมลี กั ษณะ เป็นเส้นโค้งดา้ นลา่ ง 43

14 ภาพท่ี 2.13 ภาพการปรบั แตง่ เส้น Stroke 14) ปรับแตง่ ให้มีลกั ษณะป็นเส้น Curve ดงั รูป 15 ภาพท่ี 2.14 ภาพการปรับแตง่ สวี ตั ถุ 15) เลือกเครอ่ื งมอื Paint Bucket Tool และปรบั โทนสใี หเ้ ขม้ ข้ึน 16 ภาพท่ี 2.15 ภาพการปรับแต่งสีวตั ถุ 16) ให้คลกิ เทสีลงไปในบรเิ วณขอบเขตของเส้น Curve ของเงา ทเ่ี รากำ�หนดไว้ 44

17 ภาพท่ี 2.16 ภาพการปรบั แต่งสวี ตั ถุ 17) เลือกเครื่องมอื Selection Tool จากนนั้ ไปคลิกทีเ่ ส้น Curve 18 ภาพที่ 2.17 ภาพการปรับแต่งสีวตั ถุ 18) จากนนั้ ใหท้ ำ�การ Delete เสน้ Curve ออกไป เมอ่ื เสรจ็ แล้ว ก็จะไดล้ ูกบอลท่ีมขี อบเขตของเงาตามแบบทเี่ ราต้องการ ซึ่งในขนั้ ตอนต่อไปจะเป็นการ ตกแต่งและเพิม่ เติมรายละเอียด เพือ่ ให้วัตถทุ ่ีสร้างข้นึ มีความสมบรู ณ์ตามทวี่ างแผนเอาไว้ 45

19 20 ภาพที่ 2.18 ภาพการปรบั แต่งสวี ัตถุ 19) ใช้เทคนิคเดียวกันนี้ ในการสร้างไฮไลทห์ รือบรเิ วณท่ีแสงตกกระทบ 20) ใชเ้ ทคนิคเดียวกนั นี้ ในการสร้างเงาทีม่ ีความเขม้ ระดบั ท่ี 2 แบบฝึกหดั นีจ้ ะช่วยให้เราเข้าใจ Concept การทำ�งานโดยรวมของเครอื่ งมอื ในการสรา้ งวัตถุบน โปรแกรม Flash ในเบ้อื งตน้ ทงั้ ยงั ทราบถงึ ของแตกตา่ งและข้อจำ�กัดต่าง ๆ ในเชงิ ของการจัดการรูปทรง ซงึ่ สามารถนำ�ไปปรบั ใชใ้ นการสรา้ งวตั ถทุ ม่ี คี วามละเอยี ดและซบั ซ้อน ในระดบั ที่ Advance มากขึน้ ในลำ�ดบั ต่อไป 46

Workshop กิจกรรมท่ี 2 ใบงานที่ 2.1 ให้นักเรียนสร้างรปู ทรงเรขาคณิต สีเ่ หลี่ยม สามเหล่ยี ม และ วงกลม โดยจัดวางและลงสีแบบงา่ ย ๆ ด้วยค�ำ สั่งพนื้ ฐานใน Flash 47

2.4 สร้างตัวละครด้วยค�ำ สั่งพ้นื ฐานใน Flash ส�ำ หรบั เตรียมการก�ำ หนดการเคลอื่ นไหว 1 ภาพที่ 2.19 ภาพไอคอนโปรแกรม Flash 1) เปิดโปรแกรม Flash ขน้ึ มา 2 ภาพที่ 2.20 ภาพการเลอื กโหมดการท�ำ งานของโปรแกรม Flash 2) เลอื ก ActionScript 3.0 ในชอ่ ง Create New 4 3 ภาพที่ 2.20 ภาพหนา้ ต่างการท�ำ งานของโปรแกรม Flash 3) เปล่ียนชือ่ Layer เป็น Face 4) คลกิ ท่ี Oval Tool เพือ่ สรา้ งรปู วงกลม(ซ่งึ ในเครือ่ งมือชดุ น้ีมีรปู ทรงเรขาคณิตพื้นฐานอกี มากมาย) 48

5 6 ภาพท่ี 2.21 ภาพการเลอื ก Fill and Stroke 5) คลิกเลอื กสที ี่ Fill และ Stroke 6) ปรับความหนาของ Stroke = 3 7 ภาพที่ 2.22 ภาพการสร้างรูปทรง 7) แดรกเมาสท์ ะแยงลงมาดา้ นลา่ งเพอื่ สร้างรปู ทรง (กด Shift บนคยี บ์ อรด์ ดว้ ยเพอ่ื ให้ไดส้ เกลท่ถี กู ตอ้ ง) 8 9 ภาพที่ 2.23 ภาพการสรา้ งรปู ทรงด้วย Pen Tool 8) ใชเ้ ครอ่ื งมือ Pen Tool สรา้ งจมกู ขน้ึ มา 9) คลิกทลี ะจุดเพ่ือสร้างรปู ทรง (ทกุ คร้งั ท่ีสรา้ งเส้นโค้งให้คลิกทจ่ี ดุ กง่ึ กลางเพอ่ื หักขา) 49

11 10 ภาพท่ี 2.24 ภาพการเลอื ก Fill and Stroke 10) ใช้ Selection Tool ดับเบิล้ คลิกทรี่ ปู ทรงท่ีสรา้ งขน้ึ มา 11) ปรบั Fill ใหเ้ ปน็ สีด�ำ ส่วน Stroke ใหเ้ อาสอี อก ก็จะไดร้ ปู แบบของจมกู ท่ไี ม่มี Stroke ตามแบบท่เี รา ต้องการ 13 12 ภาพที่ 2.25 ภาพการเลอื ก Fill and Stroke 12) ใชเ้ ครอื่ งมอื Oval Tool สรา้ งหูขน้ึ มา 13) ปรับความหนาของ Stroke เทา่ กบั 3 50