Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

การทำภาพ Animation

3,809 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

การทำภาพ Animation

  1. 1. การทำภาพ Animation ( ตอนที่ 1)
  2. 2. <ul><li>เริ่มแรกก่อนก็เปิดโปรแกรมโฟโต้ชอป และทำการสร้างภาพและข้อความเตรียมไว้ทั้งหมด 6 Layers ดังภาพด้านบนค่ะ จากนั้นเราจะมาเริ่มทำ Animation โดยการคลิกที่ตำแหน่งด้านล่างสุดของ Tool box ตามภาพด้านล่าง เพื่อเปิดใช้งานโปรแกรม ImageReady ซึ่งเป็นโปรแกรมสำหรับทำภาพ Animation </li></ul>
  3. 3. <ul><li>จากนั้นเมื่อโปรแกรม ImageReady ถูกเปิดขึ้นมาแล้ว พาเล็ตที่เราจำเป็นต้องใช้งาน ก็คือ Layer และ Animation หากไม่มีปรากฏอยู่ ก็ให้เรียกใช้งานพาเล็ตที่ต้องการโดย ใช้คำสั่ง Window แล้วคลิกเลือกพาเล็ตที่ต้องการ </li></ul>
  4. 5. <ul><li>จากนั้นเมื่อเราเรียกพาเล็ตที่ต้องการได้เรียบร้อยแล้ว ให้เราทำการสังเกตที่พาเล็ต Animation จะปรากฏเฟรมหมายเลข 1 อยู่ ซึ่งการสร้าง Animation นั้นเราจะสร้างได้โดยการสร้างเฟรมในพาเล็ต Animation วิธีการสร้างเฟรมเพิ่มขึ้น ทำได้โดยการคลิกที่ตำแหน่ง คลิกเพื่อคัดลอกเฟรม ตามภาพด้านล่างค่ะ ซึ่งจะทำให้มีเฟรมเพิ่มขึ้น </li></ul>
  5. 7. <ul><li>เมื่อเราคัดลอกเฟรมได้แล้ว ให้ทำการคัดลอกเฟรมให้ได้ทั้งหมด 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 ให้เอารูปตาออก ( ทำเหมือนในภาพเลเยอร์ด้านล่างเลยค่ะ ) </li></ul>
  6. 9. <ul><li>ตอนนี้เราก็จะได้เฟรมของภาพ Animation เรียบร้อยแล้วค่ะ เราสามารถลองเล่นภาพ Animation ได้โดยการกดที่ปุ่ม Play Animation ตามภาพได้เลยค่ะ จากผลลัพธ์จะเห็นว่าภาพ Animation กระพริบเร็วมาก ๆ ทั้งนี้เนื่องมาจากเรายังไม่ได้กำหนดความเร็วของเฟรมเลย ทำให้มีค่าความเร็วเริ่มต้นอยู่ที่ 0 ซึ่งเร็วมาก ๆ เราจำเป็นต้องมาตั้งค่าหน่วงเวลาการแสดงผลของเฟรมแต่ละเฟรม เพื่อให้ Animation ของเราสามารถเล่นและผู้มองภาพ Animation สามารถเห็นรายละเอียดที่เราต้องการนำเสนอผ่านภาพ Animation การกำหนดเวลาหน่วงของแต่ล่ะเฟรมสามารถทำได้ โดยคลิกที่ตำแหน่งการตั้งเวลาการแสดงเฟรมตามภาพค่ะ ซึ่งค่าตัวเลขของเวลายิ่งเยอะ ก็จะทำให้ภาพในเฟรมนั้น ๆ แสดงผลเป็นเวลานานตามไปด้วย จากในตัวอย่าง Webmaster กำหนดให้มีการแสดงผลเฟรมละ 1 sec. ทุก ๆ เฟรมค่ะ </li></ul>
  7. 10. เอาละค่ะ ... ทีนี้ก็มาถึงขั้นตอนสุดท้ายกันแล้วละค่ะ นั้นก็คือการบันทึกภาพ Animation ซึ่งทำได้โดยการใช้คำสั่ง File --> Save Optimized As... จากนั้นเมื่อมีไดอะล็อกบ็อกปรากฏขึ้น ก็ให้เราตั้งชื่อไฟล์ค่ะ และที่สำคัญสั่งเกตที่ Save as type ให้เซฟเป็นสกุล . gif เท่านั้นค่ะ ภาพที่เราเซฟไปจึงจะแสดงผลการเล่นภาพเป็นแบบ Animation
  8. 11. การทำภาพ Animation ( ตอนที่ 2)
  9. 12. <ul><li>เริ่มแรกก่อนก็เปิดโปรแกรมโฟโต้ชอป และทำการสร้างภาพไว้ทั้งหมด 4 ภาพดังรูป ซึงเวลาเราจะทำจริง ๆ จะใช้กี่ภาพก็ได้ค่ะ เมื่อเตรียมภาพตามด้านบนแล้ว เราจะต้องเตรียมเลเยอร์ทั้งหมด 5 เลเยอร์ โดยเลเยอร์ล่างสุดเป็นพื้นสีขาว ส่วนเลเยอร์ที่เหลืออีก 4 เลเยอร์ เป็นเลเยอร์ของภาพที่เราเตรียมไว้ค่ะ จากนั้นเราจะมาเริ่มทำ Animation โดยการคลิกที่ตำแหน่งด้านล่างสุดของ Tool box ตามภาพด้านล่าง เพื่อเปิดใช้งานโปรแกรม ImageReady ซึ่งเป็นโปรแกรมสำหรับทำภาพ Animation </li></ul>
  10. 14. <ul><li>จากนั้นเมื่อโปรแกรม ImageReady ถูกเปิดขึ้นมาแล้ว พาเล็ตที่เราจำเป็นต้องใช้งาน ก็คือ Layer และ Animation หากไม่มีปรากฏอยู่ ก็ให้เรียกใช้งานพาเล็ตที่ต้องการโดย ใช้คำสั่ง Window แล้วคลิกเลือกพาเล็ตที่ต้องการ ( ขั้นตอนนี้ก็เหมือนกับการทำภาพ Animation แบบแรก ) เมื่อเตรียมเครื่องมือต่าง ๆ เรียบร้อยแล้ว ก็มาถึงขั้นตอนการทำ Animation ละค่ะ โดยขั้นตอนแรกให้เราสร้างเฟรม 2 เฟรมในพาเล็ต Animation สร้างเฟรมเพิ่มโดยการกดที่ตำแหน่ง A และทำตามขึ้นตอนดังนี้ค่ะ ขั้นตอนที่ 1 ให้คลิกที่เฟรมแรกใน พาเล็ต Animation จากนั้นจัดการที่พาเล็ต Layer โดยเอารูปตาออกที่เลเยอร์ 2-5 โดยการคลิกที่รูปตาด้านหน้าแต่ละเลเยอร์ ให้เลเยอร์แรกเท่านั้นที่มีตา ซึงที่ทำภาพในเลเยอร์ที่ 1 เท่านั้นที่จะแสดงผลที่เฟรมที่หนึ่ง </li></ul>
  11. 15. <ul><li>ขั้นตอนที่ 2 คลิกที่เฟรมที่ 2 จากนั้นจัดการที่พาเล็ต Layer โดยเอารูปตาออกที่เลเยอร์ 3-5 ออก ซึ่งเฟรมนี้จะแสดงผลเป็นภาพของเลเยอร์ที่ 2 ( ตามภาพด้านล่าง ) </li></ul>
  12. 16. <ul><li>ขั้นตอนที่ 3 เมื่อเตรียมเฟรมได้ตามภาพด้านบนแล้ว ให้คลิกเลือกเฟรมที่ 2 จากนั้นให้คลิกที่ตำแหน่ง B เพื่อเรียกใช้ไดอะล็อก Tween เมื่อปรากฏไดอะล็อก Tween แล้ว ให้กำหนดค่าต่าง ๆ ตามภาพด้านล่างจากนั้นคลิกปุ่ม OK เมื่อทำขึ้นตอนนี้แล้วจะสังเกตเห็นจำนวนเฟรมเพิ่มขึ้นอีก 5 เฟรม อยู่ระหว่างเฟรมที่เราได้เตรียมไว้ในขั้นตอนก่อนหน้านี้ </li></ul>
  13. 18. <ul><li>ขั้นตอนที่ผ่านมาจะทำให้เราได้ภาพ Annimation แบบค่อย ๆ เฟดให้เห็นรูปค่ะ ลอง Play ภาพ Animation ดูค่ะ โดยคลิกที่เครื่องหมาย Play ที่บริเวณด้านล่างของพาเล็ต Animation ก็จะเห็นผลลัพธ์ว่าภาพค่อย ๆ ชัดเจนขึ้น ที่ทำผ่านมานั้นเพิ่มได้ช็อตเดียว ถ้าจะทำแบบหลาย ๆ ช็อตก็ได้ค่ะ โดยการสร้างเฟรมเพิ่มอีกหนึ่งเฟรมที่ตำแหน่งสุดท้ายของเฟรม แล้วเลือกเลเยอร์ที่ต้องการแสดงผล จากนั้นก็คลิกที่เฟรมสุดท้ายแล้วใส่ Tween แบบขั้นตอนก่อนหน้านี้ ก็จะทำให้ได้อีกช็อตหนึ่งค่ะ ถ้าต้องการหลาย ๆ ช็อตก็ทำแบบนี้ไปเรื่อย ๆ จนครบทุกเลเยอร์ค่ะ </li></ul>
  14. 19. การทำภาพแบบนี้ถ้าหากต้องการให้สมูทสมจริง ก็ต้องใช้จำนวนเฟรมให้เยอะขึ้นค่ะ โดยในขั้นตอนการทำ Tween ก็อาจจะเพิ่มเฟรมจากเดิม 5 เป็นจำนวนที่เยอะขึ้นค่ะ การแสดงภาพก็จะช้าลงและดูสมูทมากยิ่งขึ้นค่ะ แต่ก็ไม่ควรจะมีจำนวนเฟรมเยอะเกินไป เพราะเมื่อขนาดเฟรมเพิ่มขึ้น ขนาดของไฟล์ก็จะเพิ่มมากขึ้นเช่นกันค่ะ ในที่นี้กำหนด Tween ให้เพิ่มเฟรมเป็น 5 เพื่อให้สังเกตจำนวนเฟรมในพาเล็ต Animation ได้ง่ายขึ้นค่ะ ... ลองทดลองปรับเปลี่ยนดูเองนะค่ะ ... ขั้นตอนสุดท้ายหากต้องการนำเฟรมไปใช้ ก็ให้บันทึกภาพ Animation ซึ่งทำได้โดยการใช้คำสั่ง File --> Save Optimized As... จากนั้นเมื่อมีไดอะล็อกบ็อกปรากฏขึ้น ก็ให้เราตั้งชื่อไฟล์ค่ะ และที่สำคัญสั่งเกตที่ Save as type ให้เซฟเป็นสกุล . gif เท่านั้นค่ะ ภาพที่เราเซฟไปจึงจะแสดงผลการเล่นภาพเป็นแบบ Animation
  15. 20. การทำภาพ Animation ( ตอนที่ 3) บทความนี้เป็นการทำภาพ Animation อีกรูปแบบหนึ่ง ที่ใช้หลักการในการเลื่อนภาพ ( Move) จากตำแหน่งหนึ่งไปยังอีกตำแหน่งหนึ่ง แล้วก็ทำได้ไม่ยากค่ะ
  16. 21. <ul><li>ช่วงนี้สำหรับคนทำเว็บไซต์แล้วก็มีขึ้น Event ลอยกระทง วันก่อน Webmaster ก็ได้รับมอบหมายงาน ( จากที่ทำงาน ) ให้ทำ Baner Animation สำหรับขึ้นต้อนรับกิจกรรม ลอยกระทง เลยได้ไอเดียว่าน่าจะเอาเทคนิคการทำภาพ Animation ( ตอนที่ 3) ที่ได้ค้างเพื่อน ๆ ไว้ซะนานมาฝาก ๆ เพื่อน ๆ ซะที ( ได้ฤกษ์งามยามดี ) และเพื่อให้เข้ากับช่วงนี้เลยทำออกมาเป็น Animation สำหรับงานลอยกระทง ... เอ้า เรามาเริ่มกันได้เลยค่ะ </li></ul>
  17. 22. ขั้นตอนที่ 1 อย่างแรกเลยก็คือ การเตรียมภาพ ในแต่ละ Layer โดยตามภาพที่ 1 ที่มีการเตรียมไว้ก็คือ - Layer ของภาพ กระทง - Layer ของภาพพื้นหลังเป็น ท้องยามค่ำคืนและดวงจันทร์ - Layer ของภาพ น้ำ ( ที่ดูไม่เหมือนน้ำเท่าไหร่ หัวไม่ศิลปต้องขอโทษด้วยค่ะ ) - Layer ของภาพ เอฟเฟคภาพแสงไฟ ระยิบระยับ มีประกาย ( อันนี้ก็ทำออกมาไม่ค่อยได้เรื่องเท่าไหร่ ถือซะว่าเป็นไอเดียก็แล้วกันนะค่ะ ) เมื่อเตรียมภาพได้หมดแล้ว ก็ส่งภาพไปยังโปรแกรม โดยคลิกที่ด้านล่างของ Tool box ที่เป็นรูปของ ImageReady
  18. 23. ขั้นตอนต่อมาให้เราสร้างเฟรม 2 เฟรมในพาเล็ต Animation สร้างเฟรมเพิ่มโดยการกดที่ตำแหน่ง 1 จากนั้นกำหนดให้เฟรมแรกภาพกระทงอยู่ขวามือ และเฟรมที่ 2 ให้เลื่อน Layer กระทงให้กระทรงอยู่ซ้ายมือ ( ดังภาพที่ 2) จากนั้นให้คลิกที่เฟรมที่ 2 และกดที่ตำแหน่งหมายเลข 2 เพื่อเปิดไดอะล็อก Tween และกำหนดค่าต่าง ๆ ตามภาพด้านล่าง จากนั้นคลิก OK มาถึงขั้นนี้หากไม่มีอะไรผิดพลาดเมื่อคลิกที่ปุ่ม Play ก็จะแสดงภาพกระทงเลื่อนจากทางขวามาทางด้านซ้าย ซึ่งนั้นหมายความว่าเพื่อได้ทำเทคนิคนี้สำเร็จแล้วค่ะ และเพื่อความสมจริง ๆ จริง ๆ แล้วเราควรเลื่อนภาพทีละนิดแล้วใส่ Tween ทีละช็อต ๆ เพื่อน ๆ ลองประบดูนะค่ะ ซึ่งจะทำให้ดูเลื่อนสมจริงขึ้น
  19. 25. ภาพสุดท้าย Webmaster ปรับให้มันค่อยเลื่อนที่ละนิด จากนั้นเมื่อเราทำครบทุกช็อตแล้ว เราก็มาปิด - เปิด Layer ที่เป็นแสงไฟเพื่อให้มันดูเหมือนมีการกระพริบแสงไฟค่ะ

×