ก่อนอื่นต้องบอกก่อนว่า animation ที่ผมจะนำเสนอนั้นคือ animation ที่เป็นรูปภาพในแบบ gif นะครับ (นามสกุลเป็น .gif) ไม่ใช่ flash animation ดังนั้นใครที่ผิดหวัง ก็ต้องขออภัยด้วยครับ... เอาไว้ผมหัด flash เมื่อไหร่ รับรอง เอามาสอนแบบหมดเปลือกแน่ อิอิ (รอไปก่อนนะครับ ยังไม่มีกำหนดการ)

การทำ animation เป็นรูปภาพ .gif หรือที่เราเรียกว่า gif animation นั้น ปัจจุบันเป็นอะไรที่หลายคนมองว่าค่อนข้างเชยไปแล้ว เนื่องจาก

• จะมีขนาดไฟล์ที่ใหญ่ เนื่องจากการทำ animation แต่ละเฟรม จะเป็นการจดจำข้อมูลรูปภาพชนิด พิกเซลต่อพิกเซล ในขณะที่ flash animation นั้นจะเป็นการคำนวณทางคณิตศาสตร์เป็นส่วนใหญ่
• ลูกเล่น เล่นมากไม่ได้ จำนวนเฟรมมีมากก็ไม่ไหว การทำ animation ที่ต่อเนื่องมากๆ จึงทำได้ยาก ทั้งนี้เพราะหากทำเช่นนั้น จะทำให้ไฟล์มีขนาดใหญ่นั่นเอง

แต่ก็ใช่ว่า gif animation จะไม่มีข้อดีเสียเลยนะครับ เพราะมันมีอะไรบางอย่างที่ flash animation ไม่มีก็คือ มันสามารถเปิดได้กับบราวเซอร์ทุกแบบนั่นเอง ทั้งนี้เพราะว่ามันไม่ต้องการ plug-in ในการแสดงผล ซึ่งผิดกับ flash animation ที่จำเป็นต้องมี flash player plug-in

อย่างไรก็ดี การทำ animation แบบง่ายๆ นั้น เราใช้ gif animation ก็ดูสมเหตุสมผลอยู่ครับ โดยเฉพาะอย่างยิ่ง สำหรับมือใหม่... ทั้งนี้เนื่องจากมีโปรแกรมช่วยมากมาย ทำให้ไม่ยากเลยครับ สำหรับการที่จะทำ gif animation มาซักตัวหนึ่ง และการหัดทำ gif animation นั้นยังเป็นพื้นฐานอันดี สำหรับการทำความเข้าใจเกี่ยวกับการทำ animation ด้วยครับ

หลักการทำ animation
ก่อนอื่นเรามาทำความเข้าใจกันก่อนว่า พื้นฐานของการทำ animation นั้นมันเป็นอย่างไร... animation ทั้งหลาย ไม่ว่าจะเป็น gif animation หรือ flash animation หรืออะไรก็ตามแต่ มันมีพื้นฐานจากจุดเดียวกัน คือคล้ายกับการฉายหนัง หรือการ์ตูนนั่นเอง คือการเคลื่อนที่ของภาพที่เราเห็น มันคือการเปลี่ยนภาพจากภาพหนึ่งไปเป็นอีกภาพหนึ่งด้วยความเร็วในระดับหนึ่ง

เราเรียกภาพแต่ละภาพที่ถูกเปลี่ยนไปนั้นว่า เฟรม ครับ การเคลื่อนไหวของ animation เพียง 1 วินาทีนั้น อาจจะเกิดจากภาพหลายๆ ภาพก็เป็นได้ เช่น ภาพยนตร์ที่เราเห็น (ที่ฉายจากเครื่องฉายประเภทฟิล์มนะครับ) เกิดจากการเปลี่ยนของภาพทั้งหมด 24 ภาพ ใน 1 วินาที หรือเรียกว่า 24 เฟรมต่อวินาที นั่นเอง

ยิ่งจำนวน เฟรมต่อวินาที ยิ่งมากแค่ไหน การเคลื่อนไหวที่เราเห็นก็จะยิ่งดูลื่นไหลมากเท่านั้น... มาดูตัวอย่าง animation แบบง่ายๆ ของผมดูไหมครับ

ก่อนอื่นผมก็ทำรูปภาพมาด้วยกัน 4 รูป ดังนี้

ขออภัยที่รูปใหญ่ไปหน่อยฮะ เหอๆ แบบว่าทำลวกๆ ไปนิด -_-''

จะเห็นว่าตำแหน่งของวงกลมสีดำในรูปมันเปลี่ยนไปเรื่อยๆ ใช่ไหมครับ... ถ้าเราดูทีละภาพเราก็จะเห็นแค่นั้น แต่ถ้าผมเอามาแสดงทีละภาพ โดยเปลี่ยนภาพไปเรื่อยๆ ทุกๆ 1 วินาทีล่ะ?!? เราก็จะเห็นเป็นแบบนี้ครับ

เหมือนเจ้าวงกลมสีดำนั้นเป็นลูกบอล ที่ตกมาจากข้างบนเลยไหมครับ (ขออภัยที่ดูไม่เหมือนมันจะตกเท่าไหร่อ่ะนะ) มีทั้งหมด 4 ภาพ เปลี่ยนภาพทุกๆ 1 วินาที เราเรียกว่า เป็น animation ที่มีการเคลื่อนไหว 1 เฟรมต่อวินาที ดังนั้น animation นี้จะกินเวลาทั้งหมด 4 วินาทีนั่นเอง

หลักของเฟรมนั้นเป็นหัวใจของการทำ animation ทุกแบบครับ...

การทำ animation ให้ลื่นไหล
มีกฎง่ายๆ อยู่แค่2กฎหลักๆ ครับ นั่นก็คือ

1. ยิ่งจำนวนภาพที่เคลื่อนไหว มีความต่อเนื่องมากแค่ไหน ก็จะยิ่งดูลื่นไหลมากเท่านั้น ลองมาดูภาพ animation เมื่อครู่ โดยผมได้เพิ่มจำนวนภาพเป็น 6 ภาพกันครับ

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

2. ยิ่งจำนวนเฟรมที่ถูกเปลี่ยนไปต่อ 1 วินาทีมีมากแค่ไหน การเคลื่อนไหวก็จะยิ่งลื่นไหลเท่านั้น ทีนี้ลองมาเปลี่ยนความเร็วในการเปลี่ยนจากภาพหนึ่งไปเป็นอีกภาพหนึ่งให้เร็วขึ้น โดยให้เลือกซัก 0.25 วินาทีแทน เท่ากับว่างานนี้ 6 เฟรม ในเวลาแสดงผลแค่1.5 วินาที หรือพูดง่ายๆ คือ4 เฟรมต่อวินาที นั่นเอง

จะเห็นว่าการเคลื่อนไหวดูต่อเนื่องมากกว่าเดิมใช่ไหมครับ...

สรุปง่ายๆ ก็คือ การทำ gif animation นั้นไม่ได้มีความยากอะไรเลย ก็เพียงแค่ทำกราฟิก หรือรูปทีละเฟรมๆ ขึ้นมา แล้วนำแต่ละเฟรมที่ได้ มารวมกันด้วยโปรแกรมบางอย่าง เช่น Ulead Gif Animation, Selteco Bannershop หรือใกล้ตัวเราที่สุด ก็เห็นจะเป็น Adobe Image Ready (อ๊ะๆ ผมเชื่อว่า เครื่องคอมพิวเตอร์ของผู้อ่านแทบทุกท่าน มีการติดตั้งโปรแกรม Adobe Photoshop พร้อม Adobe Image Ready เอาไว้... แม้มันจะไม่ถูกกฎหมายก็เถอะหนา แต่ในเรื่องของการนำมาใช้เรียน ใช้ศึกษาที่ไม่ได้ทำให้ทาง Adobe ผู้เป็นเจ้าของงานลิขสิทธิ์เสียผลประโยชน์ ก็ถือว่าพออนุโลมได้ตามพระราชบัญญัติลิขสิทธิ์ พ.ศ. 2537 ครับ อิอิ)

แต่ทีนี้ผู้อ่านหลายท่านน่าจะยังสงสัยอยู่ว่า แล้วไอ้ animation โดยเฉพาะ gif animation ที่เคลื่อนไหวแบบงามๆ จ๊าบๆ อย่างเช่น เอ่อ... (ขอโทษนะน้องกอล์ฟ ขอเอางานที่พี่ทำให้พี่แสนเขาเอาไว้โฆษณามาเป็นตัวอย่างเหอะ... ไม่ได้เป็นการโฆษณา แต่ก็ถือว่าโฆษณาไปให้ในตัวแล้วกัน เพราะยังไงๆ พี่เขาก็เอื้อเฟื้อเรื่องโฮสต์ให้พี่ทำไดอารี่หนักกบาลอ่ะ อิอิ