โครงการอกแบบ Animation สำหรับเด็ก by Pirachat Petchdee

My Name is “Manoch Petchdee” รหัสนักศึกษา 5021302053 สาขาวิชาศิลปกรรม (ออกแบบนิเทศศิลป) คณะมนุษยศาสตรและสังคมศาสตร มหาวิทยาลัยราชภัฎจันทรเกษม E-mail: Manoch.pd@gmail.com

วัตถุประสงคการออกแบบสื่อแอนิเมชั่น - เพื่อการศึกษาขอมูลตางๆ และขั้นตอนของการออกแบบภาพเคลื่อนไหว (Animation) - เปนการพัฒนาการสอนสำหรับเด็กใหมีความทันสมัยรับกับเทคโนโลยีที่มีความทันสมัย - เพื่อศึกษากระบวนการออกแบบที่สามารถ นำไปใชงานไดจริง แนวความคิดในการออกแบบ 1.เพื่อพัฒนางานการออกแบบภาพเคลื่อนไหวใหดียิ่งขึ้น 2.เพื่อใชเปนสื่อการเรียนการสอนสำหรับเด็กประถมศึกษา สำหรับคอมพิวเตอรแบบพกพา (Teblet) 3.เพื่อนำผลงานการออกแบบ นำไปใชงานไดจริง ดำเนินการออกแบบภายใตกระบวนการ 3ส.(3R) 1.สืบคนขอมูล Research -ศึกาษาหาขอมูลงานออกแบบภาพเคลื่อยไหว (Animation) 2.สมมุติฐาน Resume -Pre-production เขียนเรื่องยอ,กำหนดตัวละคร Story board 3.สรุปผล Result -นำเสนอผลงานในรูปแบบสื่อ สำหรับออนไลน

PRE-PRODUCTION แรงบันดาลใจ ( Inspiration )

เกิดจากการที่เห็นวาเมื่อมีสะพานลอยอยูใกลๆ กับทางมาลายนั้นคนสวนมากคิดที่จะขาม ทางมาลายแทนการขามสะพานลอย เพราะสะดวกกวาและเร็วกวา จนลืมไปวาสะพานลอยทีส่ ราง มานั้น ไมใชมีไวเพื่อกันแสงแดดเวลาขามถนนแตก็สรางมาเพื่อที่จะลดอันตรายที่จะเกิดขึ้นกับ คนทุกๆ คนจึงอยากจะปลูกฝงและสอนกับเด็กๆ ใหเริ่มคิดเสียใหมเพื่อที่จะไดลดอุบัติเหตุใหนอย ลงและเกิดความปลอดภัยมากขึ้น จึงทำมาเปนการตูน Animation เพื่อที่จะทำใหเด็กเขาใจงาย และทำใหตัวของเด็กเองมีความสนใจมาขึ้น

โครงเรื่อง ( Theme )

“ ขามทางมาลายหรือจะขามสะพานลอย อยางไหนปลอดภัยกวากัน “

เนื้อเรื่อง ( Story )

เปนเรื่องราวของเด็กชาย 2 คน (ในที่นี้จะใหชื่อวา “นองหมาก” กับ “นองบอย”)

ที่เดินมาเจอกันพอดีแลวก็ไดพูดถึงรานของเลนซึ่งเปดใหมที่ฝงอยูตรงขามถนน จึงไดชวนกันไป เดินเลนกันที่รานขายของที่เปดใหมอีกฝง เด็กทั้ง 2 จึงไดคุยกันวาเราจะ ขามถนนไปยังไงดี “นองบอย” บอกวาตองการที่จะขามถนนไปยังราน โดยการขามทางมาลายซึ่งมีทางมาลายที่อยู ทางหนารานพอดีแต ”นองหมาก” ก็บอกกับ “นองบอย” วากับบริเวณใกลๆกับทางมาลายนั้น ก็มีสะพานลอยอยูใกลๆ กันเด็กทั้ง 2 ซึ่งนาจะปลอดภัยกวา เพราะบริเวณนี้ไมคอยมีผูใหญ เดินผานเทาไหรนัก แถมรถแถวนี้ยังเยอะและขับเร็วอีก เด็กทั้ง 2 จึงเริ่มถกเถียงกันวาจะขาม ทางมาลายหรือจะขามสะพานลอยจึงจะปลอดภัยกวาจนในทีส่ ดุ ก็ไดขอ ตกลงกันวาตัว”นองบอย” จะข า มทางม า ยลายซึ ่ ง เร็ ว กว า แต ” น อ งหมาก”ขอที ่ จ ะเดิ น ไปข า มสะพานลอยดี ก ว า ขณะที่”นองบอย”ไดขามถนนไปแลวนี่เอง ก็ไดมีรถวึ่งมาเร็วมากเกิดเฉี่ยวเขาพอดี แตตอนนั้น นองหมากไดเดินขึ้นสะพานลอยมาถึงรานอยางปลอดภัยแลว

บท ( Script )

Scene#1 มุมกลองแบบ ELS

เปนฉากเริ่มตนเรื่องใชภาพที่มีมุมกวางแสดงใหเห็นถึงเมืองที่มีการจราจรคับคั่ง แลวคอยซูมเขาเขาใบบริเวณที่จะเขาสู Sence ที่ 2

Scene#2 มุมกลองแบบ ELS + MS

เปนฉากที่เด็กทั้ง 2 เดินมาเจอกัน โดยใชมุมกลองแบบ ELS แลวคอยตัดมาเปนแบบ MS ในฉากที่กำลังสนนทนากันอยู

Scene#3 มุมกลองแบบ MS

เปนฉากที่ตัดใหเห็นรานขายของที่เปดใหมโดยที่รอบๆบริเวณรานถูกทำในเบลอเพื่อที่จะได เห็นวารานนี้เปนจุดเดนกวารานอื่น

Scene#4 มุมกลองแบบ LS

ตัดมาเปนฉากที่ นองบอยกำลังรอที่จะขามถนนซึ่งบริเวณนั้นมีรถวิ่งอยูมาก

Scene#5 มุมกลองแบบ LS

นองหมากเรียกนองบอย เพราะเห็นวาใกลๆกันนั้นมีสะพานลอยอยู

Scene#6 มุมกลองแบบ LS

แสดงใหเห็นวามีรถวิ่งอยูเยอะมากและวิ่งเร็วดวย

Scene#7 มุมกลองแบบ MS

ตัดกลับมาเปนฉากที่กำลังสนทนากันดวยสีหนาทีก่ ำลังโมโห เพราะกำลังเถียงกันอยู

Scene#8 มุมกลองแบบ LS

เปนฉากที่ตกลงกันไดแลววานองบอยจะขามทางมาลาย สวนตัวนองหมากก็เดิน จากไปเพื่อที่จะไปที่สะพานลอย

Scene#9 มุมกลองแบบ MS

ตัดภาพมาทีน่ อ งบอยกำลังเดินขามถนนแลวก็มรี ถวิง่ มาแลวเบรคดังมากแลวก็ตดั ภาพไปเลย

Scene#10 มุมกลองแบบ LS

เริม่ จากเสียงไซเรน แลวคอยๆ Fade ภาพเขามาเปนรถพยาบาลวิง่ เขามาจอด สวนดานหลัง รถพยาบาลมีนอ งหมากยืนอยูห นารานขายของ แลวซูม IN ภาพทัง้ หมดเพือ่ ตัดเขาสู END CREDIT **อธิบายมุมกลอง ELS คือ ( Extreme Long Short ) เปนมุมภาพที่ใหเห็นบรรยากาศรอบขางอยางชัดเจน LS คือ ( Long Short ) เปนมุมภาพที่บอกวาตัวละครอยูสถานที่ใด MS คือ ( Medium Short ) เปนภาพครึ่งตัวของตัวละคร

STORY BOARD

การออกแบบตัวละคร ( Characters Design ) แบบ Sketch ตัวละคร คราวๆ

หลังจากทีไ่ ดแบบทีเ่ ราตองการแลว ก็นำมาพัฒนาตอ

Characters Design 1 หลังจากทีไ่ ดแบบ1และแบบที่ 3 แลว ก็นำมาพัฒนาตอ

Characters Design 2 ก็จะไดตวั ละครทีจ่ ะใชในเรือ่ ง Characters Design 3

หลังจากทีไ่ ดตวั ละครแลวเราก็นำตัวละครทีไ่ ดแยกเปนสวนๆแลว Export ไฟล แตละสวนเปน .swfเพื่อที่จะนำไฟลมาทำในโปรแกรม Flash เพื่อที่จะเวลาเราจะ ขยับสวนตางๆ สามารถทำไดอยางสะดวกขึ้น

**ตัวละครเขียนขึน้ จากโปรแกรม Illustartors หลังจากทำเสร็จแลวกอน Export ใหทำการ ยกเลิก Storke ตางๆ เพือ่ ทีเ่ วลาเรายอ-ขยายชิน้ สวนตางๆ แลว ตัวเสนจะไดมขี นาดเทากันกับที่ เราเขียนไวตั้งแตตนโดยการไปที่ Opject-Path-Outline Storke

อุปกรณประกอบฉาก ( Prop )

หลังจากทีเ่ ราเขียน Story Board และสราง Characters แลว ตองมาสรางอุปกรณตา งๆ หรือ Prop ตางๆ เพือ่ ทีจ่ ะทำให ฉาก หรือ Scene นัน้ ๆ มีความสมจริงมากขึน้ โดยการสรางนัน้ ทำโดยการเขียนขึน้ มาทีละอยาง โดยใชโปรแกรมทีเ่ ขียนเปน Vector เพราะจะไดไฟลทม่ี คี วามคม ชัดมากขึน้ โดยอาจจะวาดชิน้ งานใหมขี าดใหญกวา ตัวงานจริง เพือ่ ทีเ่ วลาเรา Export ไฟลไป เผือ่ เวลาทีเ่ ราขยายไฟลจะไดไมแตกเปน Pixel โดยทีเ่ วลา Export ไฟล ใหเปน .PNG 24 ไฟลจะ ไดมคี วามคมชัดมากขึน้

หลังจากทำอุปกรณประกอบฉากเสร็จทัง้ หมดแลว ก็ลองเอาทัง้ มาใสใน Story Board ทีน่ ก้ี ็ จะเห็นจาก Story Board สีขาว-ดำจากจินตนาการและความคิด มาทำใหเปน Story Board ทีเ่ ปน เรือ่ งราวจริงๆ ทีจ่ ะผลิตในขัน้ ตอนตอไป

จบขัน้ ตอนการ PRE-PRODUCTION ______________________

หลังจากที่เตรียมความพรอมในการทำการตูน Animation แลวก็มาเขาสูขั้นตอน การทำAnimation โดยใชขนาดโดย Stage หรือตัวงานอยูที่ 720x540 Pixels โดยกำหนด Frame อยูที่ 25fps. เพื่อความไหลลื่นของเฟรม และสะดวกในการคำนวนดวยวาเราตอง การใหตัวละครขยับในเวลาเทาไหร

โดยการทำงานจะแยกการทำงานตางเปนทีละ Scene หรือถาบางซีนมีรายละเอียดเยอะ มากก็จะยอย Scene ลงไปอีก แลวคอยๆ นำแตละซีนทีเ่ ราทำมาประกอบกันอีกทีในซีนหลักโดย การเลือกทีค่ ำสัง่ Insert-Scene หลังจากทีเ่ อา Scene ตางๆมารวมกันแลวถาเราจะแกไขซีน ตางๆก็กด Shift+F2 แลวเลือกซีนน้ั เพือ่ ทีจ่ ะทำการแกไข

การทำงานใน Scene#Title

Scene#1 มุมกลองแบบ ELS เปนฉากเริม่ ตนเรือ่ งใชภาพทีม่ มี มุ กวาง แสดงใหเห็นถึงเมืองทีม่ กี ารจราจรคับคัง่ แลวคอยซูมเขาเขาใบบริเวณที่ จะเขาสู Sence ที่ 2

Scene#2 มุมกลองแบบ ELS + MS เปนฉากทีเ่ ด็กทัง้ 2 เดินมาเจอกัน โดยใชมมุ กลองแบบ ELS แลวคอยตัด มาเปนแบบ MS ในฉากทีก่ ำลังสนนทนา กันอยู

Scene#3 มุมกลองแบบ MS เปนฉากที่ตัดใหเห็นรานขายของที่เปด ใหมโดยที่รอบๆ บริเวณรานถูกทำใน เบลอเพื่อที่จะไดเห็นวารานนี้เปนจุด เดนกวารานอื่น

Scene#4 มุมกลองแบบ LS ตัดมาเปนฉากที่ นองบอยกำลังรอที่จะขามถนน ซึ่งบริเวณนั้นมีรถวิ่งอยูมาก

Scene#5 มุมกลองแบบ LS นองหมากเรียกนองบอย เพราะเห็นวาใกลๆ กันนั้นมีสะพานลอยอยู

Scene#6 มุมกลองแบบ LS แสดงใหเห็นวามีรถวิง่ อยู เยอะมากและวิง่ เร็วดวย

Scene#7 มุมกลองแบบ MS ตัดกลับมาเปนฉากทีก่ ำลัง สนทนากันดวยสีหนาทีก่ ำลังโมโห เพราะกำลังเถียงกันอยู

Scene#8 มุมกลองแบบ LS เปนฉากทีต่ กลงกันไดแลววา นองบอยจะขามทางมาลาย สวนตัวนองหมากก็เดินจากไป เพือ่ ทีจ่ ะไปทีส่ ะพานลอย

2 10

Scene#9 มุมกลองแบบ MS ตัดภาพมาทีน่ อ งบอยกำลังเดินขามถนน แลวก็มรี ถวิง่ มาแลวเบรคดังมาก แลวก็ตดั ภาพไปเลย

Scene#10 มุมกลองแบบ LS เริม่ จากเสียงไซเรนแลวคอยๆ Fade ภาพเขามาเปนรถพยาบาลวิง่ เขามาจอด สวนดานหลังรถพยาบาลมีนอ งหมากยืนอยู หนารานขายของแลวซูม IN ภาพทัง้ หมด เพือ่ ตัดเขาสู END CREDIT

Scene#END CREDIT นองหมากเรียกนองบอย เพราะเห็นวาใกลๆ กันนั้นมีสะพานลอยอยู

สวนการใส Sound Effect ตางๆ Download ไดจาก http://www.ﬂashkit.com/ ซึ่งมี Sound Effect หลายแบบ ทั้ง Sound FX และ Sound Loop สวนตัวโปรแกรมที่ใชในการตัด-ตอเสียงนั้น เปนโปรแกรมที่มีชื่อวา Cool edit Pro เปนโปรแกรมที่ใชสำหรับการบันทึกเสียง การแกไข ตัด - ตอเสียง ในระดับมืออาชีพ สามารถทำการปรับแตงเสียง ใสเอฟเฟคตางๆ เชน การทำเสียงกอง (Reverb) การทำ เสียงสะทอน (Echo) ซึ่งมีเครื่องมือตางๆใหเลือกใชงานมากมาย สามารถบันทึกเปนไฟล ไดหลายรูปแบบ เชน WAV , WMA , MP3 , RM , AVI , OGG และอื่นๆ **ที่มาและคูมือสอนการใชงาน http://lms.ubru.ac.th/ﬁle.php/1/Manual_Cooledit.pdf

วิธีการใสเสียงคือสราง Layer มา 1 Layer ทำการกด Insert Keyfremes (F6) แลวคำสั่ง File-Import-Import to Library แลวเลือก Property เลือกตรง Sound-Nameแลวเปลี่ยน จาก None เปนเสียงที่เราจาะใส

2 12