หนังสือเรียนรายวิชา การสร้างแอนิเมชี่น ม.4

พิมพ์คร้ังที่ 1 พ.ศ. 2557 ผูเ้ ขยี น ผ้ชู ว่ ยศาสตราจารย์ ดร.วิวฒั น์ มสี ุวรรณ์ คณะศกึ ษาศาสตร์ มหาวทิ ยาลยั นเรศวร ต.ทา่ โพธิ์ อ.เมือง จงั หวดั พษิ ณโุ ลก 65000 Email : [email protected] ชื่อ รูปภาพ สัญลักษณ์ และเครื่องหมายการค้าต่างๆ บางส่วนท่ีนํามาแสดง เป็นเพียงเพ่ือ ประกอบเนือ้ หาเท่าน้นั ผู้เขียนไมไ่ ดเ้ ปน็ เจา้ ของลขิ สิทธแ์ิ ต่อย่างใด

คาํ นาํ สํานักงานคณะกรรมการการอุดมศึกษา กระทรวงศึกษาธิการ ได้มีข้อตกลงความ ร่วมมือกับมหาวิทยาลัยพะเยา ภายใต้โครงการปฏิรูปหลักสูตรการศึกษาแห่งชาติ ได้ให้มี การพัฒนาหลักสูตรและแผนการสอน เอกสารประกอบการสอน คู่มือครู ที่บูรณาการ ความรู้ด้านเทคโนโลยีสารสนเทศและการสื่อสารกับกลุ่มอาชีพ เพ่ือใช้ประกอบการเรียน การสอนของสถานศึกษาทีเ่ ขา้ ร่วมโครงการ เอกสารประกอบการสอนรายวิชา การสร้างแอนิเมชัน มีเน้ือหาสาระเก่ียวกับความ เปน็ มา แนวคิด หลักการ และทฤษฎีท่เี กี่ยวข้องกบั แอนิเมชนั พื้นฐานโปรแกรมสําหรับสร้าง งานแอนิเมชันด้วย Flash การสร้างมูฟวี่คลิป วิธีการวาดตัวละคร การสร้างแอนิเมชันด้วย คําส่ัง Tween การสร้างแอนิเมชันด้วยคําส่ัง Mask การใช้งานเสียง การสร้างวัตถุให้ เคล่ือนไหวโดยเคร่ืองมือ BoneTool การสร้างเอนิเมชันแบบปฎิสัมพันธ์ การควบคุม เสียง ด้วยคําส่ัง Play Stop Pause การชิ้นงานแบบ Drag & Drop การสร้างเอนิเมชันสําหรับ เกม ผู้เขียนขอขอบคุณ โครงการบ่มเพาะและพัฒนาอาชีพเชิงบูรณาการ ด้าน เทคโนโลยีสารสนเทศและการสื่อสาร ภายใต้โครงการปฏิรูปหลักสูตรการศึกษา และ มหาวิทยาลัยพะเยา สุดท้ายขอขอบคุณทุกท่านที่มีรายชื่อในบรรณานุกรมเป็นอย่างสูงที่ ผู้เขียนได้นําเอกสารหรือตํารามาอ้างอิงประกอบการเขียนหนังสือเล่มน้ี สุดท้ายผู้เขียนหวัง ว่าจะเป็นประโยชน์ต่อการนําไปประยุกต์ใช้ในการเรียนรู้ของผู้เรียนได้อย่างเหมาะสมบรรลุ วัตถุประสงค์ทกุ ประการ วิวัฒน์ มีสุวรรณ์

“ความสามารถในการเรียนรู้ สําคญั กว่าความรู้ท่มี ีอย่”ู

สารบญั บทที่ หน้า 1 ความเปน็ มา แนวคดิ หลักการ และทฤษฎีทีเ่ กี่ยวข้องกับแอนิเมชนั 1 ประวตั ิความเปน็ มา 2 ประเภทของแอนิเมชัน 3 ประเภทของภาพเคล่อื นไหว 4 หลกั การพ้ืนฐาน 12 ขอ้ สาํ หรบั แอนเิ มชัน 5 ทฤษฎี และหลกั การด้านสี แสง เงา 11 15 2 พ้ืนฐานโปรแกรมสําหรบั สรา้ งงานแอนิเมชันด้วย Flash 16 ส่วนประกอบของโปรแกรม Flash 17 ทูลบ๊อก (Toolbox) 19 องค์ประกอบตา่ งๆ ของชิ้นงาน Flash 19 การสร้างชิน้ งานแอนเิ มชันใหม่ 25 Symbol ประเภทตา่ ง ๆ ประเภทของแอนิเมชันใน Flash 25 ขัน้ ตอนการทาํ แอนเิ มชนั รูปแบบ Motion Tween 26 3 การสรา้ งมฟู วคี่ ลิป 37 4 วิธกี ารวาดตัวละคร 55 5 การสรา้ งแอนเิ มชนั ด้วยคาํ สงั่ Tween 63 6 การสรา้ งแอนเิ มชนั ดว้ ยคาํ สงั่ Mask 83 7 การใช้งานเสียง 95 8 การสรา้ งวตั ถใุ หเ้ คลื่อนไหวโดยเคร่ืองมือ Bone Tool 103 9 การสรา้ งเอนเิ มชันแบบปฎสิ มั พันธ์ 113 10 การควบคุม เสยี งด้วยคาํ สงั่ Play Stop Pause 135 11 การชิ้นงานแบบ Drag & Drop 147 12 การสรา้ งเอนิเมชันสาํ หรบั เกม 157 175 บรรณานุกรม

ความเป็นมา แนวคิด หลกั การ บทท่ี และทฤษฎที ่ีเกย่ี วขอ้ งกบั แอนเิ มชนั ความเปน็ มา แนวคดิ หลกั การ และทฤษฎีทเ่ี กย่ี วข้องกับแอนเิ มชัน คําว่า แอนเิ มชนั (Animation) มาจากรากศพั ท์ละติน \"animare\" ความหมายวา่ การทําใหม้ ีชวี ิต ดว้ ยการทาํ ภาพนิ่งมาเรยี งลาํ ดับ และแสดงผลอยา่ งต่อเนอื่ งด้วยความ เร็วสงู จนเกิดเป็นภาพที่มีการเคล่อื นไหวอยา่ งมีชีวติ ชีวา ซ่งึ การนาํ ภาพหลายภาพนิ่งหลายๆ ภาพมาฉายต่อเนือ่ งกันดว้ ยความเรว็ สูงนั้น ทําใหเ้ กิดภาพลักษณะตดิ ตา เมื่อดวงตาของ คนเรามองเหน็ ภาพทแี่ สดงนนั้ อยา่ งตอ่ เนื่อง ซึง่ เรตินาจะเกบ็ ภาพก่อนไว้ในระยะสนั้ ๆ ประมาณ 1/3 วนิ าที หากมีภาพใหม่แทรกเข้ามาในระยะเวลาดงั กล่าว สมองของคนเราจะ เช่ือมโยงภาพทง้ั สองเข้าดว้ ยกนั ทาํ ให้มองเหน็ เปน็ ภาพเคล่ือนไหวได้ นน้ั ก็คอื มสี มองจะ ประมวลผลภาพเก่าและภาพใหม่เห็นเปน็ ภาพตอ่ เนอ่ื งกัน ท่มี า http://thanetnetwork.com/animation/picture/cartoon_1.gif

2 Animation ปัจจบุ ันเรามกั จะมีการนําคอมพวิ เตอรม์ าสรา้ งภาพเคล่ือนไหวด้วยการสรา้ งภาพนง่ิ ขน้ึ ก่อน แลว้ คอ่ ยสรา้ งภาพต่อเนอื่ งภาพถดั ไปเรียงลาํ ดับไปเร่อื ยๆ เปล่ียนแปลงภาพไป ทีละน้อย แลว้ นาํ มาเขา้ สู่คอมพวิ เตอร์ใชโ้ ปรแกรมสร้างแอนิเมชนั ในการลาํ ดบั ภาพให้ เหมาะสมกับเวลา และแสดงภาพตอ่ เนื่องจนเหน็ เปน็ การเคล่ือนไหวทีส่ มจรงิ 1. ประวตั คิ วามเป็นมา ประวตั คิ วามเปน็ มาเกี่ยวกับแอนิเมชันในแตล่ ะ พ้นื ท่ี มชี ่วงเวลา และลักษณะการคน้ พบท่แี ตกตา่ งกนั ท้ัง ชว่ งเวลา และรปู แบบท่เี กดิ ข้นึ เชน่ จากหลกั ฐานทาง ประวตั ิศาสตร์โบราณ ได้มีการคน้ พบภาพเขียนบนผนัง ถ้ําเปน็ รปู สัตวช์ นดิ หนง่ึ ซึง่ ในภาพวาดมีการวาดการ เคลื่อนไหวของขาท้ังส่ีขา้ ง หรอื ในยุค 1600 ปีก่อน คริสตศ์ กั ราช ในช่วงยุคของฟาโรหร์ ามาเศสที่ 2 ไดม้ ี การวาดรูปการเคลอ่ื นไหวของเทพีไอซสิ ตอ่ เนอื่ งกันถงึ 110 รูป หรือในยคุ กรกี โรมนั เม่อื ดูจากภาพทป่ี รากฏ บนคนโทแลว้ ทม่ี า http://profspevack.com/archive/animation/tech_support/history/Phantascope.jpg จะเห็นวา่ เป็นภาพตอ่ เนื่องของการว่ิง ในประเทศแถบยุโรปในปี 1908 อนเิ มชัน ถือกาํ เนิดขนึ้ ในโลก จากเร่อื ง Fantasmagorie ของ Emile Courtet ชาวฝรั่งเศส ในขณะ เดยี วกันทส่ี หรัฐฯ กม็ ีการเรมิ่ ต้นพฒั นาด้านอนิเมชันซงึ่ หนังในชว่ งแรกๆกม็ ี Koko the Clown และ Felix the Cat ในปี 1923 วอลท์ ดิสน่ีย์ กถ็ อื กําเนิดข้ึนดว้ ย บทท่ี 1 ความเปน็ มา แนวคิด หลกั การ และทฤษฏีทีเ่ กีย่ วขอ้ งกับแอนิเมชนั

3 สําหรบั ประเทศไทยได้มกี ารสรา้ งแอนิเมชันเป็นภาพยนตรก์ าร์ตนู เกิดขึ้นครง้ั แรก หลงั สงครามโลกคร้งั ท่ี 2 บคุ คลที่ถอื วา่ มบี ทบาทต่อวงการการต์ นู ไทย ไดแ้ ก่ อาจารย์สรรพสิริ วิรยิ สริ ิ เปน็ ผู้สร้างอนิเมชันคนแรกของไทยในโฆษณาโทรทัศน์ เช่น เรอื่ งหนูหล่อในโฆษณา ยาหมอ่ งบริบูรณ์ปาลม์ หมีนอ้ ยในโฆษณานมตราหมี และแมม่ ดกบั สโนว์ไวทใ์ นโฆษณาโทรทศั น์ แป้งน้ําควนิ นา่ เปน็ ตน้ ในปี พ.ศ. 2498 อาจารย์ปยุต เงากระจ่าง ไดส้ รา้ งภาพยนตรก์ าร์ตนู แอนิเมชัน เร่อื งแรก ชือ่ เหตุมหศั จรรย์ เป็นภาพยนตร์การต์ นู ขนาดสนั้ ความยาว 12 นาที ท่ีโรงภาพยนตรศ์ าลาเฉลมิ ไทย ต่อมา ปยุต เงากระจ่าง ไดส้ ร้างภาพยนตร์การ์ตนู 20 นาที อีก 2 เร่ือง ไดแ้ ก่ หนุมานเผชญิ ภยั และ เด็กกับหมี และภาพยนตรก์ าร์ตูนขนาดยาว เรื่องแรกของประเทศไทย เรอ่ื ง \"สดุ สาคร\" สดุ สาครภาพยนตรก์ ารต์ นู ขนาดยาวเรือ่ งแรก ในปี พ.ศ. 2542 แอนเิ มชนั ในประเทศไทย ไดม้ ีการสรา้ งการ์ตูนแอนิเมชนั เรื่อง ปลาบทู่ อง สังขท์ อง เงาะป่า และโลกนทิ าน จนกระทง้ั ในปี พ.ศ. 2545 ไดม้ ีการสรา้ ง แอนเิ มชัน 3 มติ ิ เรือ่ ง ปังปอนด์ ดิ แอนเิ มชัน และ สดุ สาคร และในปี พ.ศ. 2549 ภาพยนตรก์ าร์ตนู แอนเิ มชนั เรอ่ื ง ก้านกล้วย ได้สร้างขนึ้ และมีเร่อื งอ่ืนๆ ตามมาอกี มากมายจนปัจจบุ ัน 2. ประเภทของแอนิเมชัน สามารถแบ่งออกได้เป็น 3 ประเภท คือ 1. การสรา้ งงานแอนเิ มชันแบบด่งั เดิม (Traditional Animation หรอื Drawn Animation) เป็นกระบวนการท่ีใชส้ าํ หรับการสรา้ งภาพเคลือ่ นไหวภาพยนตร์มากที่สดุ เป็นการสร้างช้ินงานแอนเิ มชันด้วยภาพวาดซง่ึ จะมีการวาดภาพลงบนกระดาษก่อน เพือ่ สร้างภาพลวงตาของการเคลื่อนไหว แตล่ ะรปู วาดจะแตกต่างกนั เล็กนอ้ ย หลายพนั ภาพ และฉายภาพเหลา่ นนั้ ผา่ นกล้องบันทึกภาพ หรือกล้องวดิ โี อ การทําแอนิเมชันต้องอาศัย ความสามารถทางศลิ ปะในการวาดภาพอย่างมาก จึงทาํ ใหต้ ้องใช้เวลาในการผลิตนานและ ตน้ ทนุ ในการผลติ จงึ สูงตามไปดว้ ย 2. การสรา้ งแอนเิ มชนั แบบสตอ๊ ปโมชัน (Stop Motion หรือเรียกวา่ Model Animation) เป็นการสร้างห่นุ จาํ ลองข้นึ มาหรือใช้ส่ิงของแลว้ คอ่ ยๆ ขยบั พร้อมกับ ถา่ ยภาพนั้นท่ีละภาพ ท่พี บมากได้แก่ ภาพเคล่ือนไหวแบบหุ่นเชดิ ภาพเคลือ่ นไหวดินนํา้ มนั บทท่ี 1 ความเป็นมา แนวคิด หลักการ และทฤษฏที ี่เกี่ยวขอ้ งกับแอนเิ มชนั

4 ซึง่ วสั ดทุ ี่นยิ มใช้มักจะเปน็ ดินนํ้ามนั ป้ันเป็นรูปร่างต่างๆ โดยมีเสน้ ลวดเสมอื นเปน็ โครง กระดกู อยู่ภายในหุ่นทปี่ น้ั และทาํ ใหส้ ามารถนาํ มาใชง้ านไดห้ ลายคร้งั แอนเิ มชนั แบบนต้ี อ้ ง อาศัยเวลา ความอดทนและความสามารถมากต้องใชท้ ักษะทางศลิ ปะการปนั้ และ การถา่ ยภาพ ทัง้ น้ีเพราะหนุ่ จาํ ลอง หรือสิง่ ของประกอบฉากนนั้ หลายๆสิง่ มกี ารขยับหรอื เคลอ่ื นไหวไปพร้อมๆ กนั ในหนง่ึ ภาพ ดงั นน้ั หากต้องการแสดงความสมจริงจําเป็นตอ้ ง อาศยั ความละเอียดในการกําหนดการเคลอื่ นไหวเพ่อื ท่จี ะสรา้ งภาพลวงตาของการ เคล่อื นไหวแตล่ ะภาพ 3. การสรา้ งแอนเิ มชนั ดว้ ยคอมพวิ เตอร์ (Computer Animation) เป็น กระบวนการสร้างภาพเคลื่อนไหวโดยใชโ้ ปรแกรมคอมพวิ เตอร์ ดว้ ยความก้าวหน้าด้าน เทคโนโลยคี อมพิวเตอรใ์ นปจั จบุ นั จงึ มีโปรแกรมคอมพิวเตอรท์ ชี่ ว่ ยใหก้ ารทาํ แอนเิ มชนั ง่ายข้ึน ทําใหป้ ระหยดั เวลา และต้นทนุ เปน็ อยา่ งมาก โปรแกรมทน่ี ยิ มใชใ้ นการผลติ งาน แอนิเมชนั เชน่ โปรแกรม Maya, Abode Flash, Lightwave, modo, Anime Studio และ 3D Studio Max เปน็ ต้น 3. ประเภทของภาพเคลอ่ื นไหว แบ่งได้ 2 ประเภท คอื 1. ภาพเคล่ือนไหวแบบ 2 มิติ (2D Animation ) สามารถมองเหน็ ได้ ทั้งความสงู และความกว้าง ทม่ี า http://www.accurateinfocom.com/control/ include/website_image/9627-capture1.jpg 2. ภาพเคลื่อนไหวแบบ 3 มติ ิ (3D Animation) สามารถมองเหน็ ได้ ทัง้ ความสูง ความกว้าง และความลึก ทม่ี า http://i738.photobucket.com/albums/xx25 /Ricky_86/buck.jpg บทที่ 1 ความเป็นมา แนวคิด หลกั การ และทฤษฏีทเี่ กีย่ วข้องกับแอนเิ มชัน

5 4. หลักการพนื้ ฐาน 12 ขอ้ สําหรับแอนิเมชัน 1. Timing คอื เวลา การเคล่ือนไหวในแอนิเมชัน จะมีเรอ่ื งของเวลาหรือความเรว็ มาเกยี่ วข้อง เชน่ การกา้ วเดิน การก้าวทลี ะก้าว กา้ วแรกตอ่ เนือ่ งไปยังก้าวต่อไปเพอื่ ให้ดู ธรรมชาติ และสอดคล้องกับช่วงเวลา เชน่ การว่ิง กับการเดิน ทมี่ ีทา่ ทาง และเวลาทต่ี ่างกัน ดว้ ยความเรว็ ท่ีต่างกนั ยอ่ มให้ความรูส้ กึ ทต่ี ่างกนั ซ่ึงจาํ เป็นทจี่ ะตอ้ งเรียนรู้เกีย่ วกบั ระยะเวลาของแต่ละทา่ ทางว่าใช้เวลากว่ี ินาที หรอื กเี่ ฟรม ดว้ ยการหม่นั สังเกตและการลอง ฝกึ ปฎิบตั อิ ย่างตอ่ เนื่อง ท่มี า http://doc.gold.ac.uk/~mas02mg/IntroToAV/lectures//timeline.png 2. Ease In and Out หรอื Slow In and Out การเคลอื่ นไหวของร่างกาย มนุษย์หรอื วัตถุอ่นื ๆ ต้องเกย่ี วขอ้ งกบั อัตราความเรว็ อตั ราเร่งของวตั ถุ จะเห็นไดว้ ่าจะมี อัตราเร่งขน้ึ เร็วและอตั ราความเรว็ ค่อยๆ ชา้ ลง เช่น เมอื่ ลกู บอลลอยข้ึนไปในอากาศ ชว่ งแรกของการปลอ่ ยลกู บอลไปจะมีอตั ราความเร็วสงู สุด และลกู บอลจะค่อยๆลดความเร็ว จนเหลืออตั ราเร็วเปน็ ศนู ย์ เม่ือลูกบอลอย่สู งู สุด จากนน้ั ลูกบอลก็จะตกลงมา ดว้ ยโดยแรง โน้มถว่ ง ด้วยเหตุนีก้ ารสรา้ งแอนิเมชนั ต้องคาํ นึงถึงการเคล่ือนไหวทด่ี ูเหมอื นสมจริงทีเ่ น้นที่ จุดเร่มิ ตน้ และจดุ ส้ินสดุ ของการเคล่ือนไหว ทม่ี า http://road2animate.files.wordpress.com/2010/04/ease-in-and-out.png บทที่ 1 ความเป็นมา แนวคิด หลกั การ และทฤษฏที เี่ กี่ยวขอ้ งกับแอนเิ มชัน

6 3. Arcs การเคลื่อนไหวในลกั ษณะวถิ ีโค้ง การสรา้ งแอนิเมชันควรศกึ ษาเขา้ ใจ รปู แบบการเคล่ือนไหวตามเสน้ โค้งท่ีวัตถุทจี่ ะทาํ ใหก้ ารเคลอ่ื นไหวดูนา่ ในใจ ไมน่ ่าเบ่อื ซง่ึ ท่ี จะช่วยให้สมจริงมากขนึ้ เชน่ การเหว่ียงแขน ขณะทีก่ ําลงั จะโยนลูกบอลของนักกีฬาเบส บอล เมื่อโยนลกู บอลจะมคี วามเร็วของวตั ถุหรอื แรงผลกั ดนั ใหล้ กู บอลไปขา้ งหนา้ และมีแนว การเคล่ือนไหวเปน็ เส้นโคง้ ออกไปข้างหน้า แล้วคอ่ ยลดตํา่ ลงดว้ ยความเรว็ ท่ลี ดลง จนตกลง ถงึ พื้น จะเหน็ ว่าการเคลอ่ื นไหวน้ันจะมีลกั ษณะเปน็ วิถีโคง้ ทีม่ า http://www.myanimespace.org/animation/walks7.gif 4. Anticipation เป็น ทา่ เตรยี ม หรือทา่ เรมิ่ ต้น บางครัง้ การทาํ แอนิเมชันจะให้ ความสําคญั กบั ท่าเตรยี มมาก เพราะจะดึงดดู ความสนใจ และการติดตามของผูช้ ม เชน่ การง้างขามาด้านหลงั ก่อนท่ีจะเตะลกู บอล ตวั ละครก็จะเหวยี่ งแขนไปด้านหลงั จนเกือบ ถงึ พนื้ และเหวี่ยงไปข้างหนา้ อยา่ งแรง ที่มา http://www.gamasutra.com/db_area/images/feature/6026/anticipation.png บทที่ 1 ความเป็นมา แนวคิด หลักการ และทฤษฏีท่เี กีย่ วขอ้ งกับแอนเิ มชัน

7 5. Exaggeration การแสดงเกินจรงิ เพอื่ สร้างอารมณต์ ัวละครใหม้ ีชวี ติ ชีวา เช่น ทาํ หนา้ ตกใจอ้าปากกว้าง ตัวลอย เพราะจะสรา้ งความร้สู กึ ร่วมให้กับผู้ชมไดด้ ี สอื่ สารได้ ชดั เจน Exaggeration ท่ีมา http://www.87seconds.com/assets/img/Blog/12principles/10_exaggeration.jpg 6. Squash and Stretch การยดื หดของวัตถุ เช่น บอลยางเวลาโดนแรงอดั กระแทกพ้นื ยอ่ มแบนลง และยดื ข้นึ เม่ือเด้งออก Squash and Stretch ทมี่ า http://download.autodesk.com/us/3dsmax/2012designtutorials/images/GUID-B2375D85- 13A1-4407-BD4F-D0316CB86817-low.png บทท่ี 1 ความเป็นมา แนวคิด หลกั การ และทฤษฏีทีเ่ กีย่ วขอ้ งกับแอนิเมชนั

8 Squash and Stretch ที่มา http://road2animate.files.wordpress.com/2010/04/strech-and-squash.png 7. Secondary Action การกระทาํ รอง หรือการเคลอื่ นรอง เช่น ตวั ละครเดนิ ขาก้าวกค็ ือการเคลื่อนที่หลัก แขนหรือมอื ทเ่ี หวย่ี งก็อาจจะจดั เป็นการเคลอ่ื นทีห่ ลักดว้ ย แต่เสอื้ ผ้า ผม ทป่ี ลวิ ไปตามแรงเหว่ียงของการเดิน พวกน้ีคอื การเคล่อื นไหวรอง พวกน้ี จะทําให้งานดูสมจรงิ ขน้ึ จนชกั จูงให้คนดูเช่ือไดว้ า่ ตัวละครนี้มชี ีวติ จรงิ ๆ Secondary Action ท่ีมา http://www.michaelspornanimation.com/splog/wp-content/uploads /2013/05/Rstag-1024x373.jpg 8. Follow Through and Overlapping Action การผลจากแรงสง่ คือการ กระทาํ ทีเ่ ปน็ ผลมาจากการกระทาํ หลกั เช่นเวลาขว้างบอล เมือ่ มอื ปลอ่ ยลูกบอลออกไปแล้ว มอื จะไมห่ ยุดคา้ ง ณ ท่าที่ลูกบอลออกจากมอื ขอ้ มือจะพับลง และจะกระดกกลบั ข้ึนมา เลก็ นอ้ ย อันเปน็ ผลจากแรงทส่ี ่งออกไป ส่วน Overlapping action นั้นจะคล้ายๆ กับการ สง่ ทอดของแรง ทจ่ี ะเห็นชัดเจนสุด กเ็ ชน่ การสะบัดเชือก หรอื สะบัดแส้ จงั หวะทีเ่ หว่ียง ออก เสน้ เชอื กท้งั หมดจะไมเ่ คลือ่ นที่ไปพรอ้ มกนั สว่ นทจ่ี ะเริม่ เคลอ่ื นทก่ี ่อน คอื ส่วนทอ่ี ยู่ ใกล้มือ หรอื จดุ ทอ่ี อกแรงมากทสี่ ดุ จากนั้นก็จะส่งตอ่ แรงไปเรอ่ื ย จนถึงปลาย บทท่ี 1 ความเป็นมา แนวคิด หลกั การ และทฤษฏีที่เกย่ี วข้องกับแอนิเมชัน

9 9. Straight Ahead Action and Pose-To-Pose Action - straight ahead animation คือการทําแอนิเมชันหรือภาพเคลือ่ นไหว ทลี ะภาพไปเร่อื ย จะไม่มภี าพเคลื่อนไหวหลัก ทีม่ า http://4.bp.blogspot.com/-wC-fZrBVbJo/T4CDdJufE0I/AAAAAAAAAJY/ abq2LrVQO7k/s1600/straight+ahead.jpg - pose-to-pose action คอื การกาํ หนดแบบใช้ key frame ทเี่ ป็นการ กาํ หนดท่าทางหลักหรือต้นทาง และกําหนดท่าทางปลายทาง จากนั้นสรา้ งภาพเคล่ือนไหว ระหวา่ งทา่ ทางหลกั ทง้ั สอง (animate in between) ท่ีมา http://air.lehman.edu/~christine.mariani/222/images/posetopose.jpg บทท่ี 1 ความเป็นมา แนวคิด หลักการ และทฤษฏีทเ่ี กยี่ วขอ้ งกับแอนเิ มชัน

10 10. Staging ทา่ ทางการเคลอ่ื นไหวใหช้ ัดเจน ใหผ้ ูช้ มไดเ้ ขา้ ใจไดท้ นั ที ทมี่ า http://software.intel.com/sites/default/files/m/d/4/1/d/8/character-ani-2.jpg 11. Appeal การสร้างคุณลกั ษณะตัวละครทีม่ เี สน่ห์ แปลกใหม่ นา่ สนใจ เพื่อสรา้ งความประทบั ใจ จดจําได้ของผู้ชม ทีม่ า http://4.bp.blogspot.com/-enV64cmtbC0/ UUi0Zr5aA1I/AAAAAAAAFQ8/UH7vw34opb8/s320/G5-Marina.jpg บทท่ี 1 ความเปน็ มา แนวคิด หลักการ และทฤษฏที ี่เกย่ี วข้องกับแอนเิ มชัน

11 12. Personality การสรา้ งบคุ ลิก นิสัยจะสร้างเอกลักษณใ์ หก้ ับตัวละคร ท่มี า http://4.bp.blogspot.com/-JCbQSVqpv3s/UUi3Vuc0PnI/ 5. ทฤษฎี และหลกั การดา้ นสี แสง เงา สี เกิดขึ้นจากแสงทม่ี ากระทบวัตถแุ ล้วสะทอ้ นเขา้ ตาเรา ทําใหเ้ หน็ เป็นสตี ่างๆ สีเป็นส่วนสําคญั ในการออกแบบแอนิเมชัน เพราะสเี ปน็ องคป์ ระกอบสําคัญในการออกแบบ แอนเิ มชนั มอี ทิ ธพิ ลในเร่อื งของอารมณ์ สรา้ งความสวยงามในงานแอนิเมชัน และสีสามารถ สื่อความหมายได้หลากหลาย ภาพท่มี ีสี ภาพที่เป็นขาว-ดาํ ทีม่ า http://foomandoonian.files.wordpress.com บทท่ี 1 ความเป็นมา แนวคิด หลักการ และทฤษฏีที่เก่ียวข้องกับแอนเิ มชัน

12 ความหมายของสตี า่ งๆ เชน่ สีแดง ใหอ้ ารมณข์ องความร้อน พลงั พลังงาน ความแรง สีเหลอื ง ใหค้ วามสดใส ปลอดโปร่ง ดึงดูดสายตา สนี า้ํ เงนิ ให้ความสงบเรียบ สุขมุ มีราคา หรูหรามรี ะดบั สสี ม้ ให้ความรู้สึกดงึ ดดู ทันสมัย สดใส กระฉบั กระเฉง มีพลัง สีม่วง ให้อารมณ์หนกั แนน่ มเี สน่ห์ ความลับ ส่งิ ทป่ี กปดิ สีเขยี ว ใหค้ วามรู้สึกสดชืน่ ธรรมชาติ เยน็ สบาย สีชมพู ให้ความอ่อนหวาน นมุ่ นวล ความรัก นํ้าหนกั แสงเงา ในการสรา้ งแอนเิ มชนั ช้ินงานท่สี ร้างเพ่ือให้เกดิ ความสมจรงิ จาํ เป็นตอ้ งอาศัยภาพวาดที่มีการกําหนดนาํ้ หนกั ของแสงเงา เพ่อื ให้ภาพแอนเิ มชนั ดูแลว้ มี มิติ ดแู ล้วมีปรมิ าตร และเกิดความร้สู ึกสมจรงิ แสงและเงา (Light & Shadow) เป็นส่งิ สําคัญทที่ ําใหภ้ าพเกิดความกลมกลนื หรอื ต้ืนลกึ เหมอื นจริงอย่างท่ีตาเห็น ทั้งยังทาํ ให้เกดิ รปู ทรง และความสมบูรณ์ของภาพ แสงเงาเปน็ กระบวนการท่ที าํ ใหเ้ กดิ การมองเหน็ อยา่ ง หนงึ่ ซึ่งสําคัญมาก หลักในการใช้แสงเงา เช่น เมอื่ มแี สงตกกระทบลงบนวัตถุย่อมจะเกิดเงา ความเขม้ ของเงาจะข้ึนอยู่กับความเข้มของแสง ในท่ที ่มี แี สงสว่างมาก เงาจะเขม้ ขน้ึ ในท่ีท่มี ี แสงสวา่ งนอ้ ย เงาจะไมช่ ัดเจน ในทท่ี ่ีไมม่ แี สงสว่าง จะไมม่ ีเงา เป็นตน้ ทม่ี า http://th00.deviantart.net/fs70/PRE/i/2013/085/0/4/light_and_shadow_by_jzsketch-d5zblkr.png บทที่ 1 ความเปน็ มา แนวคิด หลกั การ และทฤษฏที ีเ่ กีย่ วข้องกับแอนเิ มชนั

13 ทฤษฎีทางด้านจติ วิทยา การท่คี นเราจะตอ้ งส่อื สารดว้ ยอวยั วะรับสมั ผสั ส่วนใดสว่ นหนึ่งหรอื ทงั่ หา้ สว่ น ไดแ้ ก่ หู ตา จมูก ลน้ิ และผวิ หนัง สัมผัสตา่ งๆ จากส่ิงแวดล้อมที่อย่รู อบๆ ตัว โดยคนเรา จําเป็นต้องตคี วามส่งิ ทไี่ ดส้ ัมผัส แล้วตอบสนองกลบั ไปอย่างเหมาะสม แตล่ ะคนเราจะ ตคี วามในสง่ิ แวดล้อมทเี่ หมอื นกันหรือแตกตา่ งกันออกไป ความสามารถในการตีความ ประสบการณ์ ของแตล่ ะคน เหลา่ น้ีเรียกวา่ การรบั รู้ ทฤษฎีทเ่ี ก่ียวขอ้ ง เช่น กลุ่มเกสตัลท์ (Gestalt Psychology) แนวคดิ ของ นกั จิตวิทยากลุ่มเกสตลั ท์ กลมุ่ น้มี แี นวคดิ วา่ การเรียนร้เู กดิ ได้จากการจัดสิ่งเรา้ ต่าง ๆ มารวมกันเร่ิมตน้ ดว้ ยการ รับรู้โดยสว่ นรวมกอ่ นแล้ว จึงจะสามารถวเิ คราะหเ์ ร่อื งการเรียนรู้ สว่ นยอ่ ยทลี ะสว่ นตอ่ ไป Gestalt Psychology ทีม่ า http://yusylvia.files.wordpress.com/2010/03/gestalt_illustration-01.jpg บทท่ี 1 ความเป็นมา แนวคิด หลักการ และทฤษฏีทเ่ี ก่ยี วข้องกับแอนิเมชนั

14 บันทึกชว่ ยจาํ Aide Memoire ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ ................................................................................................................................................ บทที่ 1 ความเป็นมา แนวคิด หลกั การ และทฤษฏที ี่เกีย่ วขอ้ งกับแอนเิ มชัน

พืน้ ฐานโปรแกรมสาํ หรบั บทที่ สร้างงานแอนเิ มชนั ดว้ ย FLASH พ้ืนฐานโปรแกรมสําหรับ สรา้ งงานแอนเิ มชันดว้ ย Flash ในการสร้างงานแอนเิ มชัน มโี ปรแกรมทีเ่ ราสามารถเลอื กใช้ไดอ้ ยหู่ ลายโปรแกรม ด้วยกัน แตล่ ะตวั มีความสามารถในระดบั พ้นื ฐานท่ีใกลเ้ คยี งกนั แต่จะมจี ดุ เดน่ เฉพาะแต่ละ โปรแกรมท่ไี มเ่ หมอื นกัน แต่กไ็ มไ่ ด้หมายความวา่ โปรแกรมไหนจะสรา้ งแอนเิ มชนั ได้สวยงาม กว่าโปรแกรมไหนท้งั นขี้ ึน้ อยู่กับปจั จัยหลายอย่าง ที่น้ีขึ้นอยกู่ ับความรู้ความสามารถ การเรยี นรู้ และการฝึกฝน ตลอดจนความคดิ สร้างสรรคข์ องผ้สู ร้างงานแอนิเมชนั เอง ในบทเรียนน้ีผเู้ รียนจะได้เรยี นรู้เกี่ยวกับการสร้างแอนเิ มชันทเ่ี ปน็ พนื้ ฐานสาํ คัญ และนาํ ความรไู้ ปตอ่ ยอดความคดิ ในอนาคตได้ ในบทเรยี นจะนาํ โปรแกรม Adobe Flash มาใช้ ในการสร้างงานแอนเิ มชัน ที่มา http://www.ctc.ru.ac.th/home/index.php?option=com_content&view

16 Animation Flash Adobe Flash (ในชือ่ เดิม Shockwave Flash และ Macromedia Flash) เปน็ โปรแกรมแบบ Integrated Development Environment (IDE) เป็นโปรแกรมทใี่ ชใ้ น การเขยี นสอ่ื มลั ตมิ ีเดยี ทเ่ี อาไว้ใชส้ รา้ งเนอ้ื หาที่มไี ดท้ ั้งภาพ เสียง ภาพเคล่ือนไหว และ ปฎิสัมพันธ์ทส่ี ามารถทําได้หลากหลายรูปแบบ มีความสามารถในการรองรับ ภาพแบบ เวกเตอร์ และ ภาพแบบแรสเตอร์ และมภี าษาสคริปตท์ ่เี อาไว้ใช้เขียนโดยเฉพาะเรียกว่า ActionScript และยังสามารถเล่นเสยี งและวดิ ีโอ แบบสเตริโอได้ รปู แบบไฟล์ Flash .swf ไฟล์ .swf เป็นไฟล์ที่สมบรู ณ,์ ถูก compiled และ published ไฟลแ์ ล้ว ซงึ่ ไม่ สามารถแกไ้ ขด้วย Flash ได้อกี ตอ่ ไป .fla ไฟล์ .fla เป็นไฟลต์ ้นฉบบั ของโปรแกรม Flash. โปรแกรมท่ีใชเ้ ขียน Flash สามารถแกไ้ ขไฟล์ FLA และ compile มนั ใหเ้ ป็นไฟล์ .swf ได้ .flv ไฟล์ .flv เป็นไฟล์วิดโิ อ Flash 1. ส่วนประกอบของโปรแกรม Flash Menu Bar เปน็ รายการที่รวบรวมชดุ คําส่ังการตง้ั คา่ การใช้งาน ในโปรแกรม ท้งั หมดของโปรแกรม Flash Toolbox ชดุ เคร่อื งมอื สําหรบั ใช้วาดภาพต่างๆ แบ่งออกเปน็ เครือ่ งมอื , มมุ มอง, การเติมสีและตัวเลอื กเพิ่มเติม Timeline ไทมไลนห์ รือเสน้ เวลา เปน็ การแสดงส่วนแบ่งภาพการเคลอื่ นไหว ออกเปน็ ชว่ ง ๆ ท่เี รียกวา่ เฟรม (Frame) และแสดงสว่ นของเลเยอร์ (Layer) ทสี่ ามารถ เพ่มิ ลบ แก้ไขท่ีเก่ยี วข้องกบั เลเยอร์ บทที่ 2 พืน้ ฐานโปรแกรมสําหรับสร้างงานแอนิเมชนั ดว้ ย Flash

17 Scene หรือ Stage พ้ืนทีง่ านใชส้ าํ หรบั จดั วาง, แกไ้ ขและแสดงผลชิน้ งาน Panel ใช้สําหรับเก็บเครื่องมอื ของโปรแกรม Adobe Flash Actions Panel ทาํ หน้าทเี่ ก่ียวกับการใช้งานคาํ ส่ัง ActionScript Properties ทาํ หน้าทีแ่ สดงรายละเอียดต่างๆ เช่น เครอ่ื งมือ วตั ถุ เฟรม เปน็ ต้น 2. ทูลบ๊อก (Toolbox) ทลู บอกซ์ (Toolbox) เปน็ กลอ่ งเก็บอปุ กรณท์ ใ่ี ช้ในการสร้าง ปรับแตง่ และแก้ไข วตั ถุ เราสามารถเรียกใช้งานทลู บ็อกซ์ ได้โดยใช้คําสง่ั Window>Tools แล้วคลกิ เลอื ก เครื่องมอื ที่ตอ้ งการ Selection Tool ------ ------ Subselection Tool Free Transform Tool ------ ------ Gradient Transform Tool Lasso Tool ------ ------ Text Tool Line Tool ------ ------ Rectangle Tool Pen Tool ------ ------ Bruch Tool Pencil Tool ------ Ink Bottle Tool ------ ------ Paint Bucket Tool ------ Eraser Tool Eyedropper Tool ------ ------ Zoom Tool Hand Tool ------ Stroke Color ------ Fill Color------ Black and White------ Snap to Objects------ บทท่ี 2 พ้ืนฐานโปรแกรมสําหรบั สรา้ งงานแอนิเมชนั ดว้ ย Flash

18 เครอ่ื งมือทีส่ ําคญั บนทลู บอ็ กซ์ ในการใช้งาน Flash เพอ่ื สร้างงานหรือวาดภาพด้วย Flash มกั จะพบว่า บ่อยครัง้ ที่ ทําใหเ้ กดิ ความผดิ พลาด เลอื กวตั ถทุ ่ีวาดไม่ถูกตอ้ ง ไมส่ ามารถปรับขนาดได้ เคลื่อนย้ายวัตถุ หรือแมแ้ ตล่ บสว่ นของภาพบางสว่ นทไี่ ม่การออก ปัญหาเหลา่ นี้มักเกิดขนึ้ เพราะผู้สรา้ งมกั ไมไ่ ดก้ ลบั มาคลิกเลอื กที่ Selection Tool จึงแนะนาํ ว่าเมือ่ ใช้เครือ่ งมือใดๆ ไปแลว้ ให้ กลับมาคลิกที่ ทกุ คร้ัง Gradient Transform Tool ปรบั แตง่ การไลโ่ ทนสีแบบ Linear และ Radial Line Tool วาดเส้นตรง Pen Tool วาดเส้นและสว่ นโคง้ ตา่ งๆ Text Tool พิมพต์ ัวอักษร Oval Tool วาดวงกลม และวงรี Rectangle Tool ปรบั แตง่ การไล่โทนสแี บบ Linear และ Radial Rectangle Tool วาดสี่เหล่ียม Pencil Tool ดนิ สอวาดภาพ Bruch Tool แปรงระบายสี Ink Bottle Tool ปรบั แตง่ ของเสน้ ขอบของวตั ถุ Paint Bucket Tool เทสพี ื้น Eyedropper Tool คดั ลอกสที ตี่ อ้ งการ Hand Tool จับ Stage ให้เล่อื นไปยังท่ตี ้องการ Eraser Tool ยางลบ Zoom Tool ย่อ/ขยายหน้าจอ Stroke Color ปรบั แต่งสขี องเส้นขอบ Fill Color ปรบั แตง่ สีของพ้นื ที่ Black and White เปลีย่ นสี Stroke Color กับ Fill Color เป็นสขี าว/ดํา No Color เปลีย่ นสี Stroke Color ให้ไม่มสี ี Swap Color เปลย่ี นสรี ะหวา่ ง Stroke Color กบั Fill Color Snap to Objects แมเ่ หลก็ ยดึ วัตถุ บทที่ 2 พ้นื ฐานโปรแกรมสําหรับสรา้ งงานแอนิเมชันด้วย Flash

19 3. องคป์ ระกอบต่างๆ ของช้นิ งาน Flash ออบเจ็กต์ (Object) คือสิ่งตา่ งท่ีจะนํามาใส่ในชิน้ งานได้ เช่น รปู ภาพ, เสียง, Symbol หรอื ไฟลว์ ิดีโอ เปน็ ต้น เลเยอร์ (Layer) น้ันคล้ายกบั แผน่ ใสทีเ่ ราสามารถวางออบเจ็กตต์ ่างๆ หรอื วาด ภาพ และสามารถนํามาเรียงซอ้ นกนั จนเปน็ ชน้ิ งานก็จะมองเหน็ เป็นภาพ เลเยอรใ์ นแตล่ ะ แผ่นจะเป็นอิสระต่อกนั และเปลยี่ นตาํ แหน่งการซ้อนทบั กนั ในแต่ละเลเยอร์ได้ ดังนน้ั เราควรแยกออบเจ็กต์ไว้บนเลเยอร์ทตี่ ่างกนั เช่น เลเยอร์ ทหี่ นึง่ เป็นภาพวาดทอ้ งฟา้ เลเยอรท์ ี่สองเปน็ ภาพเคร่อื งบนิ เป็นตน้ เพอ่ื งา่ ยและสะดวกต่อการแก้ไข เฟรม (Frame) หมายถงึ ช่องสําหรับแสดงภาพเคลอ่ื นไหวในแตล่ ะช่วงเวลาเมอ่ื สร้างภาพเคล่อื นไหวภายในเฟรม คยี ์เฟรม (Keyframe) หมายถงึ เฟรมทม่ี กี ารวางออบเจ็กต์ลงไปในเฟรม ซึ่งออบเจ็กต์นน้ั อาจเป็นภาพ หรอื Symbol ต่างๆ เพือ่ สรา้ งการเคล่ือนไหว คยี ์เฟรมว่าง (Blank Keyframe) หมายถึง คยี เ์ ฟรมทไ่ี มม่ ีออบเจก็ ต์วางอยูใ่ นคีย์ เฟรมนั้นๆ การลบเฟรม คลกิ ขาวบริเวณเฟรมท่ตี ้องการลบ แลว้ เลอื กคําสั่ง Remove Frames เฟรมทีถ่ กู ลบจะหายไป 4. การสร้างชนิ้ งานแอนิเมชนั ใหม่ 1. คลกิ เลอื กทเี่ มนู File > New หลังจากนน้ั เลือก Flash Document 2. เลอื ก ActionScript 2.0 จะปรากฏหนา้ จอดังภาพ บทที่ 2 พ้นื ฐานโปรแกรมสาํ หรบั สรา้ งงานแอนิเมชนั ดว้ ย Flash

20 3. กอ่ นสรา้ งช้ินงานทกุ ครงั้ ต้องกาํ หนดขนาดของช้นิ งานใหเ้ หมาะสม ทจ่ี ะไป นําเสนอ หากต้องการไปนาํ เสนอบนหนา้ เว็บ กจ็ ะมีการกาํ หนดขนาดขึน้ อยกู่ ับพนื้ ทใ่ี นหน้า เวบ็ ทต่ี อ้ งการเอางาน Flash ไปใช้งาน หากตอ้ งการนําเสนอบนจอคอมพิวเตอร์กก็ ําหนด ตามขนาดของหนา้ จอ ซ่ึงไมค่ วรใหใ้ หญ่มากนัก ในคร้งั นจ้ี ะกาํ หนดขนาดเปน็ 640x480 นน้ั คอื ความกวา้ ง 640 พิกเซล และความสูง 480 พิกเซล 4. ไปทเ่ี มนู Modify เลือก Document จะปรากฏหนา้ จอ Document Settings ขนึ้ มา ให้กําหนดคา่ Dimensions คา่ ความกวา้ งเป็น 640 และความสงู เปน็ 480 เสรจ็ แล้ว คลิก OK ดังภาพ 12 5. พน้ื ทีท่ าํ งานหรอื ว่า Stage จะเปล่ยี นขนาดตามที่กาํ หนด 6. ไปที่ Toolbox คลกิ เลอื ก Oval Tool หรอื กด O บนคีย์บอรด์ บทท่ี 2 พ้นื ฐานโปรแกรมสาํ หรับสรา้ งงานแอนิเมชันดว้ ย Flash

21 7. กําหนดสีพน้ื ท่ี Fill color เป็นสแี ดง หรอื สีอ่ืนตามต้องการ 8. กําหนดสีของเสน้ หรือ Stroke color เปน็ สแี ดง หรอื สอี นื่ ตามต้องการ 9. วาดวงกลมลงไปที่ Stage โดยกดปมุ่ Shift บนคียบ์ อรด์ คา้ งไว้ แล้ววาดลงกลม ลงไป ตรงกลาง ชิดขอบบนของ Stage 10. จะเหน็ วา่ เมื่อวาดสงิ่ หนึ่งสงิ่ ใดลงไปบน Stage ณ แฟรมนั้นจะเป็นสีเทา มีจดุ วงกลมสดี าํ อยู่ ซงึ่ เรียกวา่ Keyframe บทที่ 2 พืน้ ฐานโปรแกรมสาํ หรบั สร้างงานแอนิเมชันดว้ ย Flash

22 11. คลิกเมาสข์ วาที่แฟรมที่ 2 เลอื ก Insert Keyframe หรือกด F6 จะมี Keyframe ใหม่เพิม่ ข้นึ มา 1 Keyframe ซึง่ จะทาํ การคัดลอกวตั ถุท่วี าดมายงั Keyframe ท่ี 2 เชน่ กนั 12. ตอนนกี้ าํ ลงั ทาํ งานอยู่บนแฟรมที่ 2 ใหค้ ลิกเลอื ก Selection tool บน Toolbox ดบั เบ้ิลคลกิ ท่ีวงกลมสแี ดง เพอ่ื ทําการเลือก และลากวงกลม ลงมาจาก ตาํ แหน่งเดมิ เล็กนอ้ ย 13. กลบั ไปท่ีแฟรมท่ี 3 คลิกเมาสข์ วาท่แี ฟรมท่ี 3 เลือก Insert Keyframe หรือ กด F6 จะมี Keyframe ใหมข่ นึ้ มาอีก ณ แฟรมท่ี 3 ทําเหมือนขน้ั ตอนท่ี 12 อกี คร้งั 14. กลับไปทแี่ ฟรมท่ี 4 คลิกเมาส์ขวาทีแ่ ฟรมที่ 4 เลอื ก Insert Keyframe และ ขยบั วงกลมใหท้ ําเช่นน้จี นถงึ แฟรมท่ี 24 วงกลมก็จะตกถงึ ขอบลา่ งดงั ภาพ บทท่ี 2 พืน้ ฐานโปรแกรมสาํ หรับสรา้ งงานแอนิเมชนั ด้วย Flash

23 15. เมอ่ื ทําครบแลว้ ใหก้ ด Ctrl+Enter เพ่ือทาํ การทดสอบผลการสรา้ ง 16. จากการทดลองทาํ แอนิเมชันเบอ้ื งตน้ จะเห็นวา่ ภาพที่วาดมีการเคลอ่ื นไหวตาม ทิศทางท่ีไดข้ ยับไปในแต่ละแฟรม แอนิเมชนั แบบนีเ้ รยี กว่า Frame by Frame 17. เพือ่ ให้งานดูสมจริง หาก ณ แฟรมทส่ี ดุ ทา้ ย หรอื แฟรมท่ี 24 คลิกทแี่ ฟรม สดุ ทา้ ย ไปที่เครอ่ื งมือ Free Transform tool หรือกด Q ปรับขนาดของวงกลมให้ แบนลงเล็กนอ้ ย 18. ไปทแ่ี ฟรมท่ี 25 คลิกเมาส์ขวาที่แฟรมที่ 25 เลือก Insert Keyframe อกี ครงั้ ปรับขนาดของวงกลมให้แบนลงอกี เล็กน้อย 19. ไปทแี่ ฟรมที่ 26 คลิกเมาส์ขวาทแ่ี ฟรมที่ 2 เลอื ก Insert Keyframe ปรับ ขนาดของวงกลมใหแ้ บนลงเล็กน้อย พร้อมทัง้ เปลีย่ นตาํ แหน่งให้วงกลมเลอ่ื นขึน้ ไปขา้ งบน เลก็ นอ้ ย 19. ไปทแี่ ฟรมท่ี 27 คลกิ เมาสข์ วาทีแ่ ฟรมท่ี 2 เลือก Insert Keyframe ปรับ ขนาดวงกลมใหด้ กู ลมเหมือนกบั คร้งั แรก พร้อมท้ังเปลี่ยนตําแหน่งใหว้ งกลมเล่ือนขึน้ ไป ขา้ งบนเล็กน้อย ทาํ แบบน้ไี ปจนถงึ แฟรมท่ี 48 วงกลมถงึ ขอบบนของ Stage 20. ทาํ ครบแลว้ ให้กด Ctrl+Enter เพื่อทําการทดสอบผลการสร้างจะพบว่า ภาพวงกลมสแี ดงจะหลน่ ลงมาแล้วเดง้ กลบั ขึ้นไปอีกคร้งั เมอ่ื วงกลมตกลงถึงขอบล่าง บทท่ี 2 พ้นื ฐานโปรแกรมสําหรับสรา้ งงานแอนิเมชันด้วย Flash

24 จะแบนลงเลก็ น้อยและขยายกลับเหมอื นเดมิ เม่อื เดง้ ข้นึ ไปอกี คร้งั ทาํ ใหแ้ อนิเมชนั สมจรงิ มากข้ึน แฟรมท่ี 1 แฟรมที่ 10 แฟรมที่ 24 แฟรมที่ 30 บทที่ 2 พื้นฐานโปรแกรมสําหรับสร้างงานแอนิเมชันดว้ ย Flash

25 5. Symbol ประเภทต่าง ๆ Movie Clip Symbol สาํ หรับ Symbol รปู แบบนใ้ี ช้ในการสรา้ งภาพเคลือ่ นไหว เพือ่ ใชเ้ ป็นส่วนประกอบของ Movie นอกจากนีย้ ังสามารถเพมิ่ เสยี งลงไปไดอ้ กี ดว้ ย Button Symbol ใชส้ รา้ งปมุ่ เพื่อตอบสนองกับเหตกุ ารณ์กบั Even ตา่ งๆ ทเี่ กิดขน้ึ เช่น การคลกิ เมาสห์ รือการนําเมาไปวางเหนอื ปุ่มนั้นๆ Graphic Symbol เปน็ สว่ นประกอบของภาพเคลื่อนไหวและใช้สร้างรปู ภาพ สาํ หรับ Symbol รปู แบบนีไ้ มส่ ามารถใส่เสยี งลงไปไดแ้ ละไมส่ ามารถใส่ชือ่ Instance Name เพื่อสรา้ งคาํ สง่ั โตต้ อบกับผใู้ ช้ได้ การสรา้ ง Symbol มวี ิธกี ารสรา้ งง่าย ๆ 2 วธิ ี คือ 1. วิธีแรก: สรา้ ง Symbol ด้วยเมนู Insert >New Symbol… >พิมพ์ชอ่ื Symbol > เลอื กประเภทของ Symbol >คลกิ ปุ่ม OK 2. วิธีที่สอง: สรา้ ง Symbol คลกิ ขวาบนภาพดว้ ยการใชค้ าํ ส่งั Convert t Symbol… > พิมพช์ อ่ื Symbol > เลอื กประเภท Symbol > คลกิ ปุ่ม OK จะปรากฎไฟล์ Symbol ท่ีเราสร้างขน้ึ ในพาเนล Library เราสามารถดับเบลิ คลกิ ทไ่ี ฟลน์ ข้ี ้ึนมา เพอ่ื แกไ้ ข symbol ได้ 6. ประเภทของแอนิเมชันใน Flash 1. Frame-by-frame คอื การสร้างคยี เ์ ฟรมหลายคียเ์ ฟรมต่อกันไป โดยคง ความตอ่ เนือ่ งของชน้ิ งานช้ินเดิมไว้ ทาํ ใหม้ องเป็นเปน็ ภาพเคลื่อนไหว การสรา้ ง ภาพเคลอ่ื นไหวแบบเฟรมตอ่ เฟรม จะเหมาะกบั การสรา้ งภาพเคลื่อนไหวท่ีซับซอ้ นไมม่ ี รปู แบบแนน่ อน 2. Tween คาํ ว่า Tween มาจากคําว่า “in between” เป็นการสรา้ ง ภาพเคลอื่ นไหวจากเฟรมต้นและเฟรมสดุ ทา้ ย ซงึ่ โปรแกรมจะสร้างการเปลย่ี นแปลงระหวา่ ง เฟรมให้โดยอัตโนมตั ิ จงึ มจี ะมกี ารสรา้ งเฟรมเพียง 2 เฟรม ซึง่ แบ่งออกเปน็ 3 รูปแบบ ได้แก่ 2.1 Shape Tween เปน็ การสรา้ งภาพเคลื่อนไหว โดยแปลงจากรูปทรงหนึ่ง ไปอกี รูปทรงหน่งึ เช่น รูปส่ีเหล่ียมค่อยๆ เปลย่ี นเป็นรูปวงกลม บทท่ี 2 พนื้ ฐานโปรแกรมสาํ หรับสรา้ งงานแอนิเมชนั ดว้ ย Flash

26 2.2 Classic Tween เป็นการทําแอนเิ มชนั เพอื่ โดยเปล่ียนคุณสมบัติของ วัตถุ สี ความสวา่ งของสี หรอื ขนาดรปู รา่ ง เช่น ภาพท่ีค่อยๆ สว่างข้นึ หรอื ตวั หนังสอื คอ่ ยๆ จางหายไป 2.3 Motion Tween เป็นการสรา้ งภาพเคลื่อนไหวทมี่ กี ารเปล่ยี นตาํ แหนง่ ขนาด หรือหมนุ วัตถุตามต้องการ เปน็ การสร้างภาพเคลอ่ื นไหว ทม่ี กี ารเคลอ่ื นกําหนด การเคลอ่ื นที่ หมุน ย่อ หรือขยายให้กบั วตั ถุ 3. Inverse Kinematic (IK) เปน็ การใส่กระดกู เพอ่ื เช่อื มโยงกบั รูปทรงท่ีสรา้ ง หรอื วตั ถุหลายๆ ช้ิน ให้สัมพนั ธ์กันดว้ ยโครงกระดกู โดยสามารถขยบั กระดูกเหลา่ นีเ้ พื่อให้ เกดิ การเคล่อื นไหว เช่น การสรา้ งการเคล่ือนไหวเลยี นแบบการเดนิ ของคน 7. ข้ันตอนการทาํ แอนเิ มชนั รูปแบบ Motion Tween การสร้างภาพเคล่ือนไหวแบบ Motion Tween เป็นรูปแบบการสร้าง ภาพเคล่อื นไหวทใ่ี ชม้ ากทีส่ ุดและโปรแกรมจะกาํ หนดรปู แบบชนดิ นเี้ ป็นค่าเริม่ ตน้ ของการ สร้างภาพเคลือ่ นไหวทุกครั้ง โดยโปรแกรมจะสรา้ งภาพเคลือ่ นไหวและเสน้ ทางการ เคล่อื นท่ใี ห้เองโดยอตั โนมัติ การทํา Planet with Orbiting Moon : การโคจรของดวงจนั ทรร์ อบโลก ข้นั ตอนและวธิ กี ารทาํ 1. เขา้ โปรแกรม Adobe Flash Professional CS5.5 2. ระหวา่ งรอโปรแกรม Run จะปรากฏหนา้ ตา่ งดังน้ี บทที่ 2 พื้นฐานโปรแกรมสาํ หรับสร้างงานแอนิเมชันดว้ ย Flash

27 3. เมอ่ื โปรแกรม Adobe Flash Run จนสมบูรณแ์ ลว้ หนา้ ตา่ ง Panel: Create New เลอื ก Action script 3.0 4. เมื่อคลกิ OK จะไดพ้ ืน้ ที่การทาํ งาน หรือ Scene บทที่ 2 พ้ืนฐานโปรแกรมสําหรับสร้างงานแอนิเมชนั ด้วย Flash

28 5. คลกิ Insert คลกิ New Symbol 6. เพิม่ โลกและดวงจนั ทร์ โดยคลิก Insert > New Symbol เปล่ยี นชอ่ื เปน็ moon and planet เลือกเปน็ Movie Clip > OK 1  2 7. เพ่ิม Layer เป็น 3 Layer ดับเบล้ิ คลกิ เปลย่ี นช่อื เป็น Layer 1 --> moon front Layer 2 --> planet Layer 3 --> moon back 1  2 บทที่ 2 พ้นื ฐานโปรแกรมสาํ หรบั สรา้ งงานแอนิเมชันดว้ ย Flash

29 8. ลอ็ ค Layer ทุกอนั ยกเว้น Layer Planet คลกิ Rectangle Tool เลอื กรปู ส่ีเหลยี่ มเพ่ือวาดโลก โดยเลือกไม่เอาเสน้ ขอบ และเลือกลงสพี ้นื สนี าํ้ เงิน วาดวงกลมสนี าํ้ เงนิ ให้จดุ ศูนยก์ ลางตรงกบั จดุ ศนู ย์กลางของ Layer โดยไปปรับท่ี Align 21 5 3 4 9. เลอื ก Pen Tool เลอื กเสน้ สดี ํา เลอื กขนาดเส้นที่ Stoke ให้มขี นาดเปน็ 4 แลว้ ลง มือวาดสว่ นของพื้นดนิ บนโลก 1 2 บทที่ 2 พน้ื ฐานโปรแกรมสําหรบั สรา้ งงานแอนิเมชนั ด้วย Flash

30 10. ปรับให้เปน็ รปู ทสี่ วยงามขึ้นโดยใช้เมาส์ชี้ เม่อื เปน็ รูปลูกศรและเป็นเสน้ โคง้ ก็ สามารถลากได้ตามตอ้ งการ เมอ่ื ครบทกุ รูปลงสีภายในรูปทว่ี าดขึน้ เปน็ สีเขียว 11. คลิก Frame ที่ 48 กดป่มุ F5 บทท่ี 2 พ้ืนฐานโปรแกรมสําหรบั สร้างงานแอนิเมชันด้วย Flash

31 12. เปิด Layer moon front โดยล็อค Layer ที่เหลอื จากน้นั วาดดวงจนั ทร์ โดยใช้ Rectangle Tool คลกิ เลือกรปู วงกลมโดยเลอื กไมเ่ อาเสน้ ขอบ เลือกสพี ืน้ เป็นสีเทา และมแี สงสวา่ งเพอื่ วาดดวงจันทร์ 2 1 3 5 4 13. คลกิ ทถี่ งั สเี พื่อยา้ ยตําแหนง่ แสงบนดวงจันทร์ จากน้ันใช้ Rectangle Tool เป็น รปู วงกลม ไมม่ ขี อบ ลงสเี ทา เพื่อวาดหลมุ บนดวงจนั ทร์ บทที่ 2 พื้นฐานโปรแกรมสําหรบั สรา้ งงานแอนิเมชันดว้ ย Flash

32 14. ปรับขนาดของดวงจันทร์ให้เล็กลง โดยคลกิ Free Transform แลว้ คลิกทม่ี ุมค้าง แล้วยอ่ ขนาดของดวงจันทรล์ ง 1 2 15. คลกิ ขวาที่ Frame ที่ 1 คลกิ Create Motion Tween ลากเสน้ สแี ดงไป Frame ท่ี 24 คลกิ Selection Tool คลกิ ทด่ี วงจนั ทร์เพื่อย้ายตาํ แหนง่ ไปอยู่ทางขวา กด Ctrl + C เพอื่ copy บทที่ 2 พื้นฐานโปรแกรมสําหรบั สรา้ งงานแอนิเมชนั ด้วย Flash

33 16. เปดิ Layer moon back โดยล็อค Layer ทเ่ี หลือ จากน้นั กด F6 ท่ี Frame ท่ี 24 เลือกเมนู Edit คลิก Paste in Place ใน Frame ท่ี 25 3 4 2 1 17. คลิกขวาที่ Frame ที่ 1 คลกิ Create Motion Tween ลากไปที่ Frame 48 แลว้ ย้ายดวงจันทร์มาไว้ทางซา้ ยเหมือน (จะเหน็ ดวงจันทรโ์ คจรไปทางดา้ นหลงั ของโลก) 2 1 3 บทที่ 2 พน้ื ฐานโปรแกรมสําหรับสร้างงานแอนิเมชันด้วย Flash

34 18. เปดิ Layer moon front โดยล็อค Layer ท่ีเหลอื ใชเ้ มาส์ชที้ ่ีเสน้ เพอ่ื ปรับใหเ้ สน้ การโคจรของดวงจันทร์มคี วามโค้งต่าํ ทางด้านหน้าของโลก โดยคลกิ ท่ี Selection Tool แล้วลากตรงกลางของเสน้ สีสม้ ลงมาด้านล่าง 2 1 3 19. เปิด Layer moon back โดยล็อค Layer ที่เหลอื ใช้เมาสช์ ี้ท่ีเสน้ เพ่อื ปรับใหเ้ ส้น การโคจรของดวงจนั ทร์มคี วามโคง้ ตํ่าทางดา้ นหลงั ของโลก โดยคลกิ ที่ Selection Tool แล้วลากตรงกลางของเส้นสีเขียวลงมาด้านลา่ ง 2 1 3 บทที่ 2 พนื้ ฐานโปรแกรมสําหรบั สรา้ งงานแอนิเมชนั ด้วย Flash

35 20. เปิด Layer moon front โดยลอ็ ค Layer ทเี่ หลอื ปรับขนาดของดวงจนั ทร์เมอื่ โคจรผ่านโลกให้มีขนาดใหญข่ ึ้น โดยคลกิ ท่ี Frame ท่ตี าํ แหน่งของดวงจนั ทรอ์ ยู่ ข้างหนา้ โลก จากนั้นคลิก Free Transform ขยายใหด้ วงจนั ทรม์ ีขนาดใหญข่ ้นึ 2 1 3 21. กลับไปที่ Scene ท่ี 1 เปลย่ี นช่ือ Layer 1 เปน็ moon and planet จากนนั้ ลาก moon and planet จาก Library มาวางใน Layer ที่สรา้ งขน้ึ จากนั้นปรบั ขนาดให้ เหมาะสม 2 13 บทที่ 2 พ้ืนฐานโปรแกรมสาํ หรบั สรา้ งงานแอนิเมชันดว้ ย Flash

36 22. เมื่อวางดวงจนั ทร์และโลกตรงตาํ แหน่งและปรบั ขนาดใหเ้ หมาะสมแล้ว จะได้ ผลงานออกมา ซง่ึ สามารถดูผลงานโดยกด Ctrl + Enter บทที่ 2 พืน้ ฐานโปรแกรมสาํ หรับสรา้ งงานแอนิเมชนั ด้วย Flash

บทที่ การสร้าง มฟู วคี่ ลปิ การสรา้ งมูฟว่คี ลปิ

38 Movie Clip 1. Symbol ประเภทตา่ ง ๆ Movie Clip Symbol สาํ หรับ Symbol รปู แบบน้ใี ช้ในการสร้างภาพเคลอ่ื นไหว เพ่อื ใช้เปน็ ส่วนประกอบของ Movie นอกจากนี้ยงั สามารถเพม่ิ เสยี งลงไปได้อีกด้วย Button Symbol ใชส้ รา้ งปุ่มเพือ่ ตอบสนองกบั เหตุการณ์กับ Even ตา่ งๆ ทเ่ี กิดข้ึน เชน่ การคลิกเมาสห์ รือการนาํ เมาไปวางเหนือปุ่มน้ันๆ Graphic Symbol เปน็ สว่ นประกอบของภาพเคลื่อนไหวและใชส้ รา้ งรปู ภาพ สําหรบั Symbol รปู แบบนไ้ี มส่ ามารถใสเ่ สยี งลงไปไดแ้ ละไมส่ ามารถใสช่ ่ือ Instance Name เพ่อื สร้างคําสง่ั โตต้ อบกับผ้ใู ชไ้ ด้ การสรา้ ง Symbol มวี ิธีการสรา้ งงา่ ย ๆ 2 วิธี คือ 1. วิธีแรก: สรา้ ง Symbol ดว้ ยเมนู Insert >New Symbol… >พิมพช์ ่ือ Symbol > เลือกประเภทของ Symbol >คลิกป่มุ OK 2. วิธที ี่สอง: สร้าง Symbol คลกิ ขวาบนภาพด้วยการใช้คําส่ัง Convert to Symbol… > พมิ พ์ช่อื Symbol > เลอื กประเภท Symbol > คลิกปมุ่ OK จะ ปรากฎไฟล์ Symbol ท่ีเราสร้างขน้ึ ในพาเนล Library เราสามารถดบั เบลิ คลกิ ที่ ไฟลน์ ขี้ ึน้ มาเพื่อแก้ไข symbol ได้ บทท่ี 3 การสร้างมูฟว่ีคลิป

39 2. การสร้าง Movie Clip Symbol 1. วาดภาพกองไฟ พร้อมตกแตง่ ใส่สีใหส้ วยงาม 2. คลกิ ขวาท่ีรปู กองไฟ > Convert to Symbol ตั้งชื่อเป็น campfire > เลือก Type เป็น Movie Clip > เลือก OK 1 2 บทที่ 3 การสร้างมูฟวคี่ ลิป

40 3. ไปท่ี Layer 1 เปลย่ี นชื่อเป็น flames 4. ไปที่ New Layer บทที่ 3 การสรา้ งมฟู ว่ีคลปิ

41 5. จะได้ Layer 2 เปล่ยี นชื่อเป็น Logs 6. ต่อไปเราจะสร้างทอ่ นไม้ ไปที่ เครื่องมอื สร้างรปู ส่เี หล่ยี ม > Rectangle Tool (R) บทท่ี 3 การสร้างมูฟวค่ี ลปิ

42 7. สรา้ งรูปสเ่ี หล่ียม ดังรูป 8. ไปท่ี เครอ่ื งมอื สรา้ งรูปส่ีเหลย่ี ม > Oval Tool (O) บทที่ 3 การสร้างมูฟวี่คลปิ

43 9. สรา้ งรปู วงรี 10. คลกิ เลือกสเ่ี หลี่ยมและวงรพี ร้อมกนั > Align > Match size เพ่ือปรบั ขนาดใหเ้ ทา่ กนั 1 2 บทที่ 3 การสรา้ งมูฟว่คี ลปิ

44 11. คลิกลากรูปวงรีมารวมกบั รปู สี่เหลีย่ ม 12. จะได้ดังรูป บทท่ี 3 การสรา้ งมฟู วี่คลิป

45 13. ตกแต่งลวดลายทอ่ นไมต้ ามต้องการ ดังรูป 14. สรา้ งวงรีเล็กๆขน้ึ มาอกี 1 วง ไปท่ี View > Snapping > Snap to guides 2 4 3 1 บทที่ 3 การสร้างมฟู ว่คี ลปิ