給flash加onclick事件

需求:onclick flash,異步請求php腳本。

結果:發現直接在<object οnclick="clickme()">觸發不了,接着就想在外面套一層<div οnclick="clickme()"></div> , 發現只能在FF下能觸發click事件,於是是搜索了一下,找到兩個解決方法

1.

搜索了下,找到了一些方法,但那些方法是說其他瀏覽器的,用一個button包住flash
在Chrome中 embed不支持onclick,但支持onmouseover,onmousedown,onmouseup

就利用這幾個方法,自己拼湊一個click事件:

設置一個變量click
over的時候 +1
down的時候 +2
up 的時候 +4
out的時候 清零
發生up的時候,檢查click變量,如果是7,那就是click事件了

<div style="border:1px #f00 solid; width:486px">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="flash_obj" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="468" height="60">
  <param name="movie" value="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQjvvjThDUAxg8MgiCYoyW5NzeKQ">
  <param name="quality" value="high">
  <param name="AllowScriptAccess" value="never">
  <param name="wmode" value="opaque">
  <param name="FlashVars" value="">
  <embed src="http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQjvvjThDUAxg8MgiCYoyW5NzeKQ" id="flash_embed" width="468" height="60" wmode="opaque" flashvars="" type="application/x-shockwave-flash" allowscriptaccess="never" pluginspage="http://www.macromedia.com/go/getflashplayer" >
</object>
</div>

<script>
if(!console){
  console = { log: function(){} };
}
var timeoutID,
    c = 0,
    flashObj = document.getElementById('flash_obj'),
    flashEmbed = document.getElementById('flash_embed');
function over(){
  c |= 1;
  console.log('mouse over', c);
}
function out(){
  c = 0;
  console.log('mouse out', c);
}
function down(){
  c |= 2;
  console.log('mouse down', c);
}
function up(){
  c |= 4;
  console.log('mouse up', c);
  if(c === 7){
    click();
    c |= 8;
    if(! timeoutID){
      console.log('avoid twice click', c);
      timeoutID = setTimeout(function(){
        c ^= 8; //異或,a ^ b, ab不同則返回1
        console.log('resume click', c);
        timeoutID = undefined;
      },100);
    }
  }
}
function click(){
  console.log('trigger click', c);
  alert('click');
}
if(flashObj){
  flashObj.onmouseover = over;
  flashObj.onmouseout = out;
  flashObj.onmousedown = down;
  flashObj.onmouseup = up;
}
if(flashEmbed){
  flashEmbed.onmouseover = over;
  flashEmbed.onmouseout = out;
  flashEmbed.onmousedown = down;
  flashEmbed.onmouseup = up;
}
</script>




2.最近在做一個項目,是一個銀行的自助服務軟件,需要在閒暇時間全屏播放廣告,支持圖片和flash方式,並且在用戶觸摸屏幕或按鍵時能夠跳轉到服務界面,圖片當然相當簡單,給它定義一個onclick事件即可,但是flash就犯愁了,點擊flash時javascript根本沒有辦法捕捉到鼠標事件,這可如何是好?
    試驗了一陣,給出兩個方法,供大家選擇。
    兩種方法的前面都一樣:

    <div style="position:absolute; left:0px; top:0px; width:800px; height:600px;    z-index:-1"> <!--1.設置FLASH爲底層-->
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0
" width="800" height="600">
    <param name="movie" value="media.swf">
    <param name="quality" value="high">
    <param name="wmode" value="transparent"> <!--2.必須把FLASH設置爲透明,如果不設置的話,別的圖片是不能夠覆蓋該flash的,也就不能夠實現鼠標點擊事件-->
    <embed src="media.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="115"></embed>
</object> </div>
    這是flash的顯示,主要爲紅色字體地方,flash的顯示級別比較高,必須將它設置爲底層顯示;顯示方式也必須設置爲透明,否則也沒有效果(不管是方法一還是方法二)。

    方法1:
    用photoshop做一個空的圖片,裏面沒有任何內容,如kong.gif,覆蓋到flash上方。
   <div id=gg1 style="position:absolute; left:0px; top:0px; width:800px; height:600px;    z-index:1">
      <img onClick="toantherUrl()" src="kong.gif"/>
   </div>
   方法2:
    任意加一張圖片,但是要設置其透明度爲0,即該圖片確實存在,但是把它透明化,不讓用戶看到(與方法1異曲同工)

  
<div id=gg1 style="position:absolute; left:0px; top:0px; width:800px; height:600px;    z-index:1; filter:Alpha(Opacity=0)"><!-- filter是設置透明度,如果爲0則全透明,100爲全顯示 -->
      <img onClick="toantherUrl()" src="any.jpg"/>
   </div>
   這樣flash能夠正常顯示,鼠標事件也能夠正常響應,當然,看起來像是點擊了flash,其實點擊的覆蓋在上面的圖片,曲線救國,呵呵
   兩種方法都是使用了另外一張圖片來實現flash的點擊事件,需要注意的地方是:
   flash必須設置參數
wmodetransparent
   圖片要覆蓋在flash的上方;
   不管是方法1還是方法2都必須使圖片透明化,不遮蓋flash。



上面兩個實例來自於:http://www.cnblogs.com/arliang/archive/2011/12/08/Flash_Click_Event_In_Chrome.html

 http://hi.baidu.com/2471615/blog/item/1dd4c5174ed5a80fc83d6d20.html


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章