JS Function & Flash #Adobe Flex

By llun on April 8, 2010 in ภาษา

วันอาทิตย์ที่ผ่านมาทำงานกับเพื่อนแล้วต้องเขียนสองอย่างนี้คู่กัน มีทั้งเรียกจาก JS ไปยัง Flash และจาก Flash กลับไปยัง JS ได้ประสบการณ์มาพอสมควรเลย ดูด้านล่างเป็นข้อ ๆ เลยละกัน

จากหน้าเว็บ HTML สามารถส่งข้อมูลไปยัง Flash ผ่าน embed และ object ได้เลย ผ่าน embed flashvar และ attribute flashvar ใน object ต้องกำหนดทั้งสองที่เพื่อให้ใช้ได้ทุก Browser เช่น
```
<object name='flashObject' id='flashObject' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab' height='300' width='200'>
  <param name='src' value='flashObject.swf' />
  <param name='flashVars' value='name=llun&page=list' />
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="wmode" value="opaque">
  <embed name='flashObject' src='flashObject.swf' pluginspage='http://www.adobe.com/go/getflashplayer' flashVars='name=llun&page=list height='300' width='200' allowScriptAccess="sameDomain" wmode="opaque" />
</object>
```
จากด้านบนบรรทัดที่ 3 กับ 6 จะมี flashVar ซ้ำกัน ใส่เหมือนกับที่อยู่หลัง URL เวลา request แล้วส่งค่าข้ามไปมา นอกจากวิธีกำหนด flashVar แบบนี้แล้ว จะกำนหดใน src เลยก็ได้เช่น
```
<param name='src' value='flashObject.swf?name=llun&page=list' />
```
wmode มีด้วยกันสามค่าคือ window, opaque, transparent ใช้ในโอกาสต่างกัน
- window: Flash มาอยู่ด้านบนสุดของ HTML ถ้ามี tag ไหนที่ render อยู่ตำแหน่งเดียวกับ Flash จะถูกบังไม่ให้เห็น
- opaque: Flash จะอยู่หลังสุดของ HTML content tag ต่าง ๆ ที่ถูก render ตำแหน่งเดียวกับ Flash จะบัง Flash
- transparent: ส่วนไหนที่ Flash ไม่มีการวาดจะโปร่งใสเห็น HTML ที่ถูก render อยู่หลัง Flash
อาทิตย์ที่ผ่านมาใช้ opaque เพราะใช้ Javascript คุม Flash จากนั้นพอกดใน Flash ให้เรียก Javascript เพื่อ render ทับอีกที พบว่ามันดูดีกว่าและง่ายกว่าใช้ Flash อย่างเดียวมาก แต่ก็คงขึ้นกับงานหละ ค่า default คือ window
เวลาจะใช้ Javascript เรียกฟังก์ชั่นใน Flash ต้องทำสองอย่างคือ addCallback ใน Flash และเขียนฟังก์ชั่นเพื่อให้ resolve flash object จากชื่อได้
```
ExternalInterface.addCallback("rotateLeft", rotateLeft)
ExternalInterface.addCallback("rotateRight", rotateRight)
```
และใน Javascript
```
  function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
      return window[movieName]
    } else {
      return document[movieName]
    }
  }
```
เวลาเรียกจาก Javascript ก็หา Flash object ผ่านฟังก์ชั่นด้านบน แล้วเรียก function ตามชื่อที่ addCallback ไว้
```
  function rotateLeft() {
    thisMovie('flashObject').rotateLeft()
    event.preventDefault()
    return false
  }
```

ตอนนี้เหมือนเป็นตอนต่อจาก Call JS function from Flash เพราะเรียกจากฝั่ง JS แทน จริง ๆ ที่ทำวันอาทิตย์มีมากกว่านี้ ทั้งหาตำแหน่ง render ที่ต้องคำนวนจาก Flash เพิ่มเข้ามาอีกทีด้วย รวมถึงการหมุนภาพที่ต้องย้ายมุมของภาพไปตำแหน่งต่าง ๆ แถม resize Flash embed ใน HTML แต่ไว้คราวหน้าหลังจากทำเสร็จแล้วละกัน จะเล่ามาเป็นข้อ ๆ เลย

อ้างอิง: