14
176 บทที10 การนาเสนอผลงานมัลติมิเดีย ประเภทของงานนาเสนอมัลติมิเดีย การสร้างผลงานมัลติมิเดียเพื่อนําไปใช้งาน โดยปกติการสร้างไฟล์จะมีสองรูปแบบคือ With Runtime และ With Runtime รูปแบบการนําเสนอผลงานเราแบ่งได้เป็น 2 ประเภทใหญ่ๆ คือ 1. การแสดงผลงานบน Windows ซึ่งสามารถสร้างไฟล์ไปแสดงได้ 2 แบบคือ a. With Runtime คือการสร้างไฟล์ .exe ซึ่งไฟล์ประเภทนี้ได้รวมตัว run-time เพื่อที่เราจะ สามารถนําไปใช้งานในที่ต่างๆ ที่ไม่มีตัว run-time ของโปรแกรม Adobe Flash Profressional ติดตั้งอยู่ได้ แต่ไฟล์ที่ได้จะมีขนาดที่ใหญ่กว่าไฟล์ประเภท Without Runtime

บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

176

บทที่ 10 การน าเสนอผลงานมัลติมิเดีย

ประเภทของงานน าเสนอมัลติมิเดีย

การสร้างผลงานมัลติมิเดียเพ่ือนําไปใช้งาน โดยปกติการสร้างไฟล์จะมีสองรูปแบบคือ With Runtime

และ With Runtime

รูปแบบการนําเสนอผลงานเราแบ่งได้เป็น 2 ประเภทใหญ่ๆ คือ

1. การแสดงผลงานบน Windows ซึ่งสามารถสร้างไฟลไ์ปแสดงได้ 2 แบบคือ

a. With Runtime คือการสร้างไฟล์ .exe ซึ่งไฟล์ประเภทนี้ได้รวมตัว run-time เพ่ือที่เราจะ

สามารถนําไปใช้งานในที่ต่างๆ ที่ไม่มีตัว run-time ของโปรแกรม Adobe Flash

Profressional ติดตั้งอยู่ได้ แต่ไฟล์ที่ได้จะมีขนาดที่ใหญ่กว่าไฟล์ประเภท Without

Runtime

Page 2: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

177

b. Without Runtime คือสร้งไฟล์ .swf ซึ่งไฟล์นี้จะใช้งานได้ก็ต่อเมื่อเครื่องคอมพิวเตอร์ของ

เรามีโปรแกรมท่ีเล่น .swf (นั่นคือ Flash Player) หรือไม่งั้นเราก็เตรียมตัวโปรแกรมที่จะใช้

ไปเพิ่ม แต่ข้อดีก็คือไฟล์ที่ได้จะมีขนาดที่เล็ก

2. การแสดงผลงานผ่านทาง Web Page โดยเครื่องที่จะเปิดเล่นได้จะมีตัวโปรแกรม Flash Player

เวลาเราทําการ Plublish จะมีไฟล์อยู่ 2 ตัวคือ .swf และ .html

Page 3: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

178

นอกจากการนําเสนองานประเภทมัลติมิเดียที่เรารู้จักกันทั่วไปแล้ว อยากให้ทราบถึงงานนําเสนออีก 2

ประเภทที่ได้รับความนิยมไม่แพ้สื่อมัลติมิเดีย หรือเราอาจจะเรียกได้ว่าเป็นงานมัลติมิเดียอีกรูปแบบหนึ่งเลยก็

ว่าได้ งานชิ้นแรกที่อยากให้ทําความรู้จักคือ

Page 4: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

179

งาน 2D Hand Drawn Animation

เรามาทําความรู้จักกับการทํางานที่เหมือนจะล้าสมัย แต่กลับกลายเป็นผลงานที่เป็นที่นิยมอยู่เสมอ ทั้ง

ในเรื่องของวิธีการทํางาน ขั้นตอน รวมไปถึงรายละเอียดต่างๆ ของ “2D Hand Drawn Animation”

เรามาเริ่มการทําแอนิเมชั่นเลย ก่อนหน้านั้นคงไม่ต้องพูดถึงงาน 2D

Hand Drawn Animation นี้จะเริ่มจากการทํา Post Animation ก่อน คือ

การสร้างภาพกําหนดคร่าวๆ ของแต่ละฉากโดยดึงรายละเอียดออกมาจากภาพ

ประกอบการนําเสนอภาพยนตร์ และผ่านไปยัง Layout Animator เพ่ือนํา

Post Animation มาปรับแต่งเพ่ิมเติมและขยายความกว้างให้กว้างขึ้น ก่อนจะ

ส่งต่อไปยัง Key Animator เพ่ือสร้างภาพเคลื่อนไหวให้ชัดเจนยิ่งขึ้น ทุก

ขั้นตอนเบื้องหลังต่างก็มีความสําคัญต่อการทําภาพยนตร์ แต่ดูเหมือน Keys

Animator จะมีความสําคัญเด่นชัดที่สุด ต่อไปนี้เราจะเรียกว่า “Animator”

Animator

Animator นั้นเป็นผู้เข้าใจวิธีการเคลื่อนไหวการแสดงอารมณ์ ลักษณะของตัวละคร ไม่ว่าจะเป็นบท

สนทนา หรือการแสดงออกทางสีหน้า ตลอดจนเข้าใจเนื้อหาและระยะเวลา (Timing) ของแต่ละฉากที่ตน

สร้างสรรค์เป็นอย่างดี ไม่เช่นนั้นแล้วอาจะเกิดความผิดพลาดขั้นในที่สุด ซึ่งโดยมากไม่สามารถพบได้ใน

เบื้องต้น แต่พบในการเคลื่อนไหวขั้นสุดท้าย (Inbetween) แล้วการแก้ไขก็ต้องกลับมาเริ่มต้นใหม่ตั้งแต่การทํา

แอนิเมชั่น ซึ่งต่างจาก 3D เพราะสามารถแก้ไขได้จากตรงนั้นเลย และนี่เป็นอีกหนึ่งเหตุผลที่ทําให้เปลี่ยนมาใช้

คอมพิวเตอร์แอนิเมชั่นมากยิ่งขึ้น

Page 5: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

180

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

Animation จะสร้างภาพเคลื่อนไหวเป็นจังหวะของการเปลี่ยนท่าทาง (Action) อย่างห่างๆ แต่จะมี

การกําหนดการขยับปากในกรณีที่มีบทพูด (Lipsync) และท่าทางพิเศษที่ Animator ต้องการ เพ่ือความ

สวยงามและโดดเด่นของแต่ละฉากที่จเองสร้างสรรค์ Animatiors แต่ละคนสร้างงานแตกต่างลักษณะกันไป

บางคนทํางานเรียบร้อยเก็บรายละเอียดของตัวละครได้ใกล้เคียงกับที่ผู้กํากับวางไว้เป็นอย่งดี ระยะห่างของ

การเคลื่อนไหวต่อเนื่องชัดเจน ง่ายสําหรับขั้นตอนต่อไป แต่ไม่มีความน่าสนใจเท่าที่ควร ต่างจากบงคนทํา

ออกเป็นภาพสเก็ตซ์ แทบมองไม่เห็นเค้าโครงของตัวละครอยู่เลย คําสั่งทังหลายก็ซับซ้อน บางครั้งผู้ช่วยใน

ขั้นตอนต่อมาถึงกับถอนหายใจอย่างหมดแรงก็มี แต่เมื่อภาพออกมาแล้ว ขอบอกเลยว่าสมบูรณ์แบบ

การเคลื่อไหวหลายรูปแบบมีการกําหนดมาตรฐานไว้ชัดเจน เช่น การเดิน การวิ่ง หรือการกระโดด

ฯลฯ และยังแยกออกเป็นลักษณะของอารมณ์ ซึ่งสามารถเปลี่ยนแปลงการเคลื่อนไหวเดียวกันให้ออกเป็น

หลายแบบอีกด้วย

Page 6: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

181

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

หลังจาก Keys Animation สําเร็จไปด้วยดีแล้ว ก็มาถึง Clean Up Assistant ซึ่งจะทําการคัดลอก

ภาพจากเดิมที่ Animatior เขียนมาเพ่ือปรับแต่งให้สวยงาม ตามภาพจริงของตัวละครที่ผ่านการคัดสรรและ

แก้ไขให้สมบูรณ์มาแล้ว (Model Sheet) รวมไปถึงช่วยในการประเมินภาพเคลื่อนไหว ที่ไม่สามารถจัดวางตาม

วิธีปรกติได้ (Breakdown) หรือขยับปาก กระพริบตา และการเต้นระบํา เป็นต้น

Inbetweener

Inbetweener คือผู้ที่อยู่ ในขั้นตอนสุดท้ายของการทําภาพเคลื่อนไหว เราเรียกนักเขียน

ภาพเคลื่อนไหวต่อเนื่องก็ได้ นักเขียนในขั้นตอนนี้ต้องทําตามคําสั่งที่ Animator กําหนดไว้ โดยผ่านการแก้ไข

ภาพและปรับแต่งมาจาก Clean UpAssistant โดยนักเขียนภาพเคลื่อนไหวต่อเนื่องต้องสร้างภาพเคลื่อนไหว

ต่อเนื่องให้ได้ตรงตามรูปแบบและอารมณ์ของแต่ละฉากที่ตนทํา อีกท้ังคุณลักษณะของตัวละครต้องไม่ผิดเพ้ียน

ไปจากที่กําหนด

Page 7: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

182

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

การทําภาพเคลื่อนไหวต่อเนื่องนี้ บางครั้งเราอาจจะมีมากถึงสามเท่าตัวจากที่ Animator ทําไว้ และ

เราจะสามารถรู้ได้แน่นอนหลังจากเสร็จสิ้นขั้นตอนนี้ว่าภาพเคลื่อนไหวและลักษณะของตัวละครในฉาก

สมบูรณ์แบบหรือผิดพลาดอย่างไร ถ้าสมบูรณ์ก็จะถูกส่งไปยังขั้นตอนการใส่สีสันตัวละครรวมไปถึงการจัด

องค์ประกอบของแต่ละฉาก การใส่บทพูด เสียงประกอบต่างๆ ตัดต่อ ลําดับภาพ ฯลฯ ตามขั้นตอนปกติ ซึ่งนั่น

นอกประเด็นของเราที่จะกล่าวถึง

รู้จักกับเครื่องมือในงาน 2D Hand Drawn Animation

เรามาลองทําความรู้จักกับเครื่องมือหรืออุปกรณ์หลักๆ ที่ใช้ในงาน 2D Hand Drawn Animation

เอาแบบสากลเลยแล้วกัน บางคนอาจจะรู้จักมาบ้างแล้ว ก็ให้มันผ่านตาไปเป็นสิ่งแปลกใหม่ สําหรับนัก

คอมพิวเตอร์แอนิเมชั่น

1. Animation Disc ใช้เพื่อการคัดลอกภาพและสร้างภาพเคลื่อนไหวต่อเนื่อง ใช้คู่กับโต๊ะไฟ (Lightbox)

ลักษณะก็คล้ายๆกันกับโต๊ะเขียนแบบ

2. Animation Paper กระดาษซึ่งใช้สําหรับงานแอนิเมชั่นสากล มีการเจาะรูตําแหน่งที่แน่นอน

Page 8: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

183

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

3. Pagbar เป็นแท่นที่ใช้สําหรับล๊อคตําแหน่งของกระดาษหรือแผ่นใสสําหรับงานแอนิเมชั่น

4. Re-inforcement เป็นกระดาษกาวที่เจาะรูมาเพ่ือติดย้ําลงบนกระดาษแอนิเมชั่น ในขณะที่วางลงบน

แท่นล๊อคกระดาษ เพ่ือกันการคลาดเคลื่อน

5. Animation Pencil ซึ่งก็คือดินสอนธรรมดาที่เราใช้กันอยู่ทั่วไป ส่วนเรื่องความเข้มจางข้ันอยู่กับ

สตูดิโอแต่ละท่ี

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

6. Electric Pencil Sharpener เครื่องเหลาดินสอแบบไฟฟูา อาจจะดูเกินไปสักหน่อยแต่มันจัช่วยให้

การทํางานสะดวกข้ึน

7. Electric Eraser นี่ก็เป็นยางลบแบบใช้แบตเตอรี่ เพ่ือความว่องไวในการลบข้อผิดพลาด โดยเฉพาะจัด

เล็กๆ อีกทั้งยังไม่ทําให้กระดาษเกิดการคลาดเคลื่อน แต่ก็ไม่ได้หมายความว่าไม่ได้ใช้ยางลบธรรมดา

ทั่วๆไป เรายังคงใข้กันอยู่อย่างต่อเนื่อง

8. Gray Eraser เป็นยางลบอีกประเภทหนึ่งใช้สําหรับดูดสี หรือส่วนที่ล้ําออกมาให้จางลง มีลักษณะ

คล้ายหมากฝรั่ง

Page 9: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

184

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

งานภาพยนต์โฆษณา

ในปัจจุบันการนําเสนอผลงานในด้านภาพยนต์โฆษณา นับว่ามีบทบาทในการนําเสนอผ่านหน้าจอ

โทรทัศน์ สื่อออนไลน์ต่างๆ เป็นจํานวนมาก ด้วยเหตุผลนี้ เลยขอยกตัวอย่างการทําภาพยนต์โฆษณาของ

“ไทยประกันชีวิต” ซึ่งเป็นผลงานของผู้กํากับ พ่ีต่อ (ฟีโนมีนา) Concept ของหนังคือ เวลาไม่สามารถ

ย้อนหลังกลับคืนมาได้ ถ้ายังมีโอกาสให้ทําในสิ่งที่อยากทํา อย่างเช่นเรื่องราวของโฆษณาชุดนี้

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

โดยภาพยนตร์โฆษณาชุดนี้ เพ่ือลดความรุนแรงของภาพ แต่ให้ได้อารมณ์สมจริง แต่ในขณะเดียวกันก็

ยังมีความงามด้านศิลปะอยู่ในภาพด้วยนั้น การถ่ายทําโดยการใช้รถจริงๆ จังเป็นเรื่องที่ยากมาก ทางผู้กํากับจึง

มอบหมายให้ทาง DM ว่าเป็นไปได้มั้ยที่บาง Shot รถชนกันเป็น CG ทั้งหมด ซึ่งในตอนแรกทางทีม DM ก็

หนักใจบ้างนิดหน่อย เพราะยังไม่เคยทํางานในลักษณะนี้มาก่อน แต่ก็ถือเป็นโอกาสที่ดีท่ีทีมงานจะได้ลองทํา

จึงได้มีการตกลงจะทํารถชนเป็น CG ทั้งหมด

Page 10: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

185

หลังจากนั้นได้เริ่มมีการ TEST และทํา ANIMATIC (หนังตัวอย่างเพ่ือนํามาเป็นไกด์สําหรับการถ่ายทํา)

เพ่ือดูอารมณ์ของหนังเบื้องต้น เพ่ือให้ทีมงานและผู้จ้างงานเข้าใจตรงกัน (นับว่าเป็นขั้นตอนมาตรฐานในการ

ทํางานระดับมืออาชีพซึ่งควรทํา)

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

ต่อมาเรามาเรียนรู้ขั้นตอนการทํางานในส่วนการพัฒนาของมืออาชีพกันว่าเป็นอย่างไรโดยเริ่มจาก

Modeling, Texture and Rendering

ในหนังโฆษณาชิ้นนี้ เราจําเป็นต้องให้ความสําคัญกับการสร้าง Model รถทั้งสองคันเป็นพิเศษ

โดยเฉพาะส่วนด้านหน้าของรถเพราะจะต้องคํานึงถึงการสร้าง Animation ในภายหลังด้วยทั้งการยุบตัวของ

รถ การบิดงอของชิ้นส่วนต่างๆ และการแตกกระจายของเศษกระจกขณะที่รถกําลังชน เพราะฉะนั้นการแบ่ง

Polygon ต่างๆ จึงต้องทําด้วยความรอบคอบ

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

ในบางส่วนของตัวรถได้มีการใช้ Texture ที่ได้จากการถ่ายภาพนิ่งมา MAP ยังวัตถุโดยตรง ซึ่ง

MODEL ที่ได้จะสมจริงขึ้นมามาก

Page 11: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

186

ในการ RENDER นั้น การจําลองบรรยากาศต่างๆ ของตัวรถในโปรแกรม 3 มิติ ให้ใกล้เคียงกับ

บรรยากาศจริงในวันถ่ายจะช่วยในการ RENDER วัตถุท่ีมี REFLECTION เช่น ตัวถังรถ, กระจกรถ ฯลฯ ดู

เหมือนจริง

Animation

เพราะต้องคํานึงถึงหลักความเป็นจริงในการชนของรถ จึงจําเป็นต้องมีการศึกษา ภาพถ่าย และ VDO

CLIP ในมุมต่างๆ ของรถขณะที่ชนกัน เพื่อนํามาใช้เป็นไกด์ในการ ANIMATE

ในการ ANIMATE นั้น เราจะเริ่มต้นตั้งแต่ ขณะท่รถเริ่มวิ่งเข้าหากันไปจนถึงรถพังยับเยิน ให้อยู่ในซีน

เดียวกัน จากนั้นจึงสร้างกล้องในมุมต่างๆ ตามท่ีผู้กํากับต้องการ

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

Page 12: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

187

PARTICLE FLOW และ THINKING PARTICLE ถูกนํามาใช้ในการจําลองในการแตกและกระทบของ

วัตถุชิ้นเล็กๆ เช่น ไฟหน้ารถ กระจกหน้ารถ ฯลฯ แต่ในขณะเดียวกันวัตถุบางชิ้น เราอาจต้อง ANIMATE ด้วย

ตัวองบ้างเพ่ือให้ได้ MOVEMENT ที่สวยงามตามที่ต้องการ เช่น เศษกระจกแตก เฟืองและ เข็มนาฬิกา ใน

SHOT นาฬิกาข้อมือแตก

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

Page 13: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

188

COMPOSITE

เพ่ือให้ภาพที่ถูกสร้างจาก CG มีความสมจริงมากท่ีสุด เราจังมีการถ่ายภาพนิ่งของรถ 2 คันในสถานที่

และบรรยากาศจริง เพื่อนํามาเปรียบเที่ยบขณะที่ COMPOSITE

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

DEPTH OF FIELD จากการ COMPOSITE ช่วยทําให้เศษกระจกใน SHOT CLOSE UP หน้าของพ่อ

และ SHOT นาฬิกาข้อมือแตก เกิดระยะและมีมิติของภาพที่สวยงาม

มีการใช้ FOOTAGE ที่ได้จากการถ่ายจริงมาผสม เช่น ควันต่างๆ ทําให้ภาพดูสมจริงขึ้น

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

Page 14: บทที่ 10 - WordPress.com · 2015-05-21 · 180 (ภาพจาก : นิตยาสาร MENU COMPUTER IDEA) Animation จะสร้างภาพเคลื่อนไหวเป็น

189

(ภาพจาก : นิตยาสาร MENU COMPUTER IDEA)

เป็นอย่างไรบ้างกับการนําเสนอผลงานมัลติมิเดียและตัวอย่างงานการนําเสนอใน 2 รูปแบบคงจะได้

ประสบการณ์กับการเรียนในรายวิชานี้เพิ่มขึ้น ประกอบกับแรงบรรดาลใจในการสร้างสรรค์ผลงานที่มีคุณภาพ

ให้ออกมาช่วยพัฒนาทั้งศักยภาพสื่อการเรียนรู้ ด้านการผลิตมัลติมิเดียเพ่ือนําเสนอผลงาน ด้านการผลิตโปร

ดักชั่น ไม่ว่าจะเป็นงานโฆษณา งานด้านสื่อประชาสัมพันธ์เป็นต้น ก่อนจบของทิ้งท้ายกับการเรียนวิชานี้ว่า

การเรียนรู้บางครั้งไม่ได้จํากัดอยู่ที่ห้องเรียน ความรู้ได้จากทุกที่ ทุกสิ่ง และทุกเวลา แรงบรรดาลใจส่วนหนึ่ง

เกิดจากการดู การฟัง และการอ่าน ยิ่งเราทําสิ่งเรานี้มาก ก็จะส่งผลดีกับเราในการคิดงานมาก