แอนิเมชันมีกิจกรรม

แอนิเมชัน 2319-2104 ÍѨ©ÃÒ µéѧ¾Ã»ÃÐàÊÃÔ°

ปปวชวช.3./31/2ววันนั พอฤังหคาสั รบด0ี 81.030.0-103-1.080.0น0.น.

จดุ ประสงคร ายวชิ า 1.มคี วามรู ความเขา ใจ เก่ยี วกับหลักการออกแบบแอนเิ มชนั่ เบอื้ งตน 2. มที ักษะในการออกแบบแอนเิ มช่ันตวั ละคร ฉาก และสี จากเน้อื เรือ่ ง 3. ใชเทคโนโลยที ่ีเหมาะสมในการปฏบิ ตั งิ าน 4. ประเมินคณุ คาผลงาน 5. มีกจิ นิสัยท่ีดใี นการทำงาน สมรรถนะรายวชิ า 1. แสดงความรูเกี่ยวกับหลกั การออกแบบแอนิเมชน่ั เบอ้ื งตน 2. ออกแบบแอนิเมชัน่ ตัวละคร ฉาก และการใชสี ไดสมั พันธกบั เนื้อเร่ือง 3. เลือกใชเทคโนโลยีทีเ่ หมาะสม 4. วิเคราะหผ ลงานแอนิเมชน่ั ตามหลักการออกแบบ แอนเิ มชน่ั เบอ้ื งตน คำอธบิ ายรายวชิ า ศึกษาและปฏบิ ัติเก่ียวกบั หลกั การออกแบบแอนิเมชน่ั การรา งภาพ ออกแบบตวั ละคร และฉากจากเน้ือเรื่อง การใชสีทำภาพเคลื่อนไหวเบ้ืองตน ดวยเทคโนโลยี ทเ่ี หมาะสมทั้ง 2 มิติ รวมท้ังประเมินคณุ คาผลงาน

เนอ้ื หา ความหมาย ประวตั ิ การสรา งแอนเิ มชน่ั ออกแบบงานแอนเิ มช่ัน ออกแบบตวั ละคร ฉาก สี จดั ทำแอนเิ มช่ัน และการเขียน เนื้อเรือ่ ง

การจดั การเรยี นการสอน 1. เรียนสลบั วนั ในแตละสัปดาห 2. สัปดหท ่ี 1,3,5, 7,9,11,13,15,17 เรยี นออนไลน 3. สปั ดาหท ่ี 2,4,6,8,10,12,14,16 เรยี นวทิ ยาลัย การประเมนิ ผลการเรยี น คะแนนเตม็ 100 คะแนน งานปฏบิ ตั ิในชั้นเรยี น 50 คะแนน งานปฏบิ ัติ แบบฝก หัด เรยี นผา นออนไลน ทฤษฎี งานปฎิบตั ิจาก APP 30 คะแนน : งานโปรเจค (งานเดี่ยว และงานกลุม ) 20 คะแนน : จติ พิสัย

เรยี นออนไลน เรยี นปกติ 1.เชค็ ชอื่ 2.เขาเรยี นทุกครง้ั 3.มีงานปฏบิ ตั ิหลังเรียน เวรในชัน้ เรียน สัปดาหท ี่ 1 จ พ ศ สัปดาหท ี่ 10 7ก11จอ.3กย-..ย1.4-15 319พ3กฤกพ-.ย1.ย.4.-15 11ศก.ย. สัปดาหท ี่ 11 สัปดาหท่ี 2 อ 1ก.ค. 3 ก.ค. สปั ดาหท ่ี 12 11อ56-ก1.ย7.-18 11พ67ฤ-ก1.ย7. ศ25ก.ย. สปั ดาหที่ 3 สปั ดาหท ่ี 13 2จ1ก.ย. 23พก.ย. สปั ดาหท ่ี 4 หยดุ พฤ 1ส1 กค. สัปดาหท่ี 14 สัปดาหที่ 5 1-2-3 สัปดาหท ่ี 15 52อ9-2ก-.1ย0. 11พต2ฤ-.ค3.-9 9ศต.ค. สปั ดาหท่ี 6 9 กค ชดเชยจ 29 มิย. สปั ดาหท ่ี 16 5จต.ค. 7พต.ค. สปั ดาหท ี่ 7 จ13ก.ค. 1-2-3 สัปดาหที่ 17 สัปดาหท่ี 8 จห24พ1-ย5กดุ ฤ-.6ค. ศ17ก.ค. หอยดุ 81พ-51ฤต3.ค-1.6 สัปดาหท ่ี 9 อจ147ส0-8ส.ค-.9ค. . พ15ก.ค. 19จต.ค. 21พต.ค. หศยดุ อ1180-ส11.ค-.12 ศ224พ39-5กก-..6คค.. ศ31ก.ค. จ24ส.ค. พพ6ห7ส-ย8ฤ.ดุ ค-9. 1ศ4ส.ค. พ2100ฤ-ส11.ค-.12 พ26ส.ค. พ28ฤส.ค.

เขาช้นั เรียน 1.ตรงเวลา 2.สายไมเ กิน 15 นาที 3.สง งานตามกำหนด ไมม า ไมมคี ะแนน

หนว ยที่ 1 ความหมาย หลกั การ รปู แบบ และการสรางแอนิเมชันพ้นื ฐาน 1.ความหมาย คำวา แอนิเมชัน (Animation) มาจาก รากศพั ทภาษาละตินตรงกับคำวา “animare” หมายถึง การทำใหม ชี วี ติ (ววิ ัฒน มสี วุ รรณ. 2557: 11 (ออนไลน). สืบคน จาก https://fliphtml5.com/ccvx/x- oid/basic) แอนิเมชนั (Animation) หมายถงึ การสราง ภาพเคลือ่ นไหว (พจนานกุ รมอังกฤษ-ไทย: ศัพทบัญญตั ริ าชบณั ฑติ ยสถาน,2544 (ออนไลน). สืบคน จากhttps://dict.longdo.com/search/ani- mation) แอนิเมชนั (Animation) หมายถึง การทำให เคลื่อนไหว (องั กฤษ-ไทย: คลงั ศพั ทไทย สำนกั งานพฒั นาวทิ ยาศาสตรแ ละ เทคโนโลยีแหง ชาต,ิ 2534)(ออนไลน) . สืบคนจาก https:// www.nstda.or.th/th/nstda-knowledge/3016-animation) แอนิเมชัน (Animation) หมายถึง ความ มีชีวติ ความมีชวี ติ ชวี า ความกระตอื รือรน (แอพพลเิ คชนั พจนานกุ รมหลักของคนไทย,2558(ออนไลน). สืบคน จาก https://www.blognone.com/node/65619 [6 ก.ค.63]) สรปุ ไดวา แอนเิ มช่ัน หมายถงึ การทำใหภาพ มีชีวิ ิต และเคลอ่ื นไหวได

2. หลักการเกดิ ภาพเคลอ่ื นไหว ภาพนิง่ ทสี่ รางขนึ้ จะเคลอ่ื นไหว โดยการนำภาพนิง่ หลายๆ ภาพ มาฉายอยางตอเนอื่ งดวยความเร็วสงู ทำให เกิดภาพลวงตา เห็นวาภาพน้นั เคลือ่ นไหวได 1 เมือ่ เราฉายภาพนง่ิ อยางตอ เนือ่ ง ภาพทปี่ รากฎบน สายตาจะมลี ักษณะติดตา (Persistence of Vision) โดย ภาพแรกทฉ่ี าย สายตาจะจดจำภาพ และเม่อื ฉายภาพท่ี สอง พรอ มท้งั ฉายภาพลำดบั ตอ ไปอยางฉบั พลนั ทำให สมองของเราเช่ือมโยง ระหวางภาพแรก ภาพท่ีสอง ภาพ อ่นื ๆ ทำใหเกิดภาพลวงตา มองเห็นภาพนน้ั เคล่ือนไหวได ความเร็วของภาพเคล่ือนไหวจะฉายดวยความเรว็ ที่ตา งกันข้ึนอยูกับชนิดของการแสดงผล (output) เชน ภาพยนตรจะฉายดว ยความเร็ว 24 เฟรมตอ วินาที สว น การถายทอดในระบบ PAL จะฉายดว ยความเร็ว 25 เฟรม ตอวนิ าที และระบบ NTSC จะฉายดวยความเร็ว 29.97 หรอื 30 เฟรมตอวินาที สรุป หลกั การสรางภาพเคลือ่ นไหว คอื การนำภาพน่ิงหลายๆภาพมาแสดงตอเน่อื งกนั อยางฉบั พลนั เวลาของการจดจำภาพตดิ ตา สายตามนุษยจะจดจำภาพ แตละภาพทค่ี างไวในเรตนิ า ไวช่วั ขณะ knowlege หนึ่ง ซงึ่ เวลาของสายตาทจ่ี ดจำแตล ะ ภาพ จะใชเวลาประมาณ 1/15 วินาที

3. ประเภทของภาพเคล่ือนไหว ประเภทของภาพเคล่ือนไหว แบงได 2 ประเภท คือ 1. ภาพเคลือ่ นไหวแบบ 2 มิติ (2D Animation) คอื ภาพเคลือ่ นไหวแบบ 2 มิติ มองเห็นไดท้งั ความสงู และความกวาง ไมมคี วามลึก มีความเหมือนจรงิ เล็ก นอ ย และการสรางภาพจะไมส ลบั ซับซอ นมากนัก เชน ภาพ เคล่ือนไหวท่ปี รากฏตามเวบ็ ตางๆ รวมทั้ง Gif Animation

3.2 ภาพเคลื่อนไหวแบบ 3 มิติ (3D animation) ภาพที่มองเหน็ ความสงู ความ กวาง และความลึก มคี วามสมจรงิ และเหมือนจรงิ มาก ไดแ ก ภาพยนตรท ี่สรา ง จากสตดู ิโอพิกซาร (Disney Pixar)ของอเมรกิ า หรอื บรษิ ัทดรีมเวกิ สแอนิเมชนั เอสเคจี (Dreamwork) เรอื่ ง Frozen , Minion,NEMO เปน ตน https://www.sanook.com/movie/92695/

4.รูปแบบของภาพเคลอ่ื นไหว รปู แบบของภาพเคล่อื นไหว มี 4 แบบ คือ 1. แอนเิ มชนั แบบดง้ั เดิม (Traditional Animation, Hand Drawing Animation) คือ ภาพเคลอ่ื นไหวท่เี กดิ จากการวาดภาพทลี่ ะภาพ หลายๆ พนั ภาพ และฉายภาพเหลา น้นั ผา นกลอ งโดยใชเ วลาไมกี่ วินาที เชน 1 วินาที ใชรปู 24 ภาพ ภาพเคลื่อนไหวแอนเิ มชนั แบบดงั เดิม เปนภาพ เคลอ่ื นไหว สมัย แรกเร่ิมทีว่ าดดวยมือ ใชเทคนิคการวาดดว ยมือ ที ละแผน ขอดีของการทำภาพเคลอื่ นไหว คือ มคี วามเปน ศลิ ปะ สวยงามนาชม แตข อเสยี คอื ใชเ วลาในการผลิตมาก ตอ งมผี ูสรา ง ภาพเคลือ่ นไหว (Animator) จำนวนมาก และตน ทุนในการผลติ สูง

2. สตอปโมชนั (Stop Motion) หรอื โมเดลแอนิเมชนั (Model Animation) ภาพเคลอื่ นไหวประเภทน้ี ผูสรา งภาพเคลือ่ นไหวจะทำแบบ จำลอง (Model) และทำการถา ยภาพทลี ะภาพ ซ่งึ แตล ะภาพจะมี ทา ทางตา งกัน เรียกวา เฟรม จากนัน้ นำเฟรมมาเรียงตอกนั เปน ภาพ เคลอ่ื นไหว แบบจำลองอาจเปน ของเลน หรอื สรา งจากดนิ นำ้ มัน

3. การต นู แอนเิ มช่นั (Computer Animation) เปนภาพเคลอื่ นไหวในยคุ ปจ จุบนั โดยการใชโ ปรแกรมกราฟก ใน การสรางสรรคผ ลงานเชน โปรแกรม 3DS Max, Maya, Adobe flash เปนตน ขอดขี องการโปรแกรม คือ ทำไดงา ย และสะดวกในการแกไ ข การแสดงผล ประหยัดเวลา ลดตน ทนุ การผลติ และคณุ ภาพชัดเจนสีสันสวยงาม แบงออกเปน 2 ประเภท คือ การต นู แอนเิ มชั่น 2 มิติ, การต ูนแอนเิ มชนั 3 มติ ิ ผลงานแอนเิ มชันของนางสาว เรอ่ื ง การรณรงคก ารใชห อ งเรียนคอมพวิ เตอรอ ยา งถกู วธิ ี แผนกวชิ าออกแบบนเิ ทศศลิ ป วอศ.เสาวภา

4. ภาพกราฟกแบบเคลือ่ นไหว (Motion Graphic) คำวา motion แปลวา การเคล่ือนไหว และ graphic ศลิ ปะ แขนงหน่ึงทส่ี อื่ ความหมายดวยการใชเ สน เชน แผนภมู ิ แผนภาพ การต ูน ภาพกราฟก แบบเคลอื่ นไหว (Motion Graphic) คอื การสรา ง ภาพกราฟฟค ใหม กี ารเคลื่อนไหว ซึ่งตางกบั แอนิเมชัน (animation) คือ ภาพกราฟก แบบเคลอ่ื นไหว จะไมม ตี ัวละครเปนตัวดำเนนิ เรอื่ งหรอื มีบทพูด แตเ ปนการเคล่อื นไหวโดยการตัดฉากสลบั เหมือนภาพยนตร และสรา งการ เคลื่อนไหวใหก ับภาพกราฟก ตางๆ แทน รวมทัง้ ใชก ารพากยเ สียงบรรยาย ประกอบ ภาพกราฟก แบบเคลอ่ื นไหวประเภทนี้ นยิ มใชกับเร่อื งราวท่ีมี ขอ มลู เยอะเขา ใจยาก ใหอ อกมาในรูปเเบบทสี่ นกุ และเขาใจงายมากขนึ้ https://mrmeestudio.com/portfolio/motion-graphic-milday/

โปรแกรมสรางงานแอนิเมชนั 1.โปรแกรม Adobe Flash หรอื หรือ Adobe Animate 2.Web brower : Powtoon เปน ซอฟตแวรแ อนิเมชันบนคลาวดส ำหรบั การสรา งงานนำเสนอ แบบเคลอ่ื นไหวและวดิ ีโอแอนนิเมช่นั

พ้ืนฐานการสรา งภาพเคลอื่ นไหว การนำภาพน่งิ หลายๆ ภาพมาแสดงตอเนื่องกนั อยา งฉบั พลนั ซง่ึ ภาพแตล ะภาพ เราเรียกวา เฟรม (Frame) ในการสรางงานแอนิเมชัน เราจะแสดงภาพ หรือเฟรม จำนวน 24 ภาพ ตอ หนึ่งวนิ าที ใชเ ปนระบบ มาตรฐานของภาพยนตร ดังนั้น การสรางแอนเิ มชนั 1 วินาที เราวาด ภาพน่งิ จำนวน 24 ภาพ หรือการสรา งแอนเิ มชนั 5 วนิ าที เราวาดภาพ 120 ภาพ

ขัน้ ตอนการสรางภาพเคล่ือนไหว 1. ศึกษาหัวขอ เร่อื งท่ีไดร ับมอบหมาย 2. ออกแบบแนวคดิ ดวย Mind mapping 3. วาดภาพสตอร่บี อรด 4. ตรวจผลงาน (คร)ู 5. สรางสรรคในโปรแกรมกราฟก การออกแบบแนวคิดแผนผังความคิด Mind mapping แผนผงั ความคดิ (Mind mapping) คือ เคร่อื งมือในการชว ยคดิ และจดบนั ทึก โดยการ ถายทอดความคิดหรือขอ มูลออกมาเปนแผนภาพ (Visual Tools) แบบเปน รศั มีโดยมหี วั ขอ หลักหรือ เรื่องทสี่ นใจเปน จุดศนู ยก ลาง จากนัน้ แตกประเด็น เปน หวั ขอ ยอยออกรอบๆ เชอื่ มโยงดวยภาพ สี และ เสน ตามลำดับ

ข้ันตอนการสรา งMแiผnนdผMงั คaวpาpมiคnดิg 1. เริม่ ดว ยภาพสตี รงกง่ึ กลางหนากระดาษ 2. เขียน/วาด หัวขอรองทส่ี มั พนั ธกบั หวั ขอ หลกั ไปรอบ ๆ 3. คดิ อะไรออกใสภาพใหมากทสี่ ดุ โดยใสภ าพกอนคำหรอื รหสั หรอื ใสส ัญลักษณ เพือ่ การสื่อความหมายเปนตวั แทนความคดิ คิดแตกยอย 4. เขียน/วาด หัวขอยอยท่สี ัมพนั ธกบั หวั ขอ รอง แตกออกไปเรอ่ื ย ๆ โดยใชภาพ

ข้นั ตอนการวาดภ(SาtพoสrตyอBรoี่บaอrรdด ) สตอร่ีบอรด คอื การวาดภาพแสดงลำดบั ข้ันตอน ตามเนื้อเรื่อง และรายละเอียดของภาพ ไดแ ก คำอธิบาย ขอความ รูปภาพ ภาพเคล่อื นไหว เสยี ง วดิ โี อ ส่ิงสำคญั ที่อยูภ ายในสตอรบ่ี อรด ประกอบดว ย 1. ตัวละคร หรอื ฉาก : ตวั ละคร คน สัตว ส่งิ ของ สถานที่ หรอื ตวั การต ูน และทสี่ ำคญั คอื พวกเขากำลงั เคลื่อนไหว อยางไร 2. มุมกลอง ขนาดภาพ มุมภาพ และการเคลือ่ นกลอ ง 3. เสยี งการพดู กนั ระหวา งตัวละคร มเี สยี งประกอบหรอื เสยี งดนตรีอยา งไร

การวาดภาพสตอรร ่ีบอรด เรื่อง ไขอะไรเอย ภาพท่3ี ผลงานการสรา งแอนเิ มชันของนางสาว แผนกวิชาออกแบบนิเทศศลิ ป วอศ.เสาวภา

กจิ กรรม ใหน กั เรียนออกแบบงานแอนิเมชน่ั 2 เร่ือง เรื่องละ 1 วนิ าที หวั ขอ อะไรอยใู นไข หวั ขอ อิสระ นกั เรยี นสง งานปฏบิ ตั ิอะไรบา ง 1. Mind mapping 2 เรอื่ ง 2. วาดภาพสตอรบ่ี อรด 2 เร่อื ง

แผนผังความคิด ชื่อ.................นามสกลุ ...................... ชัน้ ..............เลขท.ี่ ........................... ไขอะไรเอย

แผนผงั ความคดิ ชื่อ.................นามสกุล...................... ชัน้ ..............เลขที.่ ...........................

การวาดภาพสตอรร ี่บอรด เรื่อง ไขอ ะไรเอย ช่อื .................นามสกลุ ...................... ชน้ั ..............เลขท่.ี ...........................

การวาดภาพสตอรร่บี อรด เร่อื ง.................... ชอื่ .................นามสกลุ ...................... ชั้น..............เลขที.่ ...........................