สร้างงานเมนูเลื่อนหมุนแบบ 3 มิติ

admin · 28-01-2009, 09:13 PM

ขอบคุณบทความจาก
http://www.cgplusmag.com

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

แนวคิดการสร้าง

แนวคิดของการสร้างเมนูการเลื่อนแบบ 3 มิติตัวนี้ คิดว่าทุกคนคงเคยเห็นมาในหลายๆเว็บแล้ว ที่ใช้การสร้างเมนูให้หมุนได้ซึ่งในตัวอย่างนี้ผมจะสร้างเมนูทั้งหมด 6 อัน โดยที่แต่ละเมนูจะเคลื่อนที่เป็นวงกลม ในส่วนของการเคลื่อนที่เป็นวงกลมนั้นจะเช็คพิกัด x ของ Cursor ด้วยว่าพิกัด x ของ Cursor นั้น อยู่ทางด้านไหนของหน้าจอถ้า Cursor อยู่ทางด้านซ้ายของจอจะให้เมนูหมุนทวนเข็มแต่ถ้า Cursor อยู่ทางด้านซ้ายของจอ จะให้เมนูหมุนตามเข็ม เมื่อมีการลาก Cursor มา RollOver บนเมนูตัวใดก็ตามเมนูทุกตัวจะหยุดหมุนและเมนูตัวที่ถูก RollOver จะเปลี่ยนสี ส่วนเมนูตัวอื่นที่ไม่ได้ถูก RollOver ผมจะใส่ Effect Blur ลงไปเพื่อให้โฟกัสไปเฉพาะตัวที่ถูก RollOver เท่านั้น และเมื่อเอา Cursor ออกจากเมนูแล้ว เมนูทุกตัวจะกลับมาเป็นรูปแบบปกติและหมุนต่อไปได้ตามเดิม

เมื่อพอเข้าใจรูปแบบของตัวงานที่เราจะทำแล้วก็มาเริ่มได้เลย โดยตัวงานนี้ผมจะใช้ขนาดหน้าจอเท่ามาตรฐาน Flash คือ 550 x 400 pixel

ดาวน์โหลดเอกสารสำหรับบทความนี้