ปัญหา Click Event กับภาพ PNG พื้นหลังโปร่งใสใน Flash by kunuch

เคยไหมเมื่อต้องการ Import ภาพนามสกุล PNG ที่มีพื้นหลังโปร่งใส แล้วมีปัญหาเวลารับเหตุการณ์ Click Mouse ตรงที่เมื่อ Click ในส่วนที่เป็นพื้นโปร่งใสแล้วดันทำเหตุการณ์ไปด้วย เช่น

มีภาพ PNG ดังนี้

สร้างไฟล์ Flash ขึ้นมา 1 ไฟล์ และ Import ภาพแล้วนำไปทำเป็น Movie Clip แล้วตั้งชื่อว่า apple จากนั้นตั้ง Event ดังนี้

apple.addEventListener(MouseEvent.CLICK, clickApple);
function clickApple(e:MouseEvent)
{
trace("Wow!");
}


เมื่อกด Ctrl + Enter แล้วลองคลิกในส่วนที่เป็นพื้นหลังใส รอบๆ แอปเปิล สังเกตว่าจะขึ้นข้อความ Wow! ทั้งๆ ที่ไม่ได้กดในส่วนที่เป็นแอปเปิลเลย เพราะ Flash จะมองส่วนที่เป็นรูปภาพทั้งหมดไม่ว่าพื้นหลังจะใสก็ตาม ดังนั้นจากภาพตัวอย่างด้านล่างนี้ ถ้าคลิกในบริเวณในกรอบฟ้า ก็จะแสดงผล Wow! ทั้งหมด

วิธีการทำให้ Event ตรวจจับเฉพาะส่วนของแอปเปิล นั่นคือการใช้ Class สำเร็จรูปที่มีชื่อว่า InteractivePNG ซึ่งจะทำให้เราสามารถแก้ไขปัญหาในบทความนี้ได้ ซึ่ง ดาวน์โหลดได้ที่นี่

เมื่อดาวน์โหลดมาแล้วให้แตกไฟล์และ Copy Folder ชื่อ com ไปไว้ที่เดียวกับไฟล์ Flash ที่บันทึกไว้ จากนั้นให้แก้ไข Movie Clip รูปแอปเปิ้ลที่ใช้งานด้านบนด้วยการไปที่ Library แล้วคลิกขวาที่ Movie Clip ที่ใช้งาน เลือก Properties…  ให้กดติ้กถูกที่ Export for Actionscript และในช่อง class ให้ใส่ com.mosesSupposes.bitmap.InteractivePNG ดังภาพ  (หากไม่มีรายละเอียดดังกล่าวให้แก้ไข ให้กดปุ่ม Advanced ก่อน)

จากนั้นให้ลองกด Ctrl + Enter เพื่อรันใหม่ จะพบว่าเมื่อกดพื้นหลังใสบริเวณรอบแอปเปิลจะไม่ขึ้นข้อความ Wow! แล้ว จะขึ้นเฉพาะตอนที่กดโดนแอปเปิลเท่านั้น

ดาวน์โหลดตัวอย่างที่เสร็จสมบูรณ์ได้ที่