เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/unit1.pdf ·...
TRANSCRIPT
![Page 1: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit1.pdf · ประเภทของ Animation Animation สามารถแบ่งออกได้เป็น](https://reader033.vdocuments.pub/reader033/viewer/2022041612/5e3895e22dab521ec92fbf38/html5/thumbnails/1.jpg)
เอกสารประกอบการสอน
คอมพวเตอรกราฟกประเภทการสรางภาพเคลอนไหว
(Computer Graphics for Animation)
แผนการสอนท 1
ความรทวไปเกยวกบคอมพวเตอรกราฟกเพอการสรางภาพเคลอนไหว
จดประสงคการเรยนร
1. นกเรยนมความรความเขาใจเกยวกบคอมพวเตอรกราฟกเพอการสราง
ภาพเคลอนไหว
2. นกเรยนสามารถอธบายเกยวกบความหมาย ประเภท และองคประกอบ
ของคอมพวเตอรกราฟกได
![Page 2: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit1.pdf · ประเภทของ Animation Animation สามารถแบ่งออกได้เป็น](https://reader033.vdocuments.pub/reader033/viewer/2022041612/5e3895e22dab521ec92fbf38/html5/thumbnails/2.jpg)
ความหมายของคอมพวเตอรกราฟก
คอมพวเตอร (computer) มาจากภาษาลาตน Computare หมายถง เครองค านวณ
อเลกทรอนกสโดยวธทางคณตศาสตร ประกอบดวยฮารดแวร (สวนตวเครองและอปกรณ)
และซอฟตแวร (สวนชดค าสงหรอโปรแกรมทสงใหคอมพวเตอรท างาน) สามารถท างาน
ค านวณผลและเปรยบเทยบคาชดค าสงดวยความเรวสงอยางตอเนองและอตโนมต
กราฟก (Graphic) หมายถง การแสดงภาพดวยระบบคอมพวเตอร เชน โปรแกรมวาด
ภาพ โปรแกรมระบายสภาพ เปนตน โดยโปรแกรมเหลานจะเกบภาพไวในรปของสตร
คณตศาสตรหรอจดภาพ
คอมพวเตอรกราฟก หมายถง การสรางและการจดการภาพกราฟกโดยใช
คอมพวเตอร การใชคอมพวเตอรสรางภาพ การตกแตงแกไขภาพหรอการจดการเกยวกบ
ภาพ เชน ภาพยนตร วดทศน การตกแตงภาพถาย การสรางภาพตามจนตนาการและการใช
ภาพกราฟกในการน าเสนอขอมลตาง ๆ เพอใหสามารถสอความหมายใหชดเจนและท าความ
เขาใจไดงายวาเดม เชน การน าเสนอขอมลดวยแผนภาพหรอกราฟ แทนทจะเปนตารางตวเลข
ปจจบนมการใชคอมพวเตอรกราฟกกบงานในหลายๆ ดาน ไดแก งานดานการศกษา งานดาน
ธรกจ งานดานการออกแบบ งานดานบนเทงและงานดานการแพทย เปนตน
ประเภทของงานกราฟกบนเครองคอมพวเตอร
พนฐานของงานกราฟกบนเครองคอมพวเตอร แบงภาพออกเปน 2 รปแบบ คอ
1. Raster Graphic หรอ Bitmap
เปนพนฐานการจดเกบรปภาพ โดยการแบงภาพออกเปนตารางเลกๆ คลาย
กบการแปลอกษร โดยในหนงตารางจะมหนวยเปน Pixel ท าหนาทจดเกบส 1 ส ภาพ Bitmap
จงมขนาดใหญ ตองการพนทในการจดเกบมาก ขอดของภาพ Bitmap คอ สามารถเกบ
รายละเอยดของภาพไดเปนอยางด ตวอยางของไฟลฟอรแมตทเปนแบบ Raster Graphic คอ
ไฟลทมนามสกล .BMP , .JPG , .GIF หากเราขยายภาพทเปน Raster หรอ Bitmap จะเหนวา
ภาพเปนหยกเหนจดสชดเจน
![Page 3: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit1.pdf · ประเภทของ Animation Animation สามารถแบ่งออกได้เป็น](https://reader033.vdocuments.pub/reader033/viewer/2022041612/5e3895e22dab521ec92fbf38/html5/thumbnails/3.jpg)
ภาพท 1.1 รปภาพแบบ Raster Graphic หรอ Bitmap เมอขยายภาพจะมลกษณะเปนหยก จดสเหลยม
ทมา : ภาพตวอยางงานวชาคอมพวเตอรเพอศลปะ 1
2. Vector Graphic
เปนรปแบบในการสรางภาพแบบเชงคณตศาสตร ภาพทงหมดจะเกบอยใน
รปแบบเชงคณตศาสตรแทนการเกบดวยคาชดสของจด Pixel จงท าใหภาพในลกษณะ Vector
นมขนาดเลก สามารถยอหรอขยายภาพเทาใดกไดโดยไมท าภาพเสยคณภาพหรอแตกเปน
หยกเหมอนภาพแบบ Bitmap
ภาพท 1.2 รปภาพแบบ Vector Graphic เมอเราขยายภาพจะไมเสยคณภาพหรอแตกเปนหยก
ทมา : สรางภาพดวยโปรแกรม Illustrator นางสาวไพรนทร ชมมะล
![Page 4: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit1.pdf · ประเภทของ Animation Animation สามารถแบ่งออกได้เป็น](https://reader033.vdocuments.pub/reader033/viewer/2022041612/5e3895e22dab521ec92fbf38/html5/thumbnails/4.jpg)
ความหมายของภาพเคลอนไหว (Animation)
แอนเมชน (animation) รวมทงค าวา animate และ animator มาจากรากศพทภาษา
ลาตนวา “animare” ซงมความหมายวา ท าใหมชวต
ภาพเคลอนไหว (Animation) หมายถง การสรางภาพเคลอนไหวโดยการฉายภาพนง
หลายๆ ภาพตอเนองกนดวยความเรวทเหมาะสม (เฟรม/วนาท) หลกการจะคลายกบการฉาย
ภาพยนตร แตภาพยนตรจะเปนการใชฟลม โดยทแตละเฟรมของฟลมกจะเปนภาพนง เมอ
น ามาฉายภาพตอเนองกนดวยความเรว 24 เฟรมตอวนาท กจะท าใหเกดภาพเคลอนไหวท
เรยกวาภาพยนตร
ประเภทของ Animation
Animation สามารถแบงออกไดเปน 3 ประเภท ไดแก
1. Draw Animation คอ แอนเมชนทเกดจากการวาดภาพหลายๆ พนภาพ แตการฉาย
ภาพเหลานนผานกลองอาจใชเวลาไมกนาท
ขอดของการท าแอนเมชนแบบนคอ มความเปนศลปะ สวยงาม นาด แตขอเสยคอตอง
ใชเวลามากในการผลต ตองใชแอนเมเตอร (ผท างานแอนเมชน) จ านวนมากและเสยคาใชจาย
มากตามไปดวย
ตวอยางภาพวาดของ Draw Animation : ทมา https://sites.google.com/site/suththiphong/kerd-khwam-
ru/2d-animation
![Page 5: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit1.pdf · ประเภทของ Animation Animation สามารถแบ่งออกได้เป็น](https://reader033.vdocuments.pub/reader033/viewer/2022041612/5e3895e22dab521ec92fbf38/html5/thumbnails/5.jpg)
2. Stop Motion หรอ Model Animation เปนการถายภาพทกจงหวะของหนจ าลองท
คอยๆ ขยบ อาจเปนของเลนหรอตวละครจาก Plasticine วสดทคลายกบดนน ามน โดยโมเดล
ทสรางขนมาสามารถสามารถน ามาใชไดอกหลายครงและยงสามารถผลตไดหลายตว ท าให
สามารถถายท าไดหลายฉากในเวลาเดยวกน แตการท า Stop Motion นนตองอาศยเวลาและ
การทมเทมาก
ตวอยางการสราง Stop Motion
ทมา : http://www.instructables.com/id/Make-A-Stop-Motion-Animation-For-Beginners/
ตวอยางการสราง Stop Motion
ทมา : https://diy.org/skills/legomaster/challenges/1604/make-a-lego-stop-motion
![Page 6: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit1.pdf · ประเภทของ Animation Animation สามารถแบ่งออกได้เป็น](https://reader033.vdocuments.pub/reader033/viewer/2022041612/5e3895e22dab521ec92fbf38/html5/thumbnails/6.jpg)
3. Computer Animation คอ การใชโปรแกรมคอมพวเตอรชวยในการสราง
งานแอนเมชน ซงปจจบนมซอฟตแวรทใชสรางงานแอนเมชนมหลายโปรแกรม เชน Maya ,
Flash และ 3D Studio Max เปนตน วธนเปนวธทประหยดเวลาการประผลตและประหยด
คาใชจายมาก เชน การสรางภาพยนตรเรอง Toy Story ใชแอนเมเตอรเพยง 110 คนเทานน
ภาพตวอยางภาพยนตรเรอง Toy Story ทมา :
https://th.wikipedia.org/wiki/%E0%B8%97%E0%B8%AD%E0%B8%A2_%E0%B8%AA%E0%B8%95%
E0%B8%AD%E0%B8%A3%E0%B8%B5%E0%B9%88
ขนตอนการสรางภาพเคลอนไหว
การท าภาพเคลอนไหว หรอ Animation อาจมหลายขนตอนขนอยกบความซบซอน
ของชนงาน เราควรมองการสรางภาพเคลอนไหวเปนการสรางหรอน าองคประกอบตางๆ เขา
มารวมกน แลวก ากบใหเกดการเคลอนไหวและตอบโตกบผใช จากนนจะเปนการเผยแพร
ตอไป โดยการจดท าภาพเคลอนไหวมขนตอนตางๆ ดงน
![Page 7: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit1.pdf · ประเภทของ Animation Animation สามารถแบ่งออกได้เป็น](https://reader033.vdocuments.pub/reader033/viewer/2022041612/5e3895e22dab521ec92fbf38/html5/thumbnails/7.jpg)
ขนตอนท 1 การวางโครงเรองชนงาน
เปนการวางแผนวาตองการใหภาพเคลอนไหวของเราออกมาแบบไหน ม
วตถประสงคการท างานเปนอยางไร ซงสงทคดไดจะถกรวมรวมเปนโครงรางคราวๆ ทเรยกวา
“Storyboard” หากเปนงานทมการโตตอบกบผใชอาจจะมการรางหนาจอคราวๆ และแสดง
การเชอมโยงระหวางกนดวย
ภาพท 1.3 ภาพ Storyboard น.ส.สภาศร รงเรอง นกเรยนระดบชน ปวช.2/1
ขอดของการจดท า Storyboard คอ จะชวยใหเราคดงานอยางมระบบ ในกรณ
ทชนงานมความซบซอนและตองใชทมงานสรางหลายคน การใช Storyboard ในการสอสารจะ
ชวยใหทกคนเขาใจวตถประสงคและรายละเอยดการท างานของชนงานไดงายขน
![Page 8: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit1.pdf · ประเภทของ Animation Animation สามารถแบ่งออกได้เป็น](https://reader033.vdocuments.pub/reader033/viewer/2022041612/5e3895e22dab521ec92fbf38/html5/thumbnails/8.jpg)
ขนตอนท 2 การจดเตรยมองคประกอบชนงาน
การจดเตรยมองคประกอบชนงาน เปนขนตอนตอจากการวางโครงเรอง
ชนงาน เปนการก าหนดวาเราตองเตรยมอะไรบางเพอน ามาประกอบกนเปนชนงาน เรา
สามารถวาดภาพโดยใชเครองมอใน Flash หรอวาดภาพจากโปรแกรมอนๆ เชน Photoshop ,
Illustrator แลวน าไปใชใน Flash กได นอกจากภาพนงแลว เรายงสามารถน าไฟลเสยงและไฟล
วดโอ เพอน ามาประกอบในชนงานของเราดวยกได
ภาพท 1.4 ตวอยางไฟลภาพ
ภาพท 1.6 ตวอยางไฟลเสยง
ภาพท 1.5 ตวอยางไฟลวดโอ
![Page 9: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit1.pdf · ประเภทของ Animation Animation สามารถแบ่งออกได้เป็น](https://reader033.vdocuments.pub/reader033/viewer/2022041612/5e3895e22dab521ec92fbf38/html5/thumbnails/9.jpg)
ขนตอนท 3 การสรางชนงานและการทดสอบการท างาน
หลงจากทเราเตรยม Storyboard เตรยมภาพ เสยง วดโอ เพอประกอบ
ชนงานแลว กมาถงขนตอนการสรางงานจากโปรแกรมส าหรบสรางภาพเคลอนไหวเพอสราง
เปนชนงานและทดสอบการท างานเพอใหตรงตามวตถประสงค
ภาพท 1.7 ตวอยางการสรางงานภาพเคลอนไหวดวยโปรแกรม Adobe Flash
ขนตอนท 4 การแปลงชนงานเปนไฟลส าหรบเผยแพร
ขนตอนสดทายของการสรางงาน Animation คอการพบลช (Publish) ชนงานท
สรางเสรจสมบรณแลวเปนไฟลมฟวหรอเปนไฟลในรปแบบทตองการ เพอน าไปเผยแพรตอไป
ภาพท 1.8 ตวอยางงาน Animation
ทแสดงดวย Flash Player
![Page 10: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit1.pdf · ประเภทของ Animation Animation สามารถแบ่งออกได้เป็น](https://reader033.vdocuments.pub/reader033/viewer/2022041612/5e3895e22dab521ec92fbf38/html5/thumbnails/10.jpg)