วันพุธที่ 8 กรกฎาคม พ.ศ. 2552

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

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

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

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

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


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













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












ไม่มีความคิดเห็น:

แสดงความคิดเห็น