7 ทำเมนูและลิ้งค์ให้เจ๋ง       
4 เรื่อง/ภาพ เว็บมาสเตอร์   

       ลิ้งค์ที่เราๆท่านๆทำใช้กันอยู่นั้นยังเป็นลิ้งค์ที่ยังไม่สมบูรณ์พอ เนื่องจากเราใช้วิธีพิมพ์ตัวอักษรเข้าไปแล้วก็เปลี่ยนเป็น Symbol แบบ Button การทำแบบนี้จะทำให้ผู้ใช้คลิ๊กลิ้งค์ได้ลำบากเพราะว่าต้องนำเมาส์ไปคลิ๊กที่เส้นตัวอักษรเท่านั้น จึงจะลิ้งค์ได้ ในบทความนี้เราจะมาปรับปรุงวิธีการทำลิ้งค์ เพื่อให้ผู้ใช้สามารถคลิ๊กลิ้งค์ได้ง่ายขึ้น ส่วนเรื่องของเมนูนั้นก็ไม่ใช่เรื่องยากใช้หลักการคล้ายๆกับลิ้งค์ เพียงแต่ว่าจะมีลูกเล่นมากกว่าเท่านั้นเอง

เริ่มกันที่ลิ้งค์
  1. เริ่มแรกให้เปิด Movie ขึ้นมาก่อนแล้วกด Ctrl+F8 เพื่อสร้าง Symbol ใหม่ขึ้นมา กำหนดชื่อเป็น Link และกำหนด Behavior เป็น Button กด OK

  2. ตอนนี้เราจะอยู่ในส่วนของการแก้ไข Symbol อยู่จะมีเฟรมอยู่ 4 เฟรมดังนี้

   - Up จะเป็นเฟรมที่เอาไว้ใส่รูปภาพปกติ ในตอนที่ยังไม่มีเหตุการณ์ใดของเมาส์ที่กระทำต่อวัตถุนี้
   - Over จะเป็นเฟรมที่เอาไว้ใส่รูปภาพเพื่อแสดงผลตอนที่ผู้ใช้นำเมาส์มาวางไว้อยู่เหนือวัตถุนี้
   - Down จะเป็นเฟรมที่เอาไว้ใส่รูปภาพเพื่อแสดงผลตอนที่ผู้ใช้คลิ๊กที่วัตถุนี้
   - Hit จะเป็นเฟรมที่เอาไว้กำหนดขอบเขตของการตอบสนองการคลิ๊ก เราสามารถใช้เครื่องมืออะไรก็ได้ในการกำหนดขอบเขต โดยรูปที่อยู่ในเฟรมนี้จะไม่มีการแสดงผลแต่อย่างใด ถ้าเราไม่ใส่รูปในเฟรมนี้ Flash จะใช้รูปที่อยู่ในเฟรม Up มากำหนดขอบเขต

  สำหรับในเฟรม Up, Over, Down เราจะไม่ใช้เลย จะใช้แค่เฟรม Hit เท่านั้น คลิ๊กที่เฟรม Hit แล้วกด F7 หลังจากนั้นให้คุณวาดรูปสี่เหลี่ยมขนาดพอมองเห็นลงไปตรงกลาง(สี่เหลี่ยมสีอะไรก็ได้) แล้วกลับไปยัง Scene 1



สร้าง Symbol ขึ้นมาใหม่


กำหนดพื้นที่การตอบสนอง การคลิ๊กด้วยสี่เหลี่ยม



พิมพ์ข้อความที่จะลิ้งค์ลงไป



ลากรูปจากหน้าต่างนี้ ลงมาใส่ใน Movie

  3. ให้พิมพ์ข้อความที่คุณต้องการจะลิ้งค์ลงไป แล้วกด Ctrl+L เพื่อเปิดหน้าต่าง Library คลิ๊กที่ชื่อ Link แล้วลากรูปจากช่อง Preview (เป็นช่องสีขาวอยู่เหนือรายชื่อ Symbol) ลงมาใน Movie เราจะเห็นเป็นสีฟ้าโปร่งใส นั่นคือขอบเขตการตอบสนองการคลิ๊กนั่นเอง แล้วก็ให้ลาก Symbol ที่ชื่อ Link ไปวางทับข้อความแล้วก็ปรับขนาดให้พอดีกับข้อความ เสร็จแล้วดับเบิ้ลคลิ๊กที่ Symbol ที่ชื่อ Link จะมีหน้าต่าง Instance Properties ขึ้นมา คลิ๊กที่แท็ป Action คลิ๊กที่ปุ่มบวกเลือก Get Url ในช่อง Url ก็ใส่ Url ที่คุณต้องการจะลิ้งค์ไปหรือถ้าคุณอยากจะลิ้งค์ไปยังเฟรมอื่นๆก็เปลี่ยนไปเลือกคำสั่ง Goto แทนครับ เมื่อคุณสั่ง Preview แล้วก็ลองคลิ๊กที่ลิ้งค์ดูเลยครับ จะเห็นว่าแม้คุณจะนำเมาส์ไปคลิ๊กไม่ตรงเส้นของตัวอักษรก็ตาม คุณก็ยังสามารถลิ้งค์ไปได้อยู่ดี (คลิ๊กง่ายขึ้นอีกเยอะเลย)


หลังจากที่ลากลงมาวางแล้ว
เราจะเห็นเป็นสีฟ้าโปร่งใส




ปรับขนาดให้ พอดีกับลิ้งค์




ใส่คำสั่ง Get URL


ใส่ URL ที่ต้องการจะลิ้งค์ลงไป

ใส่เสียงให้ปุ่ม
  สมมุติว่าคุณต้องการให้มีเสียงขึ้นในขณะที่ผู้ใช้เลื่อนเมาส์มาวางไว้บนเมนู (On Mouse Over) ก็เพียงคุณคลิ๊กที่เฟรม Over แล้วกด F7 หลังจากนั้นก็กด Ctrl+R เพื่อ Import เสียงเข้ามา เสียงที่คุณจะนำมาใช้นั้นไม่ควรใหญ่มาก (ตามหลักการของการเขียนเว็บไซต์) หรือจะไปที่เมนู Libraries ->Sounds (จะมีหน้าต่าง Library ขึ้นมา ในนั้นจะมีเสียงให้เลือกใช้อยู่จำนวนหนึ่ง) ก็ได้ ถ้าคุณนำเสียงเข้ามาใส่ใน Movie โดยวิธีลากแล้ววางจากหน้าต่าง Library แล้วละก็ไม่ต้องทำอะไรต่อแล้วครับเพราะว่า Flsah จะใส่เสียงให้โดยอัตโนมัติ แต่ถ้าคุณใช้วิธี Import เข้ามาคุณต้องไปดับเบิ้ลคลิ๊กที่เฟรม Over เลือกแท็ป Sound ในหน้าต่าง Frame Properties ที่ช่อง Sound ให้เลือกเสียงที่เรา Import เข้าไป หลังจากนั้นก็ให้ลองปรับค่าต่างๆดูนะครับ ซึ่งค่าเหล่านี้สามารถปรับเปลี่ยนรูปแบบของเสียงได้ ไม่ว่าจะเป็น Fade-in, Fade-out เป็นต้น


ตัวอย่างเสียงจาก หน้าต่าง Library



เลือกเสียงที่ต้องการ



ใส่เสียงเรียบร้อยแล้ว

ทำเมนูกันต่อ
  ถ้าจะว่ากันจริงๆแล้ว เมนูก็คือลิงค์หลายๆอันนั่นเอง เมนูมีหลายแบบตั้งแต่เมนูแบบธรรมด๊า ธรรมดาไปจนถึงเมนูแบบไม่ธรรมดา ในหัวข้อนี้ผมจะไม่สอนเกี่ยวกับการทำเมนู แต่ผมจะเปิดเผยวิธีการทำเมนูแบบเว็บไซต์นี้ เพื่อเป็นแนวทางในการพัฒนาเมนูของคุณต่อๆไปในอนาคต จะเห็นได้ว่าเมื่อคุณเข้ามาที่เว็บนี้แล้วคุณไปคลิ๊กที่เมนูใดก็ตาม โลโก้ก็จะค่อยๆย่อขนาดพร้อมกับเคลื่อนที่ไปทางด้านบนซ้าย หลังจากนั้นก็จะแสดงผลเป็นข้อมูลตามหัวข้อที่คุณคลิ๊ก(ตอนนี้เว็บนี้ไม่ได้ใช้เมนูแบบนี้แล้ว) การทำเมนูแบบนี้จะใช้ตัวแปรเพียง 1 ตัวเข้ามาช่วยในการแยกแยะว่าผู้ใช้คลิ๊กที่เมนูหัวข้อไหนเท่านั้นเอง

หลักการทำงาน
  สมมุติว่าผู้ใช้คลิ๊กที่เมนูหัวข้อ Aricle ตัวปุ่มก็จะใส่ค่าของตัวแปร Topic เป็น Article แล้วก็จะสั่ง Play เมื่อ Movie เล่นไปจนถึงเฟรมที่ 10 ซึ่งเราใส่คำสั่ง if เอาไว้ดังนี้

If (topic eq "Article")
  Go to and Stop ("Article")
End if
If (topic eq "Download")
  Go to and Stop ("Download")
End if

   และเมื่อคำสั่งในบรรทัด if (topic eq "Article") ทำงาน ก็จะสั่งให้ Movie ข้ามไปยังเฟรมที่ชื่อ link โดยคำสั่ง Go to and Stop ("Article") สำหรับวิธีการแบบนี้ใช้ได้กับเมนูกี่หัวข้อก็ได้ เพียงแค่คุณเพิ่มคำสั่ง if เพื่อตรวจสอบค่าของตัวแปร topic สำหรับหัวข้ออื่นๆเท่านั้นเอง สำหรับไฟล์ตัวอย่างเมนูอันนี้ผมได้ Zip รวมกับไฟล์อื่นๆที่เป็นตัวอย่างในบทความนี้เอาไว้แล้ว (รวมทั้งเมนูแบบปุ่มเครื่องเสียงด้วย) คาดว่าคุณจะสามารถนำหลักการนี้ไปพัฒนาให้เป็นเมนูแบบอื่นได้นะครับ



  Download : menu-link.zip (52.5kb)