1. การทำภาพ Animation ( ตอนที่ 1)

2. เริ่มแรกก่อนก็เปิดโปรแกรมโฟโต้ชอป และทำการสร้างภาพและข้อความเตรียมไว้ทั้งหมด 6 Layers ดังภาพด้านบนค่ะ จากนั้นเราจะมาเริ่มทำ Animation โดยการคลิกที่ตำแหน่งด้านล่างสุดของ Tool box ตามภาพด้านล่าง เพื่อเปิดใช้งานโปรแกรม ImageReady ซึ่งเป็นโปรแกรมสำหรับทำภาพ Animation

3. จากนั้นเมื่อโปรแกรม ImageReady ถูกเปิดขึ้นมาแล้ว พาเล็ตที่เราจำเป็นต้องใช้งาน ก็คือ Layer และ Animation หากไม่มีปรากฏอยู่ ก็ให้เรียกใช้งานพาเล็ตที่ต้องการโดย ใช้คำสั่ง Window แล้วคลิกเลือกพาเล็ตที่ต้องการ

5. จากนั้นเมื่อเราเรียกพาเล็ตที่ต้องการได้เรียบร้อยแล้ว ให้เราทำการสังเกตที่พาเล็ต Animation จะปรากฏเฟรมหมายเลข 1 อยู่ ซึ่งการสร้าง Animation นั้นเราจะสร้างได้โดยการสร้างเฟรมในพาเล็ต Animation วิธีการสร้างเฟรมเพิ่มขึ้น ทำได้โดยการคลิกที่ตำแหน่ง คลิกเพื่อคัดลอกเฟรม ตามภาพด้านล่างค่ะ ซึ่งจะทำให้มีเฟรมเพิ่มขึ้น

7. เมื่อเราคัดลอกเฟรมได้แล้ว ให้ทำการคัดลอกเฟรมให้ได้ทั้งหมด 4 เฟรมตามภาพด้านล่างค่ะ เอาล่ะค่ะเมื่อได้เฟรมทั้งหมด 4 เฟรมแล้ว ให้ทำตามขั้นตอนต่อไปนี่นะค่ะ ขึ้นตอนที่ 1 คลิกที่เฟรมที่ 1 จากนั้นสังเกตที่พาเล็ต Layer จากนั้นสังเกตที่ช่องที่เป็นรูปตา ที่พาเล็ตเลเยอร์ คลิกให้มีรูปตาเฉพาะที่เลเยอร์ที่ 1 เท่านั้น ส่วนเลเยอร์อื่น ๆ เอารูปตาออกให้หมด ( ถ้าเลเยอร์ไหนมีรูปตา เราต้องการเอาตาออกทำได้โดยคลิกที่รูปตาอีกครั้ง รูปตาก็จะหายไป การปิดตาหรือเอาตาออก ก็คือการไม่แสดงภาพของเลเยอร์นั้นนั่นเอง ) ขึ้นตอนที่ 2 คลิกที่เฟรมที่ 2 จากนั้นสังเกตที่พาเล็ต Layer จากนั้นคลิกให้มีรูปตาเฉพาะที่เลเยอร์ที่ 1 , 2 และ 3 เท่านั้น ส่วนเลเยอร์ที่ 4, 5, 6 ให้เอารูปตาออก ขึ้นตอนที่ 3 คลิกที่เฟรมที่ 3 จากนั้นสังเกตที่พาเล็ต Layer จากนั้นคลิกให้มีรูปตาเฉพาะที่เลเยอร์ที่ 1 , 2 และ 4 เท่านั้น ส่วนเลเยอร์ที่ 3, 5, 6 ให้เอารูปตาออก ขึ้นตอนที่ 4 คลิกที่เฟรมที่ 4 จากนั้นสังเกตที่พาเล็ต Layer จากนั้นคลิกให้มีรูปตาเฉพาะที่เลเยอร์ที่ 1 , 2 , 5 และ 6 เท่านั้น ส่วนเลเยอร์ที่ 3 และ 4 ให้เอารูปตาออก ( ทำเหมือนในภาพเลเยอร์ด้านล่างเลยค่ะ )

9. ตอนนี้เราก็จะได้เฟรมของภาพ Animation เรียบร้อยแล้วค่ะ เราสามารถลองเล่นภาพ Animation ได้โดยการกดที่ปุ่ม Play Animation ตามภาพได้เลยค่ะ จากผลลัพธ์จะเห็นว่าภาพ Animation กระพริบเร็วมาก ๆ ทั้งนี้เนื่องมาจากเรายังไม่ได้กำหนดความเร็วของเฟรมเลย ทำให้มีค่าความเร็วเริ่มต้นอยู่ที่ 0 ซึ่งเร็วมาก ๆ เราจำเป็นต้องมาตั้งค่าหน่วงเวลาการแสดงผลของเฟรมแต่ละเฟรม เพื่อให้ Animation ของเราสามารถเล่นและผู้มองภาพ Animation สามารถเห็นรายละเอียดที่เราต้องการนำเสนอผ่านภาพ Animation การกำหนดเวลาหน่วงของแต่ล่ะเฟรมสามารถทำได้ โดยคลิกที่ตำแหน่งการตั้งเวลาการแสดงเฟรมตามภาพค่ะ ซึ่งค่าตัวเลขของเวลายิ่งเยอะ ก็จะทำให้ภาพในเฟรมนั้น ๆ แสดงผลเป็นเวลานานตามไปด้วย จากในตัวอย่าง Webmaster กำหนดให้มีการแสดงผลเฟรมละ 1 sec. ทุก ๆ เฟรมค่ะ

10. เอาละค่ะ ... ทีนี้ก็มาถึงขั้นตอนสุดท้ายกันแล้วละค่ะ นั้นก็คือการบันทึกภาพ Animation ซึ่งทำได้โดยการใช้คำสั่ง File --> Save Optimized As... จากนั้นเมื่อมีไดอะล็อกบ็อกปรากฏขึ้น ก็ให้เราตั้งชื่อไฟล์ค่ะ และที่สำคัญสั่งเกตที่ Save as type ให้เซฟเป็นสกุล . gif เท่านั้นค่ะ ภาพที่เราเซฟไปจึงจะแสดงผลการเล่นภาพเป็นแบบ Animation

11. การทำภาพ Animation ( ตอนที่ 2)

12. เริ่มแรกก่อนก็เปิดโปรแกรมโฟโต้ชอป และทำการสร้างภาพไว้ทั้งหมด 4 ภาพดังรูป ซึงเวลาเราจะทำจริง ๆ จะใช้กี่ภาพก็ได้ค่ะ เมื่อเตรียมภาพตามด้านบนแล้ว เราจะต้องเตรียมเลเยอร์ทั้งหมด 5 เลเยอร์ โดยเลเยอร์ล่างสุดเป็นพื้นสีขาว ส่วนเลเยอร์ที่เหลืออีก 4 เลเยอร์ เป็นเลเยอร์ของภาพที่เราเตรียมไว้ค่ะ จากนั้นเราจะมาเริ่มทำ Animation โดยการคลิกที่ตำแหน่งด้านล่างสุดของ Tool box ตามภาพด้านล่าง เพื่อเปิดใช้งานโปรแกรม ImageReady ซึ่งเป็นโปรแกรมสำหรับทำภาพ Animation

14. จากนั้นเมื่อโปรแกรม ImageReady ถูกเปิดขึ้นมาแล้ว พาเล็ตที่เราจำเป็นต้องใช้งาน ก็คือ Layer และ Animation หากไม่มีปรากฏอยู่ ก็ให้เรียกใช้งานพาเล็ตที่ต้องการโดย ใช้คำสั่ง Window แล้วคลิกเลือกพาเล็ตที่ต้องการ ( ขั้นตอนนี้ก็เหมือนกับการทำภาพ Animation แบบแรก ) เมื่อเตรียมเครื่องมือต่าง ๆ เรียบร้อยแล้ว ก็มาถึงขั้นตอนการทำ Animation ละค่ะ โดยขั้นตอนแรกให้เราสร้างเฟรม 2 เฟรมในพาเล็ต Animation สร้างเฟรมเพิ่มโดยการกดที่ตำแหน่ง A และทำตามขึ้นตอนดังนี้ค่ะ ขั้นตอนที่ 1 ให้คลิกที่เฟรมแรกใน พาเล็ต Animation จากนั้นจัดการที่พาเล็ต Layer โดยเอารูปตาออกที่เลเยอร์ 2-5 โดยการคลิกที่รูปตาด้านหน้าแต่ละเลเยอร์ ให้เลเยอร์แรกเท่านั้นที่มีตา ซึงที่ทำภาพในเลเยอร์ที่ 1 เท่านั้นที่จะแสดงผลที่เฟรมที่หนึ่ง

15. ขั้นตอนที่ 2 คลิกที่เฟรมที่ 2 จากนั้นจัดการที่พาเล็ต Layer โดยเอารูปตาออกที่เลเยอร์ 3-5 ออก ซึ่งเฟรมนี้จะแสดงผลเป็นภาพของเลเยอร์ที่ 2 ( ตามภาพด้านล่าง )

16. ขั้นตอนที่ 3 เมื่อเตรียมเฟรมได้ตามภาพด้านบนแล้ว ให้คลิกเลือกเฟรมที่ 2 จากนั้นให้คลิกที่ตำแหน่ง B เพื่อเรียกใช้ไดอะล็อก Tween เมื่อปรากฏไดอะล็อก Tween แล้ว ให้กำหนดค่าต่าง ๆ ตามภาพด้านล่างจากนั้นคลิกปุ่ม OK เมื่อทำขึ้นตอนนี้แล้วจะสังเกตเห็นจำนวนเฟรมเพิ่มขึ้นอีก 5 เฟรม อยู่ระหว่างเฟรมที่เราได้เตรียมไว้ในขั้นตอนก่อนหน้านี้

18. ขั้นตอนที่ผ่านมาจะทำให้เราได้ภาพ Annimation แบบค่อย ๆ เฟดให้เห็นรูปค่ะ ลอง Play ภาพ Animation ดูค่ะ โดยคลิกที่เครื่องหมาย Play ที่บริเวณด้านล่างของพาเล็ต Animation ก็จะเห็นผลลัพธ์ว่าภาพค่อย ๆ ชัดเจนขึ้น ที่ทำผ่านมานั้นเพิ่มได้ช็อตเดียว ถ้าจะทำแบบหลาย ๆ ช็อตก็ได้ค่ะ โดยการสร้างเฟรมเพิ่มอีกหนึ่งเฟรมที่ตำแหน่งสุดท้ายของเฟรม แล้วเลือกเลเยอร์ที่ต้องการแสดงผล จากนั้นก็คลิกที่เฟรมสุดท้ายแล้วใส่ Tween แบบขั้นตอนก่อนหน้านี้ ก็จะทำให้ได้อีกช็อตหนึ่งค่ะ ถ้าต้องการหลาย ๆ ช็อตก็ทำแบบนี้ไปเรื่อย ๆ จนครบทุกเลเยอร์ค่ะ

19. การทำภาพแบบนี้ถ้าหากต้องการให้สมูทสมจริง ก็ต้องใช้จำนวนเฟรมให้เยอะขึ้นค่ะ โดยในขั้นตอนการทำ Tween ก็อาจจะเพิ่มเฟรมจากเดิม 5 เป็นจำนวนที่เยอะขึ้นค่ะ การแสดงภาพก็จะช้าลงและดูสมูทมากยิ่งขึ้นค่ะ แต่ก็ไม่ควรจะมีจำนวนเฟรมเยอะเกินไป เพราะเมื่อขนาดเฟรมเพิ่มขึ้น ขนาดของไฟล์ก็จะเพิ่มมากขึ้นเช่นกันค่ะ ในที่นี้กำหนด Tween ให้เพิ่มเฟรมเป็น 5 เพื่อให้สังเกตจำนวนเฟรมในพาเล็ต Animation ได้ง่ายขึ้นค่ะ ... ลองทดลองปรับเปลี่ยนดูเองนะค่ะ ... ขั้นตอนสุดท้ายหากต้องการนำเฟรมไปใช้ ก็ให้บันทึกภาพ Animation ซึ่งทำได้โดยการใช้คำสั่ง File --> Save Optimized As... จากนั้นเมื่อมีไดอะล็อกบ็อกปรากฏขึ้น ก็ให้เราตั้งชื่อไฟล์ค่ะ และที่สำคัญสั่งเกตที่ Save as type ให้เซฟเป็นสกุล . gif เท่านั้นค่ะ ภาพที่เราเซฟไปจึงจะแสดงผลการเล่นภาพเป็นแบบ Animation

20. การทำภาพ Animation ( ตอนที่ 3) บทความนี้เป็นการทำภาพ Animation อีกรูปแบบหนึ่ง ที่ใช้หลักการในการเลื่อนภาพ ( Move) จากตำแหน่งหนึ่งไปยังอีกตำแหน่งหนึ่ง แล้วก็ทำได้ไม่ยากค่ะ

21. ช่วงนี้สำหรับคนทำเว็บไซต์แล้วก็มีขึ้น Event ลอยกระทง วันก่อน Webmaster ก็ได้รับมอบหมายงาน ( จากที่ทำงาน ) ให้ทำ Baner Animation สำหรับขึ้นต้อนรับกิจกรรม ลอยกระทง เลยได้ไอเดียว่าน่าจะเอาเทคนิคการทำภาพ Animation ( ตอนที่ 3) ที่ได้ค้างเพื่อน ๆ ไว้ซะนานมาฝาก ๆ เพื่อน ๆ ซะที ( ได้ฤกษ์งามยามดี ) และเพื่อให้เข้ากับช่วงนี้เลยทำออกมาเป็น Animation สำหรับงานลอยกระทง ... เอ้า เรามาเริ่มกันได้เลยค่ะ

22. ขั้นตอนที่ 1 อย่างแรกเลยก็คือ การเตรียมภาพ ในแต่ละ Layer โดยตามภาพที่ 1 ที่มีการเตรียมไว้ก็คือ - Layer ของภาพ กระทง - Layer ของภาพพื้นหลังเป็น ท้องยามค่ำคืนและดวงจันทร์ - Layer ของภาพ น้ำ ( ที่ดูไม่เหมือนน้ำเท่าไหร่ หัวไม่ศิลปต้องขอโทษด้วยค่ะ ) - Layer ของภาพ เอฟเฟคภาพแสงไฟ ระยิบระยับ มีประกาย ( อันนี้ก็ทำออกมาไม่ค่อยได้เรื่องเท่าไหร่ ถือซะว่าเป็นไอเดียก็แล้วกันนะค่ะ ) เมื่อเตรียมภาพได้หมดแล้ว ก็ส่งภาพไปยังโปรแกรม โดยคลิกที่ด้านล่างของ Tool box ที่เป็นรูปของ ImageReady

23. ขั้นตอนต่อมาให้เราสร้างเฟรม 2 เฟรมในพาเล็ต Animation สร้างเฟรมเพิ่มโดยการกดที่ตำแหน่ง 1 จากนั้นกำหนดให้เฟรมแรกภาพกระทงอยู่ขวามือ และเฟรมที่ 2 ให้เลื่อน Layer กระทงให้กระทรงอยู่ซ้ายมือ ( ดังภาพที่ 2) จากนั้นให้คลิกที่เฟรมที่ 2 และกดที่ตำแหน่งหมายเลข 2 เพื่อเปิดไดอะล็อก Tween และกำหนดค่าต่าง ๆ ตามภาพด้านล่าง จากนั้นคลิก OK มาถึงขั้นนี้หากไม่มีอะไรผิดพลาดเมื่อคลิกที่ปุ่ม Play ก็จะแสดงภาพกระทงเลื่อนจากทางขวามาทางด้านซ้าย ซึ่งนั้นหมายความว่าเพื่อได้ทำเทคนิคนี้สำเร็จแล้วค่ะ และเพื่อความสมจริง ๆ จริง ๆ แล้วเราควรเลื่อนภาพทีละนิดแล้วใส่ Tween ทีละช็อต ๆ เพื่อน ๆ ลองประบดูนะค่ะ ซึ่งจะทำให้ดูเลื่อนสมจริงขึ้น

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