การทำ Flash Pop-up Menu

หลังจากที่ ใน บทความของ dreamweaver ผมได้สอน การทำ POP-UP MENU ด้วยการวาด layer จาก Dreamweaver มาแล้ว คราวนี้ก็มาถึง Flash กันบ้างนะครับ เริ่มกันเลยดีกว่าครับ

1. ให้คุณใช้เครื่องมือ Rectangle ทำการวาดรูปปุ่มขึ้นมา 1 รูป ใช้ Text Tool เขียน menu ได้เลย

2. เสร็จแล้วให้ใช้เครื่องมือ Arrow ทำการ Selection รูปปุ่ม แล้วกด F8 เพื่อทำการเปลี่ยนรูปให้เป็น Symbol ที่หน้าต่าง Symbol Properties ในช่อง Name ให้ใส่เป็น Menu ส่วนช่อง Type ให้กำหนดเป็น Button แล้วกด OK

3. กด F8 อีกครั้ง เพื่อเลือก Covert to Symbol อีก อันหนึ่ง โดย ในช่อง Name ให้ใส่เป็น popmenu ส่วนช่อง Type ให้กำหนดเป็น Movie clip แล้วกด OK

4. ตอนนี้เราเข้ามาอยู่ในส่วนของการแก้ไข Movie clip ที่เราสร้างไว้แล้วนะครับ ให้กด Ctrl+L เพื่อเปิดหน้าต่าง Library ขึ้นมา คลิ๊กที่ชื่อ Menu ที่อยู่ใน List (หรือชื่ออื่นที่คุณตั้ง) แล้วลากลงมาใน Layer1 จัดปุ่มนี้ให้อยู่กึ่งกลางของ Movie clip (สังเกตุได้จากเครื่องหมายบวกที่อยู่บนพื้นที่ทำงาน)

5.กด Ctrl+F8 เพื่อ Create new Symbol ทำ 2 อัน อัน แรก ทำ Home อันที่ 2 ทำ Board โดยเลือก Type เป็น Button

6. เข้าไปใน Movie clip ที่ชื่อว่า popmenu กด F6 เพื่อใส่คีย์เฟรม ใน เฟรม ที่2 ของ Layer แรก แล้วดึง Button Home กับ Board จากหน้าต่าง Library มาไว้ในตำแหน่งที่ต้องการให้เป็นปุ่มย่อย

7. จากนั้น Insert -> Layer เข้ามาอีก เป็น Layer2  และให้ดึง Layer2  ลงมาด้านล่าง เพื่อให้ Layer1 อยู่นด้านบน

8. กด Ctrl+F8  เพื่อ Create new Symbol ในช่อง Name ใส่ HideMenu  เลือก Type เป็น Button

7. ให้คลิ๊กที่เฟรม Hit กด F7 แล้วใช้เครื่องมือ Rectangle วาดรูปสี่เหลี่ยมขนาดพอเหมาะลงไป ไม่ต้องสนใจว่าจะเป็นสีอะไร เพราะว่าเวลานำไปใช้จริง เราจะไม่เห็นรูปสี่เหลี่ยมนี้ (เพราะว่า Flash จะนำรูปในเฟรม Hit ไปกำหนดพื้นที่การตอบสนองการคลิ๊ก จะไม่นำไปแสดงผล)

8. เสร็จแล้วกลับไปยังส่วนของการแก้ไข Movie clip กันต่อ (ให้คลิ๊กขวาที่ Movie clip ที่ชื่อ PopMenu ในหน้าต่าง Library เลือก Edit ครับ) ในเฟรมที่ 2 ให้ลากปุ่มที่ชื่อ HideMenu จากหน้าต่าง Library ลงมาในพื้นที่ทำงาน แล้วปรับขนาดของปุ่มนี้ให้ใหญ่กว่าวัตถุทั้งหมดที่อยู่ใน Layer1 เฟรมที่2, แล้วดับเบิ้ลคลิ๊กที่วัตถุนี้ จะมีหน้าต่าง Instance Properties ขึ้นมา ให้คลิ๊กที่แท็ป Action คลิ๊กที่ปุ่มเครื่องหมายบวก เลือกคำสั่ง On MouseEvent แล้วเลือก Event เป็น Roll Over หลังจากนั้นไปคลิ๊กที่ปุ่มบวก เลือกคำสั่ง Goto แล้วใส่เลข 1 ในช่อง Number เสร็จแล้วกด OK

>>>

9.ดับเบิ้ลคลิ๊กที่ปุ่มที่อยู่ในเฟรมที่ 2 ใน Layer1 จะมีหน้าต่าง Instance Properties ขึ้นมา ให้คลิ๊กที่แท็ป Action คลิ๊กที่ปุ่มบวก เลือกคำสั่ง Get URL ในช่อง URL ให้ใส่ URL ที่คุณต้องการจะลิงค์ไปเช่น http://www.webthaidd.com/main.php จะเห็นว่า Flash จะใส่คำสั่ง On Mouse Release มาให้โดยอัตโนมัติ (อีกอันทำแบบเดิม เปลี่ยน url เอาครับ )

10. คราวนี้ไปที่ Layer1 เฟรมที่1 แล้วดับเบิ้ลคลิ๊กที่ปุ่มที่อยู่ในเฟรมนี้ ในหน้าต่าง Insatnce Properties คลิ๊กที่แท็ป Action คลิ๊กที่ปุ่มบวก เลือกคำสั่ง On Mouse Event แล้วเลือก Event เป็น Roll Over คลิ๊กที่ปุ่มบวกอีกครั้ง เลือกคำสั่ง Go to ในช่อง Number ให้ใส่เป็น 2 ครับ

11. ให้คุณดับเบิ้ลคลิ๊กที่เฟรมที่ 1 ในเลเยอร์ไหนก็ได้ แล้วเลือกแท็ป Action คลิ๊กที่ปุ่มบวก เลือกคำสั่ง Stop แล้วกด OK

กด ctrl + Enter เพื่อ แสดง ผล ถ้าทำ Flash Pop-up Menu  นั้นควรจะใส่แท็ก <param name="wmode" value="transparent"> เข้าไปในแท็ก <Object> เพื่อ ทำให้ Flash ของเราจะมีพื้นเป็นลักษณะโปร่งใส (ตรงส่วนที่ไม่มีการ Fill สีลงไป) นะครับ

ตัวอย่าง Flash Pop-up Menu