มีภาพ 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! แล้ว จะขึ้นเฉพาะตอนที่กดโดนแอปเปิลเท่านั้น

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

]]> https://blog.levelup.in.th/2013/05/31/flash-png/feed/ 0 https://blog.levelup.in.th/2010/05/31/flex-cannot-type-other-language-other-than-latin-after-wmode-onflex-%e0%b9%83%e0%b8%8a%e0%b9%89-wmode-%e0%b9%81%e0%b8%a5%e0%b9%89%e0%b8%a7%e0%b8%9e%e0%b8%b4%e0%b8%a1%e0%b8%9e%e0%b9%8c%e0%b9%84/ https://blog.levelup.in.th/2010/05/31/flex-cannot-type-other-language-other-than-latin-after-wmode-onflex-%e0%b9%83%e0%b8%8a%e0%b9%89-wmode-%e0%b9%81%e0%b8%a5%e0%b9%89%e0%b8%a7%e0%b8%9e%e0%b8%b4%e0%b8%a1%e0%b8%9e%e0%b9%8c%e0%b9%84/#comments Mon, 31 May 2010 16:57:39 +0000 http://blog.levelup.in.th/?p=624 เรื่องมีอยู่ว่าผมเขียน flex แล้วตอน test ก็พิมพ์ไทยได้ปกติดี แต่ทำไมอยู่ๆ ตอน up ขึ้นของจริงทำไมพิมพ์ไม่ได้ละเนีย!! ปรากฏว่าปัญหาอยู่ที่ wmode = transparent ที่ใช้แก้ bug flash บังพวก html ครับ และใน facebook ก็จำเป็นต้องมีด้วยเช่นหน้าต่าง publish หรือ invite ต่างๆ จึงจำเป็นต้องใช้อย่างเลี่ยงไม่ได้ หลังจากนั่งถามพี่กู (Google) สักพัก วิธีแก้ปัญหาก็ออกมาละครับ โดยการเอา <input type=”text”> จาก html นั่นแหละไปทับใน flash ให้ตรงกัน!! โอ… คนคิดวิธีแก้มันช่าง… แต่ก็ช่วยแก้ได้ละครับ ขั้นตอนมีดังนี้

ผมเล่นง่ายมาก ก่อนอื่นไปก๊อบ code จาก blog ของคุณ Jozef Chúťka มาเลย หุหุจะมีไฟล์ที่จำเป็นได้แก่

• Main application – ตัวรัน popup จริงๆ แล้วไม่มีสิ่งที่จำเป็นต้องใช้ เป็นแค่ไฟล์ตัวอย่างครับ
• FakeInputsWindow – ตัว code จริงที่ต้องใช้ ส่วนที่เป็น input ที่ใช้คือ canvas ที่คร่อม html:IFrame ทั้งหมดเท่านั้น ส่วน element อื่นๆ เป็นน้ำจิ้มในตัวอย่างครับ
• IFrame.as – เป็นไฟล์ library ที่จำเป็นต้องมีตัวนึงครับ
• FlexIFrame.js – นี่ก็เป็น library แต่เป็นฝั่ง Javascript ครับ
• Html template file – ไฟล์ html ที่จำเป็นต้องใช้ ในนี้จะใช้ swfobject ด้วยแต่ในความเป็นจริงไม่จำเป็นต้องใช้ก็ได้ครับ แค่ตั้งชื่อ id ให้ตรงกับที่เรียกก็พอ (ในนี้ใช้ id ชื่อ flash สำหรับ getElementById จากตัว flash)

เมื่อไฟล์เหล่านี้พร้อม อย่าลืมสิ่งเหล่านี้เป็นข้อสังเกตที่ต้องแก้ หากต้องการใช้ฟิลด์นี้หลายๆ ไฟล์

• ตั้งค่า Security ให้ allowDomain เพื่อให้ javascript สามารถเรียกฟังก์ชั่นใน flash ได้ด้วยคำสั่ง
  Security.allowDomain( “example.com” );

  และเพิ่ม
  ExternalInterface.addCallback(“fakeTextInputChange”, fakeTextChange);
  เพื่อให้ javascript call ได้โดยตรง สำหรับหลักการในทางปฏิบัติ ตามไปอ่านที่บทความเก่าบทความนี้

• ตั้งชื่อ id ใน flex และ html ให้เหมือนกันเด๊ะๆ เช่นในตัวอย่าง id ที่เหมือนกันจะชื่อ fakeTextInput ถ้าต้องการมากกว่าหนึ่งฟิลด์ก็เพิ่มได้เลย ใช้กับ textarea ก็ได้เช่นกัน แต่อย่าลืมตั้ง id เพิ่มให้ <html:IFrame> ด้วยก็พอ
• สุดท้ายคือสั่ง visible = true, false ของ html:IFrame ตาม event ที่เหมาะสม ไม่อย่างนั้นมันจะบัง flash อย่างนั้นต่อไปเรื่อยๆ ในทุกหน้า

คร่าวๆ ก็ประมาณนี้แหละครับ ไปอ่านแบบระเอียดๆ ได้ที่ blog Jozef Chúťka ได้เลยครับ ขอให้โชคดีครับ