การสร้างภาพเคลื่อนไหว (Animation)

ความสามารถอีกอย่างหนึ่งของโปรแกรม Adobe Photoshop คือ ความสามารถในการสร้างภาพเคลื่อนไหว (แบบง่ายๆ) ได้ ซึ่งโปรแกรม Adobe Photoshop มีโปรแกรมเสริมอีกตัวหนึ่งที่ใช้ในการสร้างภาพเคลื่อนไหว (Animation) เพื่อใช้ประกอบหน้าเว็บเพจ เพิ่มความน่าสนใจให้มากยิ่งขึ้น ตัวอย่างเช่น การสร้างปุ่ม, Avatar, Favicon และแบนเนอร์โฆษณาต่างๆ เป็นต้น

โปรแกรมตัวนี้มีชื่อว่า Adobe ImageReady เป็นโปรแกรมที่มาพร้อมกับโปแกรม Photoshop เมื่อเราติดตั้งโปรแกรม Photoshop โปรแกรม ImageReady จะถูกติดตั้งโดยอัตโนมัติ

หลักในการสร้างภาพเคลื่อนไหว

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

ซึ่งในความเป็นจริงแล้ว ภาพที่เรามองเห็นนั้นเป็นเพียงภาพนิ่งที่วิ่งต่อๆ กันเท่านั้นเอง โดยภาพ 1 ภาพ จะบรรจุอยู่ใน “เฟรม” หนึ่งเฟรม เราจึงเรียกการเคลื่อนไหวแบบนี้ว่า การเคลื่อนไหวแบบ Frame By Frame

การสร้างภาพเคลื่อนไหวแบบ Frame By Frame

การสร้างภาพเคลื่อนไหวแบบ Frame By Frame นั้นเป็นที่นิยมและพบเห็นกันโดยทั่วไป เนื่องจากสามารถทำได้ง่าย และไฟล์งานที่ได้ก็มีขนาดเล็กด้วย

เราจะมาลองสร้างภาพเคลื่อนไหวง่ายๆ กัน ดังนี้

1. อันดับแรก เราจะนำภาพทั้ง 2 ภาพ นี้ไปใช้ โดยใช้ภาพฉากกลางคืนเป็นพื้นหลัง และหญิงขี่ไดโนเสาร์ เป็นภาพที่สามารถเคลื่อนไหวได้

2. เซฟภาพทั้ง 2 ภาพนี้ลงในเครื่องก่อน

3. เปิดโปรแกรม Adobe Photoshop เสร็จแล้ว เปิดไฟล์ภาพทั้ง 2 ขึ้นมา (เปิด 2 หน้าต่าง) ให้เห็นทั้ง 2 ภาพ เสร็จแล้ว...

4. คลิกเมาส์ที่เครื่องมือ ( Move Tool) แล้วเอาเมาส์คลิกที่ภาพ หญิงขี่ไดโนเสาร์ แล้วลากเข้ามายังหน้าต่างของภาพที่เป็นพื้นหลัง เราจะสังเกตเห็นว่ามีเลเยอร์ใหม่เกิดขึ้นในหน้าต่าง Layer ของภาพพื้นหลัง ...ดังตัวอย่าง

5. ต่อไปเราจะเปิดโปรแกรม ImageReady เพื่อทำให้ภาพนี้เคลื่อนไหว ..คลิกตรงปุ่มนี้ เพื่อสับไปยังโปรแกรม ImageReady

สำหรับ Photoshop CS3 ให้คลิกที่เมนู Window และคำสั่ง Animation
หลังจากเราได้เปลี่ยนมายังโปรแกรม ImageReady แล้ว เราจะมาทำให้ภาพเคลื่อนไหวกันที่นี่ เริ่มจาก

กำหนดเฟรมที่ 1

เป็นการกำหนดตำแหน่งเริ่มต้นของภาพ หญิงขี่ไดโนเสาร์ เคลื่อนที่จากจุดนี้เป็นจุดแรก โดยให้อยู่ในเฟรมที่ 1

• ให้เปลี่ยนชื่อ Layer 1 เป็น Dino 1 โดยดับเบิลคลิกที่ชื่อ Layer 1 แล้วพิมพ์ Dino 1 ลงไป
• เสร็จแล้ว ใช้เครื่องมือ ( Move Tool) ย้ายรูป หญิงขี่ไดโนเสาร์ มาวางตำแหน่งเริ่มต้น ...ให้โผล่พ้นออกมาจากภาพหลัก ดังรูป

กำหนดเฟรมที่ 2

เป็นการกำหนดตำแหน่งของการเคลื่อนที่ ของภาพ หญิงขี่ไดโนเสาร์ เฟรมที่ 2 ที่ต่อจากเฟรมที่ 1 ดังรูป

กำหนดเฟรมที่ 3

เป็นการกำหนดตำแหน่งของการเคลื่อนที่ ของภาพ หญิงขี่ไดโนเสาร์ ในเฟรมที่ 3 ที่ต่อจากเฟรมที่ 2 ดังรูป

กำหนดเฟรมที่ 4

เป็นการกำหนดตำแหน่งของการเคลื่อนที่ ของภาพ หญิงขี่ไดโนเสาร์ ในเฟรมที่ 4 ที่ต่อเนื่องจากเฟรมที่ 3

วิธีการทำเช่นเดียวกับกับ เฟรมที่ 2 และเฟรมที่ 3 เพียงแต่ขั้นตอนที่ 2 ให้เปลี่ยนชื่อเลเยอร์ที่คัดลอกมา เป็นชื่อ Dino 4 แล้วปิด(ตา)เลเยอร์ Dino 3 และย้ายตำแหน่งไดโนเสาร์ เลื่อนไปทางขวามากยิ่งขึ้น

กำหนดเฟรมที่ 5

เมื่อกำหนดตำแหน่งการเคลื่อนที่ของภาพไดโนเสาร์บิน จากเฟรมที่ 1 – 4 แล้ว ในเฟรมสุดท้ายนี้เราจะทำให้ภาพหญิงขี่ไดโนเสาร์ หายไป และแสดงตัวอักษรขึ้นมา ทำได้ดังนี้

1. ใช้เครื่องมือ พิมพ์ข้อความ Wow! Wonderful ลงไป ให้ตัวอักษรขนาด 55 Px สีแดง จัดให้อยู่ตรงกลางภาพ

2. จากนั้นซ่อนเลเยอร์ ตั้งแต่ Dino 1 - Dino 4 ให้หมด

ดูผลลัพธ์ของการเคลื่อนไหว

ก่อนที่เราจะมาดูผลของภาพเคลื่อนไหวที่เราสร้าง เรามาตรวจสอบดูก่อน โดย...

• อันดับแรกไล่คลิกดูทีละเฟรม ตั้งแต่เฟรมที่ 1 – เฟรมที่ 4 ต้องมีรูปเดียวที่แสดงบนพื้นหลัง คือ รูปหญิงบนหลังไดโนเสาร์
• หากมีรูปอื่นอยู่ด้วยให้แก้ไขโดย คลิกปิดรูปตา หน้าชื่อเลเยอร์นั้นๆ
• และเฟรมที่ 5 ต้องมีข้อความคำว่า Wow! Wonderful ..ถ้าไม่มีให้คลิกหน้าชื่อเลเยอร์นั้น(เลเยอร์สุดท้าย) ให้แสดงรูปตา

เอาหละ ทีนี้มาดูกัน คลิกที่ปุ่ม (Play Animation) ในหน้าต่าง Animation ซึ่งสามารถกำหนดจำนวนครั้งการแสดงได้ โดยคลิกที่ปุ่ม ซึ่งแสดงผลดังนี้

• Once แสดงภาพเคลื่อนไหวเพียงรอบเดียว
• Forever แสดงภาพเคลื่อนไหว จนกว่าเราจะคลิกปุ่ม
• Other แสดงภาพเคลื่อนไหว ซ้ำตามจำนวนครั้งที่กำหนด

หรือกำหนดเวลาหน่วงในการแสดงภาพเคลื่อนไหวแต่ละเฟรมได้โดยคลิกเลือกเวลาที่

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

• คลิกเลือก เฟรมที่ 1 ซึ่งใต้เฟรมจะมี อยู่ ...ให้คลิกตรงรูปสามเหลี่ยมเล็กๆ เพื่อกำหนดการหน่วงเวลาการแสดงภาพ ให้กำหนด = 0.5 sec
• และคลิกเฟรมอื่นๆ ที่เหลือ ตั้งแต่เฟรมที่ 2 – เฟรมที่ 4 และกำหนดเวลาเท่ากับเฟรมที่ 1
• ส่วนเฟรมที่ 5 ซึ่งเป็นเฟรมสุดท้าย ให้กำหนดเท่ากับ 1.0 sec
• จากนั้นลองคลิกที่ปุ่ม เพื่อดูผลลัพธ์อีกครั้ง

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

ปล. ตอนต่อไป สร้างภาพเคลื่อนไหวง่ายๆ ด้วย Tweening