การทำ Flash Pop up menu V.2

เจอกันอีกแล้วนะครับ คราวที่แล้ว ผมได้ สอนวิธีการทำ Flash pop up menu แบบ ธรรมดาไปนะครับ คราวนี้มาดูแบบที่เห็นได้ตามเว็บหลายๆเว็บบ่อยๆ ที่ เมนูจะค่อยๆ เลื่อน ออกมา แทนที่จะวางแล้วโผล่ ครบทั้งหมด แบบคราวที่แล้วบ้างดีกว่าครับ

1. เตรียมพื้นที่ สำหรับ สร้าง menu และใช้เครื่องมือ 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. กด Ctrl+F8 เพื่อ Create new Symbol ทำ Home , Flash, Board (ทำมากกว่านี้ก็ได้นะครับ) Type เป็น Button

5. กด Ctrl+F8 เพื่อ Create new Symbol อีกครั้ง ชื่อว่า DropDown Type เป็น Movie clip 

6. เว้น 1 ช่อง แล้ว Insert Keyframe

7.กด Ctrl+L เพื่อเปิดหน้าต่าง Library ออกมาจากนั้น ลาก Button Borad มา ไว้ตรงกลาง ของ พื้นที่ สังเกตุที่ เครื่องหมาย กากาบาท

8. ลาก Button Flash มาไว้ที่กลางของพื้นที่ ใน Frames ที่ 3 โดยไม่ต้องลาก Button Borad มาด้วย

9. ลาก Button Home ลงมาวางที่ส่วนกลางของพื้นที่ ใน Frames ที่ 4 โดยนำ Button Flash และ Button Borad มาวางต่อท้าย

10 จากนั้นเปิดหน้า Action ขึ้นมาแล้วใส่ Stop ที่ Frames สุดท้าย

>>>

11. กด Edit  Popmenu จาก หน้าต่าง Library จากนั้นกด Insert Keyframe

12. จากนั้นลาก Movie clip ที่ชื่อว่า DropDown มาไว้ด้านล่างเมนู ( เราจะมองไม่เห็น DropDown นะครับ แต่เราจะเห็นเพียง กาากาบาท ที่อยู่ในวงกลม ให้ลองกะจุดที่จะวางให้พอดี )

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

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

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

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

>>>

17. จากนั้นกด Ctrl+L เปิดหน้าต่าง  Library ขึ้นมากดคลิ๊กขวาที่  DropDown เลือก Edit จากนั้น คลิกที่ปุ่มใน Frames 4 จากนั้นคลิ๊กขวามที่ ปุ่ม Home เลือก Action

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

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

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

23. กด Ctrl+F8 สร้าง Movie clip ชื่อว่า mouse

24. วาดรูปเมาส์ที่กลาง กากาบาท

25. จาก นั้นกลับ มาที่ Sicene 1 จากนั้นลาก เมาส์ จาก Library มาวาง ที่ Layer 1 Frames ที่  ลากเมาส์จาก Library 

26. จากนั้นตั้งชื่อคลิ๊กที่เมาส์แล้วที่ Properties ตรง Instance Name ตั้งชื่อว่า Pointer

27. จากนั้นที่ Layer 1 Frame 1 กดคลิกขวา เลือก Actions

28. ใส่โค้ดนี้ลงไป

29. ที่ DropDown เราจะเห็น ปุ่ม ต่างๆ มากมาย กด Ctrl+F8 เพื่อ Create new Symbol ทำ Home_ , Flash_, Board_(ถ้าทำมากกว่านี้ก็ต้องทำมากกว่านี้นะครับ) Type เป็น Movie clip แล้วกด OK

30. จากนั้นสร้าง Movie clip ที่คุณคิดว่าเหมาะกับการที่เมื่อเมาส์จี้แล้วต้องการให้เป็นอย่างไรตอบใจชอบ แต่ถ้าจะสร้างตามผมก็ได้นะครับ เป็นแบบง่ายๆ นะครับ กดคลิกขาว กด Create Motion Tween

31. คลิ๊กขวาที่ Frames ที่ 30 เลือก Insert Keyframe

>>>

32. คลิ๊กเฟรมที่ 30 ไป ที่ Properties ตรง Color เลือก Tint เลือกสี #CCCCCC  เลือก 79% (ทำแบบนี้ทุกอันนะครับ)

33. กด Ctrl+L เพื่อเปิด Library ขึ้นมา จากนั้น กดคลิ๊กขวาที่ Button Home เลือก Edit  จากนั้นนำ Movie clip Home_ ที่สร้างมาเมื่อสักครู่ ลากมาใส่ ตรง Over ทำอย่างนี้กับทุกปุ่ม

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

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